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 片段（示意）

{
  "name": "Example Pay",
  "serviceworker": { "src": "/sw.js", "scope": "/", "use_cache": false },
  "payment": {
    "supported_delegations": ["shippingAddress"],
    "supported_payment_methods": [
      { "supportedMethods": "https://payments.example.com/method" }
    ]
  }
}

// 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/