注册基于 Web 的支付应用

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

基于 Web 的支付应用是 渐进式 Web 应用 (PWA),并在 Service Worker 之上运行。支付应用中的 Service Worker 发挥着重要作用,因为它捕获来自商家的支付请求、启动支付应用并调解与商家的通信。

要配置基于 Web 的支付应用,您需要注册可用的支付方式和 Service Worker。您可以使用 Web 应用清单以声明方式配置基于 Web 的支付应用。

浏览器支持

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

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

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

要以声明方式配置基于 Web 的支付应用,请提供 Web 应用清单

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

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

查看设置支付方式,确保您的支付方式清单正确指向您的 Web 应用清单。

即时 (JIT) 注册 Service Worker

JIT 注册仅需要提供 Web 应用清单,而无需额外的编码。如果您已经配置了 Web 应用清单并正确提供它,那么您应该一切就绪。剩下的事情将由浏览器处理。

调试基于 Web 的支付应用

在开发基于 Web 的支付应用前端时,您可能会在商家上下文和支付应用上下文之间跳转。以下调试技巧将帮助您在 Chrome 上获得更好的开发体验。

在本地服务器上开发

您使用哪个服务器进行开发?许多开发者倾向于使用 localhost 或公司内部服务器环境,这可能会带来挑战,因为浏览器中的强大功能往往需要安全环境 (HTTPS) 和有效的证书。Payment Request API 和 Payment Handler API 也不例外,localhost 或公司内部服务器通常不附带有效的证书。

好消息是,包括 Chrome 在内的一些浏览器默认情况下会免除 https://127.0.0.1 的证书。此外,在 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 设备,并测试它在移动浏览器中的工作方式。要了解如何操作,请查看访问本地服务器

从桌面开发者工具远程调试 Android Chrome 上的网站

您还可以在桌面开发者工具上调试 Android Chrome。要了解如何操作,请查看Android 设备远程调试入门

Payment Handler 事件日志记录

开发者工具可以显示 Payment Handler API 事件,以便更轻松地进行本地开发。在商家上下文中打开开发者工具,然后转到应用面板下的“Payment Handler”部分。选中“显示来自其他域的事件”,然后点击“记录”按钮,开始捕获发送到处理支付的 Service Worker 的事件。

A screenshot of Payment Handler event logging.
Payment Handler 事件日志记录。

后续步骤

下一步是了解 Service Worker 如何在运行时协调支付交易。