How We Implemented Google Pay

Last year, before the launch of the Christmas season, we decided to implement an additional payment method in the e-shops Nay.sk and ElectroWorld.cz – Google Pay. This method facilitates a more comfortable payment for customers’ orders and, therefore, a faster processing of the order.

Google Pay is already known to Czech and Slovak customers through NFC mobile payments. If your payment card supports Google Pay and you activate the option in your account, you can just place your mobile to the payment terminal and your payment is processed.

Last year, however, a discussion began on the possibility of utilizing Google Pay directly in the online environment to allow processing of e-shop payments or of payments for other services (e.g. tickets, airline tickets, food, etc.). Google presents this payment method using a motto: “A better way to pay, by Google”. For NFC payment to work in a shop, the payment card issuer must support Google Pay; in an e-shop, however, the Google Pay service can be used by anyone with a payment card linked to their Google account.

In Slovakia, we were the first to implement Google Pay in a web interface.

Nay je prvním slovenským e-shopem, který integroval platební metodu Google Pay na svůj web a do své mobilní aplikace. Jak probíhala samotná implementace #GooglePay? To se už brzy dočtete na našem Pecka blogu.#development #jsmepecka https://t.co/bc46G2ykQo

— PeckaDesign (@peckadesign) December 7, 2018

How does Google Pay work in an online environment?

Google Pay can be imagined as a standard card payment with a few additional tricks. One can use this method as long as you have a Google account with a linked payment card. If a purchase is then made from any device on which the customer is logged on his/her Google account (web browser, smart phone, smart watch, tablet...) and Google Pay is selected as a method of payment, a new screen appears where the customer just chooses one of the linked payment cards – and it is done. No protracted entering of card no., validity or CVV is needed – the entire transaction is completed smoothly and quickly.

Google aims to teach the customers to use Google Pay and to provide them with this option throughout the entire Google environment. The ultimate goal might be the customer calling up a Google assistant on his/her mobile phone or smart loudspeaker, saying, “Google, I need to buy a USB cable for my printer”. Google would then automatically identify the e-shop with the best offer and do everything in customer’s stead – including ordering and payment.

Why to look into Google Pay?

• Google has billions of users
• 75% of mobile devices use Android.
• The Google Pay mobile app has over 100 million downloads worldwide.
• When paying using Google Pay directly from the product detail, the order can be completed using only 2 clicks.
• At present, Google Pay support operates in 68 countries worldwide.
• Neither the platform nor the browser type present any limitations.
• The payment has already been implemented by leading worldwide e-commerce players (e.g. Airbnb, Deliveroo, Shopify, Uber, Wish).
• Google charges no fees for completed transactions.
• Certain types of implementation (see more in a detailed analysis of the option in the following paragraph) facilitate acquisition of data about delivery address or user’s contact details through API interface. E-shop can then use the data, for example to pre-fill the order form.

Data source: Google presentation

What are the options of implementation on the web?

The Google Pay interface can be implemented in several ways – from the simplest one where the developer does not need to do (almost) anything but that brings only limited benefits to the customer, up to a solution where the developer has everything under control and the customer can enjoy the full benefits of the system.

1. Google Pay as an option in the payment gateway when paying online with a card:

• We first noticed this option in GP Webpay in the Czech republic where it was automatically enabled for all clients; it has however been implemented in other payment gateways, too.
• Pros: The implementation needs no extra work from the e-shop developer.
• Cons: Google Pay option is hidden inside the payment gateway to which the client is redirected at the stage of payment only and it is therefore almost invisible.

2. Google Pay as a separate payment option at the e-shop level generated by the payment gate:

• Some payment gates offer separate presentation of individual payment options even at the level of the e-shop. For example, PayU offers such a solution.
• Pros: Payment is visible for the customer even at the level of the e-shop.
• Cons: For completing the transaction, the customer is usually redirected away from the e-shop.

3. Direct integration of Google Pay using a processor:

• The implementation is fully performed by the e-shop. Payments are however routed through a processor and there is therefore no need for the e-shop to own a banking licence for online payment processing. You might want to take a look at the list of supported processors, growing all the time.
• Pros: The implementation is fully under the control of the e-shop, including placement of the buttons (in the order, directly in the product detail, etc.), the customer is not redirected away from the e-shop to pay, there is a possibility of pre-filling the customer’s personal/delivery data based on customer’s Google profile.
• Cons: A higher time investment is needed for the implementation than the previous options. The processors also charge a fee for completed transactions (unlike Google who charge no fees).

4. Direct integration of Google Pay without the use of a processor:

• The e-shop is fully responsible for the entire implementation including all administrative issues related to payment processing.
• Pros: There is no need to employ a processor; therefore, the e-shop pays no transaction fees.
• Cons: To be able to utilize this option, the e-shop must have PCI DSS certification, which is not easy to acquire.

And what route did we take? For each e-shop, we opted for a different approach and even tried out an implementation of Google Pay in a mobile app.

Google Pay implementation on the frontend of ElectroWorld.cz

PayU offers all three former ways of Google Pay implementation, i.e. those using a processor. Due to the fact that the beginning of the Christmas season was imminent and fast implementation was needed, we opted for the second method for this website. However, we intend to implement Option 3, offering a broader utilization of Google Pay benefits.

On the side of PayU, Google pay implementation rests in sorting out administrative issues and turning on the Google Pay option in the e-shop’s PayU profile. As PayU via REST API is fully implemented on the ElectroWorld website and the offer of payment methods is being automatically updated on a daily basis, everything went smoothly. Once the permission was granted on the side of PayU and synchronization was initiated, Google Pay appeared immediately among the e-shop payment options. The only hiccup of this implementation is the fact that PayU does not support the display of Google Pay window with a payment card selection inline, in the e-shop environment, and the customer is being redirected to a special PayU Google Pay microsite. A solution for this is to switch to a direct implementation where such a window will appear on our system.

Google Pay implementation on the frontend of Nay.sk

For implementation of the payment method on the Nay.sk website, we opted for a direct integration using the Braintree processor, which we have had previous experience with as we used it for implementing PayPal payment.

At present, Google Pay is implemented in a way displaying it at the order level as a separate payment method in the menu of payment options available for individual delivery options. Once the order is placed, a transition page appears and then – still within the Nay.sk website – a Google Pay window is displayed where the user can select from the payment cards linked with his/her Google account.

When using a direct integration (with or without a processor), the implementation must pass the Google approval process

Google keeps an eye on the Google Pay implementations so that they look as similar as possible on various websites and so that they are therefore consistent for the users. That’s why our implementation had to pass the approval process, after which we got permission to use Google Pay for the Google Merchant ID of the e-shop.

What needs to be done to get permission:

• Go through the integration checklist defined by Google (regardless of the processor used for implementation).
• Pass the approval process; Google Pay Brand Guidelines will definitely come in handy.
• A link to the request form is placed at the bottom of the integration checklist – Request production access.

We recommend that the submitted request includes a description for the support as to where and how they can try out your implementation on the production or testing website. The website is in Slovak – the support, however, resides in the U.S. and therefore communicates in English. In the end, providing them with a link to a Google document containing printscreens with legends, links to individual steps of order processing and access data for the testing interface proved to be the most effective way.

One more recommendation – the support is in the U.S. so in our time zone, you should always expect a reaction during night hours at the earliest. If possible, be ready to reply immediately so that you do not have to wait for another 24 hours.

Implementation of Google Pay into an Android mobile app

E-shops Nay.sk and ElectroWorld.cz provide mobile apps for their customers (EW Android, Nay Android, Nay iOS). 

In the new release of the app, Nay.sk decided to allow their customers to purchase goods using the app within their new concept, ‘Scan-Pay-Go’. For that reason, a payment method allowing a 1-click payment needed to be implemented into the app – and that’s where Google Pay proved to be the perfect method.

The app itself is being developed by the InloopX company in cooperation with us. We are developing REST API interface for the app through which the app communicates with us and both draws data from us (data about products, stores, special offers, etc.) and sends us data (about registrations, orders, reservations, etc.).

Where Google Pay implementation into the mobile app is concerned, we use API and act as server side. We process the token generation for payment initiation and subsequent verification that the payment has been successfully processed. All of that works through SDK Braintree. There are three main reasons for not doing it all in the app directly:

• Security: The app does not need to store any keys or hashes necessary for communication with SDK Braintree in its APK file.
• Usability on multiple mobile platforms: current endpoints can be utilized by developers for platforms other than Android in the future. Our universal REST API endpoints will therefore be ready to use then and there is no need to develop communication methods individually for every platform.
• Updates of communication with SDK: If any amendments are required due to changes in SDK Braintree, we can perform the change in our system and the change will be immediately effective in all installed versions of the app. If the change had to be performed in the app, a new release of the app would be necessary – the update of which would not be as fast and comfortable for the customer as when the change is made on the website.

Summary

We are happy to have had the opportunity to learn more about an interesting payment method with great future potential, and to implement it in several ways. Our work, however, is not over. On the ElectroWorld website, we intend to transfer the current solution into a directly integrated method in a way allowing the customer to perform payment directly in the e-shop. On both aforementioned servers, we are analyzing options with regards to how to get the payment button even closer to the customer for an even easier purchase.

Useful links:

• demo e-shop with Google Pay by Google
• website for developers by Google
• integration checklist by Google 
• form  for requesting implementation approval  
• PayU documentation for direct integration 
• Braintree documentation for direct integration