如何在WooCommerce（Stripe）中延迟5秒自动点击Google Pay按钮

为什么原有方法失效 #

跨域iframe受浏览器同源策略严格限制，父页面无法直接访问来自js.stripe.com的iframe内部DOM，所以contents().find('#primary')根本无法获取到按钮元素。另外，即使绕过跨域限制，程序化点击支付按钮也可能被浏览器安全机制拦截（尤其是移动端），因为支付类操作通常要求用户主动交互。

正确实现思路：使用Stripe官方API触发支付流程 #

WooCommerce Payments基于Stripe构建，你可以直接通过Stripe提供的Payment Request Button API唤起支付弹窗，完全不需要操作iframe内的按钮。这种方式既符合跨域安全规则，又能保证移动端/桌面端正常工作。

具体实现步骤 #

1. 等待Stripe元素初始化完成：确保WooCommerce和Stripe的脚本都已加载，Payment Request Button元素已初始化。
2. 获取Stripe实例和Payment Request对象：通过WooCommerce Payments暴露的全局变量或Stripe实例方法获取对应的Payment Request对象。
3. 检查支付方式可用性：调用canMakePayment()确认当前环境支持Google Pay。
4. 定时触发支付弹窗：用setTimeout延迟7秒后调用show()方法唤起弹窗。

代码示例 #

(function() {
    function triggerGooglePay() {
        // 等待Stripe和WooCommerce元素加载完成
        const stripe = window.Stripe || window.wcpayStripe;
        if (!stripe) {
            // 未加载则延迟1秒重试
            setTimeout(triggerGooglePay, 1000);
            return;
        }

        // 获取Payment Request Button元素
        const paymentRequestButton = document.querySelector('#wcpay-payment-request-button .StripeElement');
        if (!paymentRequestButton || !paymentRequestButton._paymentRequest) {
            // 未初始化则延迟重试
            setTimeout(triggerGooglePay, 1000);
            return;
        }

        // 检查是否支持Google Pay
        paymentRequestButton._paymentRequest.canMakePayment().then(result => {
            if (result) {
                // 唤起Google Pay弹窗
                paymentRequestButton._paymentRequest.show().catch(error => {
                    console.error('无法唤起Google Pay:', error);
                });
            } else {
                console.log('当前环境不支持Google Pay');
            }
        });
    }

    // 7秒后触发
    setTimeout(triggerGooglePay, 7000);
})();

关键注意事项 #

• 兼容性处理：canMakePayment()会自动检测当前设备/浏览器是否支持Google Pay，避免在不支持的环境下触发错误。
• 初始化时机：Stripe元素的初始化是异步的，所以需要通过重试机制确保获取到有效的_paymentRequest对象。
• 安全限制：部分浏览器可能要求支付弹窗触发必须在用户交互上下文内，但Stripe的show()方法已做兼容处理，7秒延迟的自动触发在大多数场景下可行。若遇到拦截，可尝试让用户先进行一次轻量交互（如点击页面任意区域）再启动定时器。

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