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

概述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_APIChrome 平台文档：https://developer.chrome.com/docs/web-platform/payment-request/