Google Pay Sample Code

1. Let's define a helper object with all necessary components:

   const window.gpRequest = {
       environment: GPEnvironment.test,
       merchantInfo: {
           merchantName: "Example Merchant"
       },
       buttonOptions: {
           buttonSizeMode: GPButtonSizeMode.fill
       },
       billingParams: {
           billingAddressRequired: true,
           billingAddressFormat: GPBillingAddressFormat.full                        
       },
       shippingParams: {
           emailRequired: true,
           onGetShippingCosts: function (shippingData) {
               logDebug({
                   label: "onGetShippingCosts",
                   data: shippingData
               });
               return {
                   "shipping-001": "0.00",
                   "shipping-002": "1.99",
                   "shipping-003": "10.00"
               }
           },
           onGetShippingOptions: function (shippingData) {
               logDebug({
                   label: "onGetShippingOptions",
                   data: shippingData
               });
               let selectedOptionid = "shipping-001";
               if (shippingData && shippingData.shippingOptionData && shippingData.shippingOptionData.id !== "shipping_option_unselected") {
                   selectedOptionid = shippingData.shippingOptionData.id;
               }
               return {
                   defaultSelectedOptionId: selectedOptionid,
                   shippingOptions: [
                       {
                           "id": "shipping-001",
                           "label": "Free: Standard shipping",
                           "description": "Free Shipping delivered in 5 business days."
                       },
                       {
                           "id": "shipping-002",
                           "label": "$1.99: Standard shipping",
                           "description": "Standard shipping delivered in 3 business days."
                       },
                       {
                           "id": "shipping-003",
                           "label": "$10: Express shipping",
                           "description": "Express shipping delivered in 1 business day."
                       },
                   ]
               };
           }
       },
       onGetTransactionInfo: function () {
           let amt = getAmount();
           return {
               displayItems: [
                   {
                       label: "Subtotal",
                       type: "SUBTOTAL",
                       price: amt.toString(),
                   },
                   {
                       label: "Tax",
                       type: "TAX",
                       price: (0.1 * amt).toString(),
                   }
               ],
               countryCode: 'US',
               currencyCode: "USD",
               totalPriceStatus: "FINAL",
               totalPrice: (1.1 * amt).toString(),
               totalPriceLabel: "Total"
           }
       },    
       onBeforeProcessPayment: function () {
           return new Promise(function (resolve, reject) {
               try {
                   //Do some validation here
                   resolve(iStatus.success);
               } catch (err) {
                   reject(err);
               }
           });
       },
       onProcessPayment: function (paymentResponse) {
           return new Promise(function (resolve, reject) {
                   try {
                       // show returned data in developer console for debugging
                       console.log("paymentResponse", JSON.stringify(paymentResponse));
                       paymentToken = paymentResponse.paymentData.paymentMethodData.tokenizationData.token;
                       console.log("paymentToken", paymentToken);
                       const amt = (paymentResponse && paymentResponse.transactionInfo && paymentResponse.transactionInfo.totalPrice) || 0;
                       try {
                       if (amt <= 0) {
                           throw "Payment is not authorized. Invalid amount. Amount must be greater than 0";
                       }
                       authorizeGPay(paymentResponse)
                           .then((resp) => {
                               gpRequest.handleResponse(resp);
                               setGPPayload(JSON.stringify(paymentResponse, null, 2));
                               resolve(resp);
                           })
                           .catch((rej) => {
                               console.error("Payment is not authorized", JSON.stringify(rej));
                               setGPPayload("");
                               setTimeout(function () { alert("Payment is not authorized. Please check the logs") }, 500);
                               reject(rej);
                           });
                       } catch (err) {
                           const emsg = JSON.stringify(err);
                           console.error(emsg);
                           setTimeout(function () { alert(emsg) }, 500);
                           reject({error: err});
                       }
               } catch (err) {
                   reject(err);
               }
           });
       },
       onPaymentCanceled: function(respCanceled) {
           setTimeout(function () { alert("Payment was canceled") }, 500);
       },
       handleResponse: function (resp) {
           const respObj = JSON.parse(resp);
           if (respObj) {
               if (respObj.xError) {
                   setTimeout(function () { alert(`There was a problem with your order (${respObj.xRefNum})!`) }, 500);
               } else
                   setTimeout(function () { alert(`Thank you for your order (${respObj.xRefNum})!`) }, 500);
           }
       },
   };

2. Object with necessary properties to initialize Google Pay:

   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"
       };
   }

   For more information please refer to Request object

3. Google Pay iField:

   <style> 
       ......
       iframe {
           border: 0 solid black;
           width: 600px;
           height: 28px;
           padding: 0px;
           margin-bottom: 5px;
       }
       iframe.gp {
           display: block;
           border: 0;
           width: 250px;
           height: 45px;
           padding: 0px;
           margin: 0px;
       }
       .hidden {
           display: none;
       }
       .....
   </style>   
   <body>
     <form id="payment-form" method="POST">
       .....
       <input id="amountId" name="xAmount" placeholder="Amount"></input>
       .....
       <iframe id="igp" class="gp hidden" data-ifields-id="igp" data-ifields-oninit="initGP" src="igp.htm"
               allowpaymentrequest
               sandbox="allow-popups allow-modals allow-scripts allow-same-origin"
               title="GPay checkout page">
       </iframe>
       .....
   </form>
   </body>    

4. Let’s enable Google Pay for the website:

   document.addEventListener("DOMContentLoaded", function(event) { 
       .....
       ckGooglePay.enableGooglePay({amountField: 'amount'}); 
       .....
   }

   For more information please refer to Google Pay Control Object

5. To see the full solution please click here.