感谢您关注 Google I/O 大会！观看点播内容。

Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

付款交易的生命周期

了解商家如何集成支付应用，以及支付交易如何通过 Payment Request API 进行。

Eiji Kitamura

Milica Mihajlija

Web Payments API 是首次内置于浏览器中的专用支付功能。借助 Web Payments，商家与支付应用的集成变得更加简单，同时客户体验也变得更加顺畅和安全。

如需详细了解使用 Web Payments 的好处，请参阅通过 Web Payments 赋能支付应用。

本文将引导您完成商家网站上的付款交易，并帮助您了解支付应用集成的工作原理。

该流程包含 6 个步骤：

商家发起支付交易。
商家显示付款按钮。
客户按下付款按钮。
浏览器启动支付应用。
如果客户更改了任何详细信息（例如配送选项或地址），商家会更新交易详情以反映相应更改。
客户确认购买后，商家会验证付款并完成交易。

第 1 步：商家发起支付交易

当客户决定购买时，商家会通过构建 PaymentRequest 对象来发起付款交易。此对象包含有关交易的重要信息：

可接受的支付方式及其用于处理交易的数据。
详细信息，例如总价（必填）和商品信息。
商家可以请求提供送货地址和送货选项等送货信息的选项。
商家还可以请求获取账单邮寄地址、付款人姓名、电子邮件地址和电话号码。
商家还可以在 PaymentRequest 中添加可选的配送类型（shipping、delivery 或 pickup）。支付应用可以将其用作提示，在其界面中显示正确的标签。

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

包含交易 ID

某些付款处理方可能要求商家提供他们提前签发的交易 ID，作为交易信息的一部分。典型的集成包括商家服务器与付款处理方服务器之间的通信，以预留总价。这样可以防止恶意客户在交易结束时通过验证来操纵价格并欺骗商家。

商家可以将交易 ID 作为 PaymentMethodData 对象的 data 属性的一部分进行传递。

在提供交易信息后，浏览器会根据支付方式标识符，在 PaymentRequest 中指定的支付应用中执行发现流程。这样，浏览器就可以在商家准备好继续交易时立即确定要启动的支付应用。

如需详细了解发现流程的运作方式，请参阅设置支付方式。

第 2 步：商家显示付款按钮

商家可以支持多种支付方式，但应仅显示客户实际可以使用的支付方式的支付按钮。显示无法使用的付款按钮会带来糟糕的用户体验。如果商家可以预测 PaymentRequest 对象中指定的支付方式不适用于客户，则可以提供后备解决方案，或者根本不显示该按钮。

使用 PaymentRequest 实例，商家可以查询客户是否可以使用支付应用。

客户是否可以使用支付应用？

如果客户的设备上有可用的支付应用，PaymentRequest 的 canMakePayment() 方法会返回 true。“可用”表示已发现支持该支付方式的支付应用，并且已安装平台专用支付应用，或者基于 Web 的支付应用已准备好注册。

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

第 3 步：客户按下付款按钮

当客户按下付款按钮时，商家会调用 PaymentRequest 实例的 show() 方法，该方法会立即触发付款界面的启动。

如果最终总价是动态设置的（例如，从服务器检索），商家可以推迟启动付款界面，直到知道总价。

推迟启动付款界面

查看推迟显示付款界面直到确定最终总价的演示。

为了延迟显示付款界面，商家会向 show() 方法传递一个 promise。浏览器会显示加载指示器，直到 promise 解析且交易准备好开始。

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

如果未指定 promise 作为 show() 的参数，浏览器将立即启动付款界面。

第 4 步：浏览器启动支付应用

浏览器可以启动特定于平台的支付应用或基于 Web 的支付应用。（您可以详细了解 Chrome 如何确定要启动哪个支付应用。）

支付应用的构建方式在很大程度上取决于开发者，但与商家之间来回发出的事件以及随这些事件传递的数据的结构都是标准化的。

支付应用启动后，会收到在第 1 步中传递给 PaymentRequest 对象的交易信息，其中包括：

支付方式数据
总价
付款方式

支付应用会使用交易信息来标记其界面。

第 5 步：商家如何根据客户的操作更新交易详情

客户可以选择在支付应用中更改交易详情，例如支付方式和配送选项。当客户做出更改时，商家会收到更改事件并更新交易详情。

商家可以接收四种类型的事件：

支付方式变更事件
送货地址更改事件
配送选项更改事件
商家验证事件

支付方式变更事件

支付应用可以支持多种支付方式，商家可能会根据客户的选择提供特别折扣。为了涵盖此用例，支付方式更改事件可以向商家告知新的支付方式，以便商家可以更新总价（应用折扣）并将其返回给支付应用。

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

送货地址更改事件

支付应用可以选择提供客户的送货地址。这对于客户来说非常方便，因为他们无需在表单中手动输入任何详细信息，并且可以将送货地址存储在他们首选的支付应用中，而不是存储在多个不同的商家网站上。

如果客户在交易发起后在支付应用中更新了其送货地址，系统会向商家发送 'shippingaddresschange' 事件。此事件可帮助商家根据新地址确定运费、更新总价，并将其返回给支付应用。

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

如果商家无法将商品配送到更新后的地址，则可以通过向返回给支付应用的交易详情添加错误参数来提供错误消息。

配送选项更改事件

商家可以向客户提供多种配送选项，并可将该选择委托给支付应用。配送选项会显示为价格和服务名称列表，供客户选择。例如：

标准配送 - 免费
极速配送 - 5 美元

当客户在支付应用中更新配送选项时，系统会向商家发送 'shippingoptionchange' 事件。然后，商家可以确定运费、更新总价，并将其返回给支付应用。

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

商家还可以根据客户的送货地址动态修改配送选项。如果商家希望为国内和国际客户提供不同的配送选项，此功能会非常有用。

商家验证事件

为了提高安全性，支付应用可以在进入付款流程之前执行商家验证。验证机制的设计取决于支付应用，但商家验证事件用于告知商家可用于验证自身的网址。

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

第 6 步：商家验证付款并完成交易

当客户成功授权付款后，show() 方法会返回一个解析为 PaymentResponse 的 promise。PaymentResponse 对象包含以下信息：

付款结果详情
送货地址
运费选项
联系信息

此时，浏览器界面可能仍会显示加载指示器，这意味着交易尚未完成。

如果支付应用因付款失败或错误而终止，则从 show() 返回的 promise 会拒绝，并且浏览器会终止付款交易。

处理和验证付款

PaymentResponse 中的 details 是支付应用返回的付款凭据对象。商家可以使用该凭据来处理或验证付款。这一关键流程的运作方式取决于付款处理方。

完成或重试交易

在确定交易成功或失败后，商家可以执行以下任一操作：

调用 .complete() 方法以完成交易并关闭加载指示器。
通过调用 retry() 方法让客户重试。

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

后续步骤

如需详细了解如何声明支付方式标识符，请参阅设置支付方式。
如需了解如何构建平台专用支付应用，请参阅 Android 支付应用开发者指南。
如需了解如何构建基于 Web 的支付应用，请参阅基于 Web 的支付应用开发者指南。