Rails集成Stripe Elements订阅支付流程实现合理性咨询

现有流程合理性评估 #

当前的基础流程逻辑通顺，可完成最基础的订阅支付闭环，但不适用于生产环境，存在多个风险点和可优化环节，具体如下：

现有实现遗漏的必要处理环节 #

• 缺少异常兜底逻辑：如果用户点击订阅后前端请求中途断网、或者用户在支付过程中关闭页面，后端会生成一个状态未知的订阅，后续没有对账/重试机制，会出现支付成功但用户订阅未生效的情况
• 未兼容强身份认证场景：confirmCardPayment可能返回requires_action状态，你当前只判断了error和成功两种分支，遇到需要3D Secure验证的银行卡会直接卡住，用户无法完成验证导致支付失败
• 缺少订阅状态校验：前端支付成功回调是客户端行为，不可信，你直接跳转成功页面但没有校验后端订阅是否真的激活，如果Stripe回调延迟会出现用户看到成功提示但订阅实际未生效的问题
• 支付方法存储逻辑冗余：创建订阅时就可以直接把支付方法关联到Stripe客户和订阅上，不需要后续单独调用接口存储支付方法ID，多了一次不必要的请求
• 无防重复提交和错误重试机制：三个异步请求任意一个出错都没有降级处理，用户遇到报错只能重新点击按钮，还可能出现重复点击生成多个订阅的问题

更高效的优化方案 #

后端调整 #

1. 创建订阅时直接启用payment_behavior=default_incomplete参数，不需要提前处理支付方法，返回订阅的latest_invoice.payment_intent.client_secret和订阅ID给前端即可
2. 配置Stripe Webhook监听customer.subscription.updated、payment_intent.succeeded事件，后端收到事件后再更新用户的订阅状态、存储支付方法信息，完全不依赖前端回调传参，保证数据可信度
3. 新增订阅状态查询接口，供前端支付完成后主动校验订阅是否生效

前端调整 #

1. 完善confirmCardPayment的状态判断分支，处理requires_action场景，调用stripe.handleCardAction完成3D Secure验证
2. 去掉最后单独更新用户支付方法的请求，改成调用后端的订阅状态查询接口，确认订阅生效后再跳转到成功页面
3. 增加按钮点击后的loading状态，防止用户重复点击生成多个订阅

优化后的代码示例 #

$(document).on('click', '#payment-btn', async (e) => {
  e.preventDefault();
  const $btn = $(e.currentTarget);
  // 防止重复提交
  if ($btn.is(':disabled')) return;
  $btn.prop('disabled', true).text('处理中...');

  try {
    const name = document.querySelector('#name_on_card').value;
    // 1. 请求创建订阅
    const subRes = await $.ajax({
      url: '/subscriptions',
      method: 'POST',
      beforeSend: (request) => {
        request.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
      },
      data: { plan_id: plan_id }
    });

    // 2. 确认支付
    const confirmRes = await stripe.confirmCardPayment(subRes.clientSecret, {
      payment_method: {
        card: card,
        billing_details: { name: name }
      }
    });

    if (confirmRes.error) {
      throw new Error(confirmRes.error.message);
    }

    // 处理需要3D验证的场景
    if (confirmRes.paymentIntent.status === 'requires_action') {
      const actionRes = await stripe.handleCardAction(subRes.clientSecret);
      if (actionRes.error) throw new Error(actionRes.error.message);
    }

    // 3. 主动查询后端订阅实际状态，确认生效后跳转
    await $.ajax({
      url: `/subscriptions/${subRes.sub_id}/status`,
      method: 'GET',
      beforeSend: (request) => {
        request.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
      }
    });

    Turbolinks.visit('/videos?message=success');
  } catch (err) {
    alert(err.message || '支付失败，请重试');
  } finally {
    $btn.prop('disabled', false).text('Subscribe');
  }
});

内容的提问来源于stack exchange，提问作者opensource-developer