如何实现Web应用中将优惠券添加至Google Wallet的功能？

你需要使用Google Wallet Web API来实现这个功能，并非只能通过Android应用完成。以下是具体的实现步骤和注意事项：

核心实现逻辑 #

Google Wallet Web端通过构造符合格式的优惠券凭证（包含你的优惠券图片、折扣码等信息），生成签名后的JWT（JSON Web Token），再通过Web SDK触发添加流程，而非直接传入图片文件。

步骤1：配置Google Cloud项目 #

• 在Google Cloud控制台创建项目，启用Google Wallet API
• 创建服务账号并生成私钥，用于后续签名JWT（避免前端暴露敏感信息，必须由后端处理）
• 配置凭证类型为“优惠券”，并设置允许的Web应用域名

步骤2：后端生成优惠券JWT #

JWT需要包含优惠券核心信息，示例结构如下（需用服务账号私钥签名）：

{
  "iss": "你的服务账号邮箱",
  "aud": "google",
  "typ": "savetowallet",
  "iat": 1620000000,
  "exp": 1680000000,
  "origins": ["https://你的web应用域名"],
  "payload": {
    "genericObjects": [
      {
        "id": "唯一的优惠券ID",
        "classId": "在Google Wallet控制台创建的优惠券类ID",
        "genericType": "COUPON",
        "cardTitle": {
          "defaultValue": {
            "language": "zh-CN",
            "value": "XX店铺折扣优惠券"
          }
        },
        "subheader": {
          "defaultValue": {
            "language": "zh-CN",
            "value": "折扣码：DISCOUNT123"
          }
        },
        "bannerImage": {
          "sourceUri": "https://你的域名/优惠券图片地址.png",
          "contentDescription": {
            "defaultValue": {
              "language": "zh-CN",
              "value": "优惠券图片"
            }
          }
        },
        "validTimeInterval": {
          "start": "2024-01-01T00:00:00Z",
          "end": "2024-12-31T23:59:59Z"
        }
      }
    ]
  }
}

步骤3：Web页面集成SDK并实现添加功能 #

在你的Web页面中引入Google Wallet SDK，并添加点击触发逻辑：

<script src="https://pay.google.com/gp/p/js/pay.js"></script>

<button id="addWalletBtn">添加到Google Wallet</button>

<script>
  // 初始化Wallet客户端，测试环境用TEST，上线切换为PRODUCTION
  const walletClient = window.google.payments.api.Wallet({
    environment: 'TEST'
  });

  document.getElementById('addWalletBtn').addEventListener('click', async () => {
    try {
      // 从后端获取签名后的JWT
      const response = await fetch('/api/generate-wallet-jwt');
      const jwt = await response.text();
      
      // 调用添加凭证的方法
      await walletClient.savePasses(jwt);
      alert('优惠券已成功添加到Google Wallet');
    } catch (error) {
      console.error('添加失败:', error);
      alert('添加优惠券失败，请稍后重试');
    }
  });
</script>

关键注意事项 #

• JWT必须由后端生成：私钥不能暴露在前端，否则会导致安全风险
• 图片要求：优惠券图片必须是HTTPS协议的公开可访问地址，尺寸建议为1000x300像素以符合Wallet规范
• 测试与上线：先用TEST环境测试，功能正常后提交凭证类审核，审核通过后切换到PRODUCTION环境
• 兼容性：安卓手机上的Chrome、Edge等主流浏览器均支持该SDK，用户需登录Google账号才能完成添加

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