PaymentRequest 是浏览器原生的 W3C 标准接口，用于调起系统级支付 UI（如 Apple Pay），仅收集加密支付凭证，不处理扣款；真实交易必须由后端调用 Stripe 等服务商完成。
JavaScript 本身没有内置的“支付请求 API”作为通用支付网关，但浏览器原生支持 PaymentRequest 接口——它是 W3C 标准，用于调起用户设备上的支付界面（如 Apple Pay、Google Pay、Samsung Pay 或银行卡保存信息），**不直接处理资金转账，也不替代 Stripe/PayPal 等服务商的后端集成**。
什么是 PaymentRequest？它能做什么、不能做什么？
这是一个浏览器提供的、面向用户侧的标准化支付弹窗接口。它只负责收集用户确认的支付凭证（如 tokenized card info），不接触卡号明文，也不发起扣款。
- ✅ 能：唤起系统级支付 UI、校验收货地址/联系方式、返回加密后的支付方法数据（如
token或instrumentKey） - ❌ 不能：直接向银行扣款、处理退款、管理订阅、验证订单金额合法性（这些必须由你自己的后端完成）
- ⚠️ 注意：
PaymentRequest在 Safari（iOS/macOS）、Chrome（Android/Desktop）、Edge 中支持较好；Firefox 不支持；且仅在https或localhost下可用
怎样用 PaymentRequest 发起一次前端支付请求？
核心是构造一个 PaymentRequest 实例并调用 .show()。你需要提前准备好商品明细、支持的支付方式、商家配置等。
-
methodData必须包含至少一种支付方式标识，例如"basic-card"（通用银行卡）或"https://apple.com/apple-pay" -
details中的total是唯一强制字段，displayItems和shippingOptions可选但推荐提供 - 调用
.show()后返回 Promise，成功时得到PaymentResponse对象，含response.details和response.payerEmail等
const request = new PaymentRequest([
{
supportedMethods: "basic-card",
data: {
supportedNetworks: ["visa", "mastercard"],
supportedTypes: ["credit", "debit"]
}
}
], {
total: { label: "Total", amount: { currency: "USD", value: "29.99" } },
displayItems: [
{ label: "T-Shirt", amount: { currency: "USD", value: "24.99" } },
{ label: "Tax", amount: { currency: "USD", value: "5.00" } }
]
});
request.show()
.then(response => {
console.log("支付凭证（需发给后端）：", response.details);
response.complete("success"); // 告诉浏览器支付已确认
})
.catch(err => console.error("用户取消或出错：", err));
为什么不能只靠 PaymentRequest 完成在线支付？
因为浏览器不连接银行，也不持有你的商户密钥。所有真实扣款动作必须由你控制的后端服务完成。
立即学习“Java免费学习笔记（深入）”；
-
PaymentRequest返回的response.details通常只是临时 token（如cardNumber是掩码，cardSecurityCode为空），无法直连银联/Visa - 你必须把该响应转发到自己后端，再由后端调用 Stripe、Adyen、支付宝国际版等服务商的 API 完成实际支付创建和确认
- 常见错误：试图在前端用
fetch直接调 Stripe 的/v1/payment_intents—— 这会暴露secret_key，极其危险 - 正确链路：前端 →
PaymentRequest.show()→ 得到response→POST /api/pay到你后端 → 后端用 secret key 调第三方 API → 返回结果给前端
集成第三方 SDK（如 Stripe Elements）更常用，和 PaymentRequest 是什么关系？
Stripe、PayPal、Alipay+ 等都提供自己的 JS SDK，它们内部可能调用 PaymentRequest（如 Stripe 的 stripe.paymentRequestButton()），也可能完全自研 UI。关键区别在于：
- 使用 Stripe SDK 时，你仍需后端配合创建
PaymentIntent，前端只负责收集卡信息并 confirm -
PaymentRequest是标准，但各家实现细节不同（比如 Apple Pay 要求域名绑定、证书签名），而 Stripe 封装了这些 - 如果你需要同时支持 Apple Pay + Google Pay + 本地银行卡表单，
PaymentRequest可减少重复 UI 开发；但如果只要快速上线，直接用 Stripe Elements 更稳妥
真正容易被忽略的一点：无论用哪种方式，**支付金额、商品描述、用户身份等关键业务参数绝不能只信前端传来的值**——后端必须重新查库校验订单状态、价格、库存，否则会被恶意篡改。
