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

看起来你遇到的核心问题是表单提交时没有正确触发Stripe的Token创建流程，导致后端拿不到$_POST['stripeToken']，我帮你梳理几个关键问题点：

1. 表单ID不匹配（最关键的问题） #

你HTML里的表单ID是payment_form（下划线）：

<form action="paiement.php" class="ui form" id="payment_form" method="post">

但JS里绑定事件的时候用的是payment-form（连字符）：

var form = document.getElementById('payment-form');

这就导致JS根本找不到表单元素，提交事件完全没绑定上！点击按钮后直接走了表单的默认提交流程，根本没经过Stripe的Token创建步骤，自然后端看不到stripeToken。

修复方法：把JS里的ID改成和HTML一致，或者把HTML的表单ID改成payment-form，保持统一即可。

2. card变量未定义，无法创建Token #

你的JS代码里调用stripe.createToken(card)，但card变量从来没被定义过！Stripe的createToken方法需要传入一个包含卡片信息的对象或Card元素，你现在直接用未定义的变量，会导致JS报错，中断Token创建流程。

修复方法：
你用的是旧版Stripe.js（Stripe.setPublishableKey是旧版API），如果要继续用这个版本，可以先手动收集卡片信息：

// 在submit事件里，先收集所有带data-stripe属性的输入框的值
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
};
// 然后再调用createToken
stripe.createToken(card).then(function(result) {
  // ... 后续逻辑
});

3. 其他小问题（不影响Token，但建议修复） #

• 电话号码输入框的placeholder写错了，写成了votre@email.fr，应该改成电话号码的提示，比如01 23 45 67 89
• 建议在页面里添加一个card-errors元素，不然报错的时候document.getElementById('card-errors')会找不到元素，又会报错中断流程：

<div id="card-errors" class="ui red text"></div>

完整修复后的前端代码示例 #

<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="01 23 45 67 89" 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" class="ui red text"></div>
    <p>
      <button class="ui button" type="submit">Acheter</button>
    </p>
  </form>
</div>

<script>
Stripe.setPublishableKey('pk_test_my publishable key');
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  // 收集卡片信息，去掉卡号里的空格
  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.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();
}
</script>

验证方法 #

修复后，你可以打开浏览器的开发者工具（F12），切换到Network标签页，然后点击提交按钮，查看发送到paiement.php的请求，在Form Data里应该能看到stripeToken字段，这样后端就能通过$_POST['stripeToken']获取到了。

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