Google Pay加载报错：无法下载支付清单，网站崩溃求助

问题现象 #

加载网站时反复出现错误：无法下载支付清单“https://pay.google.com/about/”，最终导致网站崩溃。不管是按官方文档自行开发，还是直接用NPM示例代码，都存在这个问题。按钮首次可能正常（也可能不正常），重新加载后完全无法点击。

用到的代码 #

import React from 'react';
import GooglePayButton from '@google-pay/button-react';

function GooglePay(props) {
    return (
        <GooglePayButton
            environment='TEST'
            paymentRequest={{
                apiVersion: 2,
                apiVersionMinor: 0,
                allowedPaymentMethods: [
                    {
                        type: 'CARD',
                        parameters: { 
                            allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                            allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA']
                        },
                        tokenizationSpecification: {
                            type: 'PAYMENT_GATEWAY',
                            parameters: {
                                gateway: 'example',
                                gatewyMerchantId: 'examleMerchantId',
                            },
                        },
                    },
                ],
                merchantInfo: {
                    merchantId: '12345678901234567890',
                    merchantName: 'Demo',
                },
                transactionInfo: {
                    totalPriceStatus: 'FINAL',
                    totalPriceLabel: 'Total',
                    totalPrice: props.totalAmount.toString(),
                    currencyCode: 'USD',
                    countryCode: 'US',
                },
                shippingAddressRequired: true,
                callbackIntents: ['PAYMENT_AUTHORIZATION'],
            }}
            onLoadPaymentData={paymentRequest => {
                console.log('Success', paymentRequest)
            }}
            onPaymentAuthorized={paymentData => {
                console.log('Payment Authorized Success', paymentData)
                return { transactionState: 'SUCCESS' }
            }}
            existingPaymentMethodRequired='false'
            buttonColor='black'
            buttonType='Buy'
        />
    )
};

export default GooglePay;

排查与解决步骤 #

1. 修复代码拼写错误 #

先看代码里的tokenizationSpecification.parameters，有两处拼写错误：

• gatewyMerchantId 应为 gatewayMerchantId
• examleMerchantId 应为 exampleMerchantId
  这类拼写错误会导致Google Pay无法识别配置，直接触发加载失败。

2. 修正配置参数类型 #

existingPaymentMethodRequired 要求是布尔值，你写的字符串'false'会导致组件解析异常，改成：

existingPaymentMethodRequired={false}

同时确保transactionInfo.totalPrice是合法的数字字符串（比如"10.00"），不能是空值或非数字格式。

3. 清除缓存与检查网络 #

• 清空浏览器缓存，尤其是Google Pay相关的缓存数据，避免旧错误配置残留
• 检查网络是否能正常访问Google Pay相关服务，部分拦截插件（如广告屏蔽器）会阻止资源加载，建议临时禁用测试

4. 优化组件初始化逻辑 #

如果是在路由切换或动态场景下使用，给GooglePayButton添加key属性，确保依赖props.totalAmount变化时组件重新初始化：

<GooglePayButton
    key={props.totalAmount}
    // 其他配置...
/>

避免在组件外部缓存paymentRequest对象，每次渲染都生成全新的配置对象。

5. 添加错误监听定位问题 #

给组件加上错误回调，捕获具体错误信息：

<GooglePayButton
    onError={(error) => {
        console.error('Google Pay Error:', error);
    }}
    // 其他配置...
/>

通过控制台的错误详情，能更精准定位问题根源。

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