Google Pay 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 中注册只需一分钟的时间，不妨现在就完成注册。

使用 Project IDX 跟进

2. 按钮自定义

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

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

在 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 中 paymentData.paymentMethodData.tokenizationData.token 处找到的令牌通过网关处理交易。

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，用于解析 PaymentDataRequestUpdate 对象，该对象可指定新的交易信息、运费选项和错误以更新付款表格。
3. redemptionCodes 是输入到付款表单中的一组促销代码。包括已获批准的代码。

6. 总结

恭喜您完成此 Codelab！您已学习如何…

运行项目

使用 Google Chrome 进行测试

使用 Google Chrome 网络浏览器，依次选择 Chrome 主菜单中的 File（文件）> Open File...（打开文件...），打开 index.html。以这种方式打开项目时，Chrome 会执行 main.js。其他网络浏览器可能不允许执行 JavaScript。

– 或 –

使用本地 Web 服务器进行测试

如果您已安装 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 相关视频