Ready client module Google Pay

Comrades, I present a ready-made JavaScript module for making payments using Google Pay. The module assumes use in the modern development environment npm with export-import, however, those who want pure ES5, I think, will be able to redo it easily.

Link to module . The code has the necessary documentation and comments. Here I will give some explanations.



I must say that the Google documentation for the payment button turned out to be not the easiest, the list of errors returned by the Google Pay API is also not the most comprehensive. Therefore, unlike the work with ApplePay, Google Pay had to be a little different, before the module really worked.
')
The work consists of two stages: first we have to decide whether or not to show the button (not all browsers support Google Pay), and then perform the payment processing itself.

1. Button display

export function showGooglePayButton(options, callbacks) { //   const check = checkParams("showGooglePayButton", options, callbacks); if (!check) { return false; } else { options = check.options; } const paymentsClient = new google.payments.api.PaymentsClient({environment: options.environment}); //      ,   API callbacks.setPaymentClient(paymentsClient); const request = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [options.googleBaseCardPaymentMethod] }; paymentsClient.isReadyToPay(request) .then(function(response) { if (response.result) { callbacks.success(); return true; } else { console.log("    Google Pay  "); callbacks.fail(); } }) .catch(function(err) { console.log("showGooglePayButton ERROR"); callbacks.fail(); }); } 

There is nothing difficult. In options, we pass two parameters - googleBaseCardPaymentMethod and environment.

googleBaseCardPaymentMethod is an object that lists payment types and parameters (more details here on the allowed search). If it is not specified, we call the standard setter in the code, which returns a typical object to us:

 const setGoogleBaseCardPaymentMethod = () => { return { type: "CARD", parameters: { allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"], allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"] } } }; 

environment is an environment, PRODUCTION or TEST

On the callback call for success, we actually draw (or show the button that has already been drawn). This is your choice. Just remember that Google requires compliance with its guidelines .

2. Processing

To display the Google button, the Pay API of your browser created a paymentClient object, which now along with other parameters must be passed to the processing function. Let's look at other parameters:

googleBaseCardPaymentMethod - see above
googlePayPublicKey, merc_id, merc_name - you must have a registered merchant to successfully work with Google Pay. Its parameters, we get the back.

In addition, we pass the success and fail callbacks, as well as data for making a payment (see below).

So, to make a payment, we must take the previously created paymentClient object and call its loadPaymentData method with the paymentDataRequest object: const paymentDataRequest = getGooglePaymentDataRequest () :

 const getGooglePaymentDataRequest = () => { const cardPaymentMethod = Object.assign( {}, baseMethod, { tokenizationSpecification: token } ); const paymentDataRequest = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods : [cardPaymentMethod], /* for demo (enviroment TEST): merchantInfo : { merchantId: '12345678901234567890', merchantName: 'JOHN SMITH' }, */ /* for prod (enviroment PRODUCTION): merchantInfo : { merchantId: options.merc_id, merchantName: options.merc_name }, */ merchantInfo : { merchantId: options.merc_id, merchantName: options.merc_name }, transactionInfo : { currencyCode: options.currency, totalPriceStatus: 'FINAL', totalPrice: "" + options.sum } }; return paymentDataRequest; }; 

For the test environment, Google offers its merchantInfo object. It should be used exactly with the merchantId , which is written in the example, merchantName is not essential.

In addition, we need a token object:

 const token = { /* for demo (enviroment TEST): parameters: { "protocolVersion": "ECv1", "publicKey": yourTestPublicKey } */ /* for prod (enviroment PRODUCTION): parameters: { "protocolVersion": "ECv1", "publicKey": params.googlePayPublicKey } */ type: 'DIRECT', parameters: { "protocolVersion": "ECv1", "publicKey": options.googlePayPublicKey } }; 

→ Read more about parameters here.

Then, when the object is formed, a request is sent to the Google server using the loadPaymentData method, a frame with saved maps is opened, and the frame is closed after the operation is completed:

 paymentsClient.loadPaymentData(paymentDataRequest) .then(function(paymentData) { const googleToken = JSON.parse(paymentData.paymentMethodData.tokenizationData.token); // your own client-back ajax request here } 

After successfully completing the method (i.e. calling the saved cards and passing verification), we can make an AJAX request to our own back-up with the goal of making a payment using Google Pay. In this request, we will need to pass the googleToken that came from Google, as well as the public key.

Everything, our payment Google Pay after processing on a bek took place!