PWA and Google-Pay

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:

Chrome app icon

Next, click on the Web Server icon:

Web Server For Chrome

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

Web Server Dialog

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:

Web Server Options

Stop and restart the server…

Toggle to restart the server..

Yayyyy….

What’s Next….Integrate Google Pay

Four Steps for integrating 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);
}
Google Pay 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 

TransactionInfo
tokenizationSpecification
CardDetails

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

PWA and Google — Pay

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