Google Pay弹窗拦截报错：需同步处理clickEvent问题解决

核心问题是Google Pay的支付触发必须在用户直接点击事件的同步回调中执行，浏览器会拦截非用户主动同步触发的弹窗，以下是具体解决步骤：

1. 调整代码执行时机 #

不要在页面加载时（比如onGooglePayLoaded初始化后）直接触发支付弹窗，而是把支付逻辑完全绑定到用户的点击事件中，确保从用户点击到Google Pay弹窗触发的流程是同步的。

2. 重构代码结构 #

步骤1：提前初始化Google Pay客户端（仅初始化，不触发支付） #

在页面加载完成时执行初始化，只创建客户端实例，不发起支付请求：

let googlePayClient;

// 页面加载时执行，仅初始化客户端
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST' // 正式环境改为'PRODUCTION'
  });
}

步骤2：绑定同步的点击事件处理函数 #

给支付按钮绑定点击事件，在回调里同步完成支付检查与弹窗触发，确保全程没有异步延迟（比如避免先调用后端接口再触发支付）：

// 支付按钮的点击处理函数，必须同步执行
async function handleGooglePayClick() {
  try {
    // 同步检查Google Pay支持状态
    const readiness = await googlePayClient.isReadyToPay({
      apiVersion: 2,
      apiVersionMinor: 0,
      allowedPaymentMethods: [{
        // 你的支付方式配置，按Google文档填写
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD']
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: '你的网关标识',
            gatewayMerchantId: '你的商户ID'
          }
        }
      }]
    });

    if (readiness.result) {
      // 同步发起支付弹窗请求
      const paymentDataRequest = {
        apiVersion: 2,
        apiVersionMinor: 0,
        allowedPaymentMethods: [/* 和上面一致的支付方式配置 */],
        merchantInfo: {
          merchantId: '你的Google商户ID',
          merchantName: '商户名称'
        },
        transactionInfo: {
          totalPriceStatus: 'FINAL',
          totalPrice: '10.00',
          currencyCode: 'USD'
        }
      };

      const paymentData = await googlePayClient.loadPaymentData(paymentDataRequest);
      // 拿到支付数据后再异步传给后端处理（这一步可以异步，不影响弹窗触发）
      await axios.post('/api/google-pay/process', paymentData);
    }
  } catch (err) {
    console.error('支付失败:', err);
  }
}

步骤3：绑定按钮点击事件 #

• Blade模板中直接绑定：

<button onclick="handleGooglePayClick()">Pay with Google Pay</button>

• Vue组件中绑定：

<button @click="handleGooglePayClick">Pay with Google Pay</button>

3. 避坑要点 #

• 禁止在点击事件中加入setTimeout、await非Google Pay的异步请求（比如先调后端接口拿配置），这些会打破同步上下文，导致弹窗被拦截。如果需要后端数据，提前在页面加载时获取并存入变量，点击时直接使用。
• Vue组件中不要用$nextTick或其他异步方法包裹支付触发逻辑，确保点击回调是同步执行。

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