Stripe Checkout支付成功后无法触发自定义额外功能求助

问题根源 #

你当前代码的核心问题是：stripe.redirectToCheckout() 触发后，浏览器会直接跳转到Stripe的支付页面，原页面的JavaScript上下文会被销毁，所以.then()里的成功分支代码（包括myCustomFunction()）根本不会执行——只有当跳转请求本身失败（比如参数错误、API密钥无效）时，错误分支才会触发。

解决方案 #

方案1：在successURL目标页面中执行自定义逻辑

支付成功后，用户会被跳转到你指定的successUrl（即http://127.0.0.1:5500/public/payment.html），直接把自定义功能写在这个页面的JavaScript代码里即可：

// payment.html 中的代码
document.addEventListener('DOMContentLoaded', function() {
  // Stripe支付成功后会自动在URL中添加session_id参数，可用于验证
  const urlParams = new URLSearchParams(window.location.search);
  const sessionId = urlParams.get('session_id');
  
  if (sessionId) {
    console.log("Payment successful!");
    alert("Payment successful!");
    // 在这里添加你的其他自定义功能
  }
});

方案2：改用Checkout会话模式（更严谨）

如果需要确保支付状态真实有效，或者需要执行后端自定义逻辑，推荐先在服务端创建Checkout Session，前端通过会话ID跳转：

1. 服务端调用Stripe API创建Checkout Session，获取session_id
2. 前端代码修改为：

document.getElementById("checkout").addEventListener("click", function() {
  stripe.redirectToCheckout({
    sessionId: '从服务端获取的session_id'
  }).then(function(result) {
    if (result.error) {
      console.log(result.error.message);
    }
  });
});

3. 服务端通过Stripe Webhook监听checkout.session.completed事件，执行后端自定义逻辑
4. 前端success页面通过session_id调用Stripe API查询会话状态，确认支付成功后再执行前端自定义功能

原代码无效的原因重申 #

原代码中.then()的成功分支仅处理跳转请求发起失败的场景，而非支付流程完成后的成功状态。支付完成后的页面跳转会直接销毁原页面的JS上下文，导致后续代码无法执行。

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