如何以编程方式添加浏览器支付方式？

2026-10-24支付老李

结论

普通网页无法通过 JavaScript 或 Payment Request API，将银行卡等支付信息添加到 Chrome 的 Autofill > Payment methods 中。

这类信息属于浏览器管理的敏感用户数据。用户必须通过浏览器界面或由浏览器控制的支付流程创建、保存和修改支付方式，网页不能绕过授权直接写入。

Payment Request API 能做什么

Payment Request API 用于发起支付请求，并声明商户接受的支付方式。收到请求后，浏览器会显示支付界面，由用户选择已有的支付方式或填写相关信息。

它没有下面这样的接口：

// 不存在此类标准 API
browser.paymentMethods.add({
  cardNumber: "4111111111111111",
  expiryMonth: "12",
  expiryYear: "2030"
});

这一限制可以防止网站在用户不知情的情况下写入、篡改或收集银行卡信息，也能避免未经验证的数据进入浏览器配置。

正确的实现方式

商户页面应创建 PaymentRequest，支付界面则由浏览器展示：

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

const details = {
  total: {
    label: "订单总额",
    amount: {
      currency: "CNY",
      value: "99.00"
    }
  }
};

const request = new PaymentRequest(methodData, details);

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

    // 将支付信息安全地提交给支付服务端或支付服务商处理
    const paymentSucceeded = await processPayment(response);

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

业务系统需要自行实现 processPayment()。在生产环境中，通常应由合规的支付服务商处理支付凭据，不要自行保存完整的银行卡数据。

basic-card 是否可用取决于具体浏览器，不能默认所有浏览器都支持。上线前应参考目标浏览器和支付服务商的文档，选择合适的 supportedMethods。

调用前还可以检查当前环境是否具备发起支付请求的基本条件：

if (!window.PaymentRequest) {
  console.log("当前浏览器不支持 Payment Request API");
} else {
  startPayment();
}

用户如何保存支付方式

如果浏览器支持保存银行卡，用户在浏览器控制的支付界面中填写卡片信息后，可能会看到保存提示。浏览器是否提供该选项、最终是否保存，会受到浏览器版本、用户设置、登录或同步状态及相关安全策略的影响。网站既不能强制开启保存功能，也不能代替用户确认。

正常流程如下：

网站通过 Payment Request API 发起支付。
用户在浏览器界面中选择或填写支付方式。
浏览器决定是否提供保存选项。
网站获取本次支付响应并完成交易处理。

Payment Handler API 不是写入银行卡的接口

如果希望让 Web 支付应用成为可选的支付处理程序，可以了解 Payment Handler API。支持该标准的浏览器可以用它注册 Web 支付应用，但这不等于向 Chrome 自动填充设置中添加银行卡。

Payment Handler API 的浏览器支持范围同样有限，使用前需要针对目标平台验证兼容性。

自动化测试场景

如果需求来自端到端测试，不要让测试代码修改真实用户的浏览器支付数据。可以采用以下方式：

使用支付服务商提供的测试环境和测试卡号。
为测试创建独立、临时的浏览器配置目录。
模拟支付服务端返回结果。
在应用层封装支付接口，并在自动化测试中替换为测试实现。
只在受控测试环境中使用浏览器自动化能力，不操作个人浏览器配置。

即使浏览器内部配置文件或未公开的调试接口暂时可以修改，它们也不是稳定的 Web API，可能随版本发生变化，还存在数据损坏和安全风险，不适合成为正式功能的依赖。

网页可以请求用户付款，但不能替用户管理浏览器中保存的支付方式。