设置付款方式

使用 Web Payments 的支付交易从发现您的支付应用开始。了解如何设置支付方式，并让您的支付应用做好准备，以便商家和客户进行支付。

Eiji Kitamura

发布时间：2017 年 9 月 27 日，上次更新时间：2026 年 10 月 16 日

如需与 Payment Request API 搭配使用，支付应用必须与支付方式标识符相关联。想要与支付应用集成的商家将使用支付方式标识符向浏览器表明这一点。本文介绍了支付应用发现功能的工作原理，以及如何配置支付应用，以便浏览器能够正确发现和调用该应用。

如果您不熟悉 Web Payments，请先阅读 Web Payments 概览。

支付应用类型

Android 支付应用、基于 Web 的支付应用或两者均可支持某种支付方式：

  • Android 支付应用：Chrome 使用 Android intent 启动的安装式应用。Chrome 会验证应用的软件包名称和签名证书。
  • 基于 Web 的支付应用：Chrome 在模态窗口中启动的 Service Worker。用户无需安装任何程序。

Android 支付应用可在 Android 版 Chrome 和 WebView 中使用。 基于 Web 的支付应用可在所有平台上的 Chrome 中使用，但无法在 WebView 中使用。

如果某种支付方式同时支持这两种应用类型，并且您的 Web 应用清单将 prefer_related_applications 设置为 true，Chrome 会隐藏基于 Web 的支付应用。否则，用户可能会在 Payment Request 界面中同时看到这两种应用，并需要在它们之间进行选择。

浏览器支持

Web Payments 由几种不同的技术组成，支持状态取决于浏览器。

Chromium Safari Firefox
桌面设备 Android 桌面设备 移动设备 桌面设备/移动设备
Payment Request API ✔ ✔ ✔ ✔
基于 Web 的 Payment Handler API ✔ ✔
iOS/Android 支付应用 ✔ ✔ ✔* ✔*

浏览器如何发现支付应用

每个支付应用都需要提供以下内容：

  • 基于网址的支付方式标识符
  • 支付方式清单（支付方式标识符由第三方提供的情况除外）
  • Web 应用清单
图表：浏览器如何通过基于网址的支付方式标识符发现支付应用

当商家发起交易时，发现流程便会启动：

  1. 浏览器向支付方式标识符网址发送请求，并提取支付方式清单。
  2. 浏览器会根据支付方式清单确定 Web 应用清单网址，并提取 Web 应用清单。
  3. 浏览器会根据 Web 应用清单确定是启动操作系统支付应用还是基于 Web 的支付应用。

以下部分将详细介绍如何设置您自己的支付方式，以便浏览器可以发现它。

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

支付方式标识符是基于网址的字符串。例如，Google Pay 的标识符为 https://google.com/pay。支付应用开发者可以选择任何网址作为支付方式标识符，只要他们可以控制该网址，并且可以提供任意内容和 HTTP 标头。在本文中，我们将使用 https://bobbucks.dev/pay 作为支付方式标识符。

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

PaymentRequest 对象由支付方式标识符列表构成，这些标识符用于标识商家决定接受的支付应用。支付方式标识符会设置为 supportedMethods 属性的值。例如：

[merchant] 请求付款：

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

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

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

提供支付方式清单

当商家发起支付交易时，浏览器会向支付方式标识符网址发送 HTTP HEAD 请求。支付方式标识符网址会返回一个 Link HTTP 标头，该标头指向浏览器可从中提取支付方式清单的网址。

将支付方式服务器配置为使用 HTTP Link 标头进行响应，该标头包含 rel="payment-method-manifest" 属性和支付方式清单网址。例如，如果清单位于 https://bobbucks.dev/pay/payment-manifest.json，则响应标头将包含：

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

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

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

接下来，浏览器会向支付方式清单网址发送 HTTP GET 请求。服务器会返回支付方式清单正文。

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

属性名称 说明
default_applications（必需） 一个网址数组，指向托管支付应用的 Web 应用清单。（网址可以是相对路径）。此数组应引用开发清单、生产清单等。
supported_origins 一个网址数组，指向可能托管实现相同支付方式的第三方支付应用的源。请注意，一种支付方式可由多个支付应用实现。
支付方式清单字段

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

[payment handler] /payment-manifest.json:

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

当浏览器读取 default_applications 字段时，会找到一个链接列表，其中包含指向受支持支付应用的 Web 应用清单的链接。

第 3 步：提供 Web 应用清单

顾名思义，Web 应用清单用于定义 Web 应用。这是一个广泛使用的清单文件，用于定义渐进式 Web 应用 (PWA)。

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

[payment handler] /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
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "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"
        }
      ]
    }
  ]
}

Chrome 会根据支付应用的类型读取不同的字段。对于 Android 支付应用，Chrome 仅读取 related_applications。对于基于 Web 的支付应用，Chrome 会读取 name、icons、serviceworker、payment 和 prefer_related_applications。

属性名称 说明
name（必填） 用作支付应用名称。
icons（必填） 用作支付应用图标。只有 Chrome 会使用这些图标；如果您未将这些图标指定为支付方式的一部分，其他浏览器可能会将其用作后备图标。
serviceworker 仅限基于 Web 的支付应用。定义作为支付应用运行的 Service Worker。
serviceworker.src 用于下载 Service Worker 脚本的网址。
serviceworker.scope 一个字符串，表示定义 Service Worker 注册范围的网址。
serviceworker.use_cache 浏览器在提取 Service Worker 脚本时是否可以使用其 HTTP 缓存。
payment.supported_delegations 仅限基于 Web 的支付应用。支付应用可以提供的配送信息和联系信息：shippingAddress、payerName、payerEmail 或 payerPhone。Android 支付应用则在 AndroidManifest.xml 中声明此信息。
related_applications 仅限 Android 支付应用。标识应用及其签名证书。如需了解更多详细信息，请参阅 Android 支付应用开发者指南。
prefer_related_applications 设置为 true 可在安装 Android 支付应用后隐藏基于 Web 的支付应用。
重要的 Web 应用清单字段

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

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

启动平台专属支付应用

如需启动特定于平台的支付应用，必须满足以下条件：

  • related_applications 字段在 Web 应用清单中指定，并且：
    • 安装式应用的软件包 ID 和签名匹配，且 Web 应用清单中的最低版本 (min_version) 小于或等于安装式应用的版本。
  • 已安装平台专用支付应用，并且该应用具有：
    • org.chromium.intent.action.PAY 的 intent 过滤器。
    • 指定为 org.chromium.default_payment_method_name 属性值的支付方式标识符。

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

[payment handler] /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"
  }]
}]

如果 prefer_related_applications 为 true 且平台专用支付应用可用，Chrome 会隐藏基于 Web 的支付应用。否则，Chrome 还会查找基于 Web 的支付应用。

启动基于 Web 的支付应用

应在 Web 应用清单的 serviceworker 字段中指定基于 Web 的支付应用。

[payment handler] /manifest.json:

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

浏览器通过向 Service Worker 发送 paymentrequest 事件来启动基于 Web 的支付应用。无需提前注册 Service Worker。可以即时注册。

了解特殊优化

浏览器如何跳过 Payment Request 界面并直接启动支付应用

在 Chrome 中，当调用 PaymentRequest 的 show() 方法时，Payment Request API 会显示浏览器提供的界面，称为“Payment Request 界面”。此界面允许用户选择支付应用。在 Payment Request 界面中按下继续按钮后，系统会启动所选的支付应用。

Payment Request 界面会在启动支付应用之前进行干预。

在启动支付应用之前显示 Payment Request 界面会增加用户完成付款所需的步骤数。为了优化流程，浏览器可以将这些信息的填写委托给支付应用，并在调用 show() 时直接启动支付应用，而无需显示 Payment Request 界面。

跳过 Payment Request 界面，直接启动支付应用。

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

  • show() 是通过用户手势（例如鼠标点击）触发的。
  • 只有一款支付应用：
    • 支持请求的支付方式标识符。
    • 支持商家要求的所有配送信息和联系信息。

何时会即时 (JIT) 注册基于 Web 的支付应用？

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

  • 如果向用户显示了 Payment Request 界面，则应用会即时注册，并在用户点击继续时启动。
  • 如果跳过 Payment Request 界面，支付应用会即时注册并直接启动。跳过 Payment Request 界面以启动即时注册的应用需要用户手势，这可防止意外注册跨域 Service Worker。

构建基于 Web 的支付应用

当商家调用 show() 时，Chrome 会向您的 Service Worker 发送 paymentrequest 事件。在 respondWith() 内调用 openWindow() 以显示付款界面，然后使用付款响应进行解析。

如需了解完整的 API，请参阅 MDN 上的基于 Web 的 Payment Handler API。

后续步骤