问题描述
感谢您的光临。
我是 React.js 的新手，我正在使用 react js 和 firebase 进行亚马逊克隆。 我已将其部署到 Firebase，它运行良好，但是 Stripe 支付集成存在问题，Stripe 支付的问题是 clientSecret 显示未定义。因为无法完成支付 *(deployed)
IntegrationError: Missing value for stripe.confirmCardPayment intent secret: value should be a client_secret string
但在解决该问题时，我在浏览器中遇到了 cannot GET/ 错误。
注意：
在带有 npm start 的 localhost 3000 上，除了条带密钥外，它可以完美运行。
但在 $ firebase emulators: start 上显示此错误。
我不知道问题出在哪里，/functions/index.js 和 /src/components/Payment.js 的代码在这里给出。
/functions/index.js
const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");
const stripe = require("stripe")("<*secretKey*>");
// API
// - App config
const app = express();
// - Middlewares
app.use(cors({ origin: true }));
app.use(express.json());
// - API routes
app.get("/",(request,response) => response.status(200).send("hello world"));
app.post("/payments/create",async (request,response) => {
const total = request.query.total;
console.log("Payment Request Received BOOM!!! for this amount >>> ",total);
const paymentIntent = await stripe.paymentIntents.create({
amount: total,currency: "usd",});
// OK - Created
response.status(201).send({
clientSecret: paymentIntent.client_secret,});
});
// - Listen command
exports.api = functions.https.onRequest(app);
/src.components/Payments.js
import React,{ useState,useEffect } from 'react'
import { useStateValue } from '../StateProvider';
import CheckoutProduct from './CheckoutProduct'
import './Payment.css'
import { Link,useHistory } from 'react-router-dom'
import { CardElement,useElements,useStripe } from '@stripe/react-stripe-js'
import CurrencyFormat from 'react-currency-format';
import { getBasketTotal } from '../reducer';
import { Button } from 'react-bootstrap'
import axios from '../axios'
function Payment() {
const [{basket,user},dispatch] = useStateValue();
const history = useHistory();
const stripe = useStripe();
const elements = useElements();
const [error,setError] = useState(null);
const [disabled,setdisabled] = useState(true);
const [succeeded,setSucceeded] = useState(false);
const [processing,setProcessing] = useState("");
const [clientSecret,setClientSecret] = useState(true);
useEffect(() => {
const getClientSecret = async () => {
const response = await axios({
method: 'post',url: `/payments/create?total=${getBasketTotal(basket) * 100}`,});
setClientSecret(response.data.clientSecret)
}
getClientSecret();
},[basket])
console.log("The Secret is >>>",clientSecret)
const handleSubmit = async event => {
event.preventDefault();
setProcessing(true)
const payload = await stripe.confirmCardPayment(clientSecret,{
payment_method: {
card: elements.getElement(CardElement)
}
}).then(({ paymentIntent }) => {
setSucceeded(true);
setError(null);
setProcessing(false);
dispatch({
type: "EMPTY_BASKET",})
history.replace('/orders')
})
}
const handleChange = event => {
setdisabled(event.empty);
setError(event.error ? event.error.message : "");
}
return (
<div className="payment">
<div className="payment__container">
<h1>checkout ( <Link to="/checkout" >{basket?.length} items</Link> )</h1>
<div className="payment__section">
<div className="payment__title">
<h3>Delivery Address</h3>
</div>
<div className="payment__address">
<p>{user?.email}</p>
<p>Pakistan Locomotive Factory</p>
<p>Risalpur 23200</p>
</div>
</div>
<dv className="payment__section">
<div className="payment__title">
<h3>Review items and delivery</h3>
</div>
<div className="payment__items">
{basket.map(item => (
<CheckoutProduct
id={item.id}
title={item.title}
image={item.image}
price={item.price}
rating={item.rating}
/>
))}
</div>
</dv>
<div className="payment__section">
<div className="payment__title">
<h3>Payment Method</h3>
</div>
<div className="payment__details">
{/* stripe magic goes here */}
<form onSubmit={handleSubmit}>
<CardElement className="payment__form" onChange={handleChange}/>
<div className='payment__priceContainer'>
<CurrencyFormat
renderText={(value) => (
<h3>Order Total: {value}</h3>
)}
decimalScale={2}
value={getBasketTotal(basket)}
displayType={"text"}
thousandSeparator={true}
prefix={"$"}
/>
<Button variant="outline-info" disabled={processing || disabled || succeeded}>
<span>{processing ? <p>Processing</p> : "Buy Now"}</span>
</Button>
</div>
{/* Errors */}
{error && <div>{error}</div>}
</form>
</div>
</div>
</div>
</div>
)
}
export default Payment;
/src/App.js
import React,{ useEffect } from 'react'
import './App.css';
import Header from './components/Header'
import Home from './components/Home'
import Checkout from './components/Checkout'
import Payment from './components/Payment'
import Orders from './components/Orders'
import { browserRouter as Router,Switch,Route } from 'react-router-dom';
import Login from './components/Login'
import { auth } from './firebase';
import { useStateValue } from './StateProvider';
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from '@stripe/react-stripe-js'
// import SignUp from './components/SignUp'
const promise = loadStripe("pk_test_51JAmrZHsNUk0QSokC1Nj5ikhTIsLFkO86R3uEyyeBKZM2bEEuEr56Lvhq0xEHyJBlnh7BIGKMI9rJsk3y35kAeb3000YP6S59C")
function App() {
const [{},dispatch] = useStateValue()
useEffect(() => {
auth.onAuthStateChanged(authUser => {
console.log('This User is >>>>>',authUser);
if (authUser){
dispatch({
type: 'SET_USER',user: authUser,})
} else {
dispatch({
type: 'SET_USER',user: null
})
}
})
},[])
return (
<Router>
<div className="App">
<Switch>
<Route path="/orders">
<Header />
<Orders />
</Route>
<Route path="/login">
<Login />
</Route>
{/* <Route path="/SignUp">
<SignUp />
</Route> */}
<Route path="/checkout">
<Header />
<Checkout />
</Route>
<Route path="/payment">
<Header />
<Elements stripe={promise}>
<Payment />
</Elements>
</Route>
{/* this is the home page route,default,by default if there is no route to go it will route the path
to "/" home page */}
<Route path="/">
<Header />
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）