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.
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.
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.
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.
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 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.
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) ♪
Không có nhận xét nào:
Đăng nhận xét