解释 Payment Request API 如何在 JavaScript 中实现标准化的支付流程，并处理不同支付服务提供商的集成。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好！欢迎来到今天的“支付请求 API：让支付像呼吸一样自然”讲座。我是你们的导游，将带大家深入了解这个神奇的 API，让支付流程变得标准化、简单、高效。

一、支付的烦恼：丛林法则时代

在 Payment Request API 出现之前，支付领域简直就是一片丛林。每个支付服务提供商（PSP），比如 PayPal、Stripe、Google Pay、Apple Pay，都有一套自己的 API、自己的流程、自己的 JavaScript SDK。这就意味着：

开发者噩梦： 为了集成不同的支付方式，你需要在代码中写大量的 if...else 语句，针对每个 PSP 写不同的逻辑。想想都头大！
用户体验不一致： 不同支付方式的界面、流程都不一样，用户每次支付都要重新学习，体验非常糟糕。
维护成本高昂： 每当 PSP 的 API 更新，你都要修改代码，维护成本简直爆炸。

简单来说，那个时候的支付集成，就像在不同语言的翻译器之间来回切换，效率低不说，还容易出错。

二、Payment Request API：支付界的“联合国”

Payment Request API 就像支付界的“联合国”，它定义了一套标准的接口，让浏览器来处理支付流程，而不是让开发者直接和各种 PSP 打交道。

2.1 核心思想：浏览器中介

Payment Request API 的核心思想是：浏览器充当了用户和 PSP 之间的中介。开发者只需要告诉浏览器“我需要支付多少钱，支持哪些支付方式”，浏览器就会负责和用户沟通，选择合适的支付方式，并完成支付流程。

2.2 主要组件：三大主角

Payment Request API 主要涉及三个核心组件：

PaymentRequest 对象： 这是整个 API 的核心，它代表一个支付请求。你需要在这个对象中指定支付金额、支持的支付方式、以及其他相关信息。
PaymentMethodData 对象： 这个对象描述了你支持的支付方式。比如，你可以支持信用卡支付、Google Pay、Apple Pay 等。
PaymentResponse 对象： 当用户完成支付流程后，浏览器会返回一个 PaymentResponse 对象，其中包含了支付结果的相关信息，比如支付令牌、交易 ID 等。

2.3 工作流程：简单的四步舞

Payment Request API 的工作流程可以概括为以下四个步骤：

创建 PaymentRequest 对象： 开发者创建一个 PaymentRequest 对象，并指定支付金额、支持的支付方式等信息。
显示支付界面： 调用 PaymentRequest.show() 方法，浏览器会显示一个支付界面，让用户选择支付方式并授权支付。
处理 PaymentResponse 对象： 用户完成支付流程后，浏览器会返回一个 PaymentResponse 对象。开发者需要验证支付结果，并向后端服务器发送支付令牌或其他必要信息。
完成支付： 后端服务器验证支付信息后，完成支付流程，并通知浏览器。

三、代码实战：让支付动起来

光说不练假把式，接下来我们通过代码来演示如何使用 Payment Request API。

3.1 创建 PaymentRequest 对象

const supportedInstruments = [
  {
    supportedMethods: ['basic-card'], // 支持信用卡支付
    data: {
      supportedNetworks: ['visa', 'mastercard'], // 支持 Visa 和 Mastercard
      merchantIdentifier: 'your-merchant-id' // (Optional) Apple Pay Merchant Identifier
    }
  },
  {
    supportedMethods: ['https://google.com/pay'], // 支持 Google Pay
    data: {
      apiVersion: 2,
      apiVersionMinor: 0,
      allowedPaymentMethods: [{
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['VISA', 'MASTERCARD']
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: 'example', // 替换成你的支付网关
            gatewayMerchantId: 'exampleGatewayMerchantId' // 替换成你的支付网关 merchant id
          }
        }
      }]
    }
  }
];

const details = {
  total: {
    label: 'Total',
    amount: { currency: 'USD', value: '10.00' } // 支付金额：10 美元
  }
};

const options = {
  requestShipping: false, // 是否需要收货地址
  requestPayerEmail: true, // 是否需要用户邮箱
  requestPayerName: true // 是否需要用户姓名
};

const request = new PaymentRequest(supportedInstruments, details, options);

这段代码创建了一个 PaymentRequest 对象，指定了以下信息：

supportedInstruments： 支持信用卡支付和 Google Pay。对于信用卡支付，指定了支持 Visa 和 Mastercard。对于 Google Pay，需要配置 apiVersion， allowedPaymentMethods (包括授权方式和支持的卡组织) 以及 tokenizationSpecification (支付网关信息)。
details： 支付总额为 10 美元。
options： 不需要收货地址，需要用户邮箱和姓名。

3.2 显示支付界面

request.show()
  .then(paymentResponse => {
    // 处理支付结果
    console.log('Payment successful!', paymentResponse);
    // 发送支付令牌到后端服务器
    return sendPaymentToServer(paymentResponse);
  })
  .then(result => {
    // 支付完成
    paymentResponse.complete('success'); // 'success' 或 'fail'
    console.log('Payment completed!', result);
  })
  .catch(error => {
    // 处理错误
    console.error('Payment failed!', error);
    paymentResponse.complete('fail');
  });

这段代码调用了 PaymentRequest.show() 方法，显示支付界面。当用户完成支付流程后，Promise 会 resolve，并返回一个 PaymentResponse 对象。我们可以在 then 方法中处理支付结果，并将支付令牌发送到后端服务器。最后，调用 paymentResponse.complete() 方法，通知浏览器支付完成。

3.3 后端服务器处理

// 假设后端使用 Node.js 和 Express
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

app.post('/payment', (req, res) => {
  const paymentResponse = req.body;
  // 验证支付令牌，调用支付网关 API 完成支付
  // ...
  // 如果支付成功
  res.json({ status: 'success', message: 'Payment successful!' });
  // 如果支付失败
  // res.status(500).json({ status: 'fail', message: 'Payment failed!' });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

这段代码展示了后端服务器如何处理支付请求。服务器接收到 PaymentResponse 对象后，需要验证支付令牌，并调用支付网关 API 完成支付。如果支付成功，服务器返回一个 success 状态；如果支付失败，服务器返回一个 fail 状态。

3.4 sendPaymentToServer 函数

async function sendPaymentToServer(paymentResponse) {
  const response = await fetch('/payment', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(paymentResponse)
  });

  if (!response.ok) {
    throw new Error('Network response was not ok');
  }

  return await response.json();
}

这个函数负责将 PaymentResponse 对象发送到后端服务器。

四、支付服务提供商的集成：化繁为简

Payment Request API 最大的优势之一，就是它简化了与不同 PSP 的集成。

4.1 标准化的支付流程

Payment Request API 提供了一套标准的支付流程，无论你使用哪个 PSP，流程都是一样的：

创建 PaymentRequest 对象。
显示支付界面。
处理 PaymentResponse 对象。
完成支付。

这意味着，你不再需要为每个 PSP 写不同的代码，只需要按照 Payment Request API 的规范来编写代码即可。

4.2 PaymentMethodData 的魔法

PaymentMethodData 对象是集成不同 PSP 的关键。通过配置 PaymentMethodData 对象，你可以告诉浏览器你支持哪些支付方式，以及如何处理这些支付方式。

例如，如果你想支持 Google Pay，你需要配置 PaymentMethodData 对象，指定 Google Pay 的相关参数，比如 apiVersion、allowedPaymentMethods、tokenizationSpecification 等。

{
  supportedMethods: ['https://google.com/pay'],
  data: {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [{
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['VISA', 'MASTERCARD']
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example', // 替换成你的支付网关
          gatewayMerchantId: 'exampleGatewayMerchantId' // 替换成你的支付网关 merchant id
        }
      }
    }]
  }
}

4.3 支付网关的选择

在 tokenizationSpecification 中，你需要指定使用的支付网关。不同的支付网关有不同的 API 和流程，你需要根据你选择的支付网关来配置 tokenizationSpecification。

例如，如果你使用 Stripe 作为支付网关，你需要配置 tokenizationSpecification，指定 Stripe 的公钥和版本号。

五、Payment Request API 的优势与局限

5.1 优势：

标准化： 提供了一套标准的支付流程，简化了开发和维护。
用户体验一致： 使用浏览器内置的支付界面，提供了一致的用户体验。
安全性： 浏览器负责处理支付流程，减少了开发者处理敏感信息的风险。
易于集成： 可以轻松集成不同的支付方式，无需编写大量的 if...else 语句。
跨平台： 支持多种浏览器和设备。

5.2 局限：

浏览器支持： 并非所有浏览器都支持 Payment Request API。需要进行浏览器兼容性检测。
定制性有限： 浏览器提供的支付界面定制性有限，无法完全满足所有需求。
后端集成： 仍然需要后端服务器来验证支付信息和完成支付流程。
并非所有 PSP 都支持： 并非所有 PSP 都提供了对 Payment Request API 的支持。

六、最佳实践：让支付更丝滑

浏览器兼容性检测： 在使用 Payment Request API 之前，需要进行浏览器兼容性检测，确保用户可以使用。

if ('PaymentRequest' in window) {
  // 支持 Payment Request API
} else {
  // 不支持 Payment Request API，显示备用支付方式
}

错误处理： 妥善处理支付过程中可能出现的错误，比如用户取消支付、支付失败等。
用户体验优化： 提供清晰的支付提示，让用户知道支付流程的每一步。
安全性： 确保后端服务器能够安全地验证支付信息，并防止欺诈行为。
渐进增强： 如果用户浏览器不支持 Payment Request API，提供备用支付方式。

七、高级技巧：让支付更强大

PaymentDetailsModifier： 可以根据用户的选择，动态修改支付金额或支付方式。比如，如果用户选择了优惠券，可以减少支付金额。
shippingAddressChange 和 shippingOptionChange 事件： 可以监听收货地址和配送方式的改变，并动态更新支付金额。
与 Web Authentication API 结合： 可以使用 Web Authentication API 进行用户身份验证，提高支付安全性。

八、总结：告别支付丛林

Payment Request API 就像一把瑞士军刀，它简化了支付流程，降低了开发成本，提升了用户体验。虽然它并非完美无缺，但它代表了支付领域的未来方向。

希望今天的讲座能够帮助大家更好地理解和使用 Payment Request API，让支付像呼吸一样自然，告别支付丛林！

谢谢大家！

发表回复 取消回复

发表回复取消回复