使用Stripe的React PaymentElement获取到用户的支付数据后，在哪里提交token？

Question

当将 Stripe 与 ReactJS 结合使用时，我很困惑在用户填写信用卡信息后在哪里提交支付令牌。我有这个支付容器，它从我的服务器获取支付意图......

  useEffect(() => {
    OrderService.createPaymentIntent(cart)
      .then((paymentIntent) => {
        setOrderTotal(paymentIntent.orderTotal);
        setOptions({ ...options, clientSecret: paymentIntent.clientSecret });
        setOrderTotal(paymentIntent.orderTotal);
      })
      .catch((error) => {
        console.error("Error fetching profile:", error);
      });
  }, []);
    ...          {options?.clientSecret && (
            <Elements options={options} stripe={stripePromise}>
              <CheckoutForm />
            </Elements>

      )}

下面是我的 CheckoutForm.tsx 文件。但是，我对在哪里提交从“createToken”调用获得的数据感到困惑。是否需要提交到我的服务器，然后再提交到 stripe，还是应该直接提交到 stripe？

  const stripe = useStripe();
  const elements = useElements();
    ...

  const handleSubmit = (ev) => {
    ev.preventDefault();

    const cardElement = elements?.getElement("card");

    stripe
      ?.createToken(cardElement) 
      .then((payload) => console.log("[token]", payload)); 
  };
  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
    </form>
  );
};

如果直接提交到 stripe，我如何在我的服务器上记录这个特定订单发生了什么？

Answer 1

从您共享的代码片段来看，您似乎正在使用卡元素和令牌，这是他们的遗留方法，您应该使用支付元素。

稍微了解一下 Payment Elements 的作用。 Payment Element 提供了一个嵌入式 UI 组件，供您通过一次集成安全地接受多种付款方式。根据您的客户所在位置，它会动态对付款方式进行排序以优化转化，自动调整不同付款方式的输入字段，验证输入以减少卡付款的摩擦。将来，如果您决定添加其他付款方式，只需在仪表板中启用它们即可在结帐页面上开始支持它们。这是他们的集成指南，您可以将其用作指导。

客户提供付款方式详情后，您可以在客户端确认付款。如果有任何直接错误，Stripe.js 将返回该错误。如果没有，您可以监听 wehbook 事件来处理付款后操作。