NAV
docs
iOS-objC iOS-Swift
Frontend
iOS-objC iOS-Swift

Create Token

Google Pay

如欲了解最新版號 SDK 以及各版號之間的差異性，請參考 Github Release Page : TapPay Android Github

Overview

Google Pay App 主要分為三個步驟：
1. 專案設置，使用 TPDSetup 設定環境
2. 準備交易資訊，透過 TPDGooglePay 取得 paymentData
3. 利用 paymentData 向 TapPay 取得 Prime 傳給您的伺服器，並透過 Pay by Prime API 來完成付款

Google Pay 按鈕設計原則請參考： Google Pay Brand Guidelines

Environment

在 project 根目錄中的build.gradle中的 repositories 中加入 google 的 maven 庫，範例如下:

allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

在 app 的 build.gradle 中的 dependencies 中加入:

compile 'com.google.android.gms:play-services-wallet:16.0.0' 
compile 'com.android.support:appcompat-v7:24.2.1'

在 Manifest 中的 application 標籤中新增 meta data: 

<meta-data
android:name="com.google.android.gms.version"android:value="@integer/google_play_services_version" />
<meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true" />

TPDSetup

使用 TPDSetup 設定環境:

TPDSetup.initInstance(getApplicationContext(), APP_ID, "APP_KEY", TPDServerType.SANDBOX);
名稱 類別 內容
context Context Android Context
appID int 請參考 appid
appKey String 請參考 appkey
serverType TPDServerType 使用的伺服器種類
測試時請使用 Sandbox 環境 (TPDServerType.Sandbox)
實體上線後請切換至 Production 環境 (TPDServerType.Production)

環境設定完成後，請依照以下步驟執行：

Prepare Payment Data

1.建立 TPDMerchant 物件並將您的商店資訊設定進去 , 範例如下 

//allowedNetworks 為允許的卡種
TPDCard.CardType[] allowedNetworks = new TPDCard.CardType[] { TPDCard.CardType.Visa, TPDCard.CardType.MasterCard };
TPDCard.AuthMethod[] allowedAuthMethods = new TPDCard.AuthMethod[] { TPDCard.AuthMethod.PanOnly, TPDCard.AuthMethod.Cryptogram3DS };

TPDMerchant tpdMerchant = new TPDMerchant();
tpdMerchant.setSupportedNetworks(allowedNetworks);
tpdMerchant.setSupportedAuthMethods(allowedAuthMethods);
tpdMerchant.setMerchantName("您的商店名稱")
名稱 內容
setSupportedNetworks 支援的付款系統
setSupportedAuthMethods 允許的信用卡授權方式
名稱內容
PanOnly一般信用卡交易，可以接受 Google Play 上面的信用卡，存在於雲端
Cryptogram3DSToken 卡交易，只能接受手機上的 token 卡 (e.g : Google Pay)
setMerchantName 設定商店名稱

2.建立 TPDConsumer 物件並決定本次交易必填之選項，範例如下 

TPDConsumer tpdConsumer = new TPDConsumer();
tpdConsumer.setPhoneNumberRequired(true);
tpdConsumer.setShippingAddressRequired(true);
tpdConsumer.setEmailRequired(true);
名稱 內容
setPhoneNumberRequired 是否要求顧客輸入電話
setShippingAddressRequired 是否要求顧客輸入地址
setEmailRequired 是否要求顧客輸入信箱

Check device can use Google Pay

確認用戶設備支援 Google Pay

/** 
    建立 TPDGooglePay 物件並給入之前步驟中建立的 TPDMerchant 與 TPDConsumer 物件
    判斷用戶目前裝置是否可使用 Google Pay
    您可在 TPDGooglePayListener.onReadyToPayChecked 取得判斷結果
*/

tpdGooglePay = new TPDGooglePay(this, tpdMerchant, tpdConsumer);
tpdGooglePay.isGooglePayAvailable(this);

TransactionInfo

建立商品資訊 TransactionInfo 並以此申請 paymentData

建立 TransactionInfo 物件並使用 tpdGooglePay.requestPayment 方法，以取得 PaymentData

tpdGooglePay.requestPayment(TransactionInfo.newBuilder()
    .setTotalPriceStatus(WalletConstants.TOTAL_PRICE_STATUS_FINAL) 
    .setTotalPrice("3")
    .setCurrencyCode("TWD")
    .build(), LOAD_PAYMENT_DATA_REQUEST_CODE);
名稱 內容
setTotalPriceStatus 設定交易的狀態
TOTAL_PRICE_STATUS_FINAL : 交易金額狀態為最終狀態
setTotalPrice 設定交易金額
setCurrencyCode 設定交易幣別

onActivityResult

當使用者按下按鈕並選完信用卡與運送資訊後 , 於您的 onActivityResult 中可取得 paymentData

部分程式碼如下:

@Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) { 
        switch (requestCode) {
            case LOAD_PAYMENT_DATA_REQUEST_CODE: 
            switch (resultCode) {
                case Activity.RESULT_OK:
                    paymentData = PaymentData.getFromIntent(data); 
                    break;
                case Activity.RESULT_CANCELED: 
                    showMessage("Canceled by User"); 
                    break;

Get Prime

向TapPay 取得本次交易的 Prime:

tpdGooglePay.getPrime(paymentData, TPDGooglePayGetPrimeSuccessCallback, TPDGetPrimeFailureCallback);


TPDGooglePayGetPrimeSuccessCallback 參數

名稱 類別 內容
prime String prime 字串，於 Pay by Prime 交易時使用
cardInfo TPDCardInfo 卡片資訊，將會回傳以下幾個值：
名稱類別(長度)內容
bincodeString(6)卡片前六碼
lastFourString(4)卡片後四碼
issuerString發卡銀行
issuerZhTWString發卡銀行中文名稱
bankIdString銀行代碼
fundingint卡片類別
-1 = Unknown
0 = 信用卡 (Credit Card)
1 = 簽帳卡 (Debit Card)
2 = 預付卡 (Prepaid Card)
cardTypeint卡片種類
-1 = Unknown
1 = VISA
2 = MasterCard
3 = JCB
4 = Union Pay
5 = AMEX
levelString卡片等級
countryString發卡行國家
countryCodeString發卡行國家碼
merchantReferenceInfo JSON 若商戶在 TapPay 後台使用 Co-brand card management 功能，且交易卡號符合設定時，將會回傳此參數，不支援 JKOPAY

商戶於TapPay後台設定的affiliate code management須限制於20字元內且為半形的英數字
名稱類別內容
affiliateCodesArray商戶在 TapPay 後台的 Co-brand card management 功能專區設定的Affiliated codes


TPDGetPrimeFailureCallback 參數

名稱 類別 內容
status Int 錯誤代碼
reportMsg Message 錯誤訊息

Example

如果您碰到問題，可參考我們的範例程式，並將 MainActivity.java 中的變數更換為您的值:

名稱 內容
EXAMPLE_APP_ID 您的 app ID
EXAMPLE_APP_KEY 您測試環境的 app key

Google Pay on the Web

如欲了解最新版號 SDK 以及各版號之間的差異性，請參考 Github Release Page : TapPay Web Github

Overview

Google Pay Mobile Web 主要分為兩個步驟：
1. 利用 SDK getPrime API 取得 prime
2. 將 prime 回傳給您的伺服器，並透過 pay-by-prime 來完成付款

Google Pay 按鈕設計原則請參考： Google Pay Brand Guidelines

Prerequisite

若欲使用 Google Pay on the Web ，您必須符合以下要求：
1. https://developers.google.com/payments/mobile-web-setup

SetupSDK

TPDirect.setupSDK(appID, appKey, serverType)

名稱 內容
appID 請參考 appid
appKey 請參考 appkey
serverType 使用的伺服器種類
測試時請使用 Sandbox 環境 (sandbox)
實體上線後請切換至 Production 環境 (production)


請注意版本的差異，避免載入 Web SDK 錯誤
https://js.tappaysdk.com/sdk/tpdirect/v5.14.0
https://js.tappaysdk.com/tpdirect/v5.13.1
使用方式請參考以下範例

// include google pay.js 
<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<script src="https://js.tappaysdk.com/sdk/tpdirect/v5.14.0"></script>
<script>
    TPDirect.setupSDK(APP_ID, 'APP_KEY', 'sandbox')
</script>



若使用低於 v5.14.0 之Web SDK版本，請使用以下路徑引用 Web SDK

// include google pay.js 
<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<script src="https://js.tappaysdk.com/tpdirect/v5.13.1"></script>
<script>
    TPDirect.setupSDK(APP_ID, 'APP_KEY', 'sandbox')
</script>



若要使用 Subresource Integrity (SRI) 確保引入的來源安全性
請參考以下引用方式

<script src="https://js.tappaysdk.com/sdk/tpdirect/<version>" type="text/javascript" 
integrity="sha256-<hash_key>" crossorigin="anonymous"></script>


每個版本對應的 hash key 請至 Release Note 中查找

如欲知 SDK 兼容性，請參考 SDK compatibility

setupGooglePay

/** 
    使用 TPDirect.paymentRequestApi.setupGooglePay 設定 Google Pay 相關參數
*/

var googlePaySetting = {

    googleMerchantId: "Come from google portal", // Optional in sandbox, Required in production
    allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
    merchantName: "TapPay Test!",
    emailRequired: true, // optional
    shippingAddressRequired: true, // optional,
    billingAddressRequired: true, // optional
    billingAddressFormat: "MIN", // FULL, MIN

    allowPrepaidCards: true,
    allowedCountryCodes: ['TW'],

    phoneNumberRequired: true // optional
} 

TPDirect.googlePay.setupGooglePay(googlePaySetting)


名稱  類別 內容
googleMerchantId String 設定 Google Merchant Id
allowedCardAuthMethods Array 設定信用卡授權方式
名稱內容
PAN_ONLY一般信用卡交易
CRYPTOGRAM_3DSToken 卡交易 (e.g : Google Pay)
merchantName String 設定 Merchant Name
emailRequired Boolean 要求輸入信箱
shippingAddressRequired Boolean 要求輸入運送地址
billingAddressRequired Boolean 要求輸入帳單地址
billingAddressFormat String 設定 Address 格式, 詳細請參考 Google Pay Address format
allowPrepaidCards Boolean 允許預付卡
allowedCountryCodes Array 允許的國別, ISO 3166-1 alpha-2 格式
phoneNumberRequired Boolean 要求使用者輸入電話號碼

setupPaymentRequest

/**
    使用 TPDirect.paymentRequestApi.setupPaymentRequest 設定 payment request 物件
    並在 callback function 回傳物件關於使用者的瀏覽器是否可以使用 Payment Request API 以及是否有卡片進行付款
*/

var paymentRequest = {
    allowedNetworks: ["AMEX", "JCB", "MASTERCARD", "VISA"],
    price: "123", // optional
    currency: "TWD", // optional
}

TPDirect.googlePay.setupPaymentRequest(paymentRequest, function(err, result){
    if (result.canUseGooglePay) {
        canUseGooglePay = true
    }
})


名稱 類別 內容
allowedNetworks Array 設定支援的卡別
price String 交易金額
currency String 交易幣別

setupTransactionPrice

/**
    此 function 為 optional, 如果在 setupPaymentRequest 就已經設定金額的話
    就不用使用此 function, 如果還未設定, 請在 get prime 之前把金額設定好
*/

TPDirect.googlePay.setupTransactionPrice({
    price : "123",
    currency: "TWD"
})


名稱 類別 內容
price String 交易金額
currency String 交易幣別

setupGooglePayButton

/**
    設定 Google Pay Button
    此為 optional 的設定, 如果要自己放置 Google Pay Button 則可不使用此功能
*/

TPDirect.googlePay.setupGooglePayButton({
    el: "#container",
    color: "black",
    type: "long",
    getPrimeCallback: function(err, prime){}
})


名稱 類別 內容
el CSS Selector or DOM element 設定 Google Pay Button 的元件
color String 設定 Google Pay button 顏色, black , white
type  String 設定 Google Pay type,
long : Buy with Google Pay
short : Buy with text
getPrimeCallback function 透過 Callback 得到 prime


詳細的 Google Pay Button 設定請參考 Google Button Options

Get Prime

/**
    如果沒有使用 setupGooglePayButton 的話，請呼叫 getPrime 去觸發 Google Pay
    如果有使用 setupGooglePayButton 的話，此功能可以不使用
*/

TPDirect.googlePay.getPrime(function(err, prime, result){
    // get the prime, and send it to Server
})


err 的參數

名稱 類別
status Int
msg String
originalError String or Object



result 的參數

名稱 類別
client_ip String
card_info 卡片資訊，將會回傳以下幾個值：
名稱類別(長度)內容
bincodeString(6)卡片前六碼
lastfourString(4)卡片後四碼
issuerString發卡銀行
issuer_zh_twString發卡銀行中文名稱
bank_idString發卡銀行代碼
fundingint卡片類別
-1 = Unknown
0 = 信用卡 (Credit Card)
1 = 簽帳卡 (Debit Card)
2 = 預付卡 (Prepaid Card)
typeint卡片種類
-1 = Unknown
1 = VISA
2 = MasterCard
3 = JCB
4 = Union Pay
5 = AMEX
levelString卡片等級
countryString發卡行國家
countrycodeString發卡行國家碼
merchant_reference_info 若商戶在 TapPay 後台使用 Co-brand card management 功能，且交易卡號符合設定時，將會回傳此參數，不支援 JKOPAY

商戶於TapPay後台設定的affiliate code management須限制於20字元內且為半形的英數字
名稱類別內容
affiliate_codesArray商戶在 TapPay 後台的 Co-brand card management 功能專區設定的Affiliated codes

Example Code


Example1
自己實做 Google Pay Button 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-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://js.tappaysdk.com/tpdirect/v4"></script>
    <title>Document</title>
</head>

<body>
    <button id="test" onClick="getPrime()">Google Pay</button>
    <script>
        var canUseGooglePay = false
        var googlePaySetting = {
            googleMerchantId: "Come from google portal",
            allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
            merchantName: "TapPay Test!",
            emailRequired: true, // optional
            shippingAddressRequired: true, // optional,
            billingAddressRequired: true, // optional
            billingAddressFormat: "MIN", // FULL, MIN

            allowPrepaidCards: true,
            allowedCountryCodes: ['TW'],

            phoneNumberRequired: true // optional
        }
        TPDirect.googlePay.setupGooglePay(googlePaySetting)

        var paymentRequest = {
            allowedNetworks: ["AMEX", "JCB", "MASTERCARD", "VISA"],
            price: "123", // optional
            currency: "TWD", // optional
        }
        TPDirect.googlePay.setupPaymentRequest(paymentRequest, function (err, result) {
            if (result.canUseGooglePay) {
                canUseGooglePay = true
            }
        })

        function getPrime() {
            if (!canUseGooglePay) {
                return console.error("You can't use Google Pay.")
            }
            TPDirect.googlePay.getPrime(function (err, prime) {
                // get the prime, and send it to Server
            })
        }
    </script>
</body>

</html>


Example2
使用 setupGooglePayButton 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-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://js.tappaysdk.com/tpdirect/v4"></script>
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <script>
        var googlePaySetting = {
            googleMerchantId: "Come from google portal",
            allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
            merchantName: "TapPay Test!",
            emailRequired: true, // optional
            shippingAddressRequired: true, // optional,
            billingAddressRequired: true, // optional
            billingAddressFormat: "MIN", // FULL, MIN

            allowPrepaidCards: true,
            allowedCountryCodes: ['TW'],

            phoneNumberRequired: true // optional
        }
        TPDirect.googlePay.setupGooglePay(googlePaySetting)

        var paymentRequest = {
            allowedNetworks: ["AMEX", "JCB", "MASTERCARD", "VISA"],
            price: "123", // optional
            currency: "TWD", // optional
        }
        TPDirect.googlePay.setupPaymentRequest(paymentRequest, function (err, result) {
            if (result.canUseGooglePay) {
                TPDirect.googlePay.setupGooglePayButton({
                    el: "#container",
                    color: "black",
                    type: "long",
                    getPrimeCallback: function(err, prime) {
                        // get the prime, send it to server
                    }
                })
            }
        })
    </script>
</body>

</html>

Q&A

如果您需要設定 Content Security Policy 中的 frame-src， 請設置以下三個網域：

  1. js.tappaysdk.com
  2. fraud.tappaysdk.com
  3. pay.google.com