17370845950

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 更稳妥

真正容易被忽略的一点：无论用哪种方式，**支付金额、商品描述、用户身份等关键业务参数绝不能只信前端传来的值**——后端必须重新查库校验订单状态、价格、库存，否则会被恶意篡改。