Google Pay Hosted Checkout

Create a Sandbox Contact Us Knowledge Base
Search…
Overview
This document details the steps necessary to integrate Google Pay Hosted Checkout with your site.
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
Find the latest version of iFields here.
Step 1: Add the iFields .js file after the <head> tag on your payment page:
1
<script src=https://cdn.cardknox.com/ifields/**ifields-version-number**/ifields.min.js></script>
Copied!
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​
1
<iframe id="igp" class="gp hidden" 
2
data-ifields-id="igp" data-ifields-oninit="gpRequest.initGP" 
3
src=https://cdn.cardknox.com/ifields/**ifields-version-number**/igp.htm 
4
allowpaymentrequest sandbox="allow-popups allow-modals allow-scripts allow-same-origin
5
allow-forms allow-popups-to-escape-sandbox allow-top-navigation"> 
6
</iframe>
Copied!
Step 2: Create JavaScript object that holds all the properties/methods required to process Google Pay
1
const gpRequest = {
2
merchantInfo: {
3
merchantName: "Example Merchant"
4
},                
5
buttonOptions: {                               
6
buttonSizeMode: GPButtonSizeMode.fill
7
},                
8
billingParams: {
9
//phoneNumberRequired: true,
10
emailRequired: true,
11
billingAddressRequired: true,                               
12
billingAddressFormat: GPBillingAddressFormat.full                                        
13
}
Copied!
Find the latest version of iFields 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
1
initGP: function authorizeGPay(googlePayload) {
2
    return new Promise(function (resolve, reject) {
3
        var xhr = new XMLHttpRequest();
4
        xhr.open("POST", https://yourserver.com/your-endpoint);
5
        xhr.onload = function () {
6
            if (this.status >= 200 && this.status < 300) {
7
                resolve(xhr.response);
8
            } else {
9
                reject({
10
                    status: this.status,
11
                    statusText: xhr.statusText
12
                });
13
            }
14
        };
15
        xhr.onerror = function () {
16
            reject({
17
                status: this.status,
18
                statusText: xhr.statusText
19
            });
20
        };
21
        xhr.setRequestHeader("Content-Type", "application/json");
22
        xhr.send(JSON.stringify(googlePayload));
23
    });
24
}
Copied!
Step 4: Create JavaScript function that will initialize iFields.
1
function initGP() {
2
​
3
    return {
4
        merchantInfo: gpRequest.merchantInfo,
5
        buttonOptions: gpRequest.buttonOptions,
6
        onGetTransactionInfo: "gpRequest.onGetTransactionInfo",
7
        environment: gpRequest.environment,
8
        billingParameters: gpRequest.billingParams,
9
        shippingParameters: {
10
            emailRequired: gpRequest.shippingParams.emailRequired,
11
            onGetShippingCosts: "gpRequest.shippingParams.onGetShippingCosts",
12
            onGetShippingOptions: "gpRequest.shippingParams.onGetShippingOptions"
13
        },
14
​
15
        onBeforeProcessPayment: "gpRequest.onBeforeProcessPayment",
16
        onProcessPayment: "gpRequest.onProcessPayment",
17
        onPaymentCanceled: "gpRequest.onPaymentCanceled",
18
        onGPButtonLoaded: "gpButtonLoaded"
19
    };
20
}
Copied!
Make sure the iFrame attributedata-ifields-oninit has the name of this function
The initGP() function above returns Google Pay Object.​
Enable Google Pay
window.ckGooglePay object - controls initialization of Google Pay button.
Method
Call Required
Description
enableGooglePay
Yes
Initializes and enables Google Pay Button.
Takes EnableGooglePayParams object
updateAmount
Conditional
Updates amount on Google Sheet.
You can provide either All, One or None of the parameters for enableGooglePay call.
amountField specified - in this case Google Pay total amount will be automatically updated whenever amount has changed
amountField is not specified - in this case it’s up to you to provide the correct amount for Google Pay. One of the ways to do it is to call window.ckGooglePay.updateAmount manually.
iframeField specified - this value will be used to communicate with Google Pay button.
This option is especially helpful for Angular clients using shadow DOM.
iframeField is not specified - it’s value will be calculated based on data-ifields-id attribute.
In this case it must be set to “igp“: data-ifields-id="igp".
EnableGooglePayParams Object
Name
Type
Required
Description
amountField
String|Object
No
Field containing amount.
Could be either name of the field (String) or
field itself (Object)
iframeField
String|Object
No
Field containing iframe with Google Pay button.
Could be either name of the field (String) or
field itself (Object)
Enable Google Pay example
ckGooglePay.enableGooglePay({amountField: 'amount'});

Questions?
Contact [email protected]​
Set up Apple Pay Merchant ID with Cardknox
Google Pay Control Object
Last modified 2mo ago
Export as PDF
Copy link
Contents
Overview
Implementing Google Pay Hosted Checkout
Server-Side Integration
Client-Side Integration
Questions?