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 aPaymentDataRequestobject. ♪ (music) ♪ First, you add the script tag to your site. As soon as the script is loaded, you will construct thePaymentsClientobject by passing it to an environment field:TESTorPRODUCTION. For theTESTenvironment,
you don’t need to register with Google. You can play with the API yourself
and integrate into your site. 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 theirTESTenvironment. Remember, your real card details are never used when in environmentTEST,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 toPRODUCTION. You can apply for production access
ong.co/pay/sign-upNow that you have
yourPaymentsClientconstructed, the first API you will call isis ReadyToPay. Withis 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 ifis ReadyToPayreturns false, we highly recommend that you do not render
the Google Pay button. 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 theloadPaymentData
to open up the payment sheet. You can construct
thepaymentDataRequestobject, which is a set of payments configurations
used for this particular transaction. 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. Now that you’ve constructed
the request object, you will pass it toloadPaymentData, an async call which will open
our payment sheet. Once the user makes a selection, we will return to you apaymentDataobject, 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. You can find additional information
in our developer documentation ong.co/pay/apiDon’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) ♪