移除‘basic-card’后创建Payment Request失败，求解决方案

我之前也碰到过类似的情况——当把basic-card从支付方式列表中移除后，Payment Request突然抛出Unexpected developer error，核心原因通常是Google Pay的支付方式配置不完整或者参数有误，导致浏览器无法正确初始化仅支持Google Pay的支付请求。下面是具体的解决方案和代码示例：

关键问题分析 #

当你保留basic-card时，浏览器可以 fallback 到普通卡片支付流程，这会掩盖Google Pay配置中的小问题；但移除后，所有校验都会集中在Google Pay的配置上，任何缺失的参数或错误的设置都会触发开发者错误。

正确配置仅支持Google Pay的Payment Request #

你需要确保Google Pay的支付方式对象包含所有必要的参数，尤其是data字段里的商户信息、允许的支付方式和令牌化配置。

步骤1：定义完整的Google Pay支付方法

// 配置Google Pay支付方式
const googlePayMethod = {
  supportedMethods: 'https://google.com/pay',
  data: {
    // 测试环境用'TEST'，生产环境切换为'PRODUCTION'
    environment: 'TEST',
    // 令牌化配置，根据你的支付网关调整
    paymentMethodTokenizationParameters: {
      tokenizationType: 'PAYMENT_GATEWAY',
      parameters: {
        'gateway': 'your-payment-gateway', // 比如'stripe'
        'gatewayMerchantId': 'your-merchant-id' // 你的网关商户ID
      }
    },
    // 允许的支付方式和卡组织
    allowedPaymentMethods: [
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA']
        }
      }
    ]
  }
};

步骤2：创建Payment Request并发起支付

// 支付详情（根据你的订单调整）
const paymentDetails = {
  total: {
    label: '订单总金额',
    amount: { currency: 'USD', value: '19.99' }
  }
};

// 支付请求选项（可选，比如是否需要配送地址等）
const paymentOptions = {
  requestPayerName: true,
  requestPayerEmail: true
};

try {
  // 仅传入Google Pay支付方式，不包含basic-card
  const paymentRequest = new PaymentRequest(
    [googlePayMethod],
    paymentDetails,
    paymentOptions
  );

  // 显示支付弹窗
  paymentRequest.show()
    .then(paymentResponse => {
      // 处理支付响应（比如发送令牌到你的后端）
      console.log('支付令牌:', paymentResponse.details);
      // 标记支付完成
      return paymentResponse.complete('success');
    })
    .then(() => {
      console.log('支付流程完成');
    })
    .catch(err => {
      console.error('支付失败:', err);
    });
} catch (err) {
  console.error('创建支付请求失败:', err);
}

额外注意事项 #

1. 环境与商户ID：测试环境(TEST)不需要正式的Google Pay商户ID，但生产环境必须在Google Pay控制台注册并获取有效的merchantId。
2. HTTPS要求：除了localhost用于开发，正式环境必须使用HTTPS，否则Payment Request API会被浏览器阻止。
3. 卡组织与认证方式：根据你的业务需求调整allowedCardNetworks和allowedAuthMethods，确保覆盖目标用户的支付方式。

如果还是出现错误，建议检查浏览器控制台的详细错误信息（通常会有更具体的提示，比如缺少某个参数），或者验证Google Pay的配置是否符合官方规范。

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