设置付款方式

若要使用 Web Payments 进行付款交易,系统首先会发现您的付款应用。了解如何设置付款方式并让您的付款应用为商家和客户付款做好准备。

若要与 Payment Request API 搭配使用,付款应用必须与付款方式标识符相关联。希望与付款应用集成的商家将使用付款方式标识符向浏览器表明。本文介绍了付款应用发现的工作原理,以及如何配置付款应用以使其被浏览器正确发现和调用。

如果您刚开始接触 Web 付款的概念或通过付款应用付款交易的工作原理,请先阅读以下文章:

浏览器支持

Web Payments 包含一些不同的技术,支持状态取决于浏览器。

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

浏览器如何发现付款应用

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

  • 基于网址的付款方式标识符
  • 付款方式清单(第三方提供付款方式标识符的情况除外)
  • Web 应用清单
示意图:浏览器如何通过基于网址的付款方式标识符发现付款应用

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

  1. 浏览器向付款方式标识符网址发送请求,并提取付款方式清单
  2. 浏览器从付款方式清单中确定 Web 应用清单网址,并提取 Web 应用清单。
  3. 浏览器会根据 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_applicationssupported_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 用于确定当操作系统提供的付款应用和基于网络的付款应用均可使用时,应启动哪个付款应用。
重要的 Web 应用清单字段
带有图标的付款应用。
付款应用标签和图标。

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

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

启动平台专用付款应用

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

  • related_applications 字段在 Web 应用清单中指定,并且:
    • 已安装应用的软件包 ID 与签名匹配,而 Web 应用清单中的最低版本 (min_version) 低于或等于已安装应用的版本。
  • 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 中,当调用 PaymentRequestshow() 方法时,Payment Request API 会显示由浏览器提供的界面,称为“Payment Request UI”。通过此界面,用户可以选择付款应用。在付款请求界面中按继续按钮后,系统会启动所选的付款应用。

在启动付款应用之前,付款请求界面会进行干预。

在启动付款应用之前显示付款请求界面会增加用户完成付款所需的步骤数。为了优化该流程,浏览器可以将这些信息的执行方式委托给付款应用,并直接启动付款应用,而无需在调用 show() 时显示付款请求界面。

跳过付款请求界面,直接启动付款应用。

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

  • show() 通过用户手势(例如鼠标点击)触发。
  • 只有一个付款应用:
    • 支持所请求的付款方式标识符。

基于网络的付款应用何时会进行即时注册 (JIT) 注册?

基于 Web 的付款应用无需用户事先明确访问付款应用网站并注册 Service Worker 即可启动。当用户选择使用基于网络的付款应用付款时,可以实时注册 Service Worker。注册时间有两种变化形式:

  • 如果向用户显示了付款请求界面,应用会即时注册并在用户点击继续时启动。
  • 如果跳过了付款请求界面,则付款应用会即时注册并直接启动。如果跳过付款请求界面以启动即时注册的应用,则需要用户手势,这可以防止跨源 Service Worker 出现意外注册。

后续步骤

现在,您已让自己的付款应用可供搜索,接下来您可以了解如何开发平台专用付款应用和基于网络的付款应用。