提交时更新隐藏字段异常：Stripe.js Token无法传递至下页

我来帮你排查下这个问题哈！你目前的代码只完成了Stripe卡片元素的初始化，但缺少生成Token并赋值给隐藏字段的核心逻辑，而且表单提交时大概率没等Token生成就直接提交了，这才导致隐藏字段没按预期更新。下面给你梳理完整的解决方案：

第一步：确保HTML里存在隐藏字段 #

先在表单中添加一个专门存储Stripe Token的隐藏字段：

<form id="payment-form">
  <div id="card-element"></div>
  <!-- 用于存储Token的隐藏字段 -->
  <input type="hidden" id="stripe-token" name="stripeToken">
  <button type="submit">提交付款</button>
  <!-- 用于显示卡片验证错误的元素 -->
  <div id="card-errors" role="alert"></div>
</form>

第二步：完善JS逻辑，生成Token并赋值 #

你需要监听表单提交事件，在用户点击提交时先调用Stripe的createToken方法生成Token，成功后把Token值写入隐藏字段，再继续提交表单。同时还要处理卡片验证的错误提示：

var stripe = Stripe('pk_test_pTMOD3umdVw9RkEYB35tz28X');
var elements = stripe.elements();
var card = elements.create('card', {hidePostalCode: true});
card.mount('#card-element');

// 获取表单和隐藏字段DOM
var form = document.getElementById('payment-form');
var hiddenTokenField = document.getElementById('stripe-token');

// 监听卡片元素的变化，实时显示验证错误
card.addEventListener('change', function(event) {
  var errorElement = document.getElementById('card-errors');
  if (event.error) {
    errorElement.textContent = event.error.message;
  } else {
    errorElement.textContent = '';
  }
});

// 监听表单提交事件，核心逻辑在这里
form.addEventListener('submit', function(event) {
  // 先阻止表单默认提交行为，避免Token还没生成就提交
  event.preventDefault();

  // 调用Stripe生成卡片Token
  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // 卡片验证失败，显示错误信息
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // 生成Token成功，把Token值赋值给隐藏字段
      hiddenTokenField.value = result.token.id;
      // 现在再提交表单，隐藏字段就有值了
      form.submit();
    }
  });
});

几个关键注意点 #

• 不要提前生成Token：必须在用户点击提交按钮时再生成Token，不然用户还没填完卡片信息，生成的Token要么无效，要么对应错误的卡片数据。
• 一定要阻止默认提交：如果不阻止，表单会直接提交，此时Token还没生成，隐藏字段自然是空的。
• 处理错误场景：给用户显示卡片验证错误（比如卡号无效、过期时间不对），能提升整体的支付体验。

另外你原代码里的input.addEventListener('focus', fu应该是没写完的逻辑，这个如果是处理表单输入焦点状态的，补全即可，但核心问题还是Token生成和赋值的逻辑缺失~

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