React与Django Rest集成Stripe时PaymentIntent提示需绑定支付方式

核心问题 #

当前流程的错误在于：创建PaymentIntent时未关联用户选择的支付方式（PaymentMethod），且后续使用了错误的支付确认方法（stripe.confirmCardPayment仅适用于普通CardElement，不适用于PaymentRequestButton）。

前端代码修改 #

1. 调整支付事件处理逻辑 #

修改handlePaymentMethodReceived函数，直接将PaymentMethod ID传给后端，移除错误的confirmCardPayment调用：

const handlePaymentMethodReceived = async (event) => {
  try {
    const response = await fetch('https://my-api/create-payment-intent/', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ 
        amount: price,
        currency: 'usd',
        payment_method_id: event.paymentMethod.id,
        shipping: {
          name: event.shippingAddress.recipient,
          phone: event.shippingAddress.phone,
          address: {
            line1: event.shippingAddress.addressLine[0],
            city: event.shippingAddress.city,
            postal_code: event.shippingAddress.postalCode,
            state: event.shippingAddress.region,
            country: event.shippingAddress.country,
          },
        }
      }),
    });

    const data = await response.json();

    if (data.error) {
      console.log(data.error);
      event.complete('fail');
      return;
    }

    if (data.payment_intent.status === 'succeeded') {
      event.complete('success');
      console.log('Payment succeeded!');
    } else {
      event.complete('fail');
      console.warn(`Payment failed with status: ${data.payment_intent.status}`);
    }
  } catch (err) {
    console.error(err);
    event.complete('fail');
  }
};

2. 修正事件绑定逻辑 #

移除原handleButtonClicked，改用useEffect绑定事件，避免重复绑定：

useEffect(() => {
  if (!paymentRequest) return;

  const handlePayment = async (event) => {
    await handlePaymentMethodReceived(event);
  };

  const handleCancel = () => {
    paymentRequest.off('paymentmethod', handlePayment);
  };

  paymentRequest.on('paymentmethod', handlePayment);
  paymentRequest.on('cancel', handleCancel);

  return () => {
    paymentRequest.off('paymentmethod', handlePayment);
    paymentRequest.off('cancel', handleCancel);
  };
}, [paymentRequest]);

// 组件返回部分移除onClick属性
if (paymentRequest) {
  return (
    <div className="payment-request-button">
      <PaymentRequestButtonElement
        options={{ paymentRequest }}
      />
      --- OR ---
    </div>
  );
}

Django后端代码修改 #

修改PaymentIntentView，接收PaymentMethod ID，创建PaymentIntent时直接关联并确认支付：

class PaymentIntentView(APIView):
    def post(self, request, *args, **kwargs):
        amount = request.data.get('amount')
        currency = request.data.get('currency')
        payment_method_id = request.data.get('payment_method_id')
        shipping = request.data.get('shipping')

        if not all([amount, currency, payment_method_id]):
            return Response({'error': 'Missing required parameters'}, status=400)

        try:
            intent = stripe.PaymentIntent.create(
                amount=amount,
                currency=currency,
                payment_method=payment_method_id,
                confirm=True,
                shipping=shipping,
                return_url='https://your-website.com/payment-result',
            )

            return Response({
                'client_secret': intent.client_secret,
                'payment_intent': intent
            })
        except stripe.error.CardError as e:
            return Response({'error': e.user_message}, status=400)
        except Exception as e:
            return Response({'error': str(e)}, status=500)

关键说明 #

1. PaymentMethod关联：创建PaymentIntent时必须指定payment_method参数，否则Stripe无法识别要使用的支付方式。
2. 自动确认支付：使用confirm=True让Stripe自动完成支付确认流程，这是PaymentRequestButton的标准实现方式。
3. 事件绑定优化：在useEffect中绑定事件并添加清理函数，避免重复绑定导致的逻辑混乱。

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