使用 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 版本

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 应用中,支持支付卡交易,并提供更便捷的支付体验。

相关推荐
武子康4 小时前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
舒一笑4 小时前
我的开源项目-PandaCoder迎来史诗级大更新啦
后端·程序员·intellij idea
@昵称不存在6 小时前
Flask input 和datalist结合
后端·python·flask
zhuyasen6 小时前
Go 分布式任务和定时任务太难?sasynq 让异步任务从未如此简单
后端·go
东林牧之6 小时前
Django+celery异步:拿来即用,可移植性高
后端·python·django
超浪的晨7 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
AntBlack7 小时前
从小不学好 ,影刀 + ddddocr 实现图片验证码认证自动化
后端·python·计算机视觉
Pomelo_刘金8 小时前
Clean Architecture 整洁架构:借一只闹钟讲明白「整洁架构」的来龙去脉
后端·架构·rust
双力臂4048 小时前
Spring Boot 单元测试进阶:JUnit5 + Mock测试与切片测试实战及覆盖率报告生成
java·spring boot·后端·单元测试
midsummer_woo9 小时前
基于spring boot的医院挂号就诊系统(源码+论文)
java·spring boot·后端