Up next in 10
React.js Google Pay UPI Payment Gateway Integration Example With Custom Button & Popup Window in JS
Dec 22, 2025
Buy the full source code of application here:
https://buy.stripe.com/bIY03kgfL2Ws6bu7XK
Show More Show Less View Video Transcript
0:09
Uh hello friends, today in this tutorial
0:11
I will be telling you that uh how to
0:14
integrate the Google Play, Google Pay,
0:16
UPI payment gateway integration inside
0:20
ReactJS application.
0:23
So we will be integrating a simple
0:25
button inside your ReactJS application
0:28
where you can pay using Google pay. So
0:32
you can see this is the application we
0:34
will be developing here.
0:36
If you see here
0:39
there will be a simple
0:42
button here which will be having the
0:44
Google Pay
0:47
logo attached to it. So this is a
0:49
ReactJS application we will be building
0:51
in this tutorial.
0:53
So if I click the run this project
0:55
button. So you will see this is the
0:58
button here. You can see Google Pay
1:00
attached to it. So Google Pay if you
1:02
just search on Google is kind of a UPI
1:07
payment gateway which is of Google. So
1:11
you can see Google Pay. So it is
1:14
typically used in Android applications
1:16
and tablets and also in PCs also in
1:19
websites also to make payments. It is
1:21
developed by Google in 2011.
1:25
So we will be integrating it a button
1:28
here. As you can see this is the Google
1:30
Pay button. So you can change the button
1:33
color. You can change the button color
1:36
to black and also to white.
1:39
And you can also have a custom size of
1:42
this button. You can change the size of
1:43
the button like this.
1:46
You can change also the height of the
1:47
button also like this.
1:54
So if you're watching it for the very
1:55
first time then please hit the like
1:57
button, subscribe the channel as well
1:59
and also hit the notification bell icon.
2:01
So we will be building this application
2:03
guys. We will be integrating the Google
2:05
pay payment gateway integration button
2:07
inside our ReactJS application. So if
2:10
you click this button you will be
2:11
redirected to this window and here you
2:14
can select your credit card or debit
2:16
card that you have saved inside Google
2:18
pay. So I have selected this here you
2:21
can see it is processing here
2:23
and after doing this you will be able to
2:27
make the payment through Google pay. So
2:30
we will be integrating this button here
2:32
inside our website. This we are doing it
2:35
using a npm nodejs module which is comes
2:39
here. You will see this is a window here
2:42
pay.google.com.
2:43
So here itself you will select your card
2:47
here like this. You can select any card
2:49
here. You can also add a new card as
2:51
well with the details out there.
2:54
And uh after you select your card here
2:56
simply click on the continue button and
2:59
then your payment will be done. If you
3:00
click the inspect element in the
3:02
console, this information will be
3:04
returned to you which is the object here
3:06
you will see API version
3:08
all this data will be returned to you
3:10
like this payment method data
3:13
description. This is the info here which
3:15
is this card details tokenization.
3:19
So we will try to build this application
3:21
in ReactJS. We will try to embed the
3:23
Google pay button like this. You can
3:25
also change the width of the button like
3:28
this. the button of the height.
3:30
Customize this according to according to
3:32
the application. You can also change
3:34
this to plain button like this. Two
3:36
people are watching the stream guys. So
3:38
first of all, hit the like button.
3:39
Subscribe the channel as well. You can
3:41
change this to donate with donate with
3:43
Google Pay. So it you can change the
3:46
button type to any type of your choice
3:48
like this. You can change the background
3:50
color to white like this.
3:54
And you can change the height like this.
3:57
You can change the width like this. So
3:59
basically if you click the button you
4:01
will be redirected to the screen here
4:02
pop-up window. Click on the continue
4:04
option to make the payment here. So this
4:08
is through the test account. So
4:09
basically if you want to do it for the
4:11
production you just need to sign up for
4:13
Google for your Google pay account and
4:16
then you need to register for the
4:18
details. So now let's get started guys.
4:20
How to build this application? If you
4:22
are watching it for the very first time,
4:24
then please hit the like button,
4:25
subscribe the channel. So now to build
4:28
this application, three people are
4:30
watching the stream here. So you can see
4:32
that we are integrating the Google pay
4:34
button inside our ReactJS application.
4:37
Step-by-step instruction will be given
4:39
inside my website.
4:42
The link will be there inside video
4:43
description. So first of all, let me
4:45
show you which module I'm using here to
4:47
in order to embed this button.
4:50
So if you just see here guys uh this is
4:53
the integration that we are doing here.
4:56
This is the Google pay button
4:58
integration in ReactJS. So we can also
5:02
change the width and the height of the
5:03
button like this. So for building this
5:07
application we are using a npmjs module
5:10
here which is if you search for this
5:12
module you will say Google pay and then
5:14
you will write react. So this is the
5:17
module we are using here Google pay
5:20
/button/
5:22
react. So basically it's a react
5:24
component for Google pay button. So you
5:27
will see this is a simple installation
5:28
that you need to do is that installation
5:31
npm install Google pay button react. So
5:34
it has got over 5,58
5:37
weekly downloads. So now we need to
5:40
build this application from scratch. So
5:42
we will simply go to our projects
5:44
directory here and I will make a new
5:46
project here which will be
5:49
I will make a new directory which will
5:51
be react Google pay and I will be cd
5:54
into this and simply I will create a new
5:58
project here. In order to create a new
6:00
project in reacts you will simply write
6:02
npx
6:04
create react app
6:07
and then followed by your project name.
6:10
So in this case you will say Google pay
6:11
project. So enter it. And now this will
6:15
take some time guys. So to it is now
6:17
creating a new react app inside my
6:20
directory here which is react Google
6:22
pay. So now you can see that guys we are
6:25
building this application. Four people
6:26
are watching the stream. We will try to
6:28
embed this button Google pay button
6:30
inside our website.
6:32
So you can change the button type to
6:33
donate as well like this. Donate with
6:35
Google pay. You can change the size. You
6:38
can change the button width all this
6:40
stuff right here. You can change the
6:44
background color as well like this
6:46
default is black color. You can also
6:48
change to white color. So basically it
6:50
has a look and material look and feel to
6:52
it. It has got a box shadow attached to
6:55
it. So accordingly you can uh just embed
6:59
this button inside your website to
7:00
collect payments through Google pay UPI.
7:03
It is kind of a UPI payment gateway.
7:07
So now it is creating this ReactJS
7:09
project. So it will hardly take 5 to 10
7:12
seconds. So now it has successfully
7:16
so it is installing these dependencies.
7:18
So if you have any sort of question
7:20
regarding this project you can ask in
7:22
the comment section.
7:25
So [snorts] now it has successfully
7:27
installed it. You can see that it is
7:29
saying to us that you need to go to the
7:31
project folder. So we will simply go to
7:33
the project folder cd Google pay project
7:38
and then we will simply say we will open
7:41
this inside our visual studio code text
7:43
editor. So this is our brand new reactjs
7:46
project. You will see that this is the
7:48
hello world program. If I start this
7:51
application npm start. So it will start
7:54
this application at localhost 4200 port
7:57
number. So now it is starting this
8:00
application ReactJS application. So it
8:03
is saying that would you like to run the
8:05
app on other port instead. I will say
8:07
yes.
8:09
So it will start this project localhost
8:12
3000. You will see that.
8:17
So this is the hello world program which
8:19
is there of ReactJS.
8:24
So it is starting the development
8:25
server. And now you can see this is our
8:28
hello world app.js. You will see that
8:31
ReactJS project. So now what we need to
8:34
do is that guys we need to install this
8:36
module which is Google pay/button react.
8:39
I will simply copy this command and
8:42
simply I will paste it.
8:45
Paste this command here. npm/google
8:47
pay/button react. So this will install
8:51
this application or sorry install this
8:53
module inside our application.
8:56
So now it is successfully installed. So
8:58
once again you can start this
9:00
application npm start.
9:04
So the payment you can see this is very
9:07
easy how to include this. So I will
9:09
write each line of code in detail. So
9:12
first of all we can remove all this. We
9:14
don't need this. Instead we can simply
9:17
say inside a heading that hello world.
9:20
So hot reload is on here inside our
9:23
ReactJS application. And if you see hot
9:26
reload is on. So it is again asking us
9:28
to would you like to run the app on
9:31
another port. So you will see
9:42
hello world is there. You can see that
9:44
we have written here hello world. So
9:47
hello world is there. So now now the
9:49
very first thing you need to do is that
9:50
guys you need to include the module
9:54
as you see in the documentation you need
9:56
to include the module right here. So if
9:59
you go to my video description link I
10:01
have given all the source code in my
10:03
video blog post. So I have given the
10:06
link in the video description of this
10:07
live stream. So after the live stream is
10:09
over you can go to it and download all
10:11
the source code. So the very first thing
10:13
you need to do is that you need to
10:16
include this dependency which is there
10:18
right here.
10:20
We will delete the logo. Instead we will
10:22
paste the dependency which is Google pay
10:25
button. So we are integrate we are
10:28
including it from underscore Google
10:31
pay/button react. After this what we
10:34
need to do is that
10:36
we need to have our uh return statement
10:40
and in inside this we will have our
10:42
Google pay button. Google pay button we
10:45
have.
10:48
So if I just reload this you will say
10:50
there will be a Google button. Google
10:52
pay button. This will not be seen on the
10:55
screen because we need to pass some
10:56
options to it. So there is some options
10:59
it takes. First option it takes is
11:02
environment.
11:04
So environment may be test or it can be
11:08
production. If you are building it for
11:10
the production, if you are building for
11:11
your own website, you can change this to
11:14
production. But I will be sticking to
11:16
test here. Then the second option is
11:19
that payment request. It's a object here
11:21
payment request.
11:23
So it it is a object here. Inside this
11:25
you need to pass the API version. This
11:28
is the property that you need to pass
11:30
here which is API version and this is
11:33
will be two. You can give it any
11:36
property here. API version
11:41
five people are watching the stream
11:42
guys. So please first of all hit the
11:44
like button subscribe the channel as
11:45
well. So here we will be sticking to
11:47
zero option and then we will have the
11:51
third object which will be allowed
11:54
payment methods. allowed payment
11:57
methods.
11:59
So basically this will be a array array
12:02
of objects. So inside this first of all
12:05
we will pass our card here whichever
12:09
card you are using here to have this. So
12:11
this will be type
12:14
and this can be either card or PayPal.
12:18
You can use PayPal or you can use the
12:20
Visa card. So I will pass here card
12:22
option here.
12:25
After this I will pass the parameters
12:27
which is put a comma here.
12:32
We will have a parameters.
12:36
So inside this object we will this is
12:39
the object here and inside this object
12:41
you need to pass the allowed
12:44
authentication methods. So this can be
12:47
either this is kind of a uh array and
12:51
inside this you can pass pan card only
12:54
pan card put a comma and the second one
12:58
will be cryptogram 3DS. So this is the
13:01
second option
13:03
uh some question is there uh please make
13:07
video on JWT authentication. I will
13:10
definitely make JWT authentication in
13:12
the next video if I have the chance to
13:14
make it. Definitely Himmanu I will make
13:17
this. So please hit the like button,
13:18
subscribe the channel as well and u then
13:22
we have the third second option inside
13:25
this which is allowed card network. So
13:28
basically this is again a array. So here
13:31
you will provide which cards you will
13:33
allow. So this can have various options.
13:35
Here you can see that AMX
13:38
and if you just search here you will see
13:40
discover electron all these
13:44
international uh card types are there
13:46
maestro mastercard visa. So I will be
13:49
allowing Mastercard and I will be
13:51
allowing Visa. So these are the two
13:53
popular ones inside the world. So I will
13:55
be allowing these two card networks. So
13:58
put a comma here.
14:01
So this this object is over. So this
14:04
object parameters object is over
14:08
and after this guys we have the third
14:13
object which is called as tokenization
14:15
specification. This is the again object
14:18
tokenization specification. So here it
14:22
contains a type parameter which will be
14:24
either direct or it can be either
14:26
payment gateway. I will be having
14:27
payment gateway. You can play with these
14:29
options. And then we have the parameters
14:32
object. Inside this object,
14:35
we have the gateway property. Gateway
14:39
property. This can be either
14:41
example or production. So I will be
14:43
providing example because we are
14:45
building it for the production level. Oh
14:48
sorry test level.
14:50
And uh then we have the gateway merchant
14:53
ID. Gateway
14:57
merchant ID. gateway merchant
15:02
ID.
15:04
So this will be again a example ID
15:06
because we are only building for test
15:09
level. So we will simply say that
15:11
example merchant sorry example gateway
15:19
merchant ID. So you can give any values
15:22
in these two options which is gateway
15:24
and gateway merchant ID. So if you're
15:26
building it for the production level,
15:28
you need to change this for production
15:30
and then you also need to provide the
15:32
details that when you sign up for your
15:34
Google pay account. So six people are
15:36
watching the stream guys. So we are
15:38
building this uh uh Google pay button
15:41
here. We are embedding the Google pay
15:43
button here like this. So please hit the
15:46
like button, subscribe the channel in
15:47
ReactJS. So you can see that button
15:49
height, button width, you can also
15:52
change to the buy button. So if you
15:54
click this button, this value will come
15:56
here. You can pay with your
15:59
either Visa card or master card like
16:01
this. Click on the continue button and
16:03
your payment would be successful. So
16:05
this is only for test here.
16:08
Uh brother you have watched Kashmir
16:10
files movie. No no I I don't watch
16:13
movies. So I didn't have watched this
16:15
movie.
16:17
So
16:18
I only do coding. I watch sports and
16:22
politics. I don't watch movies. So this
16:25
is gateway merchant ID. After this guys,
16:29
what we need to do is that this array is
16:32
over here. So put a comma here. And
16:35
after this we will have our merchant
16:37
info. Merchant info property. And after
16:41
this guys what we need to do provide
16:44
here inside this it again be a object.
16:47
So here we need to provide our merchant
16:49
ID. So this will be the merchant ID
16:52
property. So here you can provide any
16:54
value of your choice a test value. So we
16:57
will again say here 1 2 3 4 5 6 7 8 9 0
17:02
1 2 3 4 5 6 7 8 9 0. So you can provide
17:06
any value of your choice. This is
17:08
totally up to you which value you
17:10
provide. Seven people are watching the
17:12
stream guys. So please hit the like
17:13
button, subscribe the channel as well.
17:15
And then the second property we have is
17:17
the merchant name. So inside this
17:20
property we are having the name called
17:22
as demo merchant.
17:26
That's it. And now after this guys we
17:29
have the property called as uh
17:31
transaction info. Transaction
17:34
info. This is a property. So here we
17:38
will provide these options here. Eight
17:41
people are watching the stream. So we
17:43
will provide the total price status.
17:45
Total price status.
17:48
And this will be equal to the property
17:50
which will be either estimated or final.
17:52
We will provide final. Put a comma. And
17:56
then we have the total price label.
17:59
And this can be either total or
18:02
anything. We will provide total. Put a
18:05
comma. And then we have the total price.
18:08
So this will be equal to total price is
18:10
equal to $100. You can provide any value
18:14
of your choice. You can also provide uh
18:17
$1,000. Currency code is again option
18:20
here. Currency code. So this can have
18:22
any value INR also but I will provide
18:26
USD, United States dollar. And then we
18:29
have the country code.
18:32
Country code this can be anything in for
18:34
India. Then we have US for United
18:36
States. You can provide any country code
18:38
of your choice.
18:40
So after this
18:43
this object is completely over. Now if I
18:46
check our application some kind of
18:48
button will be there. You will see this
18:49
is a button is embedded here. You can
18:51
see that if I click this button.
18:56
So it is saying we are unable to verify
18:58
your account information. We need to
18:59
write some function here so that uh this
19:02
can be this error will not come. So
19:05
inside our onload
19:07
payment data this is the we need to
19:10
write this function here. So basically
19:12
this is kind of a function and uh we
19:15
have our payment request
19:19
and inside the payment request
19:22
basically this is a function here.
19:25
So we will simply say that in the
19:27
console that uh console log
19:32
you will say load payment data
19:37
and inside this you will simply say that
19:40
payment request.
19:44
That's it.
19:46
So this completes the application guys.
19:48
This is a very simple example in ReactJS
19:50
that I have showed you. If I now see see
19:53
the application. Let me just close this
19:56
uh window here.
20:01
Close this window. And if I just restart
20:04
this application.
20:09
If I restart here, if I just type here,
20:12
refresh this. So now this will you will
20:15
see our uh Google pay button is there.
20:17
So automatically the card is saved in my
20:20
computer. So that is why you are saying
20:21
this master card. If I click pay button,
20:23
you will see that the pop-up window will
20:25
appear here and it will automatically
20:27
detect the master card here. Continue
20:29
button is there. And now the payment is
20:32
done. If I check the inspect console
20:34
here, you will see the load payment data
20:36
object is returned to us. And this
20:38
contains this information. API version,
20:40
API version, minor, payment method,
20:42
data, description, info, tokenization,
20:45
token type, payment gateway info here,
20:49
card details, card network, all these
20:51
stuff.
20:53
So basically you will need a simple
20:55
server where the payment can be actually
20:57
done. So basically this is the front end
20:59
which is ready here like this. So you
21:02
can see that. So if you are watching it
21:05
for the very first time then you can hit
21:07
the like button subscribe the channel as
21:09
well. I have written a complete blog
21:12
post on my
21:17
website here. So basically if you see
21:20
here I have written a complete blog post
21:23
on my website.
21:27
So this is a blog post I have written
21:29
here. If you want the full source code,
21:31
you can go to the video description
21:33
link.
21:36
So this is a blog post here guys, you
21:38
can see that.
21:44
So this is the full source code which is
21:46
I have given here. This is a simple
21:48
example that I've written right here
21:49
from step by step. And this is a full
21:52
example. If I just copy paste the code
21:54
here.
21:59
So if I copy paste it here
22:04
and also inside your stylesheet you need
22:07
to paste this code. This is for the
22:09
stylesheet. So simply you need to go to
22:12
your style dot CSS for the component
22:15
file right here. Where is this style dot
22:19
CSS? So we need to create a file here
22:23
style dot CSS and simply paste this code
22:27
and hopefully this is you can see this
22:29
is our application.
22:32
So here you can change the
22:34
button background color to white color.
22:37
You can also have a custom button size.
22:40
You can have the height of the button
22:42
changed to this. You can change the
22:44
donate button like this. Plain button
22:46
like this. Buy button. If you click it,
22:49
this will again open a pop-up window and
22:52
then it will show you all the cards
22:54
which you have inside your computer
22:55
saved here. And if you click the
22:58
continue button, you will s simply do
23:00
the payment to you. So if you see the
23:02
console here, you will see load payment
23:04
data. All this information will be
23:05
returned to you.
23:08
So if you have any sort of question
23:09
related to this project, you can ask in
23:11
the comment section. I will definitely
23:13
try to make some.
23:17
So if I show you here,
23:28
so this is the application guys. You can
23:30
go to the video description link after
23:31
this live stream is over. I you can just
23:34
watch the download all the source code.
23:40
So this is built in ReactJS. We have
23:42
built it using this dependency. If you
23:44
know this dependency which is quite good
23:47
which is uh
23:52
I think this dependency is called as
23:54
Google pay react. So basically if you
23:56
write this much Google pay react you
23:59
will get this dependency right here
24:02
Google pay react and uh you will get
24:04
this button which is called as Google
24:06
pay
24:08
button react. So this is a dependency we
24:11
are using. It has got almost 5,58
24:14
weekly downloads
24:16
and this is the simplest of example that
24:19
I've shown you. All these properties are
24:21
there. You can see that you can play
24:22
with these properties. You can go to the
24:25
Google pay developer site if you're
24:26
building it for production. You need to
24:28
create a account here and simply you
24:31
need to uh just uh paste your uh
24:34
production level details. So this they
24:36
have their own video as well explaining
24:37
to you. So this is the
24:42
button color you can change to default
24:44
black and white. Button local you can
24:46
have various languages English
24:49
uh all these languages codes are there.
24:53
Button size is static or fill. Button
24:56
type is book, buy, check out, donate,
24:59
order, pay, subscribe. So they also let
25:03
me change the button type too. So if you
25:05
see here button type
25:08
button type is
25:14
you can also change to
25:17
subscribe.
25:26
So the default value default one is I
25:29
think buy. So you can add more options
25:32
here which will be the fourth option
25:34
which will be for
25:40
I think this will be for subscribe.
25:48
So all these options are present inside
25:50
the documentation. You will see that
25:53
there is also a checkout
25:56
which is almost used for shopping
25:58
websites. So this will be for checkout.
26:06
Uh then we have our uh book button.
26:23
Uh then we have our uh I think
26:27
plane button subscribe longshot. So if
26:30
you see here if you now refresh the
26:33
application there will be more check out
26:35
button as well check out with Google pay
26:38
book button donate subscribe with Google
26:42
pay by. So you can also have the custom
26:45
text written as well. So basically if
26:47
you have to have uh
26:53
let's suppose uh
26:56
I say it donate
26:59
to coding seure so you can also have uh
27:03
custom text as well donate to coding
27:05
seure.
27:07
So you can replace here with your
27:09
channel name. So
27:17
uh I think it doesn't it only
27:21
have these four options. You can see buy
27:23
plane donate subscribe.
27:26
You can't do custom values here. You
27:28
can't provide custom values. You only
27:30
need to provide the values which are
27:32
mentioned inside the documentation.
27:38
So all these options you can try out.
27:41
You can see environment has two options
27:42
either test or production. If you are
27:44
building it for the production level you
27:46
will replace the value here production.
27:49
Then we have uh all these parameters you
27:51
can stay play with these. All these
27:54
parameters are there. So if you have any
27:57
sort of question guys you can ask in the
27:58
comment section. I will definitely reply
28:00
to it. Five people are watching the
28:02
stream. So,
28:08
so this is a package that we used here
28:11
and if you don't have any sort of
28:12
question then I will be seeing you in
28:14
the next stream. If you have questions,
28:17
you can ask in the comment section. I
28:20
will definitely try to answer them. And
28:23
uh let me show the traffic on the
28:26
website here which is Google Analytics
28:28
traffic if you wanted to see and the
28:31
ISOIC earnings which I wanted to show
28:34
you.
28:39
So you can see that guys this is the
28:41
realtime traffic of codings.com blog
28:43
website.
28:45
So you can see that
28:50
all traffic is organic traffic 24
28:52
visitors is from
28:54
it is right now 28.
28:57
So these are all the blog posts which
28:58
are ranking on Google and it is getting
29:00
the traffic.
29:04
Sometimes this right now reach to 50 as
29:06
well. So on peak days you will see that
29:09
right now 30
29:16
So majority of the traffic is from
29:18
India. Then we have all these countries
29:20
worldwide.
29:42
So you can see that it is constantly
29:45
increasing here. And uh this is the
29:47
isoic one.
30:11
The EPMBB is right here about five to
30:15
560. As you can see that EPMBB5
30:19
round about five.
30:42
So if you're watching it for the very
30:44
first time guys, please hit the like
30:45
button, subscribe the channel as well so
30:48
that uh more and more people can watch
30:52
this.
30:54
So if you're liking it, please hit the
30:55
like button and you can see that
30:58
constantly it is increasing all the
31:01
countries you are getting the traffic
31:03
from.
31:10
So just tell me the ideas on which
31:12
videos you want to see, which topics you
31:15
want to see the videos on. I will try to
31:17
make the videos on those topic.
31:20
So just write in the comment section
31:21
which videos you want to see, which
31:24
topics I have noted down this topic
31:26
which is JWT authentication. I will try
31:29
to make this in the next video.
31:32
Apart from that,
31:37
which topic you want to see the videos
31:39
on
32:19
So I will be making this live stream
32:21
more and more in today itself. I will be
32:25
coming up three more times today for
32:28
building this inside Angular and Vue.js
32:30
this Google pay integration. [snorts]
32:33
So if you want to see more and more then
32:36
please hit the like button. Subscribe
32:37
the channel as well.
32:42
If you have any sort of question related
32:43
to programming and blogging you can ask
32:46
in the comment section. If you want to
32:47
see any more videos related to any more
32:49
topic you can
32:54
ask it in the comment section. You will
32:56
see that this is the realtime traffic of
32:58
coding sa website.
33:27
So thanks guys if I will be seeing you
33:29
in the next stream.