如何从React Stripe的PaymentElement获取银行卡相关信息？

首先明确：你没法直接从PaymentElement里拿到CVC信息，而银行卡尾号、有效期只能在支付流程完成后，通过Stripe返回的PaymentIntent对象获取。原因很简单——Stripe为了帮你规避PCI合规风险，会直接加密处理CVC这类敏感支付数据，完全不让前端代码接触到。

具体操作步骤： #

• 当你调用stripe.confirmPayment完成支付验证后，返回的paymentIntent对象里会包含支付方式的详细信息，其中就有银行卡的尾号和有效期。
• 注意：CVC信息永远不会暴露给前端，这是Stripe的安全机制，也是合规要求，你不用想办法去获取它。

给你改一下提交函数的示例代码：

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

const handleSubmit = async (e) => {
  e.preventDefault();
  const stripe = useStripe();
  const elements = useElements();

  if (!stripe || !elements) return;

  // 发起支付确认
  const { error, paymentIntent } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'https://你的回调地址.com',
    },
  });

  if (error) {
    // 处理支付错误
    console.error(error.message);
  } else if (paymentIntent.status === 'succeeded') {
    // 支付成功，提取银行卡信息
    const card = paymentIntent.payment_method.card;
    console.log('银行卡尾号:', card.last4);
    console.log('有效期:', `${card.exp_month}/${card.exp_year}`);
    // 这里没有CVC，也不能获取
  }
};

补充说明： #

支付完成后，你可以用拿到的last4给用户展示支付凭证（比如显示“**** **** **** 1234”），但绝对不要存储或尝试获取CVC信息，否则会违反PCI合规规范，带来安全风险。

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