JavaScript内核与高级编程之：`Payment Request API`：其在`Web`支付中的工作流程。

各位靓仔靓女，晚上好！我是你们今晚的支付流程解说员。今天咱们不聊虚的，直接上干货，聊聊 JavaScript 内核深处的 Payment Request API，看看它在 Web 支付这潭深水里是怎么搅动风云的。准备好了吗？咱们这就开讲！

一、 支付江湖的那些事儿：Payment Request API 是何方神圣？

话说 Web 支付这块地盘，长期以来都是诸侯割据，各自为政。这个用 iframe 嵌入个支付宝，那个用 window.open 弹个微信支付，用户体验参差不齐，开发者也是苦不堪言。

Payment Request API (简称 PRA) 的出现，就像是一位统一天下的英雄，试图结束这种混乱局面。它是一个标准的 Web API，允许浏览器和支付处理器（比如信用卡、Apple Pay、Google Pay 等）之间建立一个安全、统一的支付接口。

简单来说，它做了这么几件事：

1. 标准化支付流程： 开发者只需要调用 PRA 提供的 API，就可以发起支付请求，无需关心底层具体的支付方式。
2. 浏览器接管用户体验： 浏览器会负责展示支付界面，收集用户支付信息，并与支付处理器进行交互。这极大地提升了用户体验，也保证了支付信息的安全性。
3. 支持多种支付方式： PRA 可以支持各种支付方式，只要浏览器支持，用户就可以选择自己喜欢的支付方式进行支付。

二、 Payment Request API 的工作流程：拆解英雄的招式

好了，知道了 PRA 的厉害之处，咱们就来拆解一下它的工作流程，看看这位英雄是如何一步步完成支付的。

整个流程可以大致分为以下几个步骤：

1. 创建 PaymentRequest 对象： 开发者使用 PRA 提供的 API 创建一个 PaymentRequest 对象，用于描述支付请求的信息，比如支付金额、支持的支付方式等。
2. 显示支付界面： 调用 PaymentRequest 对象的 show() 方法，浏览器会弹出一个支付界面，让用户选择支付方式并输入支付信息。
3. 处理支付结果： 用户完成支付后，浏览器会将支付结果返回给开发者。开发者需要验证支付结果，并完成后续的业务逻辑，比如发货、更新订单状态等。

下面我们用一个简单的例子来演示一下这个流程：

// 1. 定义支付信息
const paymentMethods = [
  {
    supportedMethods: ['basic-card'], // 支持信用卡支付
    data: {
      supportedNetworks: ['visa', 'mastercard'], // 支持 Visa 和 Mastercard
      merchantIdentifier: 'merchant.com.example' // (可选) 商户 ID，用于 Apple Pay 等
    }
  }
];

const paymentDetails = {
  total: {
    label: '总计',
    amount: {
      currency: 'USD',
      value: '10.00'
    }
  }
};

const paymentOptions = {
  requestPayerName: true, // 请求付款人姓名
  requestPayerEmail: true, // 请求付款人邮箱
  requestPayerPhone: true, // 请求付款人电话
  requestShipping: false // 请求收货地址
};

// 2. 创建 PaymentRequest 对象
const request = new PaymentRequest(paymentMethods, paymentDetails, paymentOptions);

// 3. 监听 PaymentRequest 事件
request.addEventListener('shippingaddresschange', (event) => {
  // 处理收货地址变更事件
  event.updateWith({
    total: {
      label: '总计 (含运费)',
      amount: {
        currency: 'USD',
        value: '12.00' // 假设运费 2 美元
      }
    }
  });
});

// 4. 显示支付界面
request.show()
  .then((paymentResponse) => {
    // 5. 处理支付结果
    console.log('支付成功！');
    console.log('支付信息：', paymentResponse);

    // 验证支付结果，并完成后续的业务逻辑
    return paymentResponse.complete('success'); // 告诉浏览器支付已完成
  })
  .catch((error) => {
    console.error('支付失败：', error);
  });

代码解读：

• paymentMethods： 定义了支持的支付方式。这里我们只支持信用卡支付，并指定了支持的信用卡类型（Visa 和 Mastercard）。对于 Apple Pay 和 Google Pay 等，你需要配置 merchantIdentifier。
• paymentDetails： 定义了支付金额和货币类型。
• paymentOptions： 定义了是否需要请求付款人的姓名、邮箱、电话和收货地址。
• PaymentRequest 对象： 创建了一个 PaymentRequest 对象，并将支付信息传递给它。
• shippingaddresschange 事件： 监听收货地址变更事件。当用户修改收货地址时，我们可以根据新的收货地址重新计算运费和总金额。
• show() 方法： 显示支付界面。
• then() 方法： 处理支付成功的情况。在这里，我们可以验证支付结果，并完成后续的业务逻辑。
• catch() 方法： 处理支付失败的情况。
• paymentResponse.complete() 方法： 告诉浏览器支付已完成。你可以传递 'success' 表示支付成功，传递 'fail' 表示支付失败，或者传递 'unknown' 表示支付状态未知。

三、 Payment Request API 的核心概念：掌握英雄的内功

要真正掌握 Payment Request API，还需要理解以下几个核心概念：

1. 支付方法 (Payment Method): 指用户使用的支付方式，比如信用卡、Apple Pay、Google Pay 等。每个支付方法都有一个唯一的标识符，称为 supportedMethods。
2. 支付详情 (Payment Details): 指支付请求的详细信息，包括支付金额、货币类型、商品列表等。
3. 支付选项 (Payment Options): 指支付请求的可选配置，比如是否需要请求付款人的姓名、邮箱、电话和收货地址。
4. 支付响应 (Payment Response): 指浏览器返回的支付结果，包括支付令牌、付款人信息等。
5. 支付处理器 (Payment Handler): 指处理支付请求的后端服务。开发者需要自己实现支付处理器，用于验证支付结果，并完成后续的业务逻辑。

我们可以用一个表格来总结这些概念：

概念	描述	示例
支付方法	用户使用的支付方式	supportedMethods: ['basic-card', 'apple-pay', 'https://example.com/pay']
支付详情	支付请求的详细信息	javascript { total: { label: '总计', amount: { currency: 'USD', value: '10.00' } }, displayItems: [{ label: '商品 A', amount: { currency: 'USD', value: '5.00' } }, { label: '商品 B', amount: { currency: 'USD', value: '5.00' } }] }
支付选项	支付请求的可选配置	requestPayerName: true, requestPayerEmail: true, requestShipping: true
支付响应	浏览器返回的支付结果	javascript { methodName: 'basic-card', details: { cardNumber: '**** **** **** 1234', expiryMonth: '12', expiryYear: '2024', cardholderName: 'John Doe' }, payerName: 'John Doe', payerEmail: '[email protected]', payerPhone: '+15551234567', shippingAddress: { city: 'New York', country: 'US', postalCode: '10001', recipient: 'John Doe', region: 'NY', street: ['123 Main St'] } }
支付处理器	处理支付请求的后端服务	(需要开发者自己实现，用于验证支付结果，并完成后续的业务逻辑)

四、 Payment Request API 的进阶用法：修炼英雄的绝技

除了基本用法之外，Payment Request API 还提供了一些高级功能，可以让你更好地控制支付流程：

1. 自定义支付界面： 虽然 PRA 会提供默认的支付界面，但你也可以通过注册一个 Payment Handler 来完全自定义支付界面。这可以让你更好地控制用户体验，并集成自己的支付逻辑。
2. 支持订阅支付： PRA 可以支持订阅支付，允许用户定期支付一定金额。这需要你实现一个支持订阅支付的支付处理器。
3. 处理错误： 在支付过程中，可能会出现各种错误，比如支付方式不支持、支付金额无效等。你需要正确处理这些错误，并向用户提供友好的提示信息。

五、 Payment Request API 的兼容性：了解英雄的局限

虽然 Payment Request API 很强大，但它也有一些局限性。最主要的问题是兼容性。并非所有浏览器都支持 Payment Request API。在使用 PRA 之前，你需要检查浏览器是否支持它。

if ('PaymentRequest' in window) {
  // 浏览器支持 Payment Request API
  console.log('Payment Request API is supported!');
} else {
  // 浏览器不支持 Payment Request API
  console.log('Payment Request API is not supported!');
  // 可以降级使用其他支付方式
}

六、 总结：英雄的未来

总的来说，Payment Request API 是一个非常有前景的 Web 支付技术。它可以简化支付流程，提升用户体验，并支持多种支付方式。虽然它还存在一些局限性，但随着越来越多的浏览器支持 PRA，它必将在 Web 支付领域发挥越来越重要的作用。

希望今天的讲解能让你对 Payment Request API 有更深入的了解。记住，掌握 PRA，你也能成为 Web 支付领域的英雄！

最后，别忘了实践是检验真理的唯一标准。赶紧动手试试吧！ Good luck, and have fun!