Payment Request API 与 PWA 有什么关系？

2026-10-24支付阿杰

明确结论

Payment Request API 不是 PWA 的专属功能。网站不需要安装 Service Worker、提供 Web App Manifest，也不需要先由用户“安装”到设备上。

普通网站也能使用这个 API。只要页面符合浏览器的安全和调用要求，用户所用的浏览器也支持相应的支付方式，网站就能通过统一的原生支付界面收集付款信息。

PWA 更适合提供完整的应用体验，但它和 Payment Request API 之间没有强制依赖关系。

两者是什么关系

PWA 通常包括以下能力：

HTTPS
Web App Manifest
Service Worker
可安装、离线访问、后台处理等增强体验

Payment Request API 是一套独立的 Web API，用于调起浏览器提供的支付界面。网站可以通过它获取用户确认后的支付方式、账单地址或配送地址等信息，但实际扣款仍需由网站完成。

两者可以结合使用。比如，电商 PWA 可以在结算页面调用 Payment Request API，减少用户需要填写的内容。同样的代码也能用在普通网站的商品详情页、购物车或结算页中。

简单来说：

普通网站可以单独使用 Payment Request API。
PWA 可以通过 Payment Request API 改善支付体验。
使用 Payment Request API 不会让普通网站自动成为 PWA。
把网站改造成 PWA，也不会自动获得完整的支付能力。

基本使用步骤

1. 检查浏览器是否支持

调用前先检查 window.PaymentRequest，同时为不支持该 API 的浏览器保留传统支付表单。

if ("PaymentRequest" in window) {
  // 可以尝试使用 Payment Request API
} else {
  // 显示普通的结账表单
}

2. 定义支付方式和订单金额

下面用 "basic-card" 演示 API 的基本结构。不同浏览器对 "basic-card" 的实际支持情况并不一致。在生产环境中，应根据目标浏览器和支付服务商支持的支付方法进行配置。

const methodData = [
  {
    supportedMethods: "basic-card"
  }
];

const paymentDetails = {
  displayItems: [
    {
      label: "商品",
      amount: {
        currency: "CNY",
        value: "99.00"
      }
    }
  ],
  total: {
    label: "应付总额",
    amount: {
      currency: "CNY",
      value: "99.00"
    }
  }
};

金额通常用字符串表示，货币代码应使用符合要求的代码，例如 CNY、USD。

3. 创建并显示支付请求

const paymentOptions = {
  requestPayerName: true,
  requestPayerEmail: true
};

const request = new PaymentRequest(
  methodData,
  paymentDetails,
  paymentOptions
);

async function startPayment() {
  try {
    const response = await request.show();

    const result = await fetch("/api/payments", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        methodName: response.methodName,
        details: response.details,
        payerName: response.payerName,
        payerEmail: response.payerEmail
      })
    });

    if (!result.ok) {
      throw new Error("支付处理失败");
    }

    await response.complete("success");
  } catch (error) {
    console.error("支付未完成：", error);
  }
}

request.show() 应由用户操作触发，例如点击“立即支付”按钮：

<button id="pay-button" type="button">立即支付</button>

<script>
  document
    .getElementById("pay-button")
    .addEventListener("click", startPayment);
</script>

不要在页面加载后自动弹出支付界面。浏览器通常要求调用发生在有效的用户激活过程中。

API 不负责实际扣款

Payment Request API 主要负责采集支付信息，并提供用户确认界面。调用 response.complete("success") 只是告诉浏览器当前支付流程已经结束，不表示资金已经到账。

完整流程通常如下：

浏览器显示支付界面。
用户选择支付方式并确认。
网站取得支付响应。
前端将响应安全地发送给服务器。
服务器调用支付服务商接口完成授权或扣款。
服务器确认成功后，前端调用 response.complete("success")。

服务器必须重新验证订单金额、库存、优惠和支付结果，不能只信任浏览器提交的数据。

使用时需要注意什么

必须使用安全上下文

该 API 通常要求页面运行在 HTTPS 安全上下文中。本地开发时，浏览器可能会对 localhost 提供例外，但生产网站仍不能使用 HTTP。

浏览器支持并不统一

浏览器是否支持 PaymentRequest、支持哪些支付方法，以及支付界面的具体样式，会受到浏览器、操作系统、地区和用户设备配置的影响。即使 PaymentRequest 存在，也不代表某一种支付方式一定可用。

因此，生产网站必须保留普通支付页面作为后备方案。

支付方式需要单独接入

API 本身不是支付平台。银行卡、数字钱包或第三方支付方式能否使用，取决于相应支付处理方的接入要求。某些支付方式可能需要支付方法清单、域名验证、商户配置或服务端签名。

不应把支付数据当作普通表单数据处理

支付响应中可能包含敏感信息。网站应尽量使用支付服务商提供的安全组件或令牌化流程处理这些数据，避免将其记录到前端日志、分析系统或普通业务日志中。

总结

Payment Request API 和 PWA 是两项相互独立、可以配合使用的 Web 能力。它既适用于 PWA，也适用于普通网站。

接入时要考虑的不是“网站是否为 PWA”，而是页面是否使用安全上下文、浏览器是否支持目标支付方式、调用是否由用户操作触发，以及网站是否具备完整的服务端支付处理能力和后备结账流程。