Google Pay - Frontend

3

If you want to know the latest SDK version and the difference between each version, please refer to Github Release Page: TapPay Android Github.
Overview
Google Pay App are divided into 3 steps : 1. Setup project , use TPDSetup setup enviroment 2. Prepare payment information , use TPDGooglePay to get paymentData 3. Use paymentData request to TapPay to get prime , pass to your server and complete the transaction using Pay by Prime API (please refer to Backend developer document of Tapay.) Google Pay Button Design： Google Pay Brand Guidelines
Environment
Add following line to the build.gradle repositories. } Add the following lines to the build.gradle in your app module: compile 'com.google.android.gms:play-services-wallet:16.0.0' compile ‘com.android.support:appcompat-v7:24.2.1’ Add the following meta-data to your Manifest application: <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" /> Set up your environment with the following steps: 1. TPDSetup 2. Prepare Payment Data 3. Check device can use Google Pay 4. TransactionInfo 5. onActivityResult 6. Get Prime
TPDSetup
Use TPDSetup to setup enviroment: TPDSetup.initInstance(getApplicationContext(), APP_ID, "APP_KEY", TPDServerType.SANDBOX);

Prepare Payment Data
1. Create TPDMerchant instance and setup your merchant information //Setup allowed card 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("Your Store Name")
2. Create TPDConsumer instance and setup require information TPDConsumer tpdConsumer = new TPDConsumer(); tpdConsumer.setPhoneNumberRequired(true); tpdConsumer.setShippingAddressRequired(true); tpdConsumer.setEmailRequired(true);

Check device can use Google Pay
Check user device can use Google Pay Create TPDGooglePay Instance and pass previous step created TPDMerchant and TPDConsumer. Check device can use Google Pay Get result from TPDGooglePayListener.onReadyToPayChecked */ tpdGooglePay = new TPDGooglePay(this, tpdMerchant , tpdConsumer); tpdGooglePay.isGooglePayAvailable(this);
TransactionInfo
Create TransactionInfo instance and use tpdGooglePay.requestPayment method to get PaymentData. tpdGooglePay.requestPayment(TransactionInfo.newBuilder() .setTotalPriceStatus(WalletConstants.TOTAL_PRICE_STATUS_FINAL) .setTotalPrice("3") .setCurrencyCode("TWD") .build(), LOAD_PAYMENT_DATA_REQUEST_CODE);

onActivityResult
Obtain paymentData from onActivityResult, this object contain user chose card and shipping information 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;
tpdGooglePay.getPrime(paymentData, TPDGooglePayGetPrimeSuccessCallback, TPDGetPrimeFailureCallback); TPDGooglePayGetPrimeSuccessCallback parameters
TPDGetPrimeFailureCallback parameters format

Example
Please refer to our Google Pay Example , and change the variables in MainActivity.java to your own value:
If you want to know the latest SDK version and the difference between each version, please refer to Github Release Page: TapPay Web Github
Overview
Google Pay Mobile Web has 2 steps: 1. Use SDK getPrime API to retrieve the Prime. 2. Pass the Prime back to your server, and call Pay by Prime API to complete the transaction. Google Pay Button Design： Google Pay Brand Guidelines
Prerequisite
To use Google Pay on the Web, check the following information: https:// developers.google.com/payments/mobile-web-setup
SetupSDK
TPDirect.setupSDK(appID, appKey, serverType)
Please be aware of the differences of each Web SDK version to avoid loading errors. https://js.tappaysdk.com/sdk/tpdirect/v5.14.0 https://js.tappaysdk.com/tpdirect/v5.13.1 Please refer to the following usage examples. // 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> When use web SDK version less than v5.14.0, please use the following path to include the 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>
setupGooglePay
TPDirect.googlePay.setupGooglePay Setup Google Pay Merchant Fill in you request from Google’s Google Merchant ID 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)

setupPaymentRequest
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 } })

setupTransactionPrice
This function is optional, if you setup amount in setupPaymentRequest, you don’t need to implement this function, if not, please setup amount before you get prime. TPDirect.googlePay.setupTransactionPrice({ price : "123", currency: "TWD" }) setupGooglePayButton Setup Google Pay Button This is optional setting, if you want to setup Google Pay Button by yourself, you don’t need to implement this function. TPDirect.googlePay.setupGooglePayButton({ el: "#container", color: "black", type: "long" getPrimeCallback: function(err, prime){} })
More information about Google Pay Button setting, please refer to Google Button Options.
Get Prime
If you don't implement setupGooglePayButton, Please use getPrime to trigger Google Pay. If use setupGooglePayButton, you don't have to implement this function. TPDirect.googlePay.getPrime(function(err, prime, result) { // get the prime, and send it to Server })

Example Code
Example1 Custom 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 Example2 Use setupGooglePayButton to setup Google Pay Button <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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({
Q&A
If you have to set frame-src of Content Security Policy, please set following three domains. 1. js.tappaysdk.com 2. fraud.tappaysdk.com 3. pay.google.com

1. appld
An integer identifier for your application or website. This is used to activate your application or website in order to start using our services. You can find it via Portal > Developer > Application. Application

2. appKey
An authenticator key for your application or website. This is used to activate your application or website in order to start using our services. You can find it via Portal > Developer > Application. Application

3. Production
The official environment that charges customer's cards for transactions. You product should be in this environment when it officially launches and goes live. You can specify the environment for your application during TPDSetup.initInstance(). You can specify the environment for your website during TPDirect.setupSDK(). Things to remember : 1. Register your merchants in the production environment on Portal and use the official bank’s acquirer account. 2. Register your IP in the production environment on Portal. 3. Use the production app key instead of the sandbox one. 4. When setting the Frontend environment, change the server type to production. 5. The Backend APIs should use the production domain instead of the sandbox one.(https://sandbox.tappaysdk.com/tpc/ -> https://prod.tappaysdk.com/tpc/)
4. Sandbox
A type of environment that has all the functions of a production environment except no money will be charged for the transactions. You should first test your application or website in this environment before you move on to the production environment. You can specify the environment for your application during TPDSetup.initInstance(). You can specify the environment for your website during TPDirect.setupSDK().
5. TPDServerType
An enum used to differentiate sandbox and production environment. It should be one of the following values: