Google Pay API for Web 201：高级

1. 简介

此 Codelab 是 Google Pay API for Web 101：基础知识的后续内容，并依赖于该 Codelab 中编写的代码。如要完成此 Codelab，请务必先完成该 Codelab。

学习内容

• 如何自定义 Google Pay 按钮
• 如何开始付款流程
• 如何确认付款授权状态
• 如何处理送货地址变更
• 如何处理兑换代码

所需条件

• 您选择的文本编辑器，用于修改 HTML 和 JavaScript 文件。
• Google Chrome 网络浏览器，或用于测试本地网站的其他方法。
• 对于生产环境，您需要 Google Pay merchantId。在 Google Pay & Wallet Console 中注册只需一分钟，不妨现在就完成注册。

使用 Firebase Studio 逐步操作

2. 按钮自定义

以下是 ButtonOptions 的简要概述。如需更详细的说明，请参阅相关文档

选项	必要性	值
_trackEvent()	必需	JavaScript 事件处理脚本的名称
allowedPaymentMethods	可选	PaymentMethod[]
buttonColor	可选	默认、黑色、白色
buttonLocale	可选	两个字母的 ISO 639-1 代码。 支持的语言区域包括英语、阿拉伯语、保加利亚语、加泰罗尼亚语、捷克语、丹麦语、德语、希腊语、西班牙语、爱沙尼亚语、芬兰语、法语、克罗地亚语、印度尼西亚语、意大利语、日语、韩语、马来语、荷兰语、挪威语、波兰语、葡萄牙语、俄语、斯洛伐克语、斯洛文尼亚语、塞尔维亚语、瑞典语、泰语、土耳其语、乌克兰语和中文。
buttonRadius	可选	0 至 100
buttonRootNode	可选	HTMLDocument 或 ShadowRoot
buttonSizeMode	可选	静态、填充
buttonType	可选	预订、购买、结账、捐款、订购、付款、纯、订阅

在 main.js 文件中找到 renderGooglePayButton() 方法，并将其替换为此处列出的代码。

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

代码说明

1. createButton() 库方法接受一个 ButtonOptions 配置实参，用于定义按钮的外观和行为。

3. 支付数据回调

支付客户端提供了一种机制，让您可以注册函数来处理特定事件发生时的情况。第一个是付款授权，第二个是付款数据更改。

1. 在 main.js 中找到 // todo: paymentDataCallbacks 注释，并将其替换为以下代码。

   paymentDataCallbacks: {
     onPaymentAuthorized: onPaymentAuthorized,
     onPaymentDataChanged: onPaymentDataChanged
   },
   

2. 然后，找到 main.js 的 Event Handlers 部分，并将以下代码附加到该部分的末尾。

   function onPaymentAuthorized(paymentData) {
     // We'll fill this in later
   }
   
   function onPaymentDataChanged(intermediatePaymentData) {
     // We'll fill this in later
   }
   
   

3. 最后，找到 main.js 中的 // todo: callbackIntents 注释，并将该注释替换为以下代码。在此 Codelab 中，我们将实现所有 4 种 intent。

   callbackIntents: [
     'PAYMENT_AUTHORIZATION',
     'SHIPPING_ADDRESS',
     'SHIPPING_OPTION',
     'OFFER',
   ],
   shippingAddressRequired: true,
   shippingOptionRequired: true,
   shippingOptionParameters: {
     defaultSelectedOptionId: 'shipping-001',
     shippingOptions: [
       {
         id: 'shipping-001',
         label: '$0.00: Free shipping',
         description: 'Free Shipping delivered in 5 business days.'
       },
       {
         id: 'shipping-002',
         label: '$1.99: Standard shipping',
         description: 'Standard shipping delivered in 3 business days.'
       },
       {
         id: 'shipping-003',
         label: '$1000: Express shipping',
         description: 'Express shipping delivered in 1 business day.'
       },
     ],
   },
   

代码说明

1. PaymentDataCallbacks 属性有两个子属性，一个用于付款授权回调，另一个用于付款数据更改回调。
2. 如果实现回调，则 onPaymentAuthorized 是必需的。当 callbackIntents 列表在 PaymentDataRequest 中包含 PAYMENT_AUTHORIZATION 时，系统会调用此回调。
3. onPaymentDataChanged 是可选的。当 callbackIntents 列表中的 PaymentDataRequest 包含 OFFER、SHIPPING_ADDRESS 或 SHIPPING_OPTION 时，系统会调用此回调。
4. 将 PaymentDataRequest 中的 callbackIntents 设置为触发此 Codelab 的两个回调。

4. 付款授权

“授权付款”用于启动付款流程并确认付款授权状态。

找到您在上一步中添加到 main.js 中的 onPaymentAuthorized() 函数，然后将其替换为以下代码。

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

代码说明

1. 系统会使用 PaymentData 实参调用 onPaymentAuthorized() 回调函数，并且该函数必须返回一个 promise。在此示例中，该函数会随机选择是返回成功还是返回错误。在您的项目中，您将利用此机会，使用 paymentData.paymentMethodData.tokenizationData.token 中 paymentData 内的令牌通过网关处理交易。

5. 付款数据变更

动态价格更新允许商家根据所选的送货地址动态地更新运费选项和交易信息。此外，您还可以根据所选的运费选项动态地更新交易信息。

找到您在上一步中添加到 main.js 中的 onPaymentDataChanged() 函数，然后将其替换为以下代码。

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

对 loadPaymentData() 进行一次调用可能会触发 INITIALIZE 回调多次，因此您必须确保可以处理多次此类调用。例如，当用户更改账号时，系统就会根据来自新账号的数据再次使用 INITIALIZE 调用 onPaymentDataChanged()。

代码说明

1. onPaymentDataChanged() 函数将 IntermediatePaymentData 作为实参。当在支付界面中更改送货地址或运费选项时，系统会调用此函数。
2. onPaymentDataChanged() 函数必须返回一个 promise，该 promise 会解析一个 PaymentDataRequestUpdate 对象，该对象可指定新的交易信息、运费选项和错误以更新付款表格。
3. redemptionCodes 是在付款单中输入的一组促销代码。包括已获批准的代码。

6. 总结

恭喜您完成此 Codelab！您已了解如何…

运行项目

使用 Google Chrome 进行测试

使用 Google Chrome 网络浏览器，通过 Chrome 主菜单中的文件 > 打开文件...打开 index.html。当以这种方式打开项目时，Chrome 将执行 main.js。其他网络浏览器可能不允许执行 JavaScript。

– 或 –

使用本地网络服务器进行测试

如果您已安装 Python，请在根 pay-web-101 文件夹中的终端提示符下运行 python3 -m http.server。

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

然后，访问您的网站 http://localhost:8000。

后续步骤

• 查看集成核对清单

其他资源

• 在 Discord 的 #payments 频道中加入对话
• 在 X 上关注 @GooglePayDevs
• 在 YouTube 上观看与 Google Pay 相关的视频