Stripe免费试用订阅支付时confirmCardSetup缺少client_secret错误排查

错误提示 #

Missing value for stripe.confirmCardSetup intent secret: value should be a client_secret string

前端代码片段 #

const response = await fetch("cloudfunctions.net/XXXX", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          paymentMethod: paymentMethod?.paymentMethod?.id,
          name,
          lname,
          email,
          promo,
          countrycode,
          priceId
        }),
      }).then((res) => res.json());
      
      const confirmPayment = await stripe?.confirmCardSetup(
        response.clientSecret
      );

      if (confirmPayment?.error) {
        console.log(confirmPayment.error.message);
      } else {
        console.log('SUBSCRIBED!');
      }

云函数代码片段 #

const { name, email, promo, countrycode, paymentMethod } = request.body;
            // Create a customer
            const customer = await stripe.customers.create({
              email,
              name,
              payment_method: paymentMethod,
              invoice_settings: { default_payment_method: paymentMethod },
            });

            const params = {
              customer: customer.id,
                items: [{ price: "price_1N1TKrGxUje7SlyIeNldQvLT" }],
                payment_settings: {
                  payment_method_options: {
                    card: {
                      request_three_d_secure: "automatic",
                    },
                  },
                  payment_method_types: ["card"],
                  save_default_payment_method: "on_subscription",
                },
                trial_period_days: 7,
                expand: ["pending_setup_intent"],
            }

            if (promo) params.promotion_code = promo;
            if (countrycode) params.currency = countrycode;

            const subscription = await stripe.subscriptions.create(params);
            
            response.json({
              message: "Subscription successfully initiated",
              clientSecret: subscription.pending_setup_intent.client_secret,
              subID:subscription.id,
            });
          } catch (err) {
            console.error(err);
            response.status(500).json({ message: "Internal server error" });
          }

错误原因及排查方向 #

• pending_setup_intent不存在导致clientSecret为空
  当订阅是7天免费试用，且绑定的支付方式无需3DS验证时，Stripe不会生成pending_setup_intent，此时subscription.pending_setup_intent为null，直接访问client_secret会报错，最终返回给前端的clientSecret是undefined。另外云函数中硬编码了price值，未使用前端传入的priceId，如果该价格的配置不需要验证流程，也会导致没有setup intent。

• 前端未处理云函数异常情况
  云函数如果抛出异常（比如促销码无效、价格不存在、创建客户失败），会返回{ message: "Internal server error" }，此时前端response.clientSecret为undefined，调用stripe.confirmCardSetup时就会触发错误。前端代码没有对fetch请求的错误状态码做判断，直接解析JSON，容易忽略这类问题。

• 无需调用confirmCardSetup的场景
  创建客户时已经通过payment_method参数附加了支付方式，并且该支付方式已通过验证，Stripe会直接完成订阅创建，此时没有待确认的setup intent，不需要调用confirmCardSetup。

修复建议 #

1. 云函数中添加日志，打印subscription.pending_setup_intent，确认是否存在client_secret；若不存在，返回时不要传递该字段，或者传递null。
2. 前端在调用stripe.confirmCardSetup前先判断response.clientSecret是否存在，不存在则直接进入订阅成功流程：

   if (response.clientSecret) {
     const confirmPayment = await stripe?.confirmCardSetup(response.clientSecret);
     if (confirmPayment?.error) {
       console.log(confirmPayment.error.message);
     } else {
       console.log('SUBSCRIBED!');
     }
   } else {
     console.log('SUBSCRIBED!');
   }
   

3. 云函数中替换硬编码的price值为前端传入的priceId，确保使用正确的价格配置：

   items: [{ price: request.body.priceId }]
   

4. 前端添加fetch请求的错误处理，比如判断res.ok：

   const response = await fetch("cloudfunctions.net/XXXX", { ... })
     .then((res) => {
       if (!res.ok) throw new Error('Request failed');
       return res.json();
     });
   

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