🔍
Google Pay API Implementation Demo (Web) - YouTube
Channel: Google Chrome Developers
[0]
Here is how you can integrate Google Pay
for your e-commerce website
[3]
in four simple steps:
[5]
Load the Google Pay API JavaScript library;
[8]
determine readiness to pay;
[11]
add the Google Pay button;
[13]
create a <i>PaymentDataRequest</i> object.
[15]
♪ (music) ♪
[17]
First, you add the script tag to your site.
[19]
As soon as the script is loaded,
[21]
you will construct the <i>PaymentsClient</i> object
[23]
by passing it to an environment field:
[25]
<i>TEST</i> or <i>PRODUCTION</i>.
[28]
For the <i>TEST</i> environment,
you don't need to register with Google.
[32]
You can play with the API yourself
and integrate into your site.
[35]
In this case, we do show users' real data.
[38]
However, whenever they make a selection,
we will return you a fake token.
[43]
If you are working with one
of the supported processors,
[45]
we will return you a token
[46]
which you can use in their <i>TEST</i> environment.
[50]
Remember, your real card details
[51]
are never used when in environment <i>TEST,</i>
[54]
but you must add at least one chargeable card
[56]
to your Google account before you proceed.
[60]
Once you complete the integration
and you are ready to handle real payments,
[64]
come and register with us
through our self-service portal
[66]
and then flip the environment to <i>PRODUCTION</i>.
[69]
You can apply for production access
on <i>g.co/pay/sign-up</i>
[75]
Now that you have
your <i>PaymentsClient</i> constructed,
[78]
the first API you will call is <i>is ReadyToPay</i>.
[82]
With <i>is ReadyToPay</i>,
[83]
you can determine whether the user
has a valid payment method on file
[87]
and is on a supported browser.
[89]
The Google Pay API
supports all major browsers,
[92]
including Safari, Opera, Firefox, Chrome,
[96]
UC Browser, and soon Microsoft Edge.
[99]
At Google, we focus
on optimizing for conversion,
[102]
so if <i>is ReadyToPay</i> returns false,
[105]
we highly recommend that you do not render
the Google Pay button.
[109]
Now that you know that the user
is ready to make a payment,
[111]
you will call our second API, <i>createButton</i>.
[115]
We recommend that you use this API
to ensure the Google Pay branding
[119]
is used correctly per our latest guidelines.
[121]
In the future, we will also
automatically translate the button text
[125]
based on the user's location.
[127]
Once you add the button to your site
and the user clicks on the button,
[131]
you will call the <i>loadPaymentData</i>
to open up the payment sheet.
[135]
You can construct
the <i>paymentDataRequest</i> object,
[138]
which is a set of payments configurations
used for this particular transaction.
[142]
You can specify and request
the following information
[145]
in addition to the payment credentials:
[147]
email, phone number,
shipping address, billing address.
[153]
We recommend that you collect
as little information as necessary
[156]
to prevent users from typing
additional information
[158]
which might not be stored
in their accounts.
[161]
One more point to call out in this object
[163]
is the payment request
tokenization parameters.
[166]
Google encrypts information
about a shopper's selected card
[170]
for secure processing
by a merchant's gateway,
[172]
or directly on a merchant's secured servers.
[175]
Be sure to check your processor's
integration guidelines
[178]
to find out what they need
to finalize the payment.
[181]
Now that you've constructed
the request object,
[183]
you will pass it to <i>loadPaymentData</i>,
[186]
an async call which will open
our payment sheet.
[189]
Once the user makes a selection,
[191]
we will return to you a <i>paymentData</i> object,
[193]
which consists of metadata
about the user's selection.
[197]
It also includes the payment token
[198]
which you can use
to complete the transaction.
[201]
Now you can send
the final production-ready app
[204]
to Google for a final test.
[207]
Google tests the apps with real cards
and informs you if everything is correct.
[211]
The app is then cleared to launch.
[214]
You can find additional information
in our developer documentation
[216]
on <i>g.co/pay/api</i>
[221]
Don't miss any future videos
about Google Pay, Chrome, and Web,
[224]
and subscribe to the Google Chrome
Developers channel.
[227]
If you're watching on a mobile,
[229]
tap the little bell to receive
new upload notifications.
[232]
See you soon!
[233]
♪ (music ends) ♪
Most Recent Videos:
You can go back to the homepage right here: Homepage