Payment Request API 实战：支付流程与兼容回退

---

title: Payment Request API 实战：支付流程与兼容回退

keywords:

• Payment Request API
• 支付流程
• 兼容回退
• method identifiers
• shipping

description: 介绍 Payment Request API 的基本流程、支付方式标识与收货信息、错误处理与兼容回退策略，并给出示例与权威参考。

categories:

• 文章资讯
• 技术教程

---

概述

Payment Request API 提供标准化的支付流程对话框与事件回调，减少表单填写并提升 UX。不同支付方式由 method identifier 定义，需结合支付服务商文档配置。对不支持或业务不适配的场景，应回退到安全的表单/SDK 流程。

用法与示例

const methodData = [
  { supportedMethods: 'https://payments.example.com/method', data: { merchantId: 'demo' } }
]

const details = {
  total: { label: 'Total', amount: { currency: 'USD', value: '29.99' } },
  displayItems: [ { label: 'Item', amount: { currency: 'USD', value: '29.99' } } ]
}

const options = { requestPayerEmail: true, requestShipping: true }
const request = new PaymentRequest(methodData, details, options)

request.addEventListener('shippingaddresschange', e => {
  e.updateWith(Promise.resolve(details))
})

try {
  const resp = await request.show()
  // 发送 resp.details 到服务端完成支付验证
  await fetch('/pay', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(resp) })
  await resp.complete('success')
} catch (err) {
  // 回退到表单或第三方 SDK
}

工程建议

• method identifiers：遵循支付服务商文档配置；弃用的 basic-card 不再使用。
• 错误与回退：处理用户取消与异常，保持安全表单/SDK 回退路径。
• 体验与合规：透明展示价格与税费；确保数据传输与收集合规。
• 兼容：特性检测后启用；在不支持浏览器上提供备用入口。

参考与验证

• W3C Payment Request 规范：https://www.w3.org/TR/payment-request/
• MDN Payment Request API 文档：https://developer.mozilla.org/docs/Web/API/Payment_Request_API
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/payment-request/