在 Elements Provider 中使用“'stripe checkout session create”API 返回的“client_secret”导致“elements() 值无效”问题

Question

stripe checkout sessions createAPI返回的

client_secret

可以在“@stripe/react-stripe-js”的ElementsProvider的选项中使用吗？

如果否，那么如果 PaymentElement 嵌入其中，需要在其包装元素组件中包含 clientSecret，那么应该在 Elements 提供程序的 options 中作为 clientSecret 传递什么？

如果是，请说明为什么我仍然遇到问题，即使我的 clientSecret 格式是正确的格式并且直接从 Stripe::Checkout::Session.create API 响应正文复制。

以下是我遇到错误的确切示例代码。

const stripePromise = loadStripe("MY Publishable key");

const ShippingAddress = () => {
  const clientSecret = 'cs_test_a1kvgZUVmZjJgvu49dSFV3HmLzH282TFslODk23jTFrn1buLPnMLstt097_secret_fidwbEhqYWAnPydgaGdgYWFgYScpJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ3dgYWx3YGZxSmtGamh1aWBxbGprJz8nZGlyZHx2J3gl';
   // clientSecret value is coming from the back-end and being set in the useEffect hook.

  return (
      <>
        {clientSecret && (
          <Elements stripe={stripePromise} options={{clientSecret}}>
           <CheckoutForm />
           {/* CheckoutForm component has PaymentElement and LinkAuthenticationElement mounted in it */}
          </Elements>)}
      </>
  );
}

export default ShippingAddress;

浏览器开发控制台给我以下错误，但即使在错误 itelf 中，也可以看到该值的格式正确。

React Router caught the following error during render IntegrationError: Invalid value for elements(): clientSecret should be a client secret of the form ${id}_secret_${secret}.
You specified: cs_test_a1kvgZUVmZjJgvu49dSFV3HmLzH282TFslODk23jTFrn1buLPnMLstt097_secret_fidwbEhqYWAnPydgaGdgYWFgYScpJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ3dgYWx3YGZxSmtGamh1aWBxbGprJz8nZGlyZHx2J3gl.

请忽略 clientSecret 值，因为它是从测试帐户 api_keys 创建的。

Answer 1

结账会话和支付元素是两个独立/不同的集成路径。您不应该将结帐会话的 client_secret 与付款元素一起使用。

如果您想使用 Payment 元素，您可以创建 PaymentIntent 或 SetupIntent 并使用相应的

client_secret

[0][1]，分别类似于

pi_..._secret_...

和

seti_..._secret_...

。

我建议浏览以下资源以更好地了解如何使用付款元素：

• https://stripe.com/docs/ payments/quickstart
• https://stripe.com/docs/ payments/accept-a- payment?platform=web&ui=elements

注意：如果您想在创建 Intent 之前收集付款方式详细信息，您可以参考本指南：https://stripe.com/docs/ payments/accept-a- payment-deferred