使用 Web Payments 完成付款交易的第一步是发现您的付款应用。了解如何设置付款方式,并准备好您的付款应用,以便商家和客户进行付款。
付款应用必须与付款方式标识符相关联,才能与 Payment Request API 配合使用。想要与付款应用集成的商家将使用付款方式标识符向浏览器表明这一点。本文介绍了付款应用发现的工作原理,以及如何配置付款应用,使其可由浏览器正确发现和调用。
如果您不熟悉 Web Payments 的概念或通过付款应用完成付款交易的工作原理,请先阅读以下文章:
浏览器支持
网络付款包含几项不同的技术,支持状态因浏览器而异。
浏览器如何发现付款应用
每个付款应用都需要提供以下信息:
- 基于网址的付款方式标识符
- 付款方式清单(付款方式标识符由第三方提供的情况除外)
- Web 应用清单
![图表:浏览器如何从基于网址的付款方式标识符中发现付款应用](https://web.developers.google.cn/static/articles/setting-up-a-payment-method/image/diagram-a-browser-disco-ee5623b0facb6.png?authuser=8&hl=hu)
发现过程从商家发起交易时开始:
- 浏览器向付款方式标识符网址发送请求,并提取付款方式清单。
- 浏览器从付款方式清单中确定 Web 应用清单网址,并提取 Web 应用清单。
- 浏览器通过 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
标头,该标头指向另一个可供浏览器提取付款方式清单的网址。如果付款方式清单托管在其他服务器上,或付款应用由第三方提供,这种做法非常有用。
将付款方式服务器配置为以包含 rel="payment-method-manifest"
属性和付款方式清单网址的 HTTP Link
标头进行响应。
例如,如果清单位于 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 应用清单中描述的信息也用于定义付款应用在付款请求界面中的显示方式。
属性名称 | 说明 |
---|---|
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
|
用于确定当操作系统提供的付款应用和基于网络的付款应用均可用时要启动哪个付款应用。 |
![带有图标的付款应用。](https://web.developers.google.cn/static/articles/setting-up-a-payment-method/image/payment-app-an-icon-3150130974ec9.png?authuser=8&hl=hu)
Web 应用清单的 name
属性用作付款应用名称,icons
属性用作付款应用图标。
Chrome 如何确定要启动哪个付款应用
发布平台专用付款应用
如需启动平台专用付款应用,必须满足以下条件:
related_applications
字段在 Web 应用清单中指定,并且:- 已安装应用的软件包 ID 和签名匹配,但 Web 应用清单中的最低版本 (
min_version
) 小于或等于已安装应用的版本。
- 已安装应用的软件包 ID 和签名匹配,但 Web 应用清单中的最低版本 (
prefer_related_applications
字段为true
。- 安装了平台专用付款应用,该应用具有:
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"
}
浏览器通过向 Service Worker 发送 paymentrequest
事件来启动基于网络的付款应用。Service Worker 无需提前注册。可以即时注册。
了解特殊优化
浏览器如何跳过付款请求界面而直接启动付款应用
在 Chrome 中,调用 PaymentRequest
的 show()
方法时,Payment Request API 会显示浏览器提供的界面,称为“Payment Request UI”。此界面允许用户选择付款应用。按下付款请求界面中的继续按钮后,所选的付款应用即会启动。
在启动付款应用之前显示付款请求界面会增加用户完成付款所需的步骤。为了优化该流程,浏览器可以在调用 show()
时将信息的执行委托给付款应用,并直接启动付款应用,而不显示付款请求界面。
如需直接启动付款应用,必须满足以下条件:
show()
通过用户手势(例如点击鼠标)触发。- 只有一个付款应用需要满足以下条件:
- 支持请求的付款方式标识符。
基于网络的付款应用何时可以即时注册 (JIT)?
用户无需事先明确访问付款应用网站并注册 Service Worker,即可启动基于网络的付款应用。当用户选择使用基于网络的付款应用付款时,Service Worker 可以即时注册。注册时间有两种变体:
- 如果向用户显示了付款请求界面,则应用会即时注册,并在用户点击 Continue 时启动。
- 如果跳过付款请求界面,付款应用会即时注册并直接启动。跳过付款请求界面以启动即时注册应用需要用户手势,这样可以防止跨源 Service Worker 意外注册。
后续步骤
现在,您已经确定了您的付款应用可被发现,接下来,请了解如何开发特定于平台的付款应用和基于网络的付款应用。