如何让Stripe checkout.js在移动端Edge和Chrome正常工作？

数据老陈

2026-6-25

背景

我们的网站使用Stripe的checkout.js功能处理支付，该功能十分简洁，已使用多年。它在所有主流桌面浏览器上运行正常，在移动端Firefox、Safari和Opera上也能正常工作。

预期行为

包含信用卡信息字段的模态框（modal）从屏幕顶部滑下，等待用户交互。用户可关闭该模态框，也可填写完成后提交。

移动端Edge和Chrome上的异常行为

在这些浏览器中，并未弹出模态框，而是打开了一个全新页面。新页面指向类似如下链接：https://checkout.stripe.com/v3/oixxxxxxxxxxxQFpDfA.html?distinct_id=xxxxxd79-6dd5-xx7f-xxf7-39xxxxxxfe1（已模糊处理）

问题

如何操作才能让该功能在这些浏览器上正常工作？

正常效果

Stripe checkout.js应用的预期行为

异常效果

浏览器重定向错误

解决建议：

更新checkout.js版本：替换为Stripe官方最新的CDN链接，旧版本可能存在移动端浏览器兼容性问题：
```
<script src="https://checkout.stripe.com/checkout.js"></script>
```

修复触发逻辑的默认行为拦截：检查支付按钮的点击事件代码，确保正确阻止了默认跳转，避免浏览器打开新页面：

document.querySelector('.payment-btn').addEventListener('click', function(e) {
  e.preventDefault();
  StripeCheckout.open({
    key: '你的发布密钥',
    amount: 订单金额（单位：分）,
    name: '商家名称',
    // 其他必要配置项
  });
});

规避弹出窗口拦截：移动端Chrome/Edge对非用户主动触发的弹出窗口拦截严格，确保支付模态框的触发逻辑绑定在明确的用户点击操作上，避免在页面加载、异步回调等场景自动触发。
迁移至Stripe Elements：Stripe已逐步淘汰checkout.js，推荐使用Stripe Elements，它对现代移动端浏览器的兼容性更好，还支持自定义样式，适配性更强。
确认HTTPS配置：确保网站全程使用HTTPS，非HTTPS环境下，移动端浏览器会限制弹出窗口，且Stripe支付功能也要求站点必须是HTTPS协议。