Google Pay Web Integration

1. Define your Google Pay API version. Declare the version of the Google Pay API as shown in the example code block below. Each passed object's fields must include the major and minor versions.

   const baseRequest = {
      apiVersion: 2,
      apiVersionMinor: 0
   };

2. Choose a payment tokenization method. Google encrypts a shopper's selected card information for secure payment processing using the merchant's gateway payment processing or directly on a merchant's secured servers. If you are integrating with Radial, the payment will be processed by using gateway payment processing, and you should use these values:
   • "type": "PAYMENT_GATEWAY"
   • "gateway": "radialpayments" // Obtain the gateway value from Radial
   • "gatewayMerchantId": "--Store Id provided to merchant by Radial--"

   const tokenizationSpecification = {
     type: 'PAYMENT_GATEWAY',
     parameters: {
       'gateway': 'radialpayments', // Obtain the gateway value from Radial
       'gatewayMerchantId': 'TMSUS' // Obtain the proper merchantId from Radial
     }
   };

3. Define the card networks accepted by your site. The current accepted networks for Radial are Amex, Discover, MasterCard, and Visa. Define the two variables allowedCardNetworks and allowedCardAuthMethods as shown in the example below.

   const allowedCardNetworks = ["AMEX", "DISCOVER", "MASTERCARD", "VISA"];
   const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
   const baseCardPaymentMethod = {
     type: 'CARD',
     parameters: {
       allowedAuthMethods: allowedCardAuthMethods,
       allowedCardNetworks: allowedCardNetworks
     }
   };      

1. To load Google Pay API JavaScript library, include Google's hosted JavaScript on your page.

   <script>
     async
     src="https://pay.google.com/gp/p/js/pay.js"
     onload="console.log('TODO: add onload function')"> // onload function is defined in step 4 below
   </script>
   

2. After the Google Pay API JavaScript library loads, initialize a PaymentsClient object. Initial development uses a TEST environment, which returns dummy payment methods. Change this value to PRODUCTION once it is production ready.
   • TEST environment

     TEST environment:
     const paymentsClient =
         new google.payments.api.PaymentsClient({environment: 'TEST'});

   • PRODUCTION environment

     PRODUCTION environment:
     const paymentsClient =
         new google.payments.api.PaymentsClient({environment: 'PRODUCTION'});    

3. To determine readiness to pay with the Google Pay API, Call isReadyToPay() to determine if the Google Pay API is supported by the current browser for your specified payment methods.

   const isReadyToPayRequest = Object.assign({}, baseRequest);
   isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];
   paymentsClient.isReadyToPay(isReadyToPayRequest)
       .then(function(response) {
         if (response.result) {
           // add a Google Pay payment button
         }
       })
       .catch(function(err) {
         // show error in developer console for debugging
         console.error(err);
       });    

4. Add a Google Pay payment button to your page to encourage shoppers to check out with payment methods that are supported by the Google Pay API and your site.

   const button =
       paymentsClient.createButton({onClick: () => console.log('TODO: click handler')});
   document.getElementById('container').appendChild(button);  

1. Build a JavaScript object that describes your site's support for the Google Pay API.

   const paymentDataRequest = Object.assign({}, baseRequest);
   

2. Add the payment methods supported by your web page.

   paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];  

3. Define user transaction details like total price, currency etc for a shopper to authorize.

   paymentDataRequest.transactionInfo = {
     totalPriceStatus: 'FINAL',
     totalPrice: '123.45',
     currencyCode: 'USD',
     countryCode: 'US'
   };      

4. Provide a merchant name which is rendered in the payment sheet. Also provide A Google merchant identifier issued after your website is approved by Google. Required when PaymentsClient is initialized with an environment property of PRODUCTION. Use TEST merchantId value when environment is TEST.
   • TEST environment

     paymentDataRequest.merchantInfo = {
       merchantId: '0123456789', // use any value for testing
       merchantName: 'Example Merchant' // rendered in the payment sheet
     };
     

   • PRODUCTION environment

     paymentDataRequest.merchantInfo = {
       merchantId: '0123456789', // use value provided by Google when application is production ready and approved by google.
       merchantName: 'Example Merchant' // rendered in the payment sheet
     };       

   Link to request production access: Request Production Access

1. 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;
     }
     

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

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

3. 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);
           });
   }      

4. 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);
       }
   }

1. 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);
       }
   }     

2. 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);
           });
   }
           

3. 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");
       }
   }   

<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>