react15.6.2下react-stripe-elements调用createPaymentMethod报400错误

这个400错误的触发逻辑非常明确：前端在调用Stripe createPaymentMethod 接口时，请求体中携带了customer字段，而Stripe的创建PaymentMethod接口本身不支持关联Customer，关联操作必须后续单独调用服务端的attach接口完成。
结合使用的react-stripe-elements@1.1.0版本的实现逻辑，这个问题是两个代码错误叠加导致的：

• react-stripe-elements@1.1.0不存在按类型字符串从stripe.elements()里取已挂载Element实例的能力，你在onSubmit里通过this.props.stripe.elements("card")拿到的是无效的空引用
• 当SDK检测到传入的card参数无效时，会自动将Stripe实例初始化时携带的全局配置参数补全到请求体中，如果之前初始化Stripe时为旧支付流程配置了Customer ID，就会被自动带到请求里，直接触发当前的400错误。

• 第一步：修正CardElement实例的获取方式
  1. 在render方法渲染CardElement时，通过ref把组件实例存在组件的属性上，不要从stripe.elements()的索引里按字符串类型取实例
  2. 修正后的CardElement渲染代码：

  <CardElement 
    style={{ base: { fontSize: "18px" } }}
    // 给CardElement绑定ref存储实例
    ref={(element) => { this.cardElementRef = element; }}
  />
  

• 第二步：排查全局Stripe初始化配置
  检查项目里初始化Stripe实例、以及给react-stripe-elements的StripeProvider传值的代码，绝对不要在初始化参数里传入customer字段，createPaymentMethod的调用流程全程不能有customer参数从前端传到Stripe接口。
• 第三步：修正onSubmit的调用逻辑
  1. 直接拿ref存储的CardElement实例作为createPaymentMethod的参数
  2. react-stripe-elements@1.1.0版本的SDK调用createPaymentMethod时，参数校验、接口返回的错误会和paymentMethod同级存在于then的返回值中，不会触发Promise的reject逻辑，必须显式捕获error，避免把无效参数传到Stripe接口
  3. 修正后的onSubmit代码：

  onSubmit = ev => {
    ev.preventDefault();
    // 直接取存在ref上的CardElement实例
    const cardElement = this.cardElementRef;
    if (!cardElement) {
      console.log("卡片输入组件尚未加载完成");
      return;
    }
    this.props.stripe
      .createPaymentMethod({
        type: "card",
        card: cardElement,       
        billing_details: { name: "Jenny Rosen" }
      })
      .then(({ paymentMethod, error }) => {
        // 显式处理SDK返回的错误
        if (error) {
          console.log("创建PaymentMethod失败：", error.message);
          return;
        }
        console.log("Received Stripe PaymentMethod:", paymentMethod);
        // 如需将PaymentMethod关联到Customer，需将拿到的paymentMethod.id传给后端服务，由后端调用Stripe服务端的PaymentMethod attach接口完成绑定，前端不能直接传customer参数
      });
  };
  

• 额外优化提示
  当前的支付按钮是type="button"，本身不会触发表单的submit事件，绑定在form上的onSubmit逻辑属于冗余代码，不会对流程造成影响，可以根据需要保留或删除。

注意：如果需要关联Customer，整个流程必须遵循「前端创建PaymentMethod拿到ID → 后端接口接收该ID → 后端调用Stripe服务端接口将PaymentMethod attach到指定Customer」的链路，任何前端在创建PaymentMethod时携带customer参数的操作都会触发当前的400报错。

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