Google Pay Web Integration

For additional information, see the following pages:

Google Pay™, when integrated in a webstore, allows customers to use Google Wallet to pay for their purchases. The Google Pay API enables fast, simple checkout on a retail website. Hundreds of millions of cards are saved to Google Accounts worldwide, and Google Pay integration makes it convenient for customers to use those cards for webstore payments.

How it works

When a user taps the Google Pay payment button, the website displays a payment sheet with the payment methods saved to the user's Google Account. The payment sheet also includes optional fields, such as shipping address. The user can select a payment method quickly, provide a shipping address, if required, and add new information.

Using Google Pay, shoppers don't have to manually enter their payment information on your site. Instead, their payment information, including name, email, and billing and shipping addresses, are pre-entered in a payments selection dialog that's displayed to the shopper. After the shopper selects a payment method, the API returns the payment information through a supported payments gateway, or the payment can be directly processed on your encrypted secure server.

When you integrate with the Google Pay API, you offer a one-touch checkout experience to hundreds of millions of Google users who have their credit or debit card payment information saved in their Google accounts.

To integrate Google Pay Web API with your webstore's checkout, follow the process detailed below.

Prerequisites for Google Pay Web Integration

Serve an HTTPS webpage with a latest version of TLS domain-validated certificate.
Use one of the following supported web browsers: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, or UCWeb UC Browser.

Radial-Supported Card Networks and Auth Methods

Google Pay offers two card authorization methods, PAN_ONLY and CRYPTOGRAM_3DS, and Radial supports both of these methods. Radial accepts four card networks: Amex, Discover, MasterCard, and Visa, for transactions settled in United States and Canada (USD, CAD). To specify these settings for your webstore, follow the instructions below in Step 1: Google Pay API Setup.

Google Pay JS API

Several steps are involved in integrating a web application with the Google Pay JS API and configuring it to accept payment cards. For details of each step, see the following sections.

Set up the Google Pay API.
Load the API, determine the readiness of API, and display the Google Pay button.
Create the payment data request object.
Display the Google Pay button in the browser.
After the shopper clicks the Google Pay button and makes a payment, handle the response from the Google Pay API.

As you add Google Pay to your website, refer to these resources from Google:

Step 1: Google Pay API setup

Step 2: Load the API, determine the readiness of API and display Google Pay web button

Step 3: Create payment data request object

Step 4: Display Google Pay button on browser

To add Google Pay button and to add event handler when button is clicked, complete the following steps:

Define and get the paymentClient object as shown in Step 3.

TEST environment:

function getGooglePaymentsClient() {
    if ( paymentsClient === null ) {
        paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
    }
    return paymentsClient;
}

PRODUCTION environment:

function getGooglePaymentsClient() {
    if ( paymentsClient === null ) {
        paymentsClient = new google.payments.api.PaymentsClient({environment: 'PRODUCTION'});
    }
    return paymentsClient;
}

Check the readiness to pay using Google Pay API, Call isReadyToPay() as described in Step 2.

function getGoogleIsReadyToPayRequest() {
    return Object.assign(
        {},
        baseRequest,
        {
            allowedPaymentMethods: [baseCardPaymentMethod]
        }
    );
}

As mentioned in Step 2 above, add 'onGooglePayLoaded()' as an onload function

function onGooglePayLoaded() {
    const paymentsClient = getGooglePaymentsClient();
    paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
        .then(function(response) {
            if (response.result) {
                addGooglePayButton();
            }
        })
        .catch(function(err) {
            // show error in developer console for debugging
            console.error(err);
        });
}

Define 'div' tag in a web page where you want to add the button and add Google Pay button

<div id="container"></div>function addGooglePayButton() {
    const paymentsClient = getGooglePaymentsClient();
    const button =
        paymentsClient.createButton({onClick: onGooglePaymentButtonClicked}); // onGooglePaymentButtonClicked method is defined in next step
    if (document.getElementById('container') != null) {
        document.getElementById('container').appendChild(button);
    }
}

Step 5: Click Google Pay button, make a payment and handle the response from the Google Pay API

To add onClick handler to Google Pay button and to process the authorization, complete the following steps:

Add onClick handler to Google Pay button. The handler will be called as user clicks on Pay button.

function addGooglePayButton() {
    const paymentsClient = getGooglePaymentsClient();
    const button =
        paymentsClient.createButton({onClick: onGooglePaymentButtonClicked});
    if (document.getElementById('google-pay-button') != null) {
        document.getElementById('google-pay-button').appendChild(button);
    }
}

Process the authorization after user clicks on Pay button where the onClick event handler calls loadPaymentData() immediately after it interacts with the Google Pay, payment button. This method presents a Google Pay payment sheet that allows selection of a payment method and optionally configured parameters.

function onGooglePaymentButtonClicked() {
    const paymentDataRequest = getGooglePaymentDataRequest();
    paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

    const paymentsClient = getGooglePaymentsClient();
    paymentsClient.loadPaymentData(paymentDataRequest)
        .then(function(paymentData) {
            processPayment(paymentData);
        })
        .catch(function(err) {
            // show error in developer console for debugging
            console.error(err);
        });
}

After a Google user grants permission for your site to receive information about the user's selected form of payment and optional contact data, handle the response from the Google Pay API.

function processPayment(paymentData) {
    // show returned data in developer console for debugging
    paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    if (paymentToken != null) {
        console.log('Received google pay data');
        // send paymentToken to your backend server which will be parsed and used to
        // create a Radial CreditCardAuthRequest using the WalletPaymentInformation data block as mentioned here.
    } else {
        alert("Please select appropriate payment method");
    }
}

Example Response from Google Pay API

{
   "signature":"MEUCICx6HeNozaC9OlbQ/auODUSMM3LMbIG6ifR92n1Sg6wsAiEAhMUCzr65DJEaq1kzvYRhqB2OjgUF0KTOfe0J9wE2sUk\u003d",
   "intermediateSigningKey":{
      "signedKey":"{\"keyValue\":\"MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAENmrxs4pIO3t5U69sDzzPuxQBiF8L16Qq7N7ngwaIA8c9MPaU5T28TOtthYZbx5OxmhKxX+ENC7TOv4ctIU8v1Q\\u003d\\u003d\",\"keyExpiration\":\"1583311459742\"}",
      "signatures":[
         "MEYCIQCQaFdqxE5qvi239ARVW08jgN3kd2Mu82mxT71yekL5KAIhANQv5GN8B+ZybzTf+bmmP/nLkVMXZOkVAcpA0xxw/5N/"
      ]
   },
   "protocolVersion":"ECv2",
   "signedMessage":"{\"encryptedMessage\":\"Rv9kJ8ppjdTU75ScLQNl7NrRxCM0rTb/Vrqrv8ojo9E2RKzvcjF7XzXwtWsW19Su0PLcVUViZBQ4hrbdTWzkgvUZt5dUTdlXf5Oc/IiaZXCHhcNJxOOzTdIVQ4z585zAqC75XeE5g/9Nj/LN8gvTt39AyGicTh7sEu4v5Y2/VMqY/LGZSrt7Hrva6kb+Gh0F0CB1+97GWjAb1ocoIQqIP9LyS2ZxZ1gbxqa65r5U8+EfUIrG/KXcmZjjMPeaWsRnp2qR3dLWXz6ERZTvDHwUYUg8q6A5BfAjw7jzxvpWQYA3TduVraIWGuMUG58rHGY86fk4m+4F0dEDHW1wypawFQISinGlkuEiFEHq09oXQ19dRxqqaE0KR6VmFEoUHp3iPcpjhOsC8583STBh8eVMCH49Ws18ZdgSTrZ4lKqDPOYpgblKf1cq5cHQysHGLVvDJULurPy2GvwF1jbC1tZQ26jE0joXlepF\",\"ephemeralPublicKey\":\"BHkCxK41VgmFSyQRozlf7jm0Kqm9S6VbyVwB6UzyS4pWw5oOj9LNrwHRqI2GgUnZ5GUhJmiMCkD89dph+OBXgMg\\u003d\",\"tag\":\"Gv3Y4yyc2w5z3BOqURQWFp7f3sHWzzkET/EnefgAWvY\\u003d\"}"
}

Example combining all code snippets

This example code block combines the code snippets from the steps above.

<div id="container"></div>
<script>
const baseRequest = {
    apiVersion: 2,
    apiVersionMinor: 0
};
// The current accepted networks for Radial are : Amex, Discover, MasterCard, and Visa.
const allowedCardNetworks = ["AMEX", "DISCOVER", "MASTERCARD", "VISA"];

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

const tokenizationSpecification = {
    type: 'PAYMENT_GATEWAY',
    parameters: {
        'gateway': 'radialpayments',
        'gatewayMerchantId': 'TMSUS'
    }
};

const baseCardPaymentMethod = {
    type: 'CARD',
    parameters: {
        allowedAuthMethods: allowedCardAuthMethods,
        allowedCardNetworks: allowedCardNetworks
    }
};

const cardPaymentMethod = Object.assign(
    {},
    baseCardPaymentMethod,
    {
        tokenizationSpecification: tokenizationSpecification
    }
);

let paymentsClient = null;
let data = null;

function getGoogleIsReadyToPayRequest() {
    return Object.assign(
        {},
        baseRequest,
        {
            allowedPaymentMethods: [baseCardPaymentMethod]
        }
    );
}

function getGooglePaymentDataRequest() {
    const paymentDataRequest = Object.assign({}, baseRequest);
    paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
    paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
    paymentDataRequest.merchantInfo = {
        merchantId: '0123456789', // merchant ID is available for a production environment after approval by Google
        merchantName: 'Example Merchant'
    };
    return paymentDataRequest;
}

function getGooglePaymentsClient() {
    if ( paymentsClient === null ) {
        // In Production use {environment: 'PRODUCTION'}
        paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
    }
    return paymentsClient;
}

function onGooglePayLoaded() {
    const paymentsClient = getGooglePaymentsClient();
    paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
        .then(function(response) {
            if (response.result) {
                addGooglePayButton();
            }
        })
        .catch(function(err) {
            // show error in developer console for debugging
            console.error(err);
        });
}

function addGooglePayButton() {
    const paymentsClient = getGooglePaymentsClient();
    const button =
        paymentsClient.createButton({onClick: onGooglePaymentButtonClicked});
    if (document.getElementById('container') != null) {
        document.getElementById('container').appendChild(button);
    }
}

function getGoogleTransactionInfo() {
    return {
        countryCode: 'US',
        currencyCode: 'USD',
        totalPriceStatus: 'FINAL',
        // set to cart total
        totalPrice: '10.00' // get total price from cart
    };
}


function onGooglePaymentButtonClicked() {
    const paymentDataRequest = getGooglePaymentDataRequest();
    paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

    const paymentsClient = getGooglePaymentsClient();
    paymentsClient.loadPaymentData(paymentDataRequest)
        .then(function(paymentData) {
            processPayment(paymentData);
        })
        .catch(function(err) {
            // show error in developer console for debugging
            console.error(err);
        });
}

function processPayment(paymentData) {
    // show returned data in developer console for debugging
    paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    if (paymentToken != null) {
        console.log('Received google pay data');
        // send paymentToken to your backend server which will be parsed and used to
        // create a Radial CreditCardAuthRequest using the WalletPaymentInformation data block as mentioned here.
    } else {
        alert("Please select appropriate payment method");
    }
}
</script>

Subsequent Processing

The main goal of the Google Pay web integration above is to obtain the tokenization data block in JSON format. That block is then parsed and used to create a Radial CreditCardAuthRequest (Digital Wallet Authorization Request) using the WalletPaymentInformation data block. More information about mapping json response with Radial CreditCardAuthRequest can be found here: Google Pay Processing.

Google Pay Production Setup

Although Google Pay API test configuration doesn't return live and chargeable payment information, it does allow you to test elements of your purchase workflow such as Confirmation pages, Receipts, and Billing and Shipping information. Google Pay API test payloads can be used to test your integration with Radial. Radial's test systems will accept these values since they are syntactically valid.

After your application has been set to Production environment, the payloads returned will match the card information sent to Google Pay and can be used to fully test the Radial integration with non-test values. To set up production access, complete Google's request form. More information can be found here: Request Production Access.

Google does not provide test cards. If you need chargeable test cards, please reach out to your acquiring bank .

For more information on Google Pay Web Integration, see the Google Pay JS API at https://developers.google.com/pay/api/web/guides/tutorial.