Stripe Token创建失败：$_POST['stripeToken']不存在求助

我帮你排查了代码里的几个关键问题，这些就是导致$_POST['stripeToken']不存在的核心原因：

1. 表单ID不匹配 #

你的HTML表单ID是payment_form（下划线），但JS代码里获取的是payment-form（连字符）——这会导致JS根本找不到表单元素，后续的提交拦截、Token生成和插入逻辑完全不会执行。

2. card变量未定义 #

调用stripe.createToken(card)时，card变量没有被初始化。在你使用的旧版Stripe.js中，需要手动收集带data-stripe属性的卡片字段信息，才能生成Token。

3. 错误提示元素缺失 #

JS里尝试获取card-errors元素来显示错误信息，但你的HTML里没有这个元素，会触发控制台报错，直接中断后续代码执行。

修正后的完整代码 #

HTML代码

<div class="ui main container">
  <form action="paiement.php" class="ui form" id="payment_form" method="post">
    <div class="field">
      <input type="text" name="clientNom" required placeholder="Votre nom" value="John Kennedy">
    </div>
    <div class="field">
      <input type="email" name="clientEmail" required placeholder="votre@email.fr" value="john.kennedy@gmail.com">
    </div>
    <input type="hidden" name="commandeTotal" value="<?php echo $somme ?>">
    <div class="field">
      <input type="tel" name="clientTelephone" required placeholder="Votre téléphone" value="0102030405">
    </div>
    <div class="field">
      <input type="text" placeholder="Votre code de carte bleu" data-stripe="number" value="4242 4242 4242 4242">
    </div>
    <div class="field">
      <input type="text" placeholder="MM" data-stripe="exp_month" value="10">
    </div>
    <div class="field">
      <input type="text" placeholder="YY" data-stripe="exp_year" value="18">
    </div>
    <div class="field">
      <input type="text" placeholder="CVC" data-stripe="cvc" value="123">
    </div>
    <!-- 添加错误提示容器 -->
    <div id="card-errors" style="color: red; margin: 10px 0;"></div>
    <p>
      <button class="ui button" type="submit">Acheter</button>
    </p>
  </form>
</div>

JS代码

// 确保页面已引入Stripe.js v2版本
Stripe.setPublishableKey('pk_test_my publishable key');
// 修正表单ID匹配问题
var form = document.getElementById('payment_form');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  // 手动收集卡片信息（适配旧版Stripe.js）
  var card = {
    number: document.querySelector('[data-stripe="number"]').value.replace(/\s/g, ''),
    exp_month: document.querySelector('[data-stripe="exp_month"]').value,
    exp_year: document.querySelector('[data-stripe="exp_year"]').value,
    cvc: document.querySelector('[data-stripe="cvc"]').value
  };

  // 注意Stripe是大写开头（旧版API规范）
  Stripe.createToken(card).then(function(result) {
    if (result.error) {
      // 显示错误信息
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // 插入Token并提交表单
      stripeTokenHandler(result.token);
    }
  });
});

function stripeTokenHandler(token) {
  var form = document.getElementById('payment_form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);
  
  // 提交表单到后端
  form.submit();
}

补充说明：你当前使用的是Stripe.js v2版本，现在Stripe官方更推荐使用v3版本的Elements组件（安全性和易用性更好），不过上面的修正完全适配你现有的代码逻辑，可以直接解决stripeToken无法传递的问题。

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