Stripe Elements报错：传入无效stripe属性问题求助

问题背景 #

已被该问题困扰3天，尝试使用Stripe搭建支付网关，严格遵循官方文档操作，但无法定位问题。尝试过手动提供Stripe密钥以及从后端获取密钥，仍收到报错。

相关代码 #

App.js #

function App() {
  const [stripeApiKey, setStripeApiKey] = useState("");
  const stripePromise = loadStripe('pk_test_51Nlrg3SBPgnIenaraTXJCnFylotLWkZolX6UcTCSnEUN3YEfHfNsio6IVdQ8ZzE53hUwUWrtiQZkz0yyfD6IvZky00nbAYVr2F');
  async function getStripeApiKey() {
    const { data } = await axios.get("/api/v1/stripeapikey");
    setStripeApiKey(data.stripeApiKey);
  }
  useEffect(() => {
    store.dispatch(loadUser());
    getStripeApiKey()
  }, []);
  
  
  return (
    <Router>    
      <Routes>
      <Route
        exact
        path="/process/payment"
        element={
          stripeApiKey && (
              <Elements stripe={stripePromise}>
                <Payment />
              </Elements>
          )}/>
      </Routes>
    </Router>
  );
}

Payment组件 #

return (
<form className='paymentForm' onSubmit={(e)=>submitHandler(e)}>
        <Typography>Card Info</Typography>
        <div>
            <CreditCardIcon/>       
            <CardNumberElement className='paymentInput'/> 
        </div>
    </form> )

报错信息 #

"invalid prop stripe supplied to elements. we recommend using the loadstripe utility from @stripe/stripe-js."

报错原因与解决方法 #

报错原因 #

1. 直接将loadStripe返回的Promise对象传给了<Elements>的stripe属性，但<Elements>要求传入的是已解析完成的Stripe实例，而非未完成的Promise。
2. 代码中同时存在硬编码密钥创建stripePromise和从后端获取密钥的逻辑，二者冲突导致密钥初始化逻辑混乱。

解决步骤 #

1. 修正Stripe实例初始化逻辑：
   不要提前用硬编码密钥创建stripePromise，而是基于从后端获取到的stripeApiKey来生成：

   function App() {
     const [stripeApiKey, setStripeApiKey] = useState("");
     // 仅当获取到有效密钥时才创建Stripe实例Promise
     const stripePromise = stripeApiKey ? loadStripe(stripeApiKey) : null;
     
     async function getStripeApiKey() {
       const { data } = await axios.get("/api/v1/stripeapikey");
       setStripeApiKey(data.stripeApiKey);
     }
     
     useEffect(() => {
       store.dispatch(loadUser());
       getStripeApiKey();
     }, []);
     
     return (
       <Router>    
         <Routes>
           <Route
             exact
             path="/process/payment"
             element={
               stripePromise && (
                 <Elements stripe={stripePromise}>
                   <Payment />
                 </Elements>
               )
             }
           />
         </Routes>
       </Router>
     );
   }
   

2. 确认依赖安装正确：
   确保已安装所需的Stripe React依赖：

   npm install @stripe/stripe-js @stripe/react-stripe-js
   

3. 检查Payment组件的导入：
   确保CardNumberElement等组件从正确的包导入：

   import { CardNumberElement } from "@stripe/react-stripe-js";
   

内容的提问来源于stack exchange，提问作者Vaishali