如何使用 Javascript 支付 API 进行支付

Posted on by

我最近一直在关注在线支付。产品和服务的支付在网络中所占的比重越来越大。因此，Javascript 引入了一个新的支付 API，让我们可以使用标准通知框来处理用户支付细节。让我们简单看一下它是如何工作的。

Javascript 支付 API#

支付 API Javascript 允许我们标准化用户支付的输入。这意味着我们可以利用指纹识别等功能并模拟 Apple/Android Pay 对话框。Chrome 和其他浏览器也有自己内置的支付对话框。

支付 API 允许我们发送和接收数据，但处理通常仍在服务器上完成。一旦用户安全地同意支付，这将需要在服务器上进行处理，或者由 Stripe、Apple Pay 或 Android 等支付处理服务进行处理。因此，当我们配置我们的 JS 时，我们需要在我们的“支付方式”中识别这些细节。

1. 配置我们的付款

我们需要做的第一件事是配置我们的付款方式和产品详细信息。这是通过 JSON 对象完成的，如下所示。

const productDetails = {
    id: "my-product-id",
    displayItems: [
      {
        label: "Product Cost",
        amount: { currency: "GBP", value: "80" },
      },
      {
        label: "Tax",
        amount: { currency: "GBP", value: "15.99" },
      }
    ],
    total: {
      label: "Total",
      amount: { currency: "GBP", value: "95.99" },
    },
}

// Payment methods for Apple Pay, Card, and Android Pay
const paymentMethods = [
    {
        supportedMethods: "basic-card",
        data: {
            supportedNetworks: ["visa", "mastercard", "amex", "discover"],
        },
    },
    {
        supportedMethods: "https://apple.com/apple-pay",
        data: {
            version: 1,
            merchantIdentifier: "some.merchant.identifier.com",
            merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"],
            supportedNetworks: ["amex", "discover", "masterCard", "visa"],
            countryCode: "US",
        }
    },
    {
        supportedMethods: 'https://google.com/pay',
        data: {
          merchantName: 'Google Pay',
          environment: 'TEST', // Remove this if you don't want to test!
          merchantId: '123456789', // Google Pay ID
          allowedCardNetworks: ["visa", "mastercard", "amex", "discover"],
          paymentMethodTokenizationParameters: {
            // Gateway info goes here .. i.e. stripe
            tokenizationType: 'GATEWAY_TOKEN',
            parameters: {
              'gateway': 'stripe',
              'stripe:publishableKey': 'put-key-here',
            },
          },
        },
      }
]

我在这里创建了一些虚拟支付选项。一个是Apple Pay，最后一个是Google/Stripe。对于 Apple Pay 和 Google，您必须将它们配置为您自己的设置。对于基本卡，这仅在您可以处理自己的付款时才有效。有关如何同时实施 Google Pay 和 Apple Pay 的更多详细信息，请参阅本文末尾。

出于快速演示的目的，我将仅配置基本卡片对象以简化操作。

2.触发支付请求

理想情况下，当用户点击“购买”时，会出现一个付款对话框，用户可以在其中确认付款。我们有几个函数来处理这个。在某些情况下，您需要将此数据的响应发布到具有获取功能的服务器。我在下面概述了该功能：

document.getElementById('button').addEventListener('click', function() {
    const makeRequest = new PaymentRequest(paymentMethods, productDetails);
    const getResponse = await payRequest.show();
    try {
        const postData = await fetch("/payments", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: getResponse.toJSON(),
        });
    } catch (err) {
        console.error(err);
    }

    // Based on the outcome from the 'postData' POST, you can then show the user another page should the 
    // payment have been successful.
})

演示#

为了实际展示这一点，我配置了一个非常快速的按钮，允许您触发支付对话框。这显然行不通，但它可以让您了解它是如何工作的：立即购买！

浏览器支持#

现在对 Javascript Payment API 的支持相当广泛，如下所示。
来自caniuse.com的主要浏览器支持付款请求功能的数据

真正的实施#

Javascript 中的支付 API 让我们可以使用网络语言来标准化用户的支付流程。这是一项前端技术，这意味着我们仍然需要在某处的服务器上处理付款。因此，您可能需要使用 Google Pay 或 Apple Pay 等服务。我在下面提供了一些资源，这些资源应该可以帮助您了解每项服务的最新指南。

推荐阅读：