单页结账场景使用Stripe Payment Element能否动态修改订单及客户信息

结论 #

你的判断是错误的，新版payment元素完全可以适配你当前的单页结账流程，不存在创建后就无法修改用户信息、订单金额的限制。

原因说明 #

Stripe仅要求payment元素初始化时绑定对应的PaymentIntent client secret，但未确认的PaymentIntent本身支持灵活更新，只要你还没有调用确认支付的接口，所有订单、用户相关信息都可以修改，无需重新挂载payment元素。

适配你的单页流程的实现方案 #

• 页面初始化阶段，先按默认购票数量（比如1张）向后端发起请求，由后端调用Stripe接口创建初始PaymentIntent，返回client_secret给前端，按照官方示例完成payment元素的初始化挂载
  官方初始化示例代码：

  const stripe = Stripe('pk_test_qblFNYngBkEdjEZ16jxxoWSM');
  const options = {
    clientSecret: '{{CLIENT_SECRET}}',
  };
  const elements = stripe.elements(options);
  

• 监听用户修改购票数量的事件，每次数量变更后，前端把最新的数量传给后端，后端调用Stripe的PaymentIntent更新接口调整amount金额参数即可，payment元素会自动同步PaymentIntent的最新状态，不需要重新初始化
• 用户填写、修改个人信息的操作完全不影响payment元素的状态，你只需要在最终提交支付时，把收集到的个人信息作为参数传入confirmPayment方法，或者同步到后端更新到PaymentIntent的关联字段即可

注意：PaymentIntent的创建、更新操作都必须在你的服务端完成，不要将Stripe的秘钥（sk_开头的密钥）暴露到前端代码中。

现有表单参考 #

内容的提问来源于stack exchange，提问作者euphbasio