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

Question

Stripe 提供 example in docs 用于使用 PaymentElement，他们在应用程序的根目录创建 <Elements> 组件并将其包裹在整个网站中。这与能够使用 useStripe 和 useElements 挂钩从应用程序内的任何位置访问条带对象配合得很好。

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

条纹文档代码

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>
  );
};

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

Answer 1

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

所有 react-stripe-js is just a React style wrapper around classes and methods provided by stripe.js. If you examine how Payment Intents and Setup Intents docs make use of the stripe.js 元素，它们总是在创建 Intent 对象并将 clientSecret 发送到 front-end 之后实例化。

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

Specify Client Secret After Stripe has been Instantiated

stripe-payments

reactjs