如何阻止Google Chrome「Your payment」弹窗？WooCommerce结账跳转异常求助

嘿，这个问题我之前帮客户处理过！Chrome弹出的「Your payment」窗口其实是Google Pay的快速支付提示，当浏览器登录了Google账号（比如Gmail）且站点存在支付相关的自动检测触发条件时，就会自动弹出来。下面给你几个靠谱的解决方法，确保点击按钮直接跳转到你的站点结账页，不受Google账号登录状态影响：

1. 先禁用WooCommerce里的Google Pay集成 #

这是最直接的原因——如果你的WooCommerce后台开启了Google Pay支付选项，Chrome就会自动识别并触发弹窗：

• 登录WordPress后台，进入「WooCommerce」→「设置」→「支付」标签页
• 找到「Google Pay」相关的选项（可能在WooCommerce Payments、Stripe这类支付网关插件里），直接禁用该功能
• 保存设置后刷新前端页面测试

2. 通过代码阻止Chrome的支付自动检测 #

如果禁用集成后还是有弹窗，可以给结账按钮和表单添加属性，阻止Chrome的自动识别逻辑：

方法A：修改结账按钮属性 #

在你的主题（或子主题）的functions.php文件末尾添加以下代码：

add_filter( 'woocommerce_proceed_to_checkout_button', 'disable_chrome_payment_popup' );
function disable_chrome_payment_popup( $button_html ) {
    // 给按钮添加autocomplete="off"属性，阻止自动填充检测
    $button_html = str_replace( '<button', '<button autocomplete="off"', $button_html );
    // 额外添加Google Pay禁用标记
    $button_html = str_replace( 'class="', 'class="data-google-pay-disable" ', $button_html );
    return $button_html;
}

方法B：给结账表单添加禁用属性 #

同样在functions.php里添加这段代码，让整个结账表单不被Chrome的支付检测识别：

add_action( 'woocommerce_before_checkout_form', 'disable_checkout_form_autocomplete' );
function disable_checkout_form_autocomplete() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkoutForm = document.querySelector('form.checkout');
            if (checkoutForm) {
                checkoutForm.setAttribute('autocomplete', 'off');
                checkoutForm.setAttribute('data-google-pay-disable', 'true');
            }
        });
    </script>
    <?php
}

3. 排查第三方插件冲突 #

有时候一些第三方优化插件、支付辅助插件会偷偷开启Google Pay的检测逻辑：

• 暂时禁用所有非WooCommerce核心的插件，只保留WooCommerce本身
• 测试点击「Proceed to checkout」是否还弹窗
• 如果问题消失，再逐个启用插件，找到触发弹窗的那个插件，然后在该插件设置里关闭相关支付提示功能，或者替换插件

4. 补充：用户端浏览器设置（可选） #

如果是你自己测试时遇到的问题，也可以临时在Chrome里关闭这个提示：

• 进入Chrome设置→「隐私和安全」→「自动填充」→「支付方式」
• 关闭「保存并填写支付方式」选项，或者移除已保存的支付卡片

不过这个方法只针对单个用户，建议优先用前面的站点端解决方法，确保所有访问者都不会遇到这个问题。

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