使用 Google Pay API 集成 Web 应用

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

步骤概述

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

详细步骤

1. 指定 Google Pay API 版本

javascript 复制代码

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

2. 选择支付令牌化方法

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

javascript 复制代码

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

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

javascript 复制代码

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

4. 说明允许的付款方式

javascript 复制代码

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

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

5. 加载 Google Pay API JavaScript 库

html 复制代码

javascript 复制代码

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

6. 检查 Google Pay 支持

javascript 复制代码

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 付款按钮

javascript 复制代码

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

8. 创建 PaymentDataRequest 对象

javascript 复制代码

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. 注册用户手势事件处理程序

javascript 复制代码

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. 可选：预取付款数据

javascript 复制代码

paymentsClient.prefetchPaymentData(paymentDataRequest);

11. 可选：设置授权付款

javascript 复制代码

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. 可选：动态价格更新

javascript 复制代码

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

13. 可选：设置促销代码

javascript 复制代码

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

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