使用 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 提供支持的“触碰两下”体验来取代此流程。

让我们来规划一下吧!

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

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

添加 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>
  }
}

只有 typeparameters 这两个属性在确定相关用户能否通过 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,在确定每次用户激活该按钮时要触发的回调对象或函数时需要用到该属性。通过 buttonColorbuttonType,您可以自定义按钮的外观。根据应用的主题和界面要求对它们进行相应的调整。

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

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

准备付款请求

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

与之前在定义 isReadyToPay 请求的过程中所做的一样,此调用还需要之前定义的基本配置对象中的属性(apiVersionapiVersionMinorallowedPaymentMethods)以及一些新属性。这一次,您的付款方式中增加了一个名为 tokenizationSpecification 的新属性,以及与此请求的目的相关的其他 parameters。此外,还需要添加 transactionInfomerchantInfo

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

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

tokenizationSpecification 属性

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

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

index.js 中的 onGooglePaymentsButtonClicked() 函数内,粘贴以下内容:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

parameters 部分,您可以从 Google Pay API 支持的提供商列表中指定网关,以及每个网关所需的其他配置。根据本实验的目标,使用 example 网关即可满足需求,它会为所执行的交易生成测试结果。

其他参数

同样,您现在可以提供与为了成功发起交易而需要请求的信息有关的详细信息。请参阅以下示例,了解如何添加 billingAddressRequiredbillingAddressParameters 属性,以指明在此次交易中,用户的账单邮寄地址必须是完整的并且包含电话号码。

index.js 中的 onGooglePaymentsButtonClicked() 函数内,粘贴以下内容:

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

添加交易相关信息

transactionInfo 属性包含一个对象,其中含有交易的财务详细信息,即价格货币代码ISO 4217 Alpha 格式)以及价格状态(可以是最终价格预计价格),具体取决于交易的性质(例如:根据指定的送货地址,价格可能会有所不同)。

index.js 中的 onGooglePaymentsButtonClicked() 函数内,粘贴以下内容:

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

添加商家相关信息

付款请求会在 merchantInfo 属性下获取执行该请求的商家的相关信息。在此 Codelab 中,您应该重点关注以下两个属性:

  • 一旦您的网站获得 Google 批准,能够在生产环境中投入使用,merchantId 就会请求与您的帐号关联的标识符。请注意,使用 TEST 环境时,不会对此进行评估。
  • merchantName 是网站或组织的用户可见名称。此名称可能显示在 Google Pay 付款表格内,以便向用户提供与请求该操作的主体有关的更多信息。

index.js 中的 onGooglePaymentsButtonClicked() 函数内,粘贴以下内容:

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

请求付款信息并处理结果

现在,将先前定义的配置合并到最终 paymentDataRequest 对象中。

index.js 中的 onGooglePaymentsButtonClicked() 函数内,粘贴以下内容:

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo
});

此时,您已具备请求 Google Pay API 提供有效付款方式所需的一切条件。为此,请在 PaymentsClient 对象中使用 loadPaymentData 方法,并传递到您刚刚定义的配置中。

index.js 中的 onGooglePaymentsButtonClicked() 函数内,粘贴以下内容:

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

调用 loadPaymentData 方法会触发 Google Pay 付款表格的显示。如果不存在配置错误,您会看到与当前登录帐号相关联的有效付款方式的列表。

选择完毕后,表格将关闭,同时系统将使用包含所选付款方式相关信息的 PaymentData 对象实现 Promise

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

现在,您可以使用此付款方式信息执行实际交易。

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

到目前为止,我们已经了解了固定付款金额交易。但是,假设您希望根据所选交易的某些属性(例如,运费详情)更新价格。您可以通过在构建客户端时提供 paymentDataCallback 参数来实现此目的。此回调用于处理交易的更改并相应地应用修改。您可以监听所选送货地址、运费选项和付款方式方面的更改。在此示例中,您将监听所选运费选项的更改。首先,定义包含所有运费信息的变量,并修改 paymentDataRequest 以包含这些变量:

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

接下来,修改 googlePayClient 的创建以添加一个 paymentDataCallback,每当 callbackIntents 中包含的付款操作被修改时,系统都会调用它。此回调包含一个属性发生更改的对象。您可以利用这些更改构建更新后的付款交易:

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

回调中返回此新对象后,系统会更新付款表格中显示的信息,以反映对交易所做的修改。

现在您已经测试集成是否能充分工作,您还可以更进一步,在确定可以使用 Google Pay 后立即预提取您的付款配置。此操作发生在用户激活(点击)Google Pay 付款按钮之前。

如果您预提取了付款数据,那么当用户决定付款时,加载工作表所需的信息已准备就绪,这会显著缩短加载时间,从而改善整体体验。

此方法需要的输入与 loadPaymentData 相同。也就是说,您可以使用之前定义的同一 paymentDataRequest 对象。现在,在 isReadyToPay 返回成功后,一旦确定用户可以使用 Google Pay,您就只需调用预提取方法:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

这样,您可以在用户点击按钮之前预提取付款数据,从而缩短加载时间。提高网站的响应能力应该能提高转化率。

您已成功将 Google Pay API 集成到此 Codelab 中的示例网站或您自己的应用中。

现在,为将其投入生产环境,请务必查看集成核对清单。完成并经过审核之后,您将收到要添加到客户配置的商家标识符。同样,如果您计划使用(或已在使用)第三方付款处理方或网关,请在 Google Pay 上查看支持的提供商列表并配置您的提供商。如果您要直接与 Google Pay 集成,请参阅与本主题相关的文档部分

所学内容

  • 在您的网站中导入并配置 Google API。
  • 确定对该 API 的支持情况并采取相应的措施。
  • 添加一个按钮,以便用户通过 Google Pay 付款。
  • 加载并处理之前存储的用户付款信息。
  • 通过预提取付款信息来优化加载时间。

后续步骤

  • 详细了解 Google Pay
  • 查看集成核对清单并获取商家标识符。
  • 查看这两种不同类型的集成,并确定哪种集成更适合您:直接集成,还是使用支付网关或处理方。
  • 设置授权付款用于启动付款流程并确认付款的授权状态。(授权或拒绝)

了解详情

您觉得这有用吗?

非常有用! 勉强符合预期。 没用。

您想要了解其他 Codelab 来帮助您完成其他类型的集成(Android、直接集成、会员卡 API)吗?

我想要,太棒了! 我对现状很满意。