如何在Stripe Element JS中设置邮箱姓名为必填并获取Payment Intent信息

解决方案 #

有两种可落地的实现方式，你可以根据自己的业务需求选择：

方案一：在外层自行添加必填的姓名、邮箱字段（更可控，推荐） #

这种方式不受Stripe Payment Element内置字段规则限制，可完全自定义校验逻辑：

1. 在支付页面的#payment-element节点前新增独立的输入字段，设置原生required属性或者自行做表单校验：

<div class="custom-customer-fields">
  <div>
    <label>姓名 *</label>
    <input type="text" id="customer-name" required placeholder="请输入姓名">
  </div>
  <div>
    <label>邮箱 *</label>
    <input type="email" id="customer-email" required placeholder="请输入邮箱">
  </div>
</div>
<div id="payment-element"></div>

2. 调整付款提交逻辑，在调用stripe.confirmPayment时把字段值传入账单信息参数：

async function handlePaymentSubmit(e) {
  e.preventDefault();
  // 先校验自定义字段
  const customerName = document.getElementById('customer-name').value.trim();
  const customerEmail = document.getElementById('customer-email').value.trim();
  if (!customerName || !customerEmail) {
    // 此处添加你的自定义错误提示逻辑
    alert('请补全姓名和邮箱信息');
    return;
  }

  const { error } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: "你的支付成功回调地址",
      payment_method_data: {
        billing_details: {
          name: customerName,
          email: customerEmail
        }
      }
    },
  });

  // 后续支付错误处理逻辑
}

方案二：复用Payment Element内置的账单信息字段 #

如果你不想额外添加字段，要使用Payment Element自带的姓名、邮箱输入框，可以在提交付款前先获取内置字段的输入值做必填校验：

async function handlePaymentSubmit(e) {
  e.preventDefault();
  // 先提交Element表单触发内置校验
  const submitRes = await elements.submit();
  if (submitRes.error) {
    // 处理Element提交错误
    return;
  }
  // 获取Payment Element的输入值
  const paymentValue = elements.getElement('payment').value;
  const { name, email } = paymentValue.billing_details;
  // 自行校验必填
  if (!name?.trim() || !email?.trim()) {
    alert('请补全账单信息中的姓名和邮箱');
    return;
  }
  // 再调用confirmPayment提交付款
  const { error } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: "你的支付成功回调地址",
    },
  });
  // 后续错误处理
}

两种方式都可以确保你在后台接收Payment Intent的webhook回调时，从payment_method.billing_details字段中拿到对应的用户信息，用于后续的产品权限开通逻辑。

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