Payment Handler API：注册支付处理程序与事件协作

--- title: Payment Handler API：注册支付处理程序与事件协作 keywords: - Payment Handler - Payment Request - Service Worker - instruments - 支付事件 description: 说明 Payment Handler 的清单与 Service Worker 配置，使站点注册为支付处理程序，与 Payment Request 协同完成支付流程，提供示例与参考。 categories: - 应用软件 - 股票网银 --- 概述 Payment Handler 允许 PWA 充当支付处理程序，被其他站点通过 Payment Request 调用完成支付。需要在清单中声明支付方法与在 Service Worker 中处理支付事件。 Manifest 与 SW 片段（示意） ```json { "name": "Example Pay", "serviceworker": { "src": "/sw.js", "scope": "/", "use_cache": false }, "payment": { "supported_delegations": ["shippingAddress"], "supported_payment_methods": [ { "supportedMethods": "https://payments.example.com/method" } ] } } ``` ```js // sw.js self.addEventListener('paymentrequest', e => { e.respondWith((async () => { // 处理支付数据与用户交互，返回结果 return { methodName: e.methodData[0].supportedMethods, details: { status: 'success' } } })()) }) ``` 工程建议 - 安全与合规：遵循支付服务商文档与政策；在安全上下文与用户手势下处理支付。 - UX：清晰的支付确认与错误提示；在失败时回退到备用方式。 - 兼容：不支持平台使用常规 Payment Request 或第三方 SDK。 参考与验证 - MDN Payment Handler 文档：https://developer.mozilla.org/docs/Web/API/Payment_Request_API/Payment_Handler_API - Chrome 平台文档：https://developer.chrome.com/docs/web-platform/payment-handler/