Google Pay API Implementation Demo (Web)

Here is how you can integrate Google Pay for your e-commerce website in four simple steps: Load the Google Pay API JavaScript library; determine readiness to pay; add the Google Pay button; create a PaymentDataRequest object. ♪ (music) ♪ First, you add the script tag to your site. As soon as the script is loaded, you will construct the PaymentsClient object by passing it to an environment field: TEST or PRODUCTION. For the TEST environment, you don’t need to register with Google. You can play with the API yourself and integrate into your site.

00:35 - In this case, we do show users’ real data. However, whenever they make a selection, we will return you a fake token. If you are working with one of the supported processors, we will return you a token which you can use in their TEST environment. Remember, your real card details are never used when in environment TEST, but you must add at least one chargeable card to your Google account before you proceed. Once you complete the integration and you are ready to handle real payments, come and register with us through our self-service portal and then flip the environment to PRODUCTION.

01:09 - You can apply for production access on g.co/pay/sign-up Now that you have your PaymentsClient constructed, the first API you will call is is ReadyToPay. With is ReadyToPay , you can determine whether the user has a valid payment method on file and is on a supported browser. The Google Pay API supports all major browsers, including Safari, Opera, Firefox, Chrome, UC Browser, and soon Microsoft Edge. At Google, we focus on optimizing for conversion, so if is ReadyToPay returns false, we highly recommend that you do not render the Google Pay button.

01:49 - Now that you know that the user is ready to make a payment, you will call our second API, createButton. We recommend that you use this API to ensure the Google Pay branding is used correctly per our latest guidelines. In the future, we will also automatically translate the button text based on the user’s location. Once you add the button to your site and the user clicks on the button, you will call the loadPaymentData to open up the payment sheet. You can construct the paymentDataRequest object, which is a set of payments configurations used for this particular transaction.

02:22 - You can specify and request the following information in addition to the payment credentials: email, phone number, shipping address, billing address. We recommend that you collect as little information as necessary to prevent users from typing additional information which might not be stored in their accounts. One more point to call out in this object is the payment request tokenization parameters. Google encrypts information about a shopper’s selected card for secure processing by a merchant’s gateway, or directly on a merchant’s secured servers. Be sure to check your processor’s integration guidelines to find out what they need to finalize the payment.

03:01 - Now that you’ve constructed the request object, you will pass it to loadPaymentData , an async call which will open our payment sheet. Once the user makes a selection, we will return to you a paymentData object, which consists of metadata about the user’s selection. It also includes the payment token which you can use to complete the transaction. Now you can send the final production-ready app to Google for a final test. Google tests the apps with real cards and informs you if everything is correct. The app is then cleared to launch.

03:34 - You can find additional information in our developer documentation on g.co/pay/api Don’t miss any future videos about Google Pay, Chrome, and Web, and subscribe to the Google Chrome Developers channel. If you’re watching on a mobile, tap the little bell to receive new upload notifications. See you soon! ♪ (music ends) ♪ .