Hated everyone had their share.
And welcome to another video.
Now, this video can be considered as a bit of an optional because whatever we wanted to do or whatever
we wanted to learn as a back end developer, that is whole done.
That is, we can call it a day for here.
The only thing that I've added now is the key ID and the secret.
Now again, I would like to put up a comment here that this needs to go in a dot E and V file because
that's how it actually comes up.
But since we are just learning this stuff, we are not putting this product in production obviously.
So that is why this is going up here.
Now, what is the most important thing about here is that this is it.
This is all you need to do as a back end developer designed that and make sure you accept the amount
and kind of this is a repeatable concept.
You can just use this exact code.
But again, definitely there can be more information which you might want to send on to the front end.
Maybe you want to restrict some information.
That's up to you.
Now, the next thing is how we can actually go ahead and add this one on to the front end.
Now, on the front end side, if you go up here, I have actually made this one a little bit onto the
color.
So no big deal there, just some background color.
That's much of the code.
That's it.
Now let's go ahead and see that, how we can put it into the front end.
Reminding you again, this is a front end part, not a part of the course.
I'm just putting it so that you get a mode feel and an idea that how this is this flow entirely works
on.
So moving on, we go on to the classic page of the integration.
This is basically where the front end developer hangs around that how I'm going to integrate things
onto the front end part, whether that's a JavaScript, android, it doesn't work in the high, who
has that much, but still they provide it nice of them and all these other.
We are definitely into the web integration part.
We want to see how the docs actually work on with that.
So this is the basic integration on the very home page.
They say, hey, once you are done with that video tutorial, is there not that much?
Nice to be honest, but it's good.
It says create a razorpay account, generate the API keys in the test mode and all of that, and then
basically create an order from your server.
This is where we come in the back end of the person.
We have already done that into that and this is basically the exact same code that that gives you.
But in the back end API, it is much nicer than this one.
And coming a little bit on to the bottom page, it says you have two options now that you can actually
go ahead and have a manual checkout with the handler function or you can do a manual checkout with the
URL, callback, whatever is your style of writing the code.
Both of them are correct.
We are going to just copy paste this one so that we can see that how it works on.
So let's go ahead and simply paste this up here and let's see if we are making a whole lot of problems
up here.
I'm pretty sure we might be.
So, yes, we are making a whole lot of problems up here.
Okay.
So this one is not really nice.
Let me hit command Z and try to copy it manually so that we get a better idea.
So we basically want to just select all of this.
And we want to grab all of this a script.
So let me just go ahead, click up here and just hold on my shift key and click up here.
So this is the whole data that we want to bring in and we want to paste it up here.
So there we go, nice and easy, and there we go.
Now, let's try to understand this one by one.
First and foremost, it has introduced a new button for us.
So let me go ahead and save this and show you on the Web page itself that if I go ahead and hit a reload,
I know this is a really tiny button, but we got a button up here.
I hope you can see that this is the pay button.
So this is the basics of it.
And let's go ahead and see what else it is saying.
So basically, the idea is you can pass on all these options and can actually work on with that.
It will open up the intent and all of that.
But right now, this is fine.
If I go ahead and try to click on this one, this actually says, hey, oops, something got wrong and
all of that, and it's basically not working.
The reason for that is this is out of the box, a method.
You need to configure it a little bit on the front end part.
Let's go ahead and do that.
So I'll go at the top up here in the script section itself.
There we go.
And make sure this script is really required.
This is going to open up the intent, the pop up that you see on the razor on the razor page screens.
Okay, so how we're going to get start first, we need to grab this button here.
So we are going to grab this.
Of course it is not react.
So we cannot put up all these methods.
We need to grab that with the classic JavaScript way.
So I'm going to go ahead and call this one as Razorpay Button or R.P. button, and we're going to grab
it by simply saying, Hey, document dot, get element by ID because a nice ID is provided to us in
this one.
Really thankful to these guys.
There we go.
Now, once you have access of this razor pay button, you can actually go ahead and put up a handler
here, which is a click handler.
Let's go ahead and do that.
We're going to go ahead and say, hey, R.P. Button, we're going to go ahead and simply add an event
listener onto you.
What is going to listen it?
It will listen on to the click events now once it has been done.
Now, obviously, these things, when it is talking to the servers and going back, I told you, these
are all asynchronous activities.
Always remember the server is somewhere on the other continent.
So we're going to go ahead, go with the classic async.
It will give you an event and then you can just go ahead and fire up a method just like this.
Now, in this, the first thing, remember, the first step is actually to send a request on to the
server.
You need to create an order from the server.
This is the flow.
I'm not making this up.
This is actually literally mentioned up here onto this page.
If you scroll a little bit that hey, pass the order ID and the other options.
So from where you are going to get order ID in the step one, create an order from your server.
So this is what it is written up here.
So we cannot actually make a direct request.
We probably might want to use something like Axios or something in case you are using React or something.
But we can also make a direct request.
So what we're going to do is hold the response requests, come on response, and we're going to go ahead,
of course await and we are going to use the classic JavaScript fetch method to fetch a request.
Now the good thing is, since this is whole, is being inside the public directory and the our express
server knows about it, I can directly say order.
So this is the route that we are getting up here, the route I can directly make a request.
Otherwise if it is a separate page, I need to make a course and then I have to send the entire path
and all of that.
I don't need to do it right now.
Moving on, once you have made the request, let's go ahead and pass it on.
Other option, because this is not a regular request.
This is a post method request which requires a couple of more parameters.
So what are more parameters?
Of course, first, tell that this is a type of post request that is going on with the post request.
You need to pass on a header as well because obviously we need to send what amount you'll be detecting.
Remember, memory, jog memory.
We are we are expecting that somebody will say amount and it will come in request amount.
So we need to make sure we mention that.
So we're going to go ahead and say, hey, headers are also coming in and there is a content dash type
of the header what type it is, it is application slash JSON pretty easy and that's all you need to
do.
Now of course we have sent the method header.
Next thing is the body.
So let's go ahead and send the body as well.
This is how we send the body and the body needs to be send up either into the form or in the JSON.
I'm going to directly use a JSON here we are shortcutting the things.
So let's just say JSON shrink ify and we are going to go ahead and say, hey, I'm sending you a mount
which is off 50 or 500, whatever you like, I'm sending here 500.
This is really 500 because at the back end we are actually multiplying it by 100.
So this is actually what the user is passing up on the top 505,000, whatever you want to spend because
this is a test account, feel free to say send even five lac, whatever you like.
Okay, so this is all done.
This is the basic part of it now.
Obviously we'll be receiving a response.
And what I'm sending in the response, let's go ahead and check that this is the response.
I'm not interested in much on the success or amount.
You can you can work on with that.
I'm more interested in what I receive as an order, so I'm going to go ahead and structure that.
So I'm going to go ahead and say, Hey, I want to structure order from the response.
And again, I can say response order and all of that.
So we can go ahead and work on with that.
Okay.
Now I have access to this order.
Now what I have to do is I have to provide these options.
Notice here key is also being provided.
They need to be here.
This is actually once the order is done, the order has been received by the back end itself.
Now the back end is providing you all that information on the front end.
So we're going to go ahead and take all of these options first and then we're going to talk about this
part in a minute.
So let's cut this out and we obviously need to move into this add listener because everything is going
flow.
We don't need to use this flow nodes pre fill.
That's no use for us as of now.
Okay.
Now most importantly, these are written in the classic JSON, but they need to go something like this.
So amount just like this and amount.
There we go.
You can pass on the amount from here as well, but you don't need because we are actually passing it
from the back end itself.
You need to market here as well, but it's not really required.
So currency, we don't need name, description and image.
We are going to remove that and the order ID is going to come up from the order that we have received.
Remember, we have restructured that.
So order has a property of ID and this handler seems fine, but this needs to go away.
There we go.
Looks okay to me.
Okay.
This is the basic of it.
Now let's see what's also remaining.
We are not going to handle the failure part as of now, so we're going to go ahead and remove this failure
handler.
And now we need to create this options.
We need to just basically grab this part, cut this out and paste it up here.
So where these are so options actually end here and we can paste this up here.
Now this is creating a razorpay instance.
So this is how we create that new razorpay pass on all these options.
Remember, we are creating all these options up here.
So this is our options.
This actually goes up all here.
So this gives us kind of a razorpay instance and we don't need to now document or get element by ID
because we have already done that.
We are already inside that method.
So we need to actually modify this a tiny bit.
We can actually use this or see I'm using the classic example that they have given up and you can directly
put up an open intent on that.
That's it, that's it.
Okay.
So it looks okay to me as of now.
Let's go ahead and save this one.
And again, make sure we need to just copy paste the key as well from where you are going to get the
key, I got mine.
So I need to tell you from where you need to get yours.
So go login into that and click on the settings.
And inside the settings you're going to find the API keys pretty easy.
Just click on this notice.
It is going to show you the both things key ID and the secret key ID you can pass on to anybody.
Simple classic cryptography.
The secret is really important.
That always needs to stay on your server very secretively.
That's all you need to know about.
So go ahead, click on this one.
I've already grabbed mine from here, the same place.
Go on to the index tags.
This is the exact ID that we need to use and the front end as well.
It is required secret.
Make sure it's a secret.
Let's go ahead and put up our key ID just like that.
Okay.
I hope this is all we have actually grabbed most of the thing from the front end.
Again, I have skimmed through a lot of features because this is not a classic front end.
Of course I'm going to stop the server just for okay, so there we go.
Our server is up and running, going back up here, hit a reload and now let's go ahead and try to pay
that.
And this is not logging in.
Let me go ahead and quickly see that.
Why is it not logging in?
It says there are some of the issues.
Okay.
So let me quickly see that.
Where are the issues and handled?
Are razorpay is not defined.
My bad.
Seems like we have never brought in the razorpay.
My bad.
Okay.
So we're going to say const razorpay in the lowercase.
Of course.
I guess we are using it in lowercase.
We actually borrowed everything from there.
So we are actually never we are never bringing in razorpay.
Yeah, that's that's really bad.
So let's go ahead and bring that up.
So we are using the capital RAZORPAY.
I don't really like it, but hey, Razorpay is going to say require.
And Razorpay.
We need to restart the server here.
Basic mistake.
Hopefully this time it's going to work.
Reload that and let's hit the pay.
And still it is having the issues.
Let me go ahead and quickly see onto the console log that what we are missing it up.
Let's go ahead and say inspect and quickly see the console that what are the issues.
So it says the property of undefined ID.
So yeah, this actually happens a couple of times since we are not using anything react or something.
So I know exactly because I faced this problem in the past as well.
So I know the solution of this one happened to me once.
So what the problem is, it's not able to like grab order from this response here.
That is why it is giving us these kinds of error and this is actually easy to resolve.
So let's go ahead and say that we're going to say convert response and we can go ahead and say, hey,
I want to go ahead and convert this one.
So I'm going to use a weight for that.
And that's the response that we are receiving.
We're going to say dot JSON.
Yeah, we are sending the JSON response, but this is a classic error that sometimes happens.
And now from this converted response, we were we will be able to grab this order again.
This is a classic frontend developer experience, so we are going to go back on to this one, hit a
reload and yep, this is kind of a normal, not of a big issue.
So let's close that, hit a reload and try this one more time.
And there we go.
This time we are able to receive that.
Now what you're going to do is let's go ahead and add nine, eight, nine, eight, nine, eight.
One, two, three, four, five, six, seven, eight, nine, ten.
So this is a classic ten digit number.
Let's go ahead and say my name at ae dot dev and proceed please.
You can pay via card, UPI, net banking, whatever.
I happen to remember the dumb card details by the way, you can get it from the documentation as well.
It's for and all once after that.
Expiry, you can put up any date which is in the future.
That is, let's just say 25 quite futuristic cardholder name.
You can put any no problem.
And one, two, three in the CV.
Let's go ahead and pay that it is going to open up an intend just like this that hey, will you like
to simulate success or the failure?
I would like to simulate success and it has given me this ID from the order.
Remember, this was creating a problem, but for us.
And then if I hit OC, it gives me what else it gives me.
Let me check that.
Okay, so coming back it is giving me the first, it is giving me the payment ID, then it is giving
me the order ID and then the signature.
So whatever you would like to extract and put into your database, you can just go ahead and do that.
Now, this is the basic that I have extracted.
They actually mention a whole lot of things in these handlers.
There's a long documentation list that they gives you out, but this is a classic experience.
And again, this is a common mistake and common error that comes up that whatever it gives you, you
need to actually wrap that around one more time into the JSON.
This happens only index.html or kind of if you are using any templating engine, if you are using something
like React or Angular or anything, I have never faced this problem.
So again this is a classic frontend issue.
We don't want to talk it up here, but I told you, let me just summarize quickly.
There are a couple of more options that can be done, but the major thing is that we need to create
a post route in that we received just the amount that whatever the amount we need to deduct, then we
simply create an instance of Razer pay in which we pass on that hey, we are registered user.
We are not anybody.
We know that this is my ID and this is my secret.
You can verify.
I mean, they verify you and after that you simply provide some of the options.
Now the option list is really, really long, but these two are the basic bare minimum one amount and
what currency?
We also have passed on receipt.
But this is optional.
After that you simply just create an instance order dot create.
It will create a new order and it will give you all the information in my order.
After that, you can pass this on to the front end.
This is the only job that you have as a back end developer.
And again, I'm not cutting out all the parts where I have removed the errors and stuff because this
is an important experience for you that nothing goes perfect.
We all the time debug the code.
That's how it happens.
Sometimes we know it by the past experience.
Sometimes you learn it first time just like you did it.
So that's it for this video and let's catch up in the next one.