付款交易的生命周期

了解商家如何集成付款应用以及付款交易的运作方式 使用 Payment Request API。

Eiji Kitamura
Milica Mihajlija
Milica Mihajlija
X GitHub 首页

Web Payments API 是浏览器内置的专用付款功能 我们第一次开发这个应用借助 Web Payments，商家可与付款应用集成 打造更简洁的体验，同时简化客户体验并提升安全性。

要详细了解使用 Web Payments 的好处，请参阅让 付款应用。

本文将向您介绍商家网站上的付款交易和 有助于您了解付款应用集成的工作原理。

该流程包含 6 个步骤：

  1. 商家发起付款交易。
  2. 商家会显示一个付款按钮。

  3. 客户按一下付款按钮。

    显示有 BobPay（付款应用）按钮的奶酪店网站的示意图。

  4. 浏览器会启动付款应用。

    显示以模态形式启动 BobPay 应用的奶酪店网站示意图。模态窗口会显示运费选项和总费用。

  5. 如果客户更改了任何详细信息（如送货方式或其 地址），商家会更新交易详情以反映这一更改。

    一张图，显示了客户在 BobPay 应用模态窗口中选择其他配送选项。第二个图表显示商家更新 BobPay 中显示的总费用。

  6. 客户确认购买后，商家会验证付款 并完成交易

    显示客户按

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

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

  • 处理交易所需的可接受付款方式及其数据。
  • 总价（必填）和商品相关信息等详细信息。
  • 供商家用来请求运费信息（例如运费）的选项 地址和送货方式
  • 商家还可以请求提供账单邮寄地址、付款人姓名、电子邮件地址和 电话号码。
  • 商家还可以提供可选的运费信息 类型 （shipping、delivery 或 pickup）在 PaymentRequest 中。付款应用 可以以此为提示，在其界面中显示正确的标签。
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 实例查询客户是否 付款应用可用。

客户是否有可用的付款应用？

通过 canMakePayment() 如果付款应用适用于 PaymentRequest，此方法会返回 true 客户的设备“可用”是指支持 付款方式，且已安装平台专用付款应用，或 基于网络的付款应用准备好 已注册。

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

第 3 步：客户按付款按钮

当客户按下付款按钮时，商家会调用 show() 方法（在 PaymentRequest 实例中立即触发 付款界面

如果最终总价是动态设置（例如，从 服务器），商家可以延迟启动付款界面，直到总金额 已知。

延迟启动付款界面

观看演示延迟付款 界面中更新显示时间，直到最终总价为 确定。

为了延迟付款界面，商家会将 promise 传递给 show() 方法。 浏览器将显示一个加载指示器，直到 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 步：浏览器启动付款应用

浏览器可以启动特定于平台或基于网络的付款应用。（有关详情，请参阅 有关 Chrome 如何确定要向哪个付款应用 启动。）

付款应用的构建方式大部分由开发者决定，但 从商家发出的事件和向商家发出的事件，以及数据的结构 都是标准化的

付款应用启动后，会收到交易 信息 PaymentRequest 对象，其中包括以下内容：

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

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

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

客户可以选择更改付款等交易详情 付款方式和送货选项。当客户进行更改时 商家收到更改事件并更新交易详情。

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

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

付款方式更改事件

付款应用可以支持多种付款方式，商家可能会提供 具体取决于客户的选择。为了介绍这个应用场景 付款方式更改事件可以告知商家新付款 方法，以便使用折扣更新总价并将其退回 返回付款应用。

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

送货地址更改事件

付款应用可以视情况提供客户的送货地址。这是 因为他们无需手动输入任何详细信息 表单的形式 将送货地址存储在首选付款方式中 而不是在多个不同的商家网站上投放

如果客户在付款后的 4 天内在付款应用中更新了送货地址 交易已启动，系统将会发送 '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。 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();

后续步骤