Google Pay Hosted Checkout

Overview

This document details the steps necessary to integrate Google Pay Hosted Checkout with your site.

Prerequisites

  1. Make sure your have Google Pay Merchant ID set up

Implementing Google Pay Hosted Checkout

Server-Side Integration

Server Endpoint Creation

A server endpoint is needed in order to accept the Google Payload from Hosted Checkout.

Step 1: Create an endpoint and method for API Integration on your Server side that takes the Google Payload and makes a call to Cardknox.

API Integration

Below are the steps to integrate Google Pay with the Cardknox API:

Once the consumer confirms the payment, Google Pay API generates a token in a form of a JSON string.

Integration Steps:

  1. Encode that token with Base64 encoding.

  2. Set xCardNum field to the encoded token above.

  3. Set xDigitalWalletType to GooglePay.

  4. Set the remaining required fields:

    1. xAmount to transactionInfo.totalPrice - This is the consumer-approved amount from the Google Pay payment sheet.

    2. xCommand - Set to one of the values that start with cc: like cc:sale, cc:auth, etc.

    3. xBillFirstName

    4. xBillLastName

    5. xBillStreet

    6. xBillCity

    7. xBillState

    8. xBillZip

For more details, please contact your Cardknox Representative.

Client-Side Integration

Adding Reference to iFields

Step 1: Add the iFields .js file after the <head> tag on your payment page:

<script src=https://cdn.cardknox.com/ifields/**ifields-version-number**/ifields.min.js></script>

Adding iFrame and JavaScript Objects for Google Pay button

Step 1: Add the following iFrame JS snippet inside the <body> where Google Pay button is desired.

  • Make sure you have an attribute data-ifields-id="igp" as part of <iframe> tag

  • Make sure you have an attribute data-ifields-oninit="gpRequest.initGP" as part of <iframe> tag where “gpRequest.initGP“ is a function name that initializes a Google Pay Object

<iframe id="igp" class="gp hidden"
data-ifields-id="igp" data-ifields-oninit="gpRequest.initGP"
src=https://cdn.cardknox.com/ifields/**ifields-version-number**/igp.htm
allowpaymentrequest sandbox="allow-popups allow-modals allow-scripts
allow-same-origin">
</iframe>

Step 2: Create JavaScript object that holds all the properties/methods required to process Google Pay

const gpRequest = {
merchantInfo: {
merchantName: "Example Merchant"
},
buttonOptions: {
buttonSizeMode: GPButtonSizeMode.fill
},
billingParams: {
//phoneNumberRequired: true,
emailRequired: true,
billingAddressRequired: true,
billingAddressFormat: GPBillingAddressFormat.full
}

For the full example please click here.

Step 3: Implement desired callbacks.

For the list of available callbacks please refer to Google Pay Object

  • The two main functions required to be implemented are the following (the rest are optional):

    • onGetTransactionInfo: Calculates the total amount based on the Charge amount, Fees, Taxes, Shipping Costs, etc.

    • onProcessPayment - A callback that will be called after Consumer Pays and Google returns a token with all other requested Consumer information like Billing Address, Shipping Address, etc. This is where you need to make an ajax call to your server with the Google Payload. The sample for making an ajax call please see below.

Sample Code for making Ajax Call

initGP: function authorizeGPay(googlePayload) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open("POST", https://yourserver.com/your-endpoint);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(googlePayload));
});
}

Step 4: Create JavaScript function that will initialize iFields.

function initGP() {
return {
merchantInfo: gpRequest.merchantInfo,
buttonOptions: gpRequest.buttonOptions,
onGetTransactionInfo: "gpRequest.onGetTransactionInfo",
environment: gpRequest.environment,
billingParameters: gpRequest.billingParams,
shippingParameters: {
emailRequired: gpRequest.shippingParams.emailRequired,
onGetShippingCosts: "gpRequest.shippingParams.onGetShippingCosts",
onGetShippingOptions: "gpRequest.shippingParams.onGetShippingOptions"
},
onBeforeProcessPayment: "gpRequest.onBeforeProcessPayment",
onProcessPayment: "gpRequest.onProcessPayment",
onPaymentCanceled: "gpRequest.onPaymentCanceled",
onGPButtonLoaded: "gpButtonLoaded"
};
}

Make sure the iFrame attributedata-ifields-oninit has the name of this function

The initGP() function above returns Google Pay Request Object.

Enable Google Pay

Step 1: Add following JS to your page to enable Google Pay.

document.addEventListener("DOMContentLoaded", function(event) {
.....
enableGooglePay('amountId'); //Id of Amount field
.....
}

enableGooglePay function takes ID of the Amount fields from your website.

There are multiple purposes for the enableGooglePay() call

  • Validate that Google Pay is available and supported by Customer’s device/browser.

  • Load Google Pay button.

Step 2: Use Signature to call enableGooglePay.

Merchants with Amount field on their website use the below signature to call enableGooglePay()

document.addEventListener("DOMContentLoaded", function(event) {
...
enableGooglePay('amountId'); //Id of Amount field
...
}

enableGooglePay() function takes ID of the Amount fields from your website.

Merchants without Amount field on their website use the below signature to call.

document.addEventListener("DOMContentLoaded", function(event) {
.....
enableGooglePay();
.....
}

Please note: In this case it’s up to the Merchant to make a call to updateGooglePayAmount every time amount changes.

Questions?

Contact [email protected]