React+Node集成Stripe拆分式卡片组件无法获取值完成支付问题

我仔细看了你的代码，问题出在调用stripe.createPaymentMethod的方式上。当使用拆分式的<CardNumberElement/>、<CardExpiryElement/>、<CardCvcElement/>时，你不需要手动提取卡号、有效期和CVC（实际上前端也拿不到这些明文值，Stripe会自动加密处理），正确的做法是直接将元素实例传给card参数，Stripe会自动关联同组的拆分元素来收集完整的卡片信息。

修正后的前端代码（核心部分） #

const handleSubmit = async event => {
  event.preventDefault();

  // 先确保Stripe和Elements实例已加载完成
  if (!stripe || !elements) {
    return;
  }

  // 获取卡号元素，Stripe会自动关联同上下文的到期日、CVC元素
  const cardNumberElement = elements.getElement(CardNumberElement);

  const { error, paymentMethod } = await stripe.createPaymentMethod({
    type: "card",
    card: cardNumberElement, // 直接传入元素实例，无需手动构造card对象
  });

  if (!error) {
    const { id } = paymentMethod;
    try {
      const data = await ServiceBooking.charge(id, 1099);
      console.log(data);
      success();
    } catch (error) {
      console.log(error);
    }
  } else {
    console.error("创建支付方式失败:", error.message);
  }
};

问题原因解释 #

1. 安全机制限制：出于支付安全规范，Stripe不允许前端直接获取明文的卡片信息（卡号、CVC等），elements.getElement()返回的是Stripe的元素实例对象，不是用户输入的明文值，所以你之前手动构造card对象的方式完全错误。
2. 拆分元素的关联逻辑：当你在同一个<Elements>上下文下使用拆分式卡片组件时，Stripe会自动将<CardNumberElement/>、<CardExpiryElement/>、<CardCvcElement/>关联起来，只需传入卡号元素的实例，Stripe就能自动收集完整的卡片数据。
3. 一体式组件能工作的原因：你之前用<CardElement/>时，直接传入了该元素实例，符合Stripe的调用规范，拆分式组件的处理逻辑本质是一致的，只是需要传入卡号元素即可。

另外建议加上!stripe || !elements的判断，避免在Stripe SDK还未完全加载时触发提交操作，减少潜在的异常。

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