使用 Google Pay API 集成 Web 应用

本教程将指导您如何将 Google Pay API 集成到您的 Web 应用中，以支持支付卡交易。以下是步骤简要概述和详细解释。

步骤概述

1. 指定 Google Pay API 版本
2. 选择支付令牌化方法
3. 指定支持的支付卡网络
4. 说明允许的付款方式
5. 加载 Google Pay API JavaScript 库
6. 检查 Google Pay 支持
7. 添加 Google Pay 付款按钮
8. 创建 PaymentDataRequest 对象
9. 注册用户手势事件处理程序
10. 可选：预取付款数据
11. 可选：设置授权付款
12. 可选：动态价格更新
13. 可选：设置促销代码

详细步骤

1. 指定 Google Pay API 版本

const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

2. 选择支付令牌化方法

使用 PAYMENT_GATEWAY 令牌化类型是最常见的方法。您需要指定网关和网关商户 ID。

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

3. 指定支持的支付卡网络

const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

4. 说明允许的付款方式

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

5. 加载 Google Pay API JavaScript 库

const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});

6. 检查 Google Pay 支持

const isReadyToPayRequest = Object.assign({}, baseRequest);
isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];

paymentsClient.isReadyToPay(isReadyToPayRequest)
  .then(function(response) {
    if (response.result) {
      addGooglePayButton();
    }
  })
  .catch(function(err) {
    console.error(err);
  });

7. 添加 Google Pay 付款按钮

function addGooglePayButton() {
  const button = paymentsClient.createButton({
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: [baseCardPaymentMethod]
  });
  document.getElementById('container').appendChild(button);
}

8. 创建 PaymentDataRequest 对象

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD',
  countryCode: 'US'
};
paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant',
  merchantId: '12345678901234567890'
};

9. 注册用户手势事件处理程序

function onGooglePaymentButtonClicked() {
  paymentsClient.loadPaymentData(paymentDataRequest)
    .then(function(paymentData) {
      processPayment(paymentData);
    })
    .catch(function(err) {
      console.error(err);
    });
}

function processPayment(paymentData) {
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}

10. 可选：预取付款数据

paymentsClient.prefetchPaymentData(paymentDataRequest);

11. 可选：设置授权付款

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    processPayment(paymentData)
      .then(function() {
        resolve({transactionState: 'SUCCESS'});
      })
      .catch(function() {
        resolve({
          transactionState: 'ERROR',
          error: {
            intent: 'PAYMENT_AUTHORIZATION',
            message: 'Insufficient funds',
            reason: 'PAYMENT_DATA_INVALID'
          }
        });
      });
  });
}

12. 可选：动态价格更新

function onPaymentDataChanged(intermediatePaymentData) {
  // 处理送货地址和运费选项的变化
}

13. 可选：设置促销代码

function onPaymentDataChanged(intermediatePaymentData) {
  // 处理促销代码的应用
}

通过这些步骤，您可以成功集成 Google Pay API 到您的 Web 应用中，支持支付卡交易，并提供更便捷的支付体验。