React+Django集成Stripe支付按钮报错：缺少client_secret字符串

核心问题 #

报错IntegrationError: Missing value for stripe.confirmCardPayment intent secret: value should be a client_secret string.的直接原因是：前端调用后端创建PaymentIntent接口时，传递的金额单位错误，导致后端创建PaymentIntent失败，返回的响应中没有client_secret字段，前端传入stripe.confirmCardPayment的参数为undefined，触发报错。

另外，针对Apple Pay/Google Pay这类Payment Request Button，Stripe官方推荐使用stripe.confirmPayment而非stripe.confirmCardPayment，后者主要适配传统信用卡表单场景。

修复步骤 #

1. 修正后端views.py的金额处理 #

Stripe要求PaymentIntent的amount必须是货币最小单位（如美元的分），需要确保后端接收并转换为正确数值：

class PaymentIntentView(APIView):
    def post(self, request, *args, **kwargs):
        amount = request.data.get('amount')
        try:
            # 将前端传入的美元金额转换为分，确保是整数
            amount = int(float(amount) * 100)
        except (ValueError, TypeError):
            return Response({'error': '无效的金额数值'}, status=400)
            
        currency = request.data.get('currency')
        automatic_payment_methods = request.data.get('automatic_payment_methods', {'enabled': True})

        try:
            intent = stripe.PaymentIntent.create(
                amount=amount,
                currency=currency,
                automatic_payment_methods=automatic_payment_methods,
            )

            return Response({'client_secret': intent.client_secret, 'id': intent.id})
        except Exception as e:
            return Response({'error': str(e)}, status=400)

2. 修正前端Checkout.js的关键问题 #

（1）传递正确的金额到后端

将传给后端的金额改为转换后的分单位数值：

const response = await axios.post(
  '/my/django/end-point/create-payment-intent',
  {
    paymentMethodId: paymentMethod.id,
    amount: dollar_price, // 传递分单位的金额，对应前端已计算的price*100
    automatic_payment_methods: {
      'enabled': true,
    },
    currency: 'usd',
  }
);

（2）替换为适配Payment Request Button的确认支付方法

把stripe.confirmCardPayment替换为stripe.confirmPayment，并补充返回URL配置：

// 替换原confirmCardPayment为confirmPayment
const pi = await stripe.confirmPayment(response.data.client_secret, {
  payment_method: paymentMethod.id,
  return_url: `${window.location.origin}/success` // 指定支付完成后的跳转URL
});

修正后的支付事件处理完整代码：

paymentRequest.on('paymentmethod', async event => {
  const paymentMethod = event.paymentMethod;
  try {
    const response = await axios.post(
      '/my/django/end-point/create-payment-intent',
      {
        paymentMethodId: paymentMethod.id,
        amount: dollar_price,
        automatic_payment_methods: {
          'enabled': true,
        },
        currency: 'usd',
      }
    );

    const pi = await stripe.confirmPayment(response.data.client_secret, {
      payment_method: paymentMethod.id,
      return_url: `${window.location.origin}/success`
    });

    console.log(pi);
    if (pi.status === 'succeeded') {
      event.complete('success');
      console.log('支付成功！');
      window.location.href = '/success';
    } else if (pi.status === 'requires_action') {
      console.log('正在跳转到支付完成页面...');
      // Stripe会自动处理额外验证步骤，无需手动调用event.complete
    } else {
      event.complete('fail');
      console.log(`支付失败，状态：${pi.status}`);
    }
  } catch (error) {
    event.complete('fail');
    console.log('发生错误：', error);
  }
});

验证步骤 #

1. 打开浏览器开发者工具的Network标签，查看create-payment-intent接口的请求和响应：
   • 确认请求中的amount是分单位的整数
   • 确认响应中包含client_secret字段，而非error
2. 确保后端使用Stripe Secret Key，前端使用Publishable Key，密钥配置正确
3. 确认测试环境符合Apple Pay/Google Pay要求：Apple Pay需要HTTPS或localhost，Google Pay需配置商家ID

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