如何在Stripe中同时确认SetupIntent与PaymentIntent，避免重复输卡？

核心思路 #

利用Stripe的支付方法复用机制，让客户仅输入一次支付信息，同时完成年付订阅的PaymentIntent确认和计量订阅的支付方法绑定，无需两次触发支付流程。

具体实现步骤 #

1. 统一关联到同一个Stripe客户
   先创建一个Stripe客户对象，将两个订阅（年付订阅、计量订阅）都关联到该客户。创建订阅时，设置payment_behavior: 'default_incomplete'，让订阅处于未激活状态，分别生成对应的PaymentIntent（年付订阅）和SetupIntent（计量订阅）。

   示例后端代码（Node.js）：

   const stripe = require('stripe')('your_secret_key');
   
   // 创建客户
   const customer = await stripe.customers.create({
     email: 'customer@example.com'
   });
   
   // 创建年付订阅（生成PaymentIntent）
   const annualSubscription = await stripe.subscriptions.create({
     customer: customer.id,
     items: [{price: 'price_annual_plan'}],
     payment_behavior: 'default_incomplete',
     payment_settings: {save_payment_method: true}
   });
   const paymentIntentClientSecret = annualSubscription.latest_invoice.payment_intent.client_secret;
   
   // 创建计量订阅（生成SetupIntent）
   const usageBasedSubscription = await stripe.subscriptions.create({
     customer: customer.id,
     items: [{price: 'price_usage_based'}],
     payment_behavior: 'default_incomplete',
     setup_future_usage: 'off_session'
   });
   const setupIntentId = usageBasedSubscription.setup_intent.id;
   

2. 前端单次收集支付信息并完成PaymentIntent确认
   前端使用Stripe Elements收集客户支付信息，调用confirmPayment方法确认年付订阅的PaymentIntent，同时指定setup_future_usage: 'off_session'，确保支付方法被保存到客户账户。

   示例前端代码：

   const stripe = Stripe('your_public_key');
   const elements = stripe.elements();
   const cardElement = elements.create('card');
   cardElement.mount('#card-element');
   
   // 提交支付
   const handleSubmit = async (e) => {
     e.preventDefault();
     const {error} = await stripe.confirmPayment({
       elements,
       clientSecret: paymentIntentClientSecret,
       confirmParams: {
         return_url: 'https://your-domain.com/success',
         setup_future_usage: 'off_session' // 保存支付方法
       }
     });
   
     if (error) {
       // 处理错误
       console.error(error.message);
     } else {
       // 支付成功后，关联支付方法到计量订阅
       await fetch('/api/activate-usage-subscription', {
         method: 'POST',
         body: JSON.stringify({
           setupIntentId: setupIntentId,
           customerId: customer.id
         })
       });
     }
   };
   

3. 后端激活计量订阅
   支付成功后，后端获取客户已保存的默认支付方法，用它来确认计量订阅的SetupIntent，或直接更新订阅绑定该支付方法，完成激活。

   示例后端代码：

   // 获取客户默认支付方法
   const paymentMethods = await stripe.paymentMethods.list({
     customer: customerId,
     type: 'card'
   });
   const defaultPaymentMethod = paymentMethods.data[0].id;
   
   // 确认SetupIntent并激活计量订阅
   await stripe.setupIntents.confirm(setupIntentId, {
     payment_method: defaultPaymentMethod
   });
   
   // 或者直接更新订阅绑定支付方法
   await stripe.subscriptions.update(usageBasedSubscription.id, {
     payment_method: defaultPaymentMethod,
     payment_behavior: 'default_incomplete'
   });
   

关键注意点 #

• 确保两个订阅都关联到同一个Stripe客户，否则无法复用支付方法。
• 年付订阅创建时设置payment_settings: {save_payment_method: true}，确保支付方法被保存。
• 前端确认PaymentIntent时必须指定setup_future_usage: 'off_session'，这是保存支付方法的关键参数。

内容的提问来源于stack exchange，提问作者loki.dev