Stripe Elements集成问题：支付信息填写后无支付按钮显示，且需设置邮箱为必填项

我来帮你解决这两个核心问题：将邮箱地址设为必填项，以及修复支付按钮不显示的问题，下面是具体的步骤和代码修改方案：

1. 将邮箱地址设置为必填项 #

你当前的前端配置中，billingDetails.email 设置为 'auto'，这会让Stripe自动决定是否显示邮箱字段。要强制将邮箱设为必填，只需要把这个值改成 'required' 即可。

修改你的前端JavaScript配置：

const options = {
  layout: {
    type: 'accordion',
  },
  fields: {
    billingDetails: {
      name: 'auto',
      email: 'required', // 从'auto'改为'required'
      phone: 'auto' // 保持默认，若需要也可设为'required'
    }
  }
};

修改后，Payment Element会强制用户填写邮箱地址，且会在用户未填写时显示验证错误。

2. 修复支付按钮不显示的问题 #

Stripe的Payment Element本身不包含内置的支付按钮，你需要手动添加HTML按钮，并编写对应的支付提交逻辑。同时，我们需要监听Payment Element的状态变化，确保按钮在支付信息填写完成后才可用。

步骤1：添加HTML支付按钮 #

在你的视图中，在#payment-element容器下方添加一个支付按钮：

<!-- 放在#payment-element之后 -->
<button id="submit-payment" class="your-button-styles" disabled>完成支付</button>

初始设置为disabled，避免用户在支付信息未填完时点击。

步骤2：完善前端支付逻辑 #

修改你的JavaScript代码，添加按钮状态监听和支付提交逻辑：

const stripe = Stripe('xxx');
$(document).ready(function () {
  const appearance = { /* 保留你的外观配置 */ };
  const options = {
    layout: {
      type: 'accordion',
    },
    fields: {
      billingDetails: {
        name: 'auto',
        email: 'required', // 已设置为必填
      }
    }
  };
  const elements = stripe.elements({ 
    clientSecret: "@Model.paymentIntent.ClientSecret", 
    appearance 
  });
  const paymentElement = elements.create('payment', options);
  paymentElement.mount('#payment-element');

  // 获取支付按钮元素
  const submitButton = document.getElementById('submit-payment');

  // 监听Payment Element的状态变化
  paymentElement.on('change', function(event) {
    // 当支付信息填写完整时启用按钮
    submitButton.disabled = !event.complete;
    // 若有验证错误，可在这里提示用户
    if (event.error) {
      alert(`错误：${event.error.message}`);
    }
  });

  // 处理支付提交逻辑
  submitButton.addEventListener('click', async function() {
    // 禁用按钮防止重复提交
    submitButton.disabled = true;

    // 调用Stripe确认支付
    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        // 替换为你的支付成功跳转URL
        return_url: '@Url.Action("PaymentSuccess", "YourController")',
      },
    });

    if (error) {
      // 支付失败，显示错误并重新启用按钮
      alert(`支付失败：${error.message}`);
      submitButton.disabled = false;
    }
    // 支付成功时，Stripe会自动跳转到return_url，无需额外处理
  });
});

步骤3：后端代码优化（可选但推荐） #

你当前的后端使用匿名对象传递视图数据，建议创建强类型ViewModel以避免潜在的绑定问题：

// 创建一个强类型ViewModel
public class CheckoutViewModel
{
    public List<BulletControls.Controllers.ControlController.SessionBasketItem> BasketItems { get; set; }
    public PaymentIntent PaymentIntent { get; set; }
}

然后修改后端的Index方法返回逻辑：

if (strBasketItems != null)
{
    return View(new CheckoutViewModel 
    { 
        BasketItems = basketItems, 
        PaymentIntent = paymentIntent 
    });
}
return View();

这样在视图中可以更安全地访问@Model.PaymentIntent.ClientSecret。

测试验证 #

1. 使用Stripe测试卡号4242 4242 4242 4242，任意未来过期日期，任意CVC进行测试。
2. 此时邮箱字段会强制要求填写，未填写时无法启用支付按钮。
3. 填写完所有信息后，支付按钮会启用，点击后即可完成支付流程。

内容来源于stack exchange