Google Pay On Web 開發者文件

串接概要

載入SDK
設置 SDK
設置 Google Pay
按鈕產生及 Google API 使用，取得 Prime
自定義 callback function 處理 Prime
使用 Prime 進行交易授權請求

事前準備

請確認符合《Google建議之相關開發條件》
使用SDK套件需遵守《Google Pay API 使用限制政策》並接受《Google Pay API 服務條款》中訂定的條款
Google Pay 按鈕設計原則請參照《Google 品牌規範》：

*ACpay 提供之SDK 預設依照google之規範產生按鈕

1. 載入SDK

載入google 提供api 來源及 ACpay 最新SDK (2024/12 update v1.0.5)

測試區

<script src="https://pay.google.com/gp/p/js/pay.js" ></script>
<script src="https://connectjs.payloop.com.tw/ACconnect/v1.0.5.js" ></script>

正式區

<script src="https://pay.google.com/gp/p/js/pay.js" ></script>
<script src="https://connectjs.acpay.com.tw/ACconnect/v1.0.5.js" ></script>

2. 設置SDK

將申請之相關參數設置完成以使用SDK

ACconnect.setupSDK("appID", "appKey", "serverType")

*名稱(=必填)**	類別	內容
appID*	int	ACpay 提供之驗證識別碼
appKey*	String	ACpay 提供之驗證金鑰
serverType*	String	使用的伺服器種類： – 測試時請使用 Sandbox 環境(sandbox) – 上線後請切換至 Production 環境 (production)

3. 設置 Google Pay

初始化GooglePay API所需相關參數

let googlePaySetting = {
  gatewayMerchantId: "ACpay MerchantNo",
  allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
  merchantName: "MerchantName show costumer",
  merchantOrigin: "www.xxxx.com.io"
}

*名稱 (=必填)**	類別	內容
gatewayMerchantID*	String	根據特店申請之merchantNo名稱填寫
allowedCardAuthMethods*	String	請填寫目前ACpay支援的兩種模式名稱	內容
PAN_ONLY	一般信用卡交易 F-PAN (on web進行，相關細節參考網路特店暨線上授權服務系統付款服務使用手冊3.1 信用卡 3DS 或 URL 交易流程圖)
CRYPTOGRAM_3DS	加密卡號交易D-PAN (android手機 in app 或是android手機以chrome瀏覽器進行)

merchantName*

String

特店名稱，顯示給消費者之付款對象

merchantOrigin*

String

發送請求之網域，需包含於申請 appId 時之網域

4. 設置 Payment

設定訂單相關資訊，用於顯示支付之狀態

let paymentSetting = {
  totalPrice: '10.00'
}
ACconnect.GooglePay.setupPayment(paymentSetting)

*名稱(=必填)**	類別	內容
totalPrice*	String	僅為消費者顯示之總金額，實際授權仍以特店發出至ACpay之電文內金額向銀行提出

5. 按鈕產生及Google API 使用，取得 Prime

使用 google 提供onGooglePayLoaded產生按鈕，並傳入處理 Prime 的 callback，點擊按鈕與 Google 請求並設置支付相關資訊，完成提交支付資訊後，取得回傳Prime。

ACconnect.GooglePay.onGooglePayLoaded(
    function (primeResultToMerchant){
      //完成 googlepay 特店需要處理 Prime 的 callback函式

    }
);

6. 自定義 callback function 使用 Prime

依照店家使用需求取得 api 回傳 Prime並進行後續交易授權所需處理。

7. 使用 Prime 進行交易授權請求

取得Prime 及當前交易資訊對ACpay進行交易授權請求。(詳細請見網路特店暨線上授權服務系統付款服務使用手冊)

*請注意交易將以電文授權之金額為主，與前述步驟之 totalPrice 金額需相同避免顯示於消費者與實際授權金額不同。

Example Code:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">


  <script src="https://pay.google.com/gp/p/js/pay.js"></script>
  <script src="https://connectjs.payloop.com.tw/ACconnect/v1.0.3.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {

      ACconnect.setupSDK('090414780201003', '854b72ab-3828-4994-ab6c-16b5145937a8', 'sandbox')

      //設定google要求gateway相關欄位
      let googlePaySetting = {
        gatewayMerchantId: "ACpay MerchantNo",
        allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
        merchantName: "MerchantName show costumer",
        merchantOrigin: "www.xxxx.com.io"
      }
      ACconnect.GooglePay.setupGooglePay(googlePaySetting);

      //支付google要求支付相關資訊
      let paymentSetting = {
        totalPrice: '10.00'
      }
      ACconnect.GooglePay.setupPayment(paymentSetting);

      //Google Pay 按鈕產生，處理 Prime
      ACconnect.GooglePay.onGooglePayLoaded(
        function (primeResultToMerchant) {
          //完成 googlepay 特店需要處理 prime 的函式
          console.log("prime = " + primeResultToMerchant);
          alert("prime = " + primeResultToMerchant);
          handlePayByPrime(primeResultToMerchant);
        }
      );

      function handlePayByPrime(prime) {
        //發動交易授權API
      }

    });
  </script>

  <title>Test Google Pay</title>
</head>

<body>
  <div id="container"></div>
</body>

</html>