如何在React中获取Stripe PaymentElement当前选中的支付方式

核心思路 #

通过监听PaymentElement的支付方式选择事件，实时计算对应手续费并更新前端展示；提交支付时判断支付类型，若为非Card方式则重新创建适配的PaymentIntent完成支付。

实现步骤与代码示例 #

1. 监听支付方式变化并动态计算手续费 #

使用useElements获取Stripe Elements实例，监听PaymentElement的change事件捕获选中的支付方式，据此重新计算手续费：

import { useElements, useStripe } from '@stripe/react-stripe-js';
import { useState, useEffect } from 'react';
import { PaymentElement, Elements } from '@stripe/react-stripe-js';

const Checkout = ({ stripePromise, stripePaymentOptions, pricingData }) => {
  const stripe = useStripe();
  const elements = useElements();
  const [selectedPayMethod, setSelectedPayMethod] = useState('card'); // 默认信用卡
  const [displayPricing, setDisplayPricing] = useState(pricingData);

  // 监听支付方式切换
  useEffect(() => {
    if (!elements) return;

    const paymentElement = elements.getElement('payment');
    if (!paymentElement) return;

    const handleMethodChange = (e) => {
      const methodType = e.value.type;
      setSelectedPayMethod(methodType);
      updateFees(methodType);
    };

    paymentElement.on('change', handleMethodChange);

    // 组件卸载时清理监听
    return () => {
      paymentElement.off('change', handleMethodChange);
    };
  }, [elements]);

  // 根据支付方式更新手续费和总价
  const updateFees = (methodType) => {
    const baseSubtotal = parseFloat(pricingData.subtotal);
    let fee = 0;

    if (methodType === 'us_bank_account') {
      // 美国银行账户手续费规则示例：1.5%无固定费
      fee = (baseSubtotal * 0.015).toFixed(2);
    } else {
      // 默认信用卡手续费：2.9% + $0.30
      fee = (baseSubtotal * 0.029 + 0.3).toFixed(2);
    }

    setDisplayPricing({
      ...pricingData,
      fee,
      total: (baseSubtotal + parseFloat(fee)).toFixed(2),
    });
  };

2. 处理支付提交逻辑 #

提交时判断当前支付方式，非Card则调用后端生成新的PaymentIntent，再执行支付确认：

const handleSubmit = async (e) => {
    e.preventDefault();
    if (!stripe || !elements) return;

    let targetClientSecret = stripePaymentOptions.clientSecret;

    // 非Card支付时重新创建PaymentIntent
    if (selectedPayMethod !== 'card') {
      const res = await fetch('/api/create-payment-intent', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          amount: parseFloat(displayPricing.total) * 100, // Stripe金额单位为分
          payment_method_types: [selectedPayMethod],
          currency: 'usd', // 根据业务调整币种
        }),
      });
      const data = await res.json();
      targetClientSecret = data.clientSecret;
    }

    // 确认支付
    const { error } = await stripe.confirmPayment({
      elements,
      clientSecret: targetClientSecret,
      confirmParams: {
        return_url: '/payment-success',
      },
    });

    if (error) {
      // 处理支付错误，比如提示用户
      console.error('支付失败:', error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Elements stripe={stripePromise} options={stripePaymentOptions}>
        <PaymentElement />
        <CustomElementConfirmOrder pricingData={displayPricing} />
        <button type="submit" disabled={!stripe}>完成支付</button>
      </Elements>
    </form>
  );
};

export default Checkout;

关键细节说明 #

• 支付方式标识：event.value.type返回的类型与Stripe官方定义一致，如信用卡为card、美国银行为us_bank_account。
• 金额一致性：前端计算的总价需与后端创建PaymentIntent时的金额（转换为分）完全匹配，避免支付报错。
• PaymentIntent适配：不同支付方式需要对应配置的PaymentIntent，非Card支付必须重新创建，否则Stripe会因支付方式不匹配拒绝请求。

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