Bootstrap网站集成Stripe.js v2支付：JavaScript未执行问题求助

作为第一次上手Stripe支付的开发者，遇到JS代码跑不起来的情况太常见了，咱们一步步拆解排查：

1. 先确认Stripe.js v2的引入顺序 #

这是最容易踩的坑！你必须把Stripe的官方脚本放在自定义JS代码之前加载，不然你的代码调用Stripe对象时会直接报错：

<!-- 先加载Stripe.js v2，放在<head>或者<body>末尾都可以 -->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- 再加载你的自定义JS、Bootstrap JS -->
<script src="./your-custom-script.js"></script>

2. 别忘了初始化你的Publishable Key #

在所有Stripe相关代码执行前，必须先初始化你的测试/生产密钥（在Stripe后台能找到），不然所有Stripe方法都会失效：

// 替换成你自己的Publishable Key，测试环境用pk_test开头的
Stripe.setPublishableKey('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx');

3. 检查表单绑定与提交逻辑 #

Bootstrap的表单结构没问题，但要确保你的JS能正确监听表单提交，并且阻止默认跳转（不然页面直接刷新，JS代码还没执行完就没了）。给你一个适配Bootstrap的完整示例：

HTML表单（Bootstrap风格） #

<form id="payment-form" action="./charge.php" method="POST" class="mt-4">
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="card-number" class="form-label">信用卡号</label>
      <input type="text" class="form-control" id="card-number" data-stripe="number" placeholder="4242 4242 4242 4242">
    </div>
    <div class="col-md-3 mb-3">
      <label for="card-expiry" class="form-label">有效期 (MM/YY)</label>
      <input type="text" class="form-control" id="card-expiry" data-stripe="exp" placeholder="12/28">
    </div>
    <div class="col-md-3 mb-3">
      <label for="card-cvc" class="form-label">CVC码</label>
      <input type="text" class="form-control" id="card-cvc" data-stripe="cvc" placeholder="123">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">确认支付</button>
</form>

对应的JS代码 #

// 等DOM加载完成再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const paymentForm = document.getElementById('payment-form');
  
  paymentForm.addEventListener('submit', function(e) {
    // 阻止表单默认提交行为，这步一定要加！
    e.preventDefault();
    
    const submitBtn = this.querySelector('button');
    // 禁用按钮防止重复提交
    submitBtn.disabled = true;
    submitBtn.textContent = '处理中...';

    // 调用Stripe生成令牌
    Stripe.card.createToken(this, function(status, response) {
      if (response.error) {
        // 显示错误提示（用Bootstrap的alert样式）
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-danger mt-3';
        alertDiv.textContent = response.error.message;
        paymentForm.prepend(alertDiv);
        
        // 恢复按钮状态
        submitBtn.disabled = false;
        submitBtn.textContent = '确认支付';
      } else {
        // 把令牌添加到表单里，提交到服务器PHP
        const tokenInput = document.createElement('input');
        tokenInput.type = 'hidden';
        tokenInput.name = 'stripeToken';
        tokenInput.value = response.id;
        paymentForm.appendChild(tokenInput);
        
        // 提交表单到服务器
        paymentForm.submit();
      }
    });
  });
});

这里要注意：

• 表单元素的data-stripe属性必须准确对应（number/exp/cvc），Stripe.js会自动读取这些输入框的值，不用你手动获取。
• 一定要用e.preventDefault()阻止表单默认提交，否则页面会直接跳转，Stripe的异步请求还没完成就中断了。

4. 打开浏览器控制台看错误！ #

这是最快定位问题的方法！按F12打开开发者工具，切换到Console面板：

• 如果提示Stripe is not defined：说明Stripe.js没加载成功，或者加载顺序错了。
• 如果提示Cannot read properties of null：说明你的JS选择器写错了（比如表单ID输错了）。
• 如果提示Invalid Publishable Key：说明你的密钥填错了，去Stripe后台确认是测试环境的密钥。

5. 测试用的信用卡信息 #

测试阶段别用真实信用卡，用Stripe提供的测试号：

• 卡号：4242 4242 4242 4242
• 有效期：随便填未来的月份/年份（比如12/28）
• CVC：随便填3位数字（比如123）

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