实例化 Stripe 后指定客户端密钥

Question

Stripe在文档中提供了使用示例，他们在应用程序的根部PaymentElement创建组件并将其包装在整个网站上。<Elements>这与能够使用useStripe和useElements挂钩从应用程序内的任何位置访问条带对象非常有效。

然而，当他们在根创建元素时，他们还指定options包含clientPromise. clientPromise只有在知道所购买的物品后才能获得。因此，我需要clientPromise在处理结账的子组件中生成 。

Stripe 文档代码

const stripePromise = loadStripe('fake_test_key');

function App() {
  const options = {
    // passing the client secret obtained from the server
    clientSecret: fetchClientSecretFromServer(), 
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

有没有办法手动设置 clientPromise，或者覆盖子组件中的条带选项，<Elements>而不必在渲染 ` 组件时生成它？

Answer 1

不幸的是，我认为处理这个问题的唯一方法是延迟加载，Elements直到您知道购买的详细信息。

所有的react-stripe-js只是stripe.js提供的类和方法的React风格包装器。如果您检查Payment Intents和Setup Intents文档如何使用stripe.js元素，它们总是在创建 Intent 对象并将其发送clientSecret到前端之后实例化。