Next.js迁移Stripe ExpressCheckoutComponent：如何获取paymentMethodId？

可以在创建Payment Intent前获取到paymentMethodId并传入后端API，核心是利用新的onPaymentMethodChange回调事件替代旧的paymentmethod监听：

1. 在组件中添加状态存储paymentMethodId并监听支付方式变更

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

export default function Checkout() {
  const stripe = useStripe();
  const elements = useElements();
  const [paymentMethodId, setPaymentMethodId] = useState(null);

  // 监听支付方式选择事件，获取paymentMethodId
  const handlePaymentMethodChange = (event) => {
    if (event.paymentMethod) {
      setPaymentMethodId(event.paymentMethod.id);
    }
  };

  // 调用后端API创建Payment Intent，传入paymentMethodId
  const createPaymentIntent = async () => {
    if (!paymentMethodId || !stripe || !elements) return;
    
    const res = await fetch('/api/create-payment-intent', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        paymentMethodId: paymentMethodId,
        amount: 1000 // 金额单位为分，示例为10美元
      })
    });

    const data = await res.json();
    // 后续使用返回的clientSecret完成支付确认
    const confirmResult = await stripe.confirmPayment({
      elements,
      clientSecret: data.clientSecret,
      confirmParams: {
        return_url: `${window.location.origin}/success`
      }
    });
  };

  return (
    <div>
      <ExpressCheckoutElement
        options={{
          mode: 'payment',
          amount: 1000,
          currency: 'usd'
        }}
        onPaymentMethodChange={handlePaymentMethodChange}
      />
      <button onClick={createPaymentIntent} disabled={!paymentMethodId}>
        确认支付
      </button>
    </div>
  );
}

2. 关键说明：

• onPaymentMethodChange会在用户选定支付方式（如信用卡、PayPal等）时触发，此时可直接从event.paymentMethod.id获取所需ID
• 将ID存入组件状态后，调用后端创建Payment Intent的接口时将其作为参数传入即可

如果需要在支付确认后获取paymentMethodId，也可通过stripe.retrievePaymentIntent(data.paymentIntent.id)接口查询，但这种方式是在Payment Intent创建完成后获取，不符合你"创建前传入"的需求，因此优先推荐上述onPaymentMethodChange方案。

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