Stripe自定义支付流出现Uncaught TypeError错误，如何修复？

核心原因 #

这个错误本质是JavaScript代码在目标DOM元素加载完成前就执行了，导致document.getElementById()这类选择器返回null，后续调用addEventListener自然触发报错。官方示例默认你清楚DOM加载时机，但实际复制代码时容易忽略这个前提。

具体修复步骤 #

1. 把JS代码移到DOM末尾 #

将Stripe相关脚本放到HTML文档的</body>标签前，确保所有DOM元素渲染完成后再执行JS：

<!-- 页面其他内容 -->
  <button id="checkout-button">Pay now</button>

  <!-- Stripe脚本移至此处 -->
  <script src="https://js.stripe.com/v3/"></script>
  <script>
    const stripe = Stripe('你的公钥');
    const checkoutButton = document.getElementById('checkout-button');

    checkoutButton.addEventListener('click', async () => {
      const response = await fetch('/create-checkout-session', { method: 'POST' });
      const session = await response.json();

      const result = await stripe.redirectToCheckout({ sessionId: session.id });

      if (result.error) {
        alert(result.error.message);
      }
    });
  </script>
</body>

2. 用DOMContentLoaded事件包裹代码 #

如果必须把JS放在<head>中，就用DOMContentLoaded事件确保DOM加载完成后再执行逻辑：

<head>
  <script src="https://js.stripe.com/v3/"></script>
  <script>
    document.addEventListener('DOMContentLoaded', async () => {
      const stripe = Stripe('你的公钥');
      const checkoutButton = document.getElementById('checkout-button');

      if (checkoutButton) {
        checkoutButton.addEventListener('click', async () => {
          const response = await fetch('/create-checkout-session', { method: 'POST' });
          const session = await response.json();

          const result = await stripe.redirectToCheckout({ sessionId: session.id });

          if (result.error) {
            alert(result.error.message);
          }
        });
      }
    });
  </script>
</head>

3. 核对元素ID一致性 #

确认按钮的id属性和JS中的选择器完全匹配——官方示例用的是checkout-button，如果你的按钮ID写错（比如写成pay-button），也会导致选择器返回null。

4. 验证后端接口状态 #

页面仅显示按钮的原因可能是后端/create-checkout-session接口未正确返回会话ID，导致点击按钮后无跳转。可以先测试接口是否返回包含id字段的合法JSON，同时确认后端代码与官方示例一致、Stripe私钥配置正确。

额外排查点 #

• 查看浏览器控制台的网络请求，确认/create-checkout-session请求是否成功，有无4xx/5xx错误
• 检查Stripe公钥是否正确，公钥以pk_开头，不要与私钥（sk_开头）混用

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