此页面由 Cloud Translation API 翻译。

设置付款方式

使用 Web Payments 完成付款交易的第一步是发现您的付款应用。了解如何设置付款方式和获取付款应用方便商家和客户付款

Eiji Kitamura

若要与 Payment Request API 配合使用，付款应用必须与付款方式标识符。希望与付款应用集成的商家将使用付款方式标识符向浏览器指明这一点。这个文章介绍了付款应用发现的工作原理，以及如何在让浏览器正确发现和调用付款应用。

如果您刚开始了解 Web Payments 的概念或付款交易的运作方式付款应用，请先阅读以下文章：

浏览器支持

Web Payments 由多种不同的技术和具体取决于浏览器

	Chromium		Safari		Firefox
	桌面设备	Android	桌面设备	移动设备	桌面设备/移动设备
Payment Request API	✔	✔	✔	✔
Payment Handler API	✔	✔
iOS/Android 付款应用	✔	✔	✔*	✔*

浏览器如何发现付款应用

每个付款应用都需要提供以下信息：

基于网址的付款方式标识符
付款方式清单（付款方式标识符由第三方提供）
Web 应用清单

发现过程从商家发起交易时开始：

浏览器向付款方式 identifier 网址和提取付款方式清单。
浏览器确定清单网址，付款方式清单，并获取 Web 应用清单。
浏览器确定是启动操作系统付款应用还是基于网络的付款应用。

以下部分将详细介绍如何设置自己的付款方式，让浏览器能够发现它

第 1 步：提供付款方式标识符

一种付款方式标识符是一个基于网址的字符串。例如，Google Pay 的标识符是 https://google.com/pay。付款应用开发者可以选择任何网址作为付款方式方法标识符，前提是它们能够控制方法标识符，并且可以任意提供内容。在本文中，我们将使用 https://bobbucks.dev/pay 作为付款方式标识符。

商家如何使用付款方式标识符

使用付款方式列表构建 PaymentRequest 对象用于标识付款的标识符以及商家决定接受的应用付款方式标识符已设置为一个值 supportedMethods 属性。例如：

[商家] 要求付款：

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

第 2 步：提供付款方式清单

付款方式清单是 JSON 文件，用于定义哪个付款应用可以使用此付款方式。

提供付款方式清单

当商家发起付款交易时，浏览器会发送 HTTP 向付款方式标识符网址发出的 GET 请求。服务器返回付款方式清单正文。

付款方式清单包含两个字段：default_applications 和 supported_origins。

。

付款方式清单字段
属性名称	说明
`default_applications`（必需）	指向 Web 应用清单（其中显示付款功能）的一系列网址托管应用（该网址可以是相对网址）。此数组属于预期类型来引用开发清单、生产清单等。
`supported_origins`	指向可能托管第三方的源的一系列网址实现相同付款方式的付款应用。请注意方法可通过多个付款应用实现。

付款方式清单文件应如下所示：

[付款处理程序] /payment-manifest.json：

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

当浏览器读取 default_applications 字段时，会找到指向受支持应用的 Web 应用清单的链接付款应用。

（可选）路由浏览器以在其他位置查找付款方式清单

付款方式标识符网址可以选择使用 Link 标头进行响应指向另一个网址，浏览器可通过该网址提取付款方式清单。如果付款方式清单托管在其他或由第三方提供付款应用的情况。

浏览器如何通过重定向通过基于网址的付款方式标识符发现付款应用

将付款方式服务器配置为以 HTTP Link 标头进行响应，其中包含 rel="payment-method-manifest" 属性和付款方式清单网址。

例如，如果清单位于 https://bobbucks.dev/payment-manifest.json，响应标头将包括：

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

该网址可以是完全限定域名，也可以是相对路径。检查 https://bobbucks.dev/pay/ 表示网络流量，以查看示例。您可以使用 curl 命令，请执行以下操作：

curl --include https://bobbucks.dev/pay

第 3 步：提供 Web 应用清单

Web 应用清单是它定义了一个 Web 应用。它是一种广泛使用的清单文件定义渐进式 Web 应用 (PWA)。

典型的 Web 应用清单如下所示：

[付款处理程序] /manifest.json：

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

Web 应用清单中描述的信息也可用于定义付款应用。

。

重要的 Web 应用清单字段
属性名称	说明
`name`（必需）	用作付款应用的名称。
`icons`（必需）	用作付款应用图标。只有 Chrome 会使用这些图标；其他如果您没有将它们指定为部分。
`serviceworker`	用于检测作为基于网络的付款运行的 Service Worker 应用。
`serviceworker.src`	从中下载 Service Worker 脚本的网址。
`serviceworker.scope`	表示网址的字符串，该网址定义了 Service Worker 的注册范围。
`serviceworker.use_cache`	从中下载 Service Worker 脚本的网址。
`related_applications`	用于检测充当操作系统提供的付款应用的应用。有关详情，请访问 Android 付款应用开发者指南。
`prefer_related_applications`	用于确定当操作系统提供的付款应用和基于网络的付款应用均可用时要启动哪个付款应用。

</ph>

</ph> 付款应用标签和图标。

Web 应用清单的 name 属性用作付款应用名称 icons 属性用作付款应用图标。

Chrome 如何确定要启动哪个付款应用

发布平台专用付款应用

如需启动平台专用付款应用，必须满足以下条件：

related_applications 字段在 Web 应用清单中指定，并且： <ph type="x-smartling-placeholder">
- 已安装应用的软件包 ID 和签名一致，而最低数量要求版本 (min_version) 低于或等于已安装应用的版本。
prefer_related_applications 字段为 true。
平台专用付款应用已安装，并且具有： <ph type="x-smartling-placeholder">
- org.chromium.action.PAY 的 intent 过滤器。
- 指定为 org.chromium.default_payment_method_name 属性的值的付款方式标识符。

请参阅 Android 付款应用：开发者指南，详细了解如何设置这些代码。

[付款处理程序] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

如果浏览器确定特定于平台的付款应用可用，发现流程在此处终止。否则，将继续执行下一个步骤 -- 。

启动基于网络的付款应用

您应在 Web 应用清单的 serviceworker 字段中指定基于网络的付款应用。

[付款处理程序] /manifest.json：

"serviceworker": {
  "src": "payment-handler.js"
}

浏览器通过发送 paymentrequest 来启动基于网络的付款应用事件传递给 Service Worker。Service Worker 并非必须注册。可以即时注册。

了解特殊优化

浏览器如何跳过付款请求界面而直接启动付款应用

在 Chrome 中，调用 PaymentRequest 的 show() 方法时， Request API 显示由浏览器提供的界面，称为“Payment Request UI”。这个界面允许用户选择付款应用。按继续按钮后在付款请求界面中，将启动所选的付款应用。

</ph>

</ph> 在启动付款应用之前，Payment Request 界面会进行干预。

在启动付款应用之前显示付款请求界面会增加用户完成付款所需的步骤数。为了优化该流程浏览器可以将履行该信息的委托给付款应用，在以下情况下，直接启动付款应用而不显示付款请求界面：调用 show()。

</ph>

</ph> 跳过付款请求界面，直接启动付款应用。

如需直接启动付款应用，必须满足以下条件：

show() 通过用户手势（例如点击鼠标）触发。
只有一个付款应用符合以下条件： <ph type="x-smartling-placeholder">
- 支持请求的付款方式标识符。

。

基于网络的付款应用何时可以即时注册 (JIT)？

基于网络的付款应用程序无需用户事先明确访问即可启动访问付款应用网站并注册 Service Worker。服务可以在用户选择使用基于网络的付款应用。注册时间分为两种：

如果向用户显示了付款请求界面，则表明该应用已注册即时启动，并在用户点击 Continue 时启动。
如果跳过支付请求界面，则表示付款应用已注册并直接发布。跳过付款请求界面以启动即时注册的应用需要使用用户手势，意外注册跨域 Service Worker。

。

后续步骤

现在，您已经知道了您的付款应用，请了解如何开发特定于平台的付款应用付款应用和基于网络的付款应用。