Cardknox is now Sola
Learn More
LogoLogo
Contact Us
  • Introduction
  • 🔗API
    • Transaction API
      • Credit Card
      • Check (ACH)
      • EBT
      • Gift Card
      • Fraud
    • Customer and Recurring API
    • Reporting API
    • Account Boarding API
      • Account Boarding Merchant Agreement
      • Account Boarding Swagger UI
    • Code Samples
    • Error Codes
  • 📦SDK
    • .NET SDK
      • Transaction Workflow
    • iOS SDK
      • iOS SDK - Technical Guide
      • Workflow
    • Android SDK
      • Android SDK - Technical Guide
  • 🧰 Cardknox Products
    • 3D Secure 2.0
      • Client-Side Integration
        • Client-Side Integration (Non-iFields)
      • Server-Side Integration
    • Account Updater
    • Batch Processing
    • Browser-Based POS systems (BBPOS)
    • CloudIM Developer Guide
    • Deep Linking
      • Deep Linking Integration for Third-Party Websites
    • EBT Online
    • Gateway Emulators
    • iFields
      • Angular iFields
    • Merchant Portal
      • FAQ
    • Mobile App
    • Split Capture
    • Tap to Phone - Android
    • Partner Portal
    • PaymentSITE
      • QR Codes for PaymentSITE
    • Webhooks
  • 📱Mobile Wallets
    • Apple Pay Hosted Checkout
      • Apple Pay Hosted Checkout Initial Setup
      • Apple Pay Prerequisites
      • Apple Pay Hosted Checkout Objects Reference (Request)
      • Apple Pay Hosted Checkout Objects Reference (Response)
      • Apple Pay iFields Integration
      • Apple Pay Hosted Checkout Sample Code
      • Apple Pay Features
      • Set up Apple Pay Merchant ID with Cardknox
    • Click-To-Pay - Hosted Checkout
      • Click-To-Pay Initial Setup
      • Click-To-Pay Sample Code
      • Click-To-Pay iFields Integration
      • Click-To-Pay Objects Reference (Request)
      • Click-To-Pay Objects Reference (Response)
    • Google Pay Hosted Checkout
      • Google Pay Control Object
      • Google Pay Request Objects
      • Google Pay Response Objects
      • Google Pay Sample Code
      • iFields Integration
      • Google Pay FAQ
  • 🔌Plugins
    • Netsuite
      • NetSuite Features and Demo
    • WooCommerce
    • Magento Plugin
    • RMH (Retail Management Hero)
    • RMS (Retail Management Systems)
  • 📖Articles
    • Frequently Asked Questions
    • How to Build POS Integration Flows
    • Card Present Integration Guide
  • Glossary of Terms
Powered by GitBook
On this page
  • Overview
  • Implementing Google Pay Hosted Checkout
  • Server-Side Integration
  • Client-Side Integration
  • Questions?

Was this helpful?

Export as PDF
  1. Mobile Wallets

Google Pay Hosted Checkout

Overview

Google Pay Hosted Checkout is our simple integration that enables online Google Pay processing through the Cardknox gateway. This document details the steps necessary to integrate Google Pay Hosted Checkout with your site.

Contents

  • Server-Side Integration

    • Server Endpoint Creation

    • API Integration

  • Client-Side Integration

    • Adding Reference to iFields

    • Adding iFrame and JavaScript objects for the Google Pay button

    • Enabling Google Pay

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.

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 the 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 if available

    6. xBillCity if available

    7. xBillState if available

    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 the Google Pay button is desired.

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

<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
allow-forms allow-popups-to-escape-sandbox allow-top-navigation"> 
</iframe>

Step 2: Create JavaScript object that holds all of 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                                        
}

Step 3: Implement desired callbacks.

  • The two main functions below need to be implemented (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 the 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 that the iFrame attributedata-ifields-oninit has the name of this function.

Enable Google Pay

window.ckGooglePay object - controls initialization of Google Pay button.

Method

Call Required

Description

enableGooglePay

Yes

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, the Google Pay total amount will be automatically updated whenever the 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 - its 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 the name of the field (String) or the field itself (Object)

iframeField

String|Object

No

Field containing iFrame with Google Pay button. Could be either the name of the field (String) or the field itself (Object)

Enable Google Pay example

ckGooglePay.enableGooglePay({amountField: 'amount'});

Questions?

Last updated 2 years ago

Was this helpful?

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

Find the latest version of iFields .

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

Full a full sample code, refer to the iFields

For the list of available callbacks, please refer to .

For full sample code, please refer to .

The initGP() function above returns

Initializes and enables Google Pay Button. Takes object

Check out the Google Pay FAQ page .

For additional questions, contact

📱
Google Payload
here
document.
Google Pay Sample Code
here
support@cardknox.com
EnableGooglePayParams
Google Pay Object
Google Pay Object
Google Pay Object.