Stripe Payment Elements调用Google Pay时出现报错问题求助

报错内容翻译 #

• 提交按钮点击时控制台报错：

无法在'Window'上执行'postMessage'：没有临时用户激活的情况下不允许委托操作。

• Google Pay支付按钮点击后对话框提示：

请求超时

• 对应控制台错误：

loadPaymentData中发生开发者错误：回调函数中出现错误，请通过在回调响应中设置结构化错误来避免此问题。

问题根源 #

核心问题是浏览器临时用户激活限制：浏览器要求支付触发、跨窗口通信这类敏感操作，必须在用户主动交互（比如点击按钮）的上下文内完成，且不能被异步操作或过早的页面关闭打断。

当前代码的两个关键问题：

1. 先调用elements.submit()再异步执行stripe.confirmPayment，导致confirmPayment脱离了初始的用户点击激活上下文，触发postMessage权限错误。
2. 无论支付流程是否完成，直接调用close()，过早关闭页面/弹窗，打断Google Pay的回调流程，引发超时和开发者错误。

修复代码 #

调整逻辑，确保支付流程完全在用户激活上下文内执行，且仅在支付完成后处理关闭操作：

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    // 移除提前调用的elements.submit()，由stripe.confirmPayment统一处理流程
    const {error} = await stripe.confirmPayment({
        elements,
        clientSecret,
        confirmParams: {
            return_url: 'https://.../payment.html',
        },
        redirect: "if_required",
    });

    if (error) {
        alert(error.message);
    }
    // 仅在确认支付流程结束后执行关闭操作
    close();
});

额外检查点 #

• 确认Google Pay已在Stripe后台正确启用，商户ID、支付方式配置与当前环境匹配。
• 确保页面域名已加入Stripe允许域名列表，避免跨域权限问题。
• 测试时必须手动点击提交按钮，禁止用脚本自动触发，防止激活上下文失效。

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