PWA and Google-Pay

Let there be payments, and there were!!!

Technology keeps on evolving, unlike us….For instance, PWA (Progressive Web Apps)…

You cannot escape from this term nowadays, something similar happened with me. 

What’s PWA ?

Progressive Web Apps (PWA) are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, sends relevant push notifications and even has an icon on the home screen.

Begin….

Things required :

1. Any recent browser, ( I prefer Chrome)
2. Web Server for Chrome
3. Sample code, or your own code (HTML+CSS+JS)

You can start with 

https://github.com/googlecodelabs/your-first-pwapp/archive/master.zip

Install the WebServer for Chrome.

After installing, click on the Apps shortcut in the Chrome:

Next, click on the Web Server icon:

You’ll see this dialog , which allows you to configure your local web server:

Click the choose folder button, and select the folder (which has index.html). 

Under Options, check the box next to “Automatically show index.html”, as shown below:

Stop and restart the server…

Yayyyy….

What’s Next….Integrate Google Pay

Things required…

1. Supported web browser: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge.
2. Add a payment method to your Google account

---

Begin…

1. Add the following script in index.html:

<script
  async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

---

You can see here onGooglePayLoaded(), this gets called once the script is loaded.

Initialize a PaymentsClient object after the Google Pay API JavaScript library has loaded.

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

2. Call isReadyToPay() to determine if the Google Pay API is supported by the current device and/or browser.

paymentsClient.isReadyToPay(googlePayBaseConfiguration)
    .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);
    });

here, if you observe googlePayBaseConfiguration is passed..

We need to construct googlePayBaseConfiguration as below :

const googlePayBaseConfiguration = {
  allowedPaymentMethods: ['CARD'],
  apiVersion: 1,
};

3. createButton() , if the response.result is true from step2..

function createButton() {
   const button = paymentsClient.createButton({
       buttonColor: 'white', //default
       buttonType: 'long',
       onClick: onGooglePaymentsButtonClicked
   });
   document.getElementById('container').appendChild(button);

}

4. Implement the onGooglePaymentsButtonClicked

function onGooglePaymentsButtonClicked() {
     paymentsClient.loadPaymentData(paymentDataRequest)
.then(function(paymentData){
  
paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}).catch(function(err){
  // show error in developer console for debugging
  console.error(err);
});
}

We need to construct the paymentDataRequest as below:

paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
   merchantId: '01234567890123456789',
   transactionInfo: transactionInfo,
   cardRequirements: cardDetails,
   paymentMethodTokenizationParameters: tokenizationSpecification,
});

cardDetails / tokenizationSpecification / transactionInfo as below 

Woo hoo…..you have successfully integrated Google Pay….

But wait…

Google Pay changed their api (supporting apiVersion 1 & 2 both)

Next we will see how to use Google Pay ApiVersion 2

Google API version2

Step 1 is same

Step 2 some changes :

You will make googlePayBaseConfiguration as below:

---

let googlePayBaseConfiguration = {
        apiVersion: 2,
        apiVersionMinor: 0,
        allowedPaymentMethods: [{
          type: 'CARD',
          tokenizationSpecification: tokenizationSpecification,
          parameters: {
            allowedAuthMethods: [
              'PAN_ONLY',
              'CRYPTOGRAM_3DS'
            ],
            billingAddressRequired: true,
            billingAddressParameters: {
              format: 'FULL',
              phoneNumberRequired: true
            },
            allowedCardNetworks: [
              'AMEX',
              'DISCOVER',
              'JCB',
              'MASTERCARD',
              'VISA'
            ]
          }
        }]
};

---

//tokenizationSpecification
tokenizationSpecification = {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'gatewayMerchantId'
        }
};

Step 3 is same

Step 4 some changes

You will construct paymentData as below :

paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
      merchantInfo: merchantInfo,
      transactionInfo: transactionInfo,
});

transactionInfo remains same, but merchantInfo check below

merchantInfo = {
  merchantId: '01234567890123456789'
};

Woo hoo, you have successfully integrated Google-Pay version2