为什么条带中“clientSecret 不是可识别的参数”

Question

我很困惑。在 React 中集成条带元素的 Stripe 文档在这里说：

const options = {
// passing the client secret obtained from the server
  clientSecret: '{{CLIENT_SECRET}}',
};

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

我的案例中的 clientSecret -> 'seti_someId_secret_anotherId' 现在收到警告：Unrecognized create() parameter: clientSecret is not a recognized parameter. This may cause issues with your integration in the future.我现在不确定如何初始化元素提供程序。

文档中描述的这种方式是否已弃用？还有其他新方法吗？如果没有这个秘密，我无法将元素对象绑定到当前客户。任何想法如何解决？

谢谢你的想法，保持健康。

更新：我尝试使用另一种方式。在我的主 App.js 中，我删除了 options 属性。现在我更新组件中的元素对象：

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();
  const appearance = {
      theme: 'dark'
  };

  useEffect(() => {
      if(elements) {
          //get secret key like seti_id_secret_id
          axios.post(`${host}/stripe-api/payment-method`)
          .then((res) => {
              elements.update({clientSecret : res.data.setupIntent})
          })
      }
  }, [elements])

  const handleSubmit = async (event) => {
      event.preventDefault();
      
      if (elements == null) {
          return;
      }

      const {error, paymentMethod} = await stripe.createPaymentMethod({
          type: 'card',
          card: elements.getElement(CardElement)
      });
    
  
      axios.post(`${host}/stripe-api/payment-method/attach`,paymentMethod)
      .then((res) => console.log(res))
      .catch((err) => console.log(err))
  };
  return (
      <form onSubmit={handleSubmit}>
          <CardElement />
          <button type="submit" disabled={!stripe || !elements}>
          Pay
          </button>
      </form>
  );
};

Answer 1

在遇到类似的问题（但使用 vue.js）后，我发现PaymentElement（在底层使用此方法）是一个包装器，不仅用于使用多种付款方式，还用于它使用的其他选项，包括和clientSecret处理appearance。当您创建它时，PaymentElement期望收到这些，但不是CardElement您在表单中使用的，这会引起您在创建它时收到的警报。
在文档的这一部分中，您可以看到该方法正在创建相同的卡组件elements.create("card", { style: style })，但stripe.elements(options)（或stripe.elements().update(options)对应于您的useElements().update()）没有采用任何参数。
我希望这是有道理的，因为整个 React 的事情增加了一层复杂性，所以我们总结一下，只关注 js 库。
然而，当向元素实例添加选项时（使用方法.update()或在创建时），需要客户端密钥（因为它是唯一处理其他选项的元素类型），这是棘手的部分，您不需要需要这些选项，除非使用支付元素。Card 元素、cardNumber 元素等...不会在开始时处理您的秘密，而是在过程结束时处理您的秘密。
请参阅此js 库版本，了解您尝试执行的操作如何在提交时使用以下confirmCardPayment方法添加 clientSecret：

stripe.confirmCardPayment(clientSecret, { // here
    payment_method: {
      card: card,
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  })

我同意你的观点，文档和规范都确实令人不安，他们应该添加一个提及，说明在哪些条件下你应该提供这些选项（即仅在接下来调用 PaymentElements 时），并且其他方法必须处理客户端密钥稍后在提交时。

我可以看到您想将您的秘密与安装意图一起使用CardElement，这也是我想要的。不幸的是，如果我很好地理解了文档，那么您无法通过PaymentElements实例来确认Setup。使用CardElement该createPaymentMethod方法是向用户添加新支付方式的唯一途径。如果那是你打算做的。