聯繫我們

Google Pay™ on Web 串接

googlepay_logo
串接概要
  1. 載入SDK
  2. 設置 SDK
  3. 設置 Google Pay
  4. 按鈕產生及 Google API 使用，取得 Prime
  5. 自定義 callback function 處理 Prime
  6. 使用 Prime 進行交易授權請求
事前準備

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

1. 載入SDK

載入google 提供api 來源及 ACpay 最新SDK (2023/05 update v1.0.3)

				
					<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>
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>