Stripe.js Google Pay按钮首次加载不显示、清缓存后失效求助

问题现象 #

• 首次访问页面时Google Pay按钮不显示，刷新后恢复正常；清理浏览器缓存与Cookie后按钮再次隐藏，刷新也无法恢复
• Apple Pay在Safari中显示正常，Stripe官方测试页可正常加载Google Pay按钮，排除浏览器兼容性问题（使用真实银行卡）
• 第三方测试页显示No enrolled instrument；在Stripe官方页完成Google Pay交易后，该测试页显示Has enrolled instrument，此时自有应用的Google Pay按钮也能正常显示。推测核心问题为Payment Request Button API无法直接检测到Google Pay中已添加的银行卡，仅当存在交易缓存数据时才能识别并显示按钮。

解决方案 #

1. 优化支付请求检测逻辑 #

canMakePayment()的检测结果易受Google Pay状态缓存影响，添加重试机制并明确指定支持的支付方式，帮助API更精准识别可用支付工具：

function initializeStripeWalletPay() {
  const paymentRequest = stripe.paymentRequest({
    currency: CURRENCY,
    country: CODE,
    requestPayerName: true,
    requestPayerEmail: true,
    total: {
      label: 'Total',
      amount: total_amount
    },
    // 明确指定支持的卡组织与验证方式，引导API识别Google Pay
    supportedPaymentMethods: [
      {
        type: 'card',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA']
        }
      }
    ]
  });

  const prButton = elements.create('paymentRequestButton', {  
    paymentRequest: paymentRequest
  });

  // 带重试的检测逻辑，给Google Pay足够初始化时间
  function checkCanMakePayment(retries = 3) {
    paymentRequest.canMakePayment().then((result) => {
      if (result) {
        prButton.mount('#payment-request-button');
      } else if (retries > 0) {
        setTimeout(() => checkCanMakePayment(retries - 1), 500);
      }
    }).catch((err) => {
      console.error('Payment request error:', err);
      if (retries > 0) {
        setTimeout(() => checkCanMakePayment(retries - 1), 500);
      }
    });
  }

  checkCanMakePayment();
}

// 改用DOMContentLoaded提前初始化时机，避免资源加载延迟影响检测
document.addEventListener('DOMContentLoaded', function() {
  initializeStripeWalletPay();
});

2. 调整初始化时机 #

替换原有的$(window).load()为DOMContentLoaded，确保在DOM结构加载完成后立即初始化支付请求，避免因页面资源加载过晚导致的检测时机偏差。同时需保证stripe与elements实例已完全初始化后，再调用initializeStripeWalletPay函数。

3. 核对Google Pay配置细节 #

• 再次确认Stripe Dashboard中Google Pay商户信息配置正确，包括域名验证状态
• 确保country参数与Google Pay绑定银行卡的发卡国家一致，currency与商户结算货币匹配

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