![Video thumbnail for Build React.js RazorPay Payment Gateway Integration in Browser Using Node.js & Express [LIVE]](https://video-meta.open.video/resized-posters/BOHNCywYdA2/res640.webp?cb=1)
Up next in 10
Build React.js RazorPay Payment Gateway Integration in Browser Using Node.js & Express [LIVE]
Dec 22, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-react-js-razorpay-payment-gateway-integration-in-browser-using-node-js-express-live/
Show More Show Less View Video Transcript
0:09
Uh hello friends, today in this tutorial
0:11
I will be showing you that how to
0:12
integrate the Razer Pay payment
0:15
integration button inside your website
0:18
and we will be doing this inside NodeJS
0:21
and Express application. So you see that
0:24
this Razer pay is a very popular payment
0:28
gateway
0:30
for website. You will see that it is
0:33
very popular in India as well. You will
0:35
see Razer pay
0:37
I think it's an Indian company. It was
0:39
founded in 2013
0:42
and we will try to integrate the payment
0:45
gateway inside the website using its
0:47
button. So you will see this is the
0:50
official website of razor.com
0:53
and if you go to it you just need to
0:55
sign up for your account here. Simply
0:58
sign up processes there and then you can
1:00
login with your details here which is
1:03
username and password.
1:06
So I have already done that. So I am
1:09
running this in test mode. You will see
1:10
that. So after you sign up inside this
1:14
you will see your own
1:17
settings section and inside your set
1:19
settings section you will have your API
1:21
key section and inside your API key
1:25
section you will be copy pasting this
1:28
key ID so you can also
1:32
regenerate it. So one people are
1:34
watching the stream guys. So we will be
1:36
integrating the Razer Pay payment
1:38
gateway integration inside ReactJS. Let
1:41
me show you a short little demo here.
1:45
So I am building this application inside
1:48
ReactJS application. If I open this
1:50
inside localhost
1:53
3001.
1:54
So this is a button. You can see that
1:56
buy now button. So basically this is a
1:58
heading here Razer Pay payment gateway
2:02
integration in react.
2:05
So if you click the buy course button,
2:08
it will now
2:11
show you this
2:13
nice little animation. And here you can
2:16
just have your logo here which is coding
2:19
section and then the rupees here $4.99.
2:21
This is your logo picture. You can also
2:24
change to any language here which is
2:26
Hindi here for
2:29
so all the languages are there. So I
2:31
will stick to English language and these
2:34
are the preferred payment methods. You
2:36
will see that it is either UPI, UPI,
2:40
PTM, phone pay. All these methods are
2:43
supported.
2:45
You can also use your cards as well like
2:47
this.
2:49
And then you can also you use your UPI
2:53
ID either Google pay, be phone pay and
2:55
more.
2:57
And then we have the net packing option.
2:59
You can select for from all the banks
3:01
which is SPI, COC. You can also select
3:05
other bank as well. So all the options
3:08
are available and you can also have the
3:10
pay later option which is this option.
3:15
So accordingly you can select I will
3:17
select the Google pay and then you just
3:19
need to enter your UPI ID. So I will
3:24
enter my ID which is Geeky Gotham 1997
3:28
at the rate okay
3:31
ici. So you can see that you can enter
3:34
your UPI ID and simply you will pay
3:37
$4.99. So if I click the pay button so
3:40
your payment is being
3:43
you can see that after that it will
3:46
return to you the payment ID like this.
3:50
So obviously this is testing it inside
3:53
the not a production mode. It's it is
3:56
testing inside test mode. It will also
3:58
return to you your order ID. So when you
4:02
are running it inside production these
4:04
details will be very much useful.
4:08
So we will be trying to integrate the
4:10
Razer Pay payment gateway inside ReactJS
4:14
application wise. So now to build this
4:16
application it is very easy. You just
4:18
need to
4:22
let me just go out of this
4:28
and let me also close this ReactJS
4:31
application.
4:39
So first of all guys what we need to do
4:41
is that we will create a parent object
4:43
folder which will be razer pay
4:47
react node. So I need to create this
4:51
folder first of all which is razer pay
4:54
react node
4:57
and after this you cd into this razer
5:00
pay
5:03
react node.
5:05
So you can see that if I open this
5:07
folder here. So currently this folder
5:10
will be empty. So one people is watching
5:12
the stream. So we are integrating the
5:15
Razer Pay payment gateway.
5:18
This is the application that we
5:20
building. We will displaying a buy
5:22
button inside Razer Pay. So for for this
5:26
application guys first of all we will
5:28
build the front end. So basically we
5:31
will make a new directory here of front
5:33
end.
5:34
We will cd into this and inside this we
5:38
will create our reactjs project. For
5:41
this we will instantiate npx create
5:44
react app and this will be for
5:47
instantiating the we can call this
5:50
project as react razor pay
5:54
test. So just call this and now after
5:57
that this will create the project inside
6:00
this directory. So it will hardly take
6:02
some time.
6:04
So you will see inside this front end it
6:07
will have all these dependencies open.
6:11
Let me in the meanwhile let me create a
6:14
backend folder. So right here we will
6:16
make a new directory which will be
6:18
backend.
6:20
So inside this backend directory
6:24
we need to initialize our package.json
6:26
file for the NodeJS application. And for
6:30
this we need to install
6:33
uh I think it is four packages we need
6:36
to install. First of all we need to
6:37
install express for running the express
6:41
server and then I think we need to
6:44
install
6:46
course cos to make cross site uh
6:50
request. We also need the short id
6:54
module for generating the
6:57
random ID and then we will need need
7:00
this razor pay module at the server
7:03
side. So these are the four modules that
7:06
we will need. So simply you will enter
7:08
it and now this will install these four
7:10
modules inside your NodeJS project. So
7:14
this will hardly take some time. After
7:16
that it will install it. So this is our
7:19
front end. All the dependencies are
7:21
installed.
7:24
So now you can see our project is ready
7:27
here. So we can simply cd into this.
7:34
So I [snorts] can open this inside
7:37
visual studio code text editor. So you
7:40
will see that this is the source
7:41
directory and this is the test project.
7:46
So we can run this project here simply
7:48
by the command npm start. So this will
7:51
start this project at localhost 4300
7:56
port number.
8:01
So you can see now this is a hello world
8:03
project of reacts.
8:06
So right here we need to simply
8:13
So first of all guys if you're watching
8:15
it for the very first time then please
8:16
hit the like button subscribe the
8:18
channel. So you can see this is the
8:19
hello world app of ReactJS. So right
8:22
here what we need to do is that we need
8:24
to delete all this stuff here from this
8:27
file.
8:29
And after this we don't need the logo.
8:31
We will delete this.
8:34
And here we need to first of all
8:38
inside our use effect. So if you know
8:42
inside react there is a special function
8:45
special hook called as use effect. So
8:49
basically this is the hook here which is
8:52
responsible for
8:57
loading the essential dependencies. So
9:00
basically if you want to load the
9:02
essential dependency so we will load
9:05
this function like this which I will
9:09
call this as use effect. This is the
9:12
hook function. It will automatically get
9:14
imported from the react dependency and
9:17
then we will use this use effect. So
9:20
inside this we will load the dependency
9:22
which will be simply this would be a
9:25
callback function and inside this we
9:28
will load script here. So basically we
9:31
will make this function load script
9:35
and inside this we will pass the name of
9:37
the script which we need to load. So for
9:40
razer pay this is very much useful for
9:42
the client side you need to have to load
9:44
this checkout.razerpay.com
9:47
razorbay.com
9:51
and then you need to have the version
9:53
one slash
9:56
checkout dot
9:58
js. So this is a script dynamically
10:01
script you need to load it. So now we
10:03
need to create this function right here
10:06
at the top.
10:10
So if you see here
10:15
right here inside this function we will
10:18
create this function here. So which will
10:20
be called as load script. So basically
10:23
this will be embedding the dynamic
10:25
script and the source will hold the
10:29
script here which we have passed here.
10:31
You will see that https check out
10:33
razerpay.com. So two people are watching
10:36
the stream guys. So we are in this
10:37
tutorial we are integrating the Razer
10:39
pay payment gateway integration.
10:42
So if you're watching it for the very
10:44
first time then please hit the like
10:45
button. We are integrating inside
10:47
ReactJS. So you know this Razer Pay
10:49
payment gateway this is a very popular
10:51
payment gateway for integrating the
10:53
payments. So we are using this payment
10:57
gateway to integrate inside ReactJS.
11:00
So inside the ReactJS we are just
11:02
loading this template dynamically.
11:04
So inside this source
11:07
we will simply load the script. So now
11:11
to load this it is very simple.
11:14
We will return a promise here. Return
11:19
new promise
11:22
and all the source code regarding this
11:24
project will be there inside video
11:26
description. At the end of the live
11:27
stream I will give the link. So you can
11:29
just go to the video description link to
11:32
download all the source code. So we need
11:34
to resolve this promise and inside this
11:36
what we will say is that we will create
11:39
a new script element dynamically with
11:41
the help of document.createelement
11:45
and we will create a script element
11:47
dynamically
11:50
and after doing this we will manipulate
11:52
the source parameter of it. we will in
11:55
instantiate to the source parameter
11:57
which is passed
11:59
and when when the script loads which is
12:01
script do onallload and inside this you
12:04
will simply say we need to
12:10
resolve and we will pass the true
12:12
parameter. So we have successfully
12:15
embedded the script and after
12:19
there is also a on error basically if
12:22
any sort of error take place so in that
12:24
case we can simply resolve it and we can
12:28
pass false to it. That's it.
12:33
So lastly we need to add the script
12:35
inside the body. So now to add this
12:38
there is a simple method which is
12:40
document.body.append append child and
12:42
then we will pass the script here.
12:45
That's it. So basically this will add
12:47
the script here. So basically what it it
12:50
is doing is that it is just adding the
12:52
script to the HTML. So basically we have
12:55
this HTML here inside our public folder.
12:58
So it is dynamically adding the script
13:00
inside the HTML script tag. So we are
13:04
programmatically doing this process
13:06
using this function. So when the react
13:09
component loads for the very first time,
13:11
this code will execute. This function
13:13
will call and it will add the script
13:17
dynamically. So after this guys, what we
13:20
need to do is that we need to have the
13:22
return statement here and we need to
13:24
create a simple
13:27
uh section instead of a div. You can
13:30
just create a section here.
13:34
So we can call this as section.
13:37
So section is kind of a element inside
13:40
uh
13:42
HTML 5. So we will provide a class name
13:45
to it of card list
13:50
and inside this we will have a component
13:52
which is called as course
13:56
card. So we will make this component
13:59
inside our
14:02
uh source parame source folder and here
14:05
we will make a new folder which is
14:08
components and inside this we will make
14:10
our component which is course card.js.
14:15
So right here inside this component guys
14:17
what we need to do is that we need to
14:19
first of all import the react
14:21
dependency. So we will say import react
14:24
from react
14:28
and then we we will be just be
14:31
we will just write the function which
14:33
will be function course card. This is
14:36
our component and lastly we will export
14:39
this export default course card. That's
14:42
it.
14:45
And inside this function guys what we
14:47
need to do is that we will simply return
14:49
a simple button which will simply say
14:51
buy now. So inside this we will have a
14:54
div and after that we will have two
14:57
break tags
15:01
just for aligning alignment purpose and
15:04
inside this we will have a h1 heading.
15:07
So we will give it a style parameter.
15:10
So we will simply say text align
15:16
to center position like this. So inside
15:19
this heading we will simply say Razer
15:21
Pay Razer Pay
15:26
Razer Pay
15:29
payment gateway integration in React.
15:36
So basically if you do this like this we
15:38
are loading this template inside our
15:41
parent component. So if you just do like
15:43
this. So it is saying course card is not
15:45
defined. So we need to import this right
15:47
here. So we will simply say import
15:53
course card
15:55
from this components here components
15:57
folder. So now no error will take place.
16:00
So if I open this project you will see
16:03
Razer pay payment gateway integration in
16:05
react. So now right here we need to
16:08
simply
16:10
after this heading we just need to
16:11
simply add a button so that we can
16:15
make the payment. After the two break
16:17
tags we can simply add this simple
16:19
button. So we will have a button tag.
16:24
So the type parameter will be equal to
16:26
button
16:28
and after this what we need to do is
16:30
that
16:32
we will assign a on click to it. So when
16:35
we click this button what will happen?
16:37
So basically a function will execute
16:40
which will display the payment window
16:44
where you can enter your credit card
16:46
details or UPI payment any payment mode
16:49
that you want to pay through. This is a
16:51
method we will write it. And then we
16:54
also need to embed a class name to it
16:58
which is a dynamic class which will be
17:00
course
17:03
payment button. This is a course payment
17:06
button.
17:07
And the label will be simply this will
17:10
be buy course. That's it.
17:14
And now we need to create this method
17:16
which is display razor pay. And for
17:19
doing this guys, we will import this
17:21
method inside a new folder we will
17:23
create. So right here at the very top we
17:26
will simply say that we need to
17:30
import it from a new folder. So right
17:33
here inside the source folder we will
17:34
create a folder here which is utils. So
17:38
utils folder and inside this we will
17:41
create a payment gateway.
17:46
payment gateway dot js. So this is a
17:50
file we will create it. You can name it
17:52
anything of your choice and uh but right
17:55
here inside this file
17:57
we will export default function
18:03
and the function name will be pretty
18:04
simple guys which we have defined it
18:06
when we click when we click the button.
18:10
So basically this function will be async
18:16
and right here we will simply give the
18:19
name which to the function which will be
18:21
display razor pay. So you can see we
18:24
have given this name which is display
18:27
razer pay. So right here at the very top
18:30
we can include this function by
18:34
importing
18:38
display razor pay and it will import it
18:40
from d-utils payment gateway file here
18:43
which we have defined here. So inside
18:46
this function guys what we need to do is
18:47
that
18:49
we need to make a simple post request
18:54
simple post request to the NodeJS
18:57
server.
18:59
But before that we need to construct the
19:01
options.
19:03
So the options are pretty simple.
19:06
So [snorts] inside the options we will
19:08
have the key ID.
19:12
So these are all confidential details
19:14
that you need to enter it from your
19:18
Razer Pay dashboard. So if you go to
19:20
your Razer Pay dashboard, you will find
19:22
all these details. So this is your key
19:24
ID. This will be different for you. So
19:26
don't copy my key ID. So basically I
19:29
will paste this key ID here like this.
19:31
So this this is for test mode. This is
19:34
not for production mode. And secondly we
19:37
will have the currency which is called
19:40
as currency.
19:44
So this will be equal to data dot.
19:49
So I think we have
19:56
if you just see here
20:10
first of all what we need to do is that
20:12
we need to make the post request here
20:14
which will be simply get the data for
20:16
us. the data and we will make this
20:20
inside our
20:23
back end. So basically we will use the
20:25
fetch request and basically we will pass
20:27
it to https
20:30
http localhost
20:33
and we will put the port number 5000 /
20:38
uh then we will say razer pay.
20:41
So basically here we need to pass the
20:44
method here which will be post. Here
20:47
method will be post.
20:54
So put a comma and after this guys this
20:57
will return a promise as this is a fetch
20:59
request and this is a async function. So
21:02
we can handle the process. We will get
21:04
the response packet inside. We can
21:07
convert this response to JSON like this.
21:11
And now we can console log the data. So
21:14
whatever data which is returned to us.
21:16
So three people are watching the stream
21:17
guys. So we are integrate in integrating
21:19
the Razer Pay payment gateway inside
21:22
ReactJS and NodeJS.
21:24
So Razer Pay is a very
21:27
popular payment gateway in India. So we
21:30
are trying to integrate it using ReactJS
21:33
and NodeJS and Express. So this is the
21:36
front end of the application. And you
21:37
will see we are making the post request
21:40
to the server. So we will write the
21:41
server server server code lately. So
21:45
after getting this data guys we can
21:46
simply say data dot currency
21:51
and there will be another option which
21:53
will be called as amount. So this will
21:56
be data dot amount. Put a comma and then
22:00
there will be a description. So
22:02
description will be you can give any
22:04
description of your choice. So I will
22:06
give it as wallet transaction
22:10
like this. After that guys you will you
22:14
can give your image whatever image that
22:17
you want to profile picture or a logo.
22:20
So I will give this as uh I will put a
22:25
post request https localhost 5000
22:29
and this will be the image that we will
22:31
store it logo. JPG when we write the
22:34
service code you will just see and then
22:37
we will have the order ID which will be
22:39
equal to
22:41
data do ID
22:45
after that we will have the handler
22:47
function which will get the response for
22:49
us so function so inside the parenthesis
22:52
we will get the response so inside this
22:55
we will simply say alert
22:58
payment ID
23:01
so the payment ID will be simply the
23:03
payment id which will be returned to us
23:05
inside this response. So we will simply
23:08
say response dot
23:12
razer pay
23:15
response dotra pay payment payment id id
23:22
and also we will same goes for the order
23:26
id as well order id.
23:34
So we will concatenate which will be
23:36
response dot razor pay.
23:40
This time we will change this to order
23:42
id. So that's it. Now there is a another
23:47
function which will called as prefill.
23:51
This is a prefill function.
23:53
And inside this you will fill out all
23:56
the details of the person which are
23:58
buying the product such as name. So we
24:01
have the name here. You can give any
24:02
name of your choice. I will give my name
24:05
which is purchasing the product and you
24:08
can fill these details dynamically as
24:10
well using a form. We will provide the
24:13
email of the person. You can just this
24:16
is automatically filled when the people
24:18
will purchase the product.
24:22
And the third field is the contact
24:24
number. You can just give the mobile
24:27
number.
24:29
So 982125. This is my mobile number. You
24:32
will see it will automatically get
24:34
filled. After that we need to display
24:36
this window guys. So this is very
24:38
simple. We need to display the window on
24:41
button click.
24:46
So now to display this window it is very
24:48
easy. We will simply say payment object.
24:53
So this will be new window dot.
25:01
So if you see window dotrazer pay
25:08
and here we will pass the options which
25:11
we have constructed
25:13
and then we will open this window using
25:16
payment object dot open. That's it. So
25:19
this will open the window for us
25:21
programmatically.
25:23
So this is all the function which is
25:25
required here payment gateway.js this is
25:27
complete here and I think the front end
25:30
is complete now. Now we can move to our
25:34
back end. So if you see here if you
25:36
compile this project you will definitely
25:39
see your ReactJS application. There will
25:41
be a simple button here. If you click it
25:44
nothing will happen because we haven't
25:46
written the code here to display this
25:48
window. You will simply see that fail to
25:50
fetch this error will come here because
25:53
we haven't written the
25:55
server side code
25:58
like this.
26:02
And now guys what we need to do is that
26:04
we need to move to the server side
26:06
folder here which is the server side
26:07
code. So you will see this is our
26:10
backend folder. So inside this we have
26:13
the package.json file. So inside this we
26:16
need to create a index.js js file here.
26:19
So we have installed these dependencies.
26:21
First is we have installed express which
26:23
will be the server. Then we have
26:25
installed course which is used to make
26:27
crossite request. Then we have razer pay
26:31
module for server side. Then we have
26:33
short id module. So these are the four
26:36
modules which we have installed. So now
26:39
right here we need to first of all what
26:40
we need to do we need to make a app of
26:44
express
26:46
like this.
26:52
So after this we also need the path path
26:54
module which is a built-in module
27:00
and we will also include the course
27:02
module
27:07
and then we will simply also include the
27:10
short id
27:13
short id module.
27:18
So then we will have our Razer Pay
27:20
module as well guys. So all the modules
27:23
let me include this Razer Pay.
27:28
So after doing this guys we will
27:30
initialize Razer Pay credentials. So
27:32
four people are watching the video guys.
27:34
So we are inside this video we are
27:36
integrating the Razer Pay payment
27:37
gateway
27:40
inside ReactJS and node shares. So now
27:42
to integrate the Razer Pay credentials
27:46
we will simply declare here const Razer
27:49
Pay and uh we will have the new keyword
27:53
we will initialize new Razer Pay
27:58
and inside this we will pass
28:02
this takes some objects here. First it
28:04
takes is the key ID. So basically it's a
28:07
key id key underscore id sorry key
28:09
underscore id.
28:12
So this is typically your uh ID which is
28:15
stored inside your dashboard. So you can
28:17
easily find this inside your dashboard.
28:22
So this is your ID. Simply copy this. So
28:24
this will be different for you.
28:26
So don't copy my key ID. So right here
28:30
this is the ID here.
28:33
Then we have the second which will be
28:35
key secret. This is again a confidential
28:39
information. You don't want to share it
28:40
with anyone. This is only the test mode.
28:43
So you can regenerate it. Test key. You
28:46
can see that.
28:52
So if you see here
28:55
configuration if you go to it
28:58
you will see the key API key option
29:00
here. regenerate.
29:04
Okay, so this is your a new key ID.
29:09
You can regenerate it at any time. So
29:12
let me paste it.
29:15
The two options here. The second one is
29:17
the key secret. So copy this and paste
29:21
it.
29:26
So after doing this guys, we simply need
29:28
to use the course module. we need to
29:30
pass it as app dot use as a middleware
29:33
function so that we can make it make the
29:36
request from the reactjs application. So
29:39
right here inside the root directory we
29:41
will store the logo for the project. So
29:44
you can include your own logo but I will
29:48
uh use my image here which is I will
29:51
download this image. This is my image
29:53
here. I will use this as a logo. I will
29:55
save this and then I will
29:59
move this. So I will cut this. You can
30:03
use any logo of your choice. So I will
30:06
use my image here. I will rename this to
30:10
logo.
30:12
So this is logo.jpg.
30:14
So now you can see that if I show you
30:18
this is logo.jpg. This is my image here.
30:20
I will use it for my payment gateway
30:23
purposes. So now to use this as a we
30:26
will simply say app.get get. So whenever
30:29
someone
30:31
logo jpg makes a get request to this
30:34
image, we need to simply return this
30:36
image to the user. So request response
30:41
and inside this we will simply send the
30:43
file to the user back to the file
30:45
response set file and d name
30:50
and here we simply need to
30:53
pass the full path here. So for this we
30:55
will use the path dot join method dur
30:59
name and then we will simply pass the
31:02
full path here which is put a comma here
31:05
instead of plus and then we will simply
31:09
say logo jpg.
31:13
So after this get request guys we just
31:15
need to make the post request which is
31:17
simply app.post post slashrazer pay
31:23
and inside request response it takes
31:26
these two parameters and inside this
31:29
what we need to do is that and mind you
31:31
this is the async function because we
31:35
are calling this function inside our
31:36
reactjs application if I show you inside
31:40
there we are calling it using await
31:42
[snorts] here you will see this is again
31:43
a async function so razor Okay.
31:48
So now we need to construct this post
31:50
request. So right here first we need to
31:53
do is that we need to declare some
31:56
variables which will be payment capture
32:01
is equal to 1.
32:04
Here you can configure the amount. I
32:06
will configure it as 499. You can
32:08
configure anything. Currency. Then you
32:12
can configure the currency. This can be
32:14
USD, United State dollar or Indian
32:16
rupees. Any currency valid currency in
32:18
the world you can configure it. After
32:21
you can pass the options.
32:24
So inside these options you can pass the
32:26
amount. So for this I need to multiply
32:30
by 100
32:32
and then currency will be currency
32:36
and then we have so for this we will
32:39
simply write the currency right here. So
32:42
for this you need to put a comma here.
32:44
So that is why it was problem here.
32:49
The third option it takes is receipt. In
32:52
order to generate a receipt, it is very
32:54
easy. We will use a short id module
32:56
short id.generate.
32:58
So this will generate a random string
33:01
and then we will simply pass payment
33:04
capture. This is our options object here
33:07
like this. So right here we will use a
33:12
try catch block to make the payment. So
33:15
when whenever any sort of error take
33:17
place we can simply caught the error
33:19
using the catch block.
33:22
So here we will simply say console log
33:24
error.
33:28
So inside the tribe block guys we will
33:30
just make a request here to the razor
33:34
pay server. So await. So we will simply
33:37
create a order here which is razor pay
33:39
dot and there is a method inside this
33:41
guys we know how to create a order razer
33:44
pay.create.
33:46
So basically this will create an object
33:48
inside the razer pay website. We will
33:51
pass the options
33:53
and after this we will console log the
33:56
response which is returned back to us
33:59
inside the server and right here we need
34:02
to return something to the client. So
34:04
here we can return back to the client
34:06
which is response.json JSON and here we
34:10
can return the information which is
34:13
returned back from eraser bay which is
34:15
response
34:16
dot the ID will be simply stored inside
34:19
response do ID then we have our currency
34:22
which will be stored inside response dot
34:26
currency response dotcurrency and then
34:29
the third option will be the actual
34:31
amount for which the payment has been
34:33
made. So this will be response dot
34:36
amount. So all these three things we
34:38
will be returning back to the reactjs
34:41
client
34:42
and now we at last we need to start the
34:45
application at a particular port number.
34:47
So simply will say app do.listen and now
34:49
we need to provide the port number. So
34:51
we will simply say 5,000.
34:54
So 5,000 you can give any port number of
34:57
your choice and here we can start this
35:00
node application console lock. So here
35:04
we can say app is listening on port
35:07
5,000.
35:08
So first of all we need to start the
35:10
server here. So we will simply start the
35:12
server here.
35:14
We will use nodemon index.js.
35:18
So it is saying that razor pay has
35:20
already already been declared.
35:24
Uh oh sorry this needs to be a capital
35:27
R. Let me make it capital R.
35:31
So just make this slight adjustment here
35:34
and once again raise a pay that's it. So
35:38
now you will see guys it is saying
35:41
express is not defined.
35:44
Uh
35:46
I think we haven't included the express
35:50
module. We need to include it. Yeah
35:53
sorry this needs to be require.
36:00
So require express. That's it guys. So
36:02
we have started the server app is
36:04
listening on port 5,000 and now we
36:07
simply need to go to our uh Razer Pay
36:11
client module. So now if I click the buy
36:13
button buy course. So now you will
36:16
simply say it is saying that oops
36:18
something went wrong. No appropriate
36:20
payment method found.
36:25
So it has created the order ID. You will
36:27
see entity order. You will see the
36:29
amount which is passed with amount paid
36:32
amount due currency INR.
36:37
Uh but something has wrong taken place
36:40
inside our ReactJS application.
36:50
Uh let me relaunch the application here.
36:53
So restart the application which is npm
36:56
start
37:13
Let me cross check which which is the
37:15
problem which is taking place. So if you
37:17
see here
37:23
so if you have any sort of doubt you can
37:27
commit is saying create a new website
37:30
please reply. So I will definitely
37:31
create a website.
37:41
So if you see here we have
37:47
created this module and we are including
37:50
this
38:02
Uh I think inside this options we have
38:06
passed our wrong I think we have passed
38:10
the wrong key here wrong key ID. So I
38:13
need to pass the correct key ID which I
38:15
used inside the server side. So this is
38:18
the key ID which I used here. So simply
38:21
I need to replace it inside the client
38:23
also. So this was the mistake I think
38:25
that I was doing.
38:27
So now this will be very much up and
38:30
running. So
38:32
you will see that now if I hit our
38:36
button,
38:39
click the button.
38:41
So it will now show correctly the model
38:43
window which is you can see 499
38:46
transaction is there. So this is my
38:49
profile picture. You can see it is
38:51
appearing right here. So we have
38:53
downloaded it from the internet.
38:55
So you can change the profile picture
38:57
anything anything logo of your company
38:59
or like this. So this will appear inside
39:03
the payment pop-up window. So we will
39:06
pay it using the Google pay ID which we
39:09
have. We will write this using geeky.
39:14
This is Google pay UPI ID.
39:18
Okay. IC IIC.
39:21
So there is a pay button here 499. So it
39:24
is payment is being proceeded. So now
39:27
you will get your order id. You can see
39:30
payment ID you caught. Then you will get
39:32
your order ID. All these stuff you will
39:34
get. So inside actual server side the
39:37
actual payment has been done. You will
39:39
see you will receive this information.
39:41
You will get your receipt currency
39:43
amount due amount paid
39:46
entity. This is your order ID all the
39:49
stuff. So in this way guys you can embed
39:53
the Razer Pay payment gateway
39:55
integration in React. We have done it
39:58
step by step in this video.
40:00
Uh hi sir please upload this video after
40:03
live session. Uh Vishnu this video will
40:05
be there for lifetime because we have
40:08
done it uh and this video will be there
40:11
on the channel for lifetime. I will not
40:13
be deleting it. So once the live stream
40:15
is over, you can definitely watch this
40:17
video and all the source code regarding
40:19
this application I have given in the
40:21
video description link. So if you go to
40:23
the live stream link here, you will find
40:26
the source code inside this uh link
40:28
here. If you go to this link, this is my
40:30
blog post. So here I have written all
40:33
the source code that you will need here.
40:36
So just in order to download all the
40:40
source code and you can also watch the
40:42
entire video alongside downloading all
40:45
the source code. Apart from that if you
40:47
have any sort of question you can ask in
40:49
the comment section and in this day I
40:51
will be uploading more and more videos
40:54
more and more payment gateway
40:55
integration something like this. So
40:58
please hit the like button subscribe the
40:59
channel as well
41:02
and I will be seeing you guys in the
41:04
next stream.