Build with Gemini, our largest and most capable AI model. Get an API key.

使用 Google Pay 在网页上打造快速结账体验

有了 Google Pay API，用户可以使用存储在其 Google 帐号中的付款信息随时随地进行付款。在本实验中，您将利用 Google Pay 的网页版版客户端库，通过创建更快速、更便捷、更安全的体验来提升简化版示例网店的结账体验，从而获得更多转化并提高客户满意度。

Auto T-Shirt Shop 是一家创新型商店，它充分利用了人工智能的最新进步以及各种信息（例如款式偏好、天气、节气时令和流行趋势）等信息来推荐最合适的商品供您购买。

该商店的各项互动指标得分非常高。然而遗憾的是，各项指标同样表明大量用户在结账过程中放弃了购买。该项目的一位负责人决心解决这个问题，他回忆起自己曾经看过一个视频，该视频展示了 Google Pay 在类似网站上取得了良好成功；因此，他们决定试一试，相信您能够顺利实现集成。

要构建的内容

此 Codelab 会指导您将 Google Pay 集成到现有网站中，包括确定用户是否可以使用 Google Pay 支持的付款方式进行付款、付款按钮的展示位置和设计样式，以及交易的执行方式。

要学习的内容

如何将 Google Pay 集成到现有结账页中
如何在偏好的付款方式之间进行选择
如何确定用户是否已准备好通过 Google Pay 付款

所需条件

一台可连接互联网的计算机
具备 JavaScript 基础知识

在 glitch.com 上运行示例网站

为了能尽快上手，此 Codelab 已在 glitch.com 上推出。Glitch 是一个免费的网页版环境，提供代码编辑器以及用于构建和提供 Web 应用的托管和部署功能。

要开始使用，请使用下面的按钮在 Glitch 上预配新的开发环境，其中已设置此 Codelab 的副本。

在 Glitch.com 上启动开发环境

从现在开始，您可以使用 Glitch 上的代码编辑器来修改您的文件。使用顶部的 Show 菜单开始提供您的应用，然后选择 In a New Window。

浏览示例网站

如您所见，该代码库的文件结构较为简单。此 Codelab 的主要目的是让您能够根据现有和未来的应用来调整此集成，而无需考虑您选择使用的框架、库或工具。

浏览网站

在您添加购买方式之前，此演示市场在构建时尽可能模仿了您的现有应用或潜在应用在如今的运行方式。事实上，尽管我们建议您使用此演示应用，但您可以随意参照此 Codelab 将 Google Pay 集成到您现有的应用中。

现在，如果尚未这样做，请按照目前的效果打开演示版网站。为此，如果您使用的是 Glitch，请点击 Show 按钮；如果运行的是本地网络服务器，请打开网址。

演示版网站看起来挺正常的，对吗？商品详情页，其中包含图片、价格、说明、一些选择器和用于转到虚拟和普通付款方式的按钮。

本实验的目标是使用由 Google Pay 提供支持的“触碰两下”体验来取代此流程。

让我们来规划一下吧！

为了更好地理解这种集成，我们将此流程划分成以下几个基本步骤：

加载库
确定能否通过 Google Pay 付款
显示用于通过 Google Pay 付款的按钮
创建并发送付款请求
收集结果

添加 `script` 标记。

要开始使用 Google Pay API，您需要做的第一件事就是加载 JavaScript 库。为此，请在您要在其中调用 API 的 HTML 文件中添加 script 标记，包括指向外部 JavaScript 库的 src 属性。

对于此 Codelab，请打开 index.html 文件。您应该会看到以下代码脚本已包含在内：

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

除 src 外，您还添加了另外两个属性。

async 允许脚本与网页的其余部分一起异步加载和执行，从而使文档的首次加载时间不受影响。
onload 可帮助您将依赖于该库的代码的执行延迟到脚本加载完毕之后。完成此操作后，系统会运行您在此属性中指定的函数。在本例中，函数为 onGooglePayLoaded。

实例化 API 客户端

脚本加载完成后，即可开始使用此库。首先实例化客户端对象，稍后您将使用该对象调用 Google Pay API。

修改 index.js 文件，在此项目中，该文件已是文件结构的一部分。将 onGooglePayLoaded 函数替换为以下代码。

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

付款客户端使用 PaymentOptions 对象进行初始化。通过将 environment 设为 TEST，您可以对整个集成过程中的虚拟付款信息进行实验。在准备好创建支持真实交易的操作后，您可以将 environment 属性更新为 PRODUCTION。

概览

现在，我们已加载 Google Pay API JavaScript 客户端库。现在，对其进行配置，以向我们发出 API 调用。

针对此 Codelab 其余部分的所有以下代码更改都将应用于 index.js 文件。

框架

您每次与 Google Pay API 通信时，都需要在请求中包含一些配置参数，例如您所针对的 API 的版本。根据此 Codelab 的目的，此对象还包含与您的应用中接受的付款方式有关的信息。最终的结构如下所示：

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

属性 allowedPaymentMethods 将获取一个付款方式列表。对于每种付款方式，您都必须包含以下属性：

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

只有 type 和 parameters 这两个属性在确定相关用户能否通过 Google Pay 付款时是必需的。

付款方式配置

在本示例中，您将只接受一种配置，支持 Mastercard 和 Visa 银行卡付款，而且同时支持令牌化和主账号 (PAN) 两种形式。

下面展示了应该如何在 index.js 中设置配置：

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

总结

我们来回顾一下。

您已定义了一个要在网站中接受的付款方式，接下来将使用 API 的 2.0 版本。生成的配置应如下所示：

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

现在，基础配置已准备就绪，接下来让我们开始有趣的环节。

Google Pay 的主要目标之一是为用户提供更快速、更便捷的结账体验。这不仅仅适用于用户能够使用 Google Pay 结账的情况，还适用于用户无法使用 Google Pay 进行结账的情况。借助 isReadyToPay 请求，您可以确定是否已经准备好通过 Google Pay 付款，并有机会据此修改您的网站提供的体验。

您的用户能否通过 Google Pay 付款？

首先，您需要检查将要在您的网站中付款的特定用户能否通过 Google Pay 付款。此请求要求您指定您网站中的 Google Pay API 版本和允许的付款方式。这正是上一步中定义的基本配置对象的内容。

在 index.js 中的 onGooglePayLoaded() 函数内，粘贴以下内容：

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

如果调用返回失败的响应，则您无需在 Google Pay 环境中采取进一步的操作。在这种情况下，下一步最应该做的是显示支持其他付款方式的其他界面。

另一方面，如果响应成功，您就可以让用户享受使用 Google Pay 带来的便利；因此，您可以继续操作并添加一个按钮，以在用户进行操作（例如：点击按钮）时启动付款流程。

添加按钮以便通过 Google 付款

尽管您可以使用任何遵循 Google Pay 品牌推广指南的按钮来启动付款流程，我们还是建议您使用 Google Pay API 生成一个按钮。这样，不仅可确保准确遵循品牌推广指南，还能从直接对按钮进行的其他改进（如本地化）中受益。

如需生成按钮，请在 PaymentsClient 对象中使用 createButton 方法（包括 ButtonOptions）来配置按钮。

在 index.js 中的 createAndAddButton() 函数内，粘贴以下内容：

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

使用 createButton 时唯一一个必需的属性是 onClick，在确定每次用户激活该按钮时要触发的回调对象或函数时需要用到该属性。通过 buttonColor 和 buttonType，您可以自定义按钮的外观。根据应用的主题和界面要求对它们进行相应的调整。

创建完按钮后，您只需将其添加至 DOM 中的相应节点即可。在此示例中，可以使用标识有 buy-now 的 div 节点实现此目的。

请注意，您还定义了一个用于处理按钮点击事件的函数。在下一部分中，您将使用此函数来请求付款方式。

准备付款请求

此时，您已加载 Google Pay API 并确定网站的用户可以使用 Google Pay 进行付款。因此，界面中已显示 Google Pay 付款按钮，且用户现在可以发起交易了。现在您可以加载包含可供不同登录用户使用的付款方式的最终付款表格了。

与之前在定义 isReadyToPay 请求的过程中所做的一样，此调用还需要之前定义的基本配置对象中的属性（apiVersion、apiVersionMinor 和 allowedPaymentMethods）以及一些新属性。这一次，您的付款方式中增加了一个名为 tokenizationSpecification 的新属性，以及与此请求的目的相关的其他 parameters。此外，还需要添加 transactionInfo 和 merchantInfo。

在付款方式中添加其他必需信息

首先，请创建之前使用的基本银行卡付款方式的副本。此银行卡付款方式现在需要 tokenizationSpecification 属性来定义如何处理与所选付款方式相关的数据，以及实际交易所需的其他数据要求：在此示例中，需要提供完整的账单邮寄地址和电话号码。

`tokenizationSpecification` 属性

令牌化规范决定了系统如何处理您的客户选择的付款方式，以及如何使用付款方式完成交易。

系统支持两种不同类型的处理策略。如果您要在兼容 PCI DSS 的服务器中处理付款交易，请使用 DIRECT 规范类型。在此示例中，您使用付款网关处理付款，因此需要设置 PAYMENT_GATEWAY 规范类型。