Stripe 問題，請調用 Stripe() 錯誤 Uncaught (in promise)

Question

嘗試在我的電子商務中實施 Stripe 時遇到了這個問題

當我從 Stripe 測試網站輸入信用卡號時，網站刷新，沒有任何反應，甚至沒有重定向到 /success，只有這個錯誤出現在控制台中：

 Uncaught (in promise) IntegrationError: Please call Stripe() with your publishable key. 
 You used an empty string.

這是我的 app.js

 function App() {

const {isAuthenticated, user} = useSelector((state)=>state.user)

const [stripeApiKey, setStripeApiKey] = useState("");

 async function getStripeApiKey() {
 const {data} = await axios.get("/api/v1/stripeapikey");

  setStripeApiKey(data.stripeApiKey)
 }

 useEffect(() => { 

  WebFont.load({
   google:{
     families: [ "Droid Sans", "Chilanka"],
   },
  });

  store.dispatch(loadUser())

  getStripeApiKey()
 }, []);

return (
<Router>
  <Header/>
  {isAuthenticated && <UserOptions user={user} />}
  <Routes>
    <Route path="/" element={<Home/>}/>
    <Route path="/product/:id" element={<ProductDetails/>}/>
    <Route path="/products" element={<Products/>}/>
    <Route path="/products/:keyword" element={<Products/>}/>
    <Route path="/search" element={<Search/>}/>
    <Route element={<ProtectedRoute/>}/>
      <Route path="/account" element={<Profile/>}/>
    <Route element={<ProtectedRoute/>}/>
     <Route path="/me/update" element={<UpdateProfile/>}/>
    <Route element={<ProtectedRoute/>}/>
     <Route path="/password/update" element={<UpdatePassword/>}/>
    <Route path="/password/forgot" element={<ForgotPassword/>}/> 
    <Route path="/password/reset/:token" element={<ResetPassword/>}/> 
    <Route path="/login" element={<LoginSignUp/>}/>
    <Route path="/cart" element={<Cart/>}/>
    <Route element={<ProtectedRoute/>}/>
     <Route path="/shipping" element={<Shipping/>}/>
    <Route element={<ProtectedRoute/>}/>
     <Route path="/order/confirm" element={<ConfirmOrder/>}/>

     <Route element={<ProtectedRoute/>}/>
      <Route  path="/process/payment" element={ <Elements stripe={loadStripe(stripeApiKey)}><Payment/></Elements>}/>
  </Routes>
<Footer/>
</Router>
 );
}

這是我的支付控制器，我認為問題可能出在 app.js 中，就像我調用 StripeP 的方式一樣

const catchAsyncErrors = require("../middlewares/catchAsyncErrors");

  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

exports.processPayment = catchAsyncErrors(async (req, res, next) => {
const myPayment = await stripe.paymentIntents.create({
amount: req.body.amount,
currency: "inr",
metadata: {
  company: "Ecommerce",
},
});

res
.status(200)
 .json({ success: true, client_secret: myPayment.client_secret });
 });

exports.sendStripeApiKey = catchAsyncErrors(async (req, res, next) => {
res.status(200).json({ stripeApiKey: process.env.STRIPE_API_KEY });
});  

Answer 1

{stripeApiKey && <Route exact path="/process/payment" element={<Elements stripe={loadStripe(stripeApiKey)}><Payment/></Elements>}/>}

在 app.js 中，您已經聲明了支付路徑路徑，只需添加和條件&& stripeApiKey 。