Google Pay API Implementation Demo (Web)

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 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) ♪

Danny Hutson

33 thoughts on “Google Pay API Implementation Demo (Web)

  1. Will this work in electron and is there a library I can require() or will I have make a script with the targe target src on tbe HTML side of things

  2. now this is the google dev videos that i like. Simple, straight to the point, not 'let's "drink cofee" with this smug guy for 15 minutes, and let's pretend his jokes are funny and witty' type of show.

  3. Google should try to emulate what Paypal has done by simply letting the merchants create intuitive Paypal button on the Paypal site. That is faster and a lot more easier to use and implement. This presentation is more for developers and not for the average Joe. Simplicity and ease of use always works best!

  4. its not working Properly im getting error on this code kindly help to resolve this error …. your code link is : https://github.com/googletez/web-payment-samples

  5. I have been trying this for days and I am not making any progress as I am not good at coding..Can somebody please help me? All I want is to use Gpay for my website so that my clients can pay me!

Leave a Reply

Your email address will not be published. Required fields are marked *