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