注册基于网络的付款应用

了解如何在注册期间配置基于 Web 的支付应用。

Eiji Kitamura

基于网络的支付应用是渐进式 Web 应用 (PWA)，在服务工作线程之上运行。支付应用中的服务工作线程发挥着重要作用，因为它会捕获来自商家的付款请求、启动支付应用并协调与商家的通信。

如需配置基于 Web 的支付应用，您需要注册可用的支付方式和服务工作器。您可以使用 Web 应用清单以声明方式配置基于 Web 的支付应用。

浏览器支持

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

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

使用 Web 应用清单配置支付应用

如需以声明方式配置基于 Web 的支付应用，请提供 Web 应用清单。

Web 应用清单中的以下属性与基于 Web 的支付应用相关：

  • name
  • icons
  • serviceworker
    • src
    • scope
    • use_cache

请参阅设置支付方式，确保您的支付方式清单正确指向您的 Web 应用清单。

即时 (JIT) 注册 Service Worker

JIT 注册仅需要提供Web 应用清单，无需额外编码。如果您已配置 Web 应用清单并正确提供该清单，则一切就绪。浏览器会处理其余事宜。

调试基于网络的支付应用

在开发基于 Web 的支付应用前端时，您可能会在商家上下文和支付应用上下文之间切换。以下调试提示有助于提升您在 Chrome 上的开发体验。

在本地服务器上开发

您使用哪个服务器进行开发？许多开发者倾向于使用 localhost 或公司内部服务器环境，但这样做可能会遇到一些问题，因为浏览器中的强大功能往往需要安全环境 (HTTPS) 和有效证书。Payment Request API 和基于 Web 的 Payment Handler API 也不例外，localhost 或公司内部服务器通常没有有效的证书。

好消息是，某些浏览器（包括 Chrome）默认情况下会免除 http://localhost 的证书要求。此外，在 Chrome 中，您还可以通过启动 Chrome 实例来免除证书要求。例如，如需免除 http://*.corp.company.com 的要求，请使用以下标志：

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Windows

chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

如需详细了解如何使用运行时标志运行 Chrome，请参阅使用标志运行 Chromium。

转发本地服务器的端口

您可以使用 Chrome 的开发者工具将本地 Web 服务器端口转发到 Android 设备，并从移动浏览器测试其运行情况。如需了解具体操作方法，请参阅访问本地服务器。

从桌面版 DevTools 远程调试 Android Chrome 中的网站

您还可以在桌面版开发者工具中调试 Android 版 Chrome。如需了解具体操作方法，请参阅 Android 设备的远程调试入门。

付款处理程序事件日志记录

开发者工具可以显示基于 Web 的 Payment Handler API 事件，以便更轻松地进行本地开发。在商家上下文中打开开发者工具，然后前往应用窗格下的“付款处理程序”部分。选中“显示其他网域的事件”，然后点击“记录”按钮，开始捕获发送到处理付款的服务工作线程的事件。

基于 Web 的付款处理脚本事件日志记录的屏幕截图。
基于网络的 Payment Handler 事件日志记录。

后续步骤

下一步是了解服务工作线程如何在运行时协调付款交易。