JOSE UGIA: Hey there. Making payments online
has traditionally been a lengthy process,
requiring multiple steps and filling out
thousands of fields. But it doesn't have
to be that way. My Name is Jose, and I'm a
developer programs engineer on the Google Pay team. And today I'll show you how
to equip your applications with Google Pay so
that your customers can pay quickly and safely. Come join me. Before I start-- and in
case this is the first time you're taking a look at
the Google Pay APIs-- I'd like to share with you three
reasons for integrating Google Pay into your applications. First, when you add
the Google Pay button to your website or
mobile application, you're simplifying the checkout
flow for your customers, reducing the number of steps
to as few as two clicks or taps in the best case scenario, and
just a couple more otherwise. This not only makes your
checkout process faster, but it also has an impact on
your conversion performance. Second, there are millions
of users already logged into their Google
accounts, whether that's because they use services like
Gmail, YouTube, or Search, the Chrome browser,
or the Android OS. What this means for
you is that these users don't need to log
in again to pay on your website or
mobile application. And third, security. When a user chooses a form
of payment on Google Pay, the payment credentials
are encrypted before they leave the Google servers. It is not until you send those
credentials to your payment service provider that they
will be decrypted in order to complete the payment. This makes your
application resilient to external vulnerabilities. Let me explain that. Suppose that your
application becomes compromised and payment
credentials from your users are exposed. Since the payload you received
from Google Pay is encrypted, there is nothing that anyone
without the private encryption key can do with it, making
it effectively useless. With that, let me go
back to the integration. You won't believe
it, but I just had a web application ready to
integrate Google Pay in it. With this application, I'm
selling clothing items, just like this-- t-shirts, hoodies, and others. I'll use this website to run
through a full integration with you. In essence, to add Google Pay
to my application and launch it, I'll need to start by signing
up to the Google Pay Business Console. Then I'll integrate the online
API into my application. And after that, I'll submit
my integration for approval. Once my integration
is cleared for launch, I'll publish my website. Let me start with the console. All right. So what I'll do now is I'll
sign up to the console. First is I'll access the
console through the URL pay.google.com/business/console. And what you will see is, once
you sign up with your business email address, or
business account, you will be presented with two
different pieces of information that you will need to fill out. The first one is going
to be your business name. That, for me, is going to
be Jose's T-shirt Shop. And the second one,
as you can see, is the country where my
business operates from. That, for me, is
going to be Spain. So let me select that. Soon as I hit Next
then what I'm shown is the dashboard of the console. Now, this is the main place of
operation for your Google Pay Integrations. There are two things to
call out in this section. First one, if you look at the
top right side of the screen, you will see that there's
a section called-- or there's a field
called Merchant ID. That is the identifier that
identifies your business under Google Pay. And you will need that
once we do the integration. The second is if you look at the
left side where the menus are, there's a section
called Business Profile. I'll go there to update
my business information because this is going to be
necessary by the time I submit my application for approval. And there are three
sections in here. The first one contains
information about my business. That is, for me, my
legal business name and my public business name
are going to be the same. So that's Jose's T-shirt Shop. Down below you'll see an MCC,
or Merchant Category Code, that defines a bit more
what you do as a business. It looks like, for
me, this one, 5699, miscellaneous accessory shops. Looks great. So I'll select that one. Next up is the legal address. So I'll fill that in
with a name that is Jose. The street of my business
is Calle del Peral, number 8, post code. And finally the city,
which is Ciudad del Peral, and the province. That's going to
be Madrid for me. I'll hit Save and head down to
the last section of my business information, which
is, as you can see, just a way for your customers
to connect with you in case they're facing trouble. So the first one is just
the URL for your business. That, for me, is going
to be pay-demo.web.app. The customer support URL
looks really similar, just with a support at the end. And two more pieces
of information-- one, an email address for
customer support once again. And to end up, a phone number. Great. Now hit save. And I'm done with that. Now, with that information, I'm
ready to start my integration and submit my
application for approval. So let's go ahead and do that. So now that you have
signed up to the console and added your
business information, you're ready to get
started with integration. And actually, I am ready,
because we are going through my actual website. So let me go ahead
and get started. This integration is
going to be divided in four different sections. I'll start by loading the Google
Pay API online web library. Then I'll check whether my
customer is ready to pay. That will give me
either a positive or a negative response. I'll create the
Google Pay button. And finally, I will
load the payment data, which will open the
payment sheet for my users. They can pick a form of payment
to complete the transaction. Now, just to mention
that you can also integrate the Google
Pay API on Android. You will need to use
the Android libraries. But the process is
rather similar to the one that I'll be doing now. So let me get going. First I'll go to
my index.html file because this is where
I'll load the JavaScript library through a script tag. I probably should
say a script element. I'll add the async
modifier because we want that library to
load asynchronously without conflicting
with my page load time. So I'll add the
source as follows. And finally, given that
this is a script that is loaded asynchronously, I
need to pass a onload param with the method
that will be called when the library is loaded. That's going to be
on Google Pay loaded. Close my script. Now I can go ahead and open
or create my index.js file. We'll all configure
the different paths, and I'll go through the
rest of the three steps that I just talked about. So why don't I start by creating
that function that we just referenced in the script. That is going to be
onGooglePayLoaded. First thing that I'll do
is I'll create an instance of the payments client. Payments client
is an object that will simplify how I make those
requests against the Google Pay API. So I'll do that. I'll create an object to hold
this instance that is going to be called Google Pay Client. Google Pay Client. That's it. Now I'll instantiate it on the
onGooglePayLoaded function. It's going to be an object
of the type google.payments. api.PaymentsClient. And it's going to take a few
parameters for configuration. In fact, in my
case, I'm just going to pass in one of them,
which is the environment. I'll send it to test. By operating in the
test environment, I can code my
integration fully, and I can take a look at how it feels
and how it looks on my site. Then I can try to make
payments, as well. Note that when you use
the test environment, you can use real cards
to take payments. And those cards will
never be charged. So this is ideal for
trying things out. You probably
realized that while I was creating the payment client,
I had some autocomplete help. You can get that, too. If you're using Node, you can
install the types/googlepay. So that will get the
types into your root folder of your
application, and that will be taken by
your code editor to show you the different
autocomplete help, which will make the integration easier. If you are using
TypeScript, those types will also help you get
feedback about your syntax at build time. Now, without further
ado, the first request that I'll want to
make is isReadyToPay. With isReadyToPay, I will
learn whether the customer who is transacting on my site
can pay using Google Pay. So I'll use my googlePayClient
that I just created and call isReadyToPay. Now, this request
takes some params. Few items. Part of them are configuration. And other are speaking
about the kind of cards that we accept, the
different payment methods. So let me go ahead and define
that before I keep going. So the root object
that I want to pass into isReadyToPay
request is something that I'll call
googlePayConfiguration, just because it sounds like
this is a pretty good name. And that will include
fields like API version, major and minor, to determine
which version of the API I'll use. And I'll also add the
allowed payment methods. This is a list of
payment methods that I accept on my site. I'm going to call-- for now, it's only
going to be one. To be consistent with
my existing experience, I'm going to call that
cardPaymentMethod, and I'll define it just below. So card payment method is
going to be of type card. Remember that there could
be other different forms of payment other than
credit or debit cards. This one is going to be a card. So I'll pass in the type
parameter with the card value, and then I'll add
a few more params that define this object-- two of them. First one is
allowedCardNetworks. That will determine which
networks I accept on my site. On my previous site,
I was accepting already Visa, Mastercard. So I'll go ahead and
replicate that behavior. And then on
AuthMethods, I'm going to take cards which
are saved directly to Google Pay and
tokenized cards, which is what the cryptogram
3DS value stands for. Now, there's one more property
that I haven't defined yet. That is the
tokenizationSpecification. Now, remember that Google Pay
doesn't process the payment. That's something that you
can either do yourself if you're PCI DSS
complaint, or you can use a payment service
provider to do that, like what I'm doing. I'm using a PSP or
payment gateway. So in this
tokenizationSpecification, I'll add information
that refers to that. Now we'll save that
to a object called tokenizationSpecification
that I'll define just now. The fields that you need
to pass in this object will change, depending on
which payment gateway you use. You can take a look
at our documentation to see what are the available
PSPs or payment gateways that can work with Google Pay. And instead of our
docs, as well, there's a section that goes
into more detail about the different
fields that you need for each different
payment gateway. Generally, that's going to be a
combination of your identifier, something like a merchant
ID on your payment gateway, and then something that
demonstrates that you are who you really say you are. That is something like
a token or a public key. Now, for me, the type is
going to be a payment gateway. And the params-- given that
this is just a test integration, I'm going to use a sample
name for my gateway and a random value
for my merchant ID. Great. So with that, I have
everything that I need. Let's do a quick recap
on the information that we just created. So I define an object called
Google Pay configuration that I'll pass to my
isReadyToPay method that has the versions of the API
as well as the allowed payment methods. Instead of those
payment methods, I determine or I specify
the networks and auth methods allowed on the
credit cards that I'm taking. And finally I included
the information for my payment gateway. So all that's left is just
passing that Google Pay configuration to isReadyToPay. And now with that, I
should get a response. That request returns a promise. And upon completion,
you'll get a result. So I'll create a
function to capture that at the end of the promise. Now, there are two different
values that you can get. The first one is either that
your user can pay with Google Pay or that the
user cannot do that. So let's just cover both
cases to make sure that we provide a good user experience. So if the result
is affirmative-- that is, response
result equals true-- I'm going to go ahead and
create the Google Pay button so that I can show you on the UI. I'll create a method,
create and add button that we'll define later on. If the response is
false-- that is, my user can't pay
with Google Pay-- then recommend you not to show
the button just because they cannot pay with Google Pay. Then feel free to show-- offer the user of
different forms of payment to complete the transaction. In my case, I'll do
nothing, because I'm sure I'll be able to
pay with Google Pay. This request console error. And that is most
likely because there is an issue with
the configuration. In that case, make
sure to check the logs. Make sure to check the
response so that you can inspect the error and fix
the problem before you submit your application for approval. So now we know
that our customers can pay with Google
Pay because it's ready to pay return
true, or at least this is what we are going to follow
to complete our integration. So the next step is, as we've
already defined in the promise, in the resolution
of the promise, is to create and add the
Google Pay button to our UI, to our User Interface
in our page. So I'll go ahead and
create that function. Create an add button. And for this, there's
another request. There's another
method that you can use that is offered by the API. That is the Create
Button method. So that is going to give me
the final result of the graphic that I need to add to my
page so that you don't have to worry about things
like localization or making sure that
the button looks right. Just by calling that method and
passing in some configuration params, then the API will
return you that object. All that you will need to
do is add that to your DOM. So this is what I'll do. I'll save that to a variable
called Google Pay button. And then I'll call it on my
client, Google Pay client, create button. And then I'll pass in
some configuration. The first parameter
that I'm putting in is the onClick
parameter, which will take care of responding to a tap
or a click on the Google Play button because we'll want
to do something after that. So for that, I'll create
a function later on. And it's going to be called
onGooglePaymentButtonClicked. There's additional information
that you can pass in. And it's like to make your
button longer or shorter or to change the
theme of your button, whether that's black or white,
depending on the background of your website. For me, I'll stick
to the defaults, because they happen
to be the long button and the black theme, which I
think goes great with my site. The last thing I need to do
is to add that UI element to my DOM. Again, what the
createButton method returns is the UI element by itself. It is the HTML element. So all that's needed is to get
an element that already exists inside of your HTML file and
append this Google Play button element as a child. So I already have a div
element with the ID Buy Now. So I'll go ahead
and get that by ID. And I'll append the Google
Pay button as a child to that. Now, if you go and take a
look at your web application right now, you will
see that if you are ready to pay
with Google Pay, you'll see that there's
a new button that has been added to that
container or to that element. So you can keep
track of progress. I won't do that. I'll trust that I'm
doing the right thing. So I'll keep going to the
last step of the integration. And that is going to be when
my customers hit on the button that the payment
sheet opens up so they can choose a form of payment. And for that I
will use a third-- I'll use a third request
under my Google Pay client. But first off, let's
define the function that capture the onClick event. So function on Google
payments button clicked. And with that, I
can get started. Now, this request takes a
very similar configuration to what we passed to the
isReadyToPay request. So what I'll do-- so I'm
going to take that and clone that information
into a new object that I'll call
payment data requests. And I'll call the
previous configuration, which is called Google Pay
Configuration, that if you remember, already
contains the API version and allowed payment methods. And now I'll add on top of this. So I'll add two more params. The first one is going to be
information about my business under the Merchant Input param. There's two elements
that I need to add. The first one is
the Merchant ID. If you remember, when we
sign up to the console, on the top right
side of the screen, there was an identifier
that identifies you or your business
under Google Pay. Now it's time to get that
value back, paste it in here. The second value that I'll
add is the merchant name, which is the name of my
business as I show it publicly. That is Jose's T-shirt Shop. Second param that I'll
add to this request is information about the
transaction, because remember that what I'm doing now
is I'm showing the payment sheet to my users to complete
the actual transaction. So I'll need to
include information such as the price, whether
the price is final, currency, country code, and so on. You can also request
some other parameters, like billing address for the
customer, shipping addresses, information like
phone number or email, which I won't need for now,
so I'll leave those out. But if you want to
learn more about that, make sure to check the
documentation and the reference about this request-- the load payment data request. So going back to the
transaction info, I'll include four
different params. The first one is the
total price status. This param determines
whether the price that I'm showing to my user is
final or can be changed or needs to be changed. What I mean with that is that
sometimes when your user-- when your customer changes the
shipping address or payment method, it can be that you
need to update the price. For me, this is not
going to be the case. I know that my price
is final and has been already calculated. So I can go ahead
and set it to final. Now, the total
price of that item will be based on the
selection of the user. So I'll take that item,
I'll take the price, and I'll add it to this
parameter, the total price param, which is my
selectedItem.price. Two more to go. Currency code-- that's going
to be EUR for Europe for me. I think it's a bit
weird to say EUR, but that's what I just wrote. So I'm going to take Europe. And the country code
is going to be Spain. Great. With that, I've finished
completing the configuration of my payment data request. So now, very similarly
to how we did before, I'm going to use my client
and call the loadPaymentData request. And I'm going to pass in the
paymentDataRequest object that I just created. Now, this will also
return a promise. So up on resolution,
I'll be sent the payment data or the user selection. So let's just say that your
customer went in, clicked the Google Pay button,
opened the payment sheet, and then selected a Visa card. This is what I'll get in the
payload, in the JSON object as a response of the promise. Now, I said before that
the payment information is encrypted. And that's actually the case. You will not be able to see
the actual payment credentials for the selection of the user. So you will be able to
see information like the-- if you requested it--
information like billing address or shipping addresses. So you can inspect that and
you can do something about it if you need to. So what I'll do, once the
promise gets resolved, is I'm going to call
a new method called Process Payment Data. In that method, I will
send this information to my backend service so
that I can complete the order against my payment gateway. I'll pass in the payment data. Now, this promise
can also error. And in this case, there are
two likely reasons for that. One of them is similar
to isReadyToPay. It can be that there's
a configuration error. So if that's the case, make
sure to inspect it and fix it before you submit your
application for approval. It can also be that your user
canceled the transaction. So after clicking the button
and opening the payment sheet it can be that the
user closed the window. So you still get a
response in the form of an error with the type
cancel so that if you need to, you can do something. You can show a new UI. You can log some information,
whatever you need to. For me, I'm going to log that
as an error into the console. That's really it. Now, the last function
that I'll create is the one that will send
the payment information to my back end servers
so that, again, I can complete the payment
transaction as I've been doing before so that I can create the
actual order against my payment gateway. So for that, I'll use fetch
and create a POST request to my payments endpoint. In this case, it's going
to be the orders endpoint. This is going to be a
POST method because I need to pass some information in. The type of information
will be application JSON. And the body will be the payment
data that I just received. So with that, I'm ready
with my integration. Took me about 80,
90 lines of code, including the code to
send the information to my backend service. So I'll go ahead and
see how it looks like. Fingers-- keeping
my fingers crossed that there was no
configuration error and that everything looks fine. So here I am on my site. And as you can see
now, if I refresh, the Google Play
button is showing at the bottom at the end on
the container that I specified. So that means that I am
ready to pay with Google Pay. Now, when I click it-- so you can see the
payment sheet is opening. And I have my accounts. So I'm going to
pick one of those and all the different payment
methods saved under that Google account. So I'll choose my Visa card and
I will complete the payment. And that's really it. You can see that a transaction
went in successfully. So now with that, I am ready
to go to the next step. And what I'll do now is
take a few screenshots of my integration and submit
my application for approval on the Google Pay Console. Let's do that. Great. So now that I have
completed my integration and I've checked
that it looks fine, the next step is to
go into production. And for that, I'll have
to submit my integration through the Google Pay Console. Why would I want to do that? Because remember, you're
not operating in test. If you want to take
payments, real payments, from your customers,
then you have to get clear for production. Your application will go
through a quick review process in which the Google
Pay team will take a look at your
integration, make sure it adheres to the terms
of service and the brand guidelines. And after that, you'll be
able to flip the switch to production and go live. So I'll show you how I'll
do this for my website just now so that you
can replicate that. So I'll go back to
the Business console where everything started. And this time on the left
side I'll go to Integrations. And on the section of
Integrate With Your Website, I'll click on Add a New Website. There are a few
pieces of information that will need to get
filled out in here. First one is the website URL. That is the final URL where
my Google Pay integration is going to be in production. That, for me, is
pay-demo.web.app. The integration type--
if you remember for me, it's going to be a gateway
because I'm using a third party payment service provider
to process the payments. Finally, there are
a few screenshots that I'll need to
upload so that we can show to the Google Pay team
how my integration looks like. So I'll upload one for item
selection, pre-purchase screen, payment method screen, Google
Pay API payments screen, and finally,
post-purchase screen-- once the payment has completed. So I already took
these screenshots before that to avoid making this
really long and boring to you. So I'm just loading
them as we speak. And now that I have
them, I'll go ahead and click on Save Changes. My information is
going to be checked. If everything is fine,
which I very much hope, then at the top, this
Wait For Approval button will be enabled. There we go. So as you can see, now the
Submit for Approval is enabled. I'm going to go
ahead and click it. And that's it. Let me recap what I did so far. I signed up to the
Business Console to obtain my merchant ID. After that, I implemented
the Google Pay Online API into my web application. And I just submitted my
integration for approval. Now, I'll wait for
the Google Pay team to review my integration and get
back to me with the next steps to go live. I'll let you know as soon as
I receive the approval email, and we'll continue from there. I'll see you in a bit. Hey, great news. I just got an email stating
that my integration has been approved, which means that,
nicely enough, all I need to do is just flip my
environment to production and deploy my application
to go live into the world and take real payments. So I'll just do
that right now, just because it will take
me a tiny bit of time, so that you can see
also how it looks like. So I'll go back to my
index.js file, where I had all the different
configurations and steps of the integration. And the only thing
that I'll need to do is flip the environment in the
instantiation of my Google Pay client to production. So where I have test,
I'll say production. I'll also double check that
my payment gateway information looks about right so that
the payment can go through, can be actually processed. And that's about it. I think this looks good. So I'll commit that
right away with a message saying "pushing to prod, yay." And I'll enter that so that
my CI pipeline triggers and my site gets deployed. It's actually-- it should be
getting deployed right now. So let's give it a few
seconds, and then I'm going to go ahead
and check out how it looks so that I can
show it to you, as well. So I'll open a browser
and I'll see if the client process has already completed. So I'll go to my production
URL-- pay-demo.web.app. And yep, it looks
like it's already out. So as you can see now, I'm
seeing the individual page for a t-shirt. And you can see at the
bottom that the Google Pay button is showing, so
everything looks correct. I'll go ahead and click that. And I wouldn't do that
in a different situation. But I'll pay for
my own items, just to show you how it looks like. So I'll select the account
that I want to pay with. I'll choose the credit card
that I want to pay with. And I'll hit on Pay. Now, hopefully
this goes through. Yes. There you go. Easy enough, right? Now you can go ahead and
work on your own integration by following the same steps that
I just did during this video. Take a look at our documentation
on g.co/pay/api to learn more about the online APIs
for web and Android. You can also find us through
the AskGooglePay hashtag on Twitter and Stack Overflow. Thank you for being there,
and I'll see you soon.
