如何在Node/React环境下通过Stripe使用已保存卡片创建订阅

后端代码修改 #

创建订阅时，显式指定从支付方式列表API获取到的已保存卡片对应的payment_method ID，确保使用指定卡片完成订阅扣费：

const subscription = await stripe.subscriptions.create({
  customer: customerId,
  items: [{
    price: priceId,
  }],
  // 传入已保存卡片对应的支付方式ID
  default_payment_method: paymentMethodId,
  payment_behavior: 'default_incomplete',
  expand: ['latest_invoice.payment_intent'],
});

res.send({
  subscriptionId: subscription.id,
  clientSecret: subscription.latest_invoice?.payment_intent?.client_secret,
});

注：若该支付方式已设为客户的默认支付方式，可省略default_payment_method参数，但显式传入能确保使用指定卡片。

前端代码修改 #

无需再使用cardElement，直接传入已保存的支付方式ID完成支付确认：

// 假设已获取用户选中的已保存卡片对应的paymentMethodId
stripe.confirmCardPayment(clientSecret, {
  payment_method: paymentMethodId,
})
.then((result) => {
  if (result.error) {
    // 处理支付失败逻辑，比如提示用户验证卡片或更换支付方式
  } else {
    if (result.paymentIntent.status === 'succeeded') {
      // 订阅创建并支付成功，执行后续逻辑
    }
  }
});

额外注意事项 #

• 确保获取的payment_method属于当前操作的客户（即customerId对应的客户），否则会触发权限错误。
• 若已保存卡片需要3D Secure验证，Stripe会在confirmCardPayment流程中自动触发验证弹窗，前端无需额外处理，只需监听结果即可。
• 若希望创建订阅时自动完成扣费（无需前端确认），可将后端的payment_behavior改为'allow_incomplete'，并通过Stripe Webhook监听订阅和支付的状态变化，避免依赖前端返回的结果。

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