如何让Stripe嵌入购买按钮在当前浏览器窗口打开支付页面？

Stripe官方提供的<stripe-buy-button>自定义元素默认会在新标签页打开支付页面，且官方文档没有直接提供修改跳转target的配置项。不过可以通过JavaScript拦截按钮的点击事件，手动实现当前窗口跳转的效果，具体方案如下：

解决方案：拦截点击事件自定义跳转 #

1. 保留原有的Stripe脚本引入，直接监听现有<stripe-buy-button>元素的点击事件
2. 阻止默认的新标签页打开行为，手动跳转到该按钮对应的普通支付链接（可在Stripe后台获取）

示例代码：

<!-- 保留Stripe官方脚本 -->
<script async src="https://js.stripe.com/v3/buy-button.js"></script>

<!-- 原嵌入按钮代码不变 -->
<stripe-buy-button
  buy-button-id="buy_btn_1NiOHcFGHWXsQN6nUdABzTMU"
  publishable-key="pk_test_51Nfkm3FGHWXsQN6nbqGxs9gSMbhu6rKBzxhfE3EFhKIAzqOdb7KKYi3U3avrbTOOYTQwAm0pWu0yohm0cgcHQS8m00LPt0gLuo"
>
</stripe-buy-button>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const buyBtn = document.querySelector('stripe-buy-button');
  buyBtn.addEventListener('click', function(e) {
    // 阻止默认新标签页跳转
    e.preventDefault();
    // 替换为你在Stripe后台获取的对应支付链接
    const paymentLink = 'https://buy.stripe.com/你的专属支付链接';
    // 在当前窗口打开支付页面
    window.location.href = paymentLink;
  });
});
</script>

备选方案：JS初始化按钮并控制跳转 #

如果愿意改用JavaScript初始化方式创建购买按钮，可获得更灵活的逻辑控制：

<!-- 准备按钮容器 -->
<div id="stripe-buy-btn-container"></div>

<script src="https://js.stripe.com/v3/"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const stripe = Stripe('pk_test_51Nfkm3FGHWXsQN6nbqGxs9gSMbhu6rKBzxhfE3EFhKIAzqOdb7KKYi3U3avrbTOOYTQwAm0pWu0yohm0cgcHQS8m00LPt0gLuo');
  const elements = stripe.elements();

  // 创建并挂载购买按钮
  const buyBtn = elements.create('buyButton', {
    buyButtonId: 'buy_btn_1NiOHcFGHWXsQN6nUdABzTMU'
  });
  buyBtn.mount('#stripe-buy-btn-container');

  // 监听点击并自定义跳转
  document.querySelector('#stripe-buy-btn-container').addEventListener('click', function(e) {
    if (e.target.closest('.stripe-buy-button')) {
      e.preventDefault();
      window.location.href = '你的专属支付链接';
    }
  });
});
</script>

注意：代码中的paymentLink需要替换为你在Stripe后台找到的对应购买按钮的普通支付链接——也就是你最初计划使用的那种简单支付链接。

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