55. Payment Integration in Angular and Spring Boot (Razorpay)

hello guys welcome to the next session of developing e-commerce application from scratch using angular and spring boot till now in the e-commerce application we have done almost every single functionality that e-commerce application should have we have worked on different features we have worked on different um views for the different roles such as admin and the users but we have left back with one of the most important functionality that is payment integration so now in this session we are going to focus on how we can integrate any payment Gateway in our e-commerce application so for the payment Gateway we have multiple options we have a paytm we have PayPal and we have the razor pay and there are many more options available in the market but right now for this series I am just going to use eraser pay let me just clear you one thing this video is not sponsored by the razor pay the reason why I am using the Razer pay is due to its Simplicity I have used it couple of times in my different applications that is the reason I am just trying to use it in this application also and second thing is many of the people who are watching this series might be the beginners or might be just started learning the angular and springboard so I think Razer pay is good option to start with because the code is really very less and we can just integrate the razor pay in payment Gateway in our application really very easily so that is the reason I am just going to use a razor P maybe in future if I get a chance and if I get a lot of comments then in future I will try to use different payment gateways and I will just try to show you how to use different payment gateways in the different applications but now let's continue with this session so before continuing with this session make sure that you have watched my previous session because in the last session we discussed on how we can create account on a razor pay and how we can generate a keys as well so in this session we require those keys so I'll just just make sure that you have generated that those keys and watch my previous session and then maybe you can just continue with this particular session now again to integrate this payment Gateway we require some changes at the back end and we require some changes at the front end also I will try to cover all these changes in this same session itself but session might be session will become a bit large bit large in terms of the minutes but I think making it in a single video makes sense for me as of now so now without taking much more time let me just take you to the uh IntelliJ and let's see how we can start the implementation of permit integration now over here to start the payment integration before that let me just go to the Google Chrome and let me just tell you how our application is looking like as of now so as of now let me just click with the user so let me just click with the user login with the user and let me just do one thing let me just go to the home let me just go to the view details let me just click on buy now so over here whenever we will click on the place order then order will get placed directly so as of now we don't have any payment and anything so now what we are going to do is we are going to in see how we can integrate the payment so now to do this let me just go to the IntelliJ and let me just first of all open the pom.xml file so reason why I'm just using a palm.xml file is because we just need to add one new dependency which is a razor pay dependency so that is the reason we have to add one dependency so let me just go to this particular document so this is the dependency that we have to use I will just give all these details that I am using in the description below you can just check that out so and you can just copy and paste directly from description now let me just copy this dependency and let me just paste it over here and now let me just save these changes now as we have done some changes in the palm.xml we have to like use uh Maven load Maven changes so let me click on this particular button that is Maven refresh button or my one sync button so it will just take some time and it will just try to download the dependencies of Razor Bay so let me just give a minute and make sure that your laptop or PC is connected to the internet because it will try to pull all this dependency online now it is um downloaded successfully the next thing that we have to do is we have to first of all create one API so now let me just before writing the code let me just tell you one thing there are two steps involved while making the payments so first of all in the razor pay we have to prepare the order so when I say order it basically means that we have to prepare a transaction so very first thing is we have to prepare a transaction and second thing is we have to execute a transaction so first of all we require one API to prepare a transaction and second step will be the uh like executing a transaction so let's see how we can do this so first of all let me just go to the SRC main Java and then let me just go to the controller and over here let me just go to the order detail controller now over here let me just do one thing let me just add one new API that is called as a public as of now let me just keep it as a void and then let me just make it as a cricket transaction something like this now over here this API is going to take one parameter which is nothing but a amount so we have to give a amount as well like for which amount we have to prepare a transaction so let me just use one path variable so let me just use at the rate path variable and let me just give the name as of now let me just keep the name blank in a moment I will just give it and let me just give the amount as double amount something like this now let me just use we can use post mapping or might be we can use get mapping as of now get mapping makes sense for me so let me just use gate mapping and then let me just use slash create transaction slash and we have to give a path variable so let me just give the name as the amount so let me just copy this name and let me just paste it inside this double quotes something like this now we have to give this pre-authorize so let me just copy it and let me just paste it over here but I'm just going to allow it only for the user so we have to use user something like this so user is nothing but a role so I just want to allow this API to be used by the um by the people who are having the role as a user something like this now we are done with the controller next thing that we have to do is we have to just go to the service and we have to write some logic so let me just go to the order details service and let me just write one new method over here so let me just write public as of now let me just keep it as a void and then let me just use create transaction something like this and let me just give amount as a parameter something like this now over here what we have to do is first of all we require four different um four different things so let me just tell you what are the different things that we require to in order to prepare the transaction for razor pay so first of all obviously we require the amount then second thing that we require is a currency so we have to give a currency in in which currency we are going to prepare the amount it might be like a US Dollars it might be like Indian rupees or it might be any other currency as well then we have to give a key like we have to give a key that we have generated uh in the last session on the razor pay portal so that key we require and there is one more key that is called as a secret key so we have to give that secret key also so these are the four mandatory fields that we require in order to create a transaction in a razor p now for this what I am just going to do is all we already have the amount that we are receiving from our API we have to create the currency key and secret key so what I'm going to do is I'm just going to create four different variables so over here what I'm going to do is I'm just going to use a private then static then final and then let me just make it as a string then let me just give the name as key is equals to and let me just go to my document so over here this is the key that I have received let me just copy it and let me just paste it over here so if you just see there are two columns which is key ID and then key secret so key ID is nothing but a key and then second thing is key secret means nothing but a secret key now let me just create one more variable and let me just give the name as key underscore secret something like this and let me just copy this secret key and let me just paste it over here something like this for the currency let me just make one more variable and let me just give the name as currency something like this and for the currency we have to give something like INR or if you are using dollars US Dollars then you have to give a USD so we have to give a short form of our currency in my case I am just going to use INR which is Indian rupees now let me just save these changes now let me just come back to my method that we have just created the next thing that what we have to do is we have to um do one thing so we have to like first of all create one razor pay um client so what we have to is we have to just use Razer pay client let me just give one name you can give any name let me just give Razorback client itself and then we have to create a resume client object now over here in the Constructor basically we have to pass two different parameters first of all we have to pass our key and then second parameter is nothing but a secret key something like this now over here it is giving us the error let's see what is the error what is the error so over here it is basically saying that you must have to handle the exception so what we have to do is we have to write this in a try catch so let me just write this in a try and let me just sketch the exception something like this and let me just use e dot get a message something like this and now let me just save these changes now what we have to do is there is one method on the razor client that is called as a create so that create method we have to call so what we have to do we have to use a razor pay client dot orders Dot create now if you just see the create method basically takes one parameter that is called as a Json object now this Json object we have to prepare and that Json object should contain the amount and currency information so I'm just going to tell you how we care to prepare it so first of all we have to just use Json object Json object let me just find the correct one yes suggestion object we have to use let me just give the name and suggestion objects itself is equals to new Json object something like this now we have to do is what we have to do is we have to use Json object dot put and over here we have to pass two different parameters first parameter is nothing but a key ah first parameter is nothing but a like key and the second parameter is nothing but a value so now what is the key and what is the value let me just tell you one thing so for the amount key should be amount something like this and then what we have to do is we have to pass the actual amount something like this and similarly we have to pass a second Json object value so we have to pass a currency so for the currency we have to write a key as a currency make sure you are just writing in a the same way that I am showing over here and then whatever currency we have declared so over here we have declared the currency okay so let me just make the spellings correctly currency so let me just copy this same key and let me just paste it over here something like this so amount we are receiving in the method parameter and currency we have declared above and the next thing that we have to do is one more thing that we just left back is so amount for this amount we have to make amount into hundred so something like this so reason why I am just using n200 is basically whatever amount that we will receive over here it will be the smallest unit of a currency so for example uh if you are just trying to use dollars so whatever amount that it will receive over here let's suppose if you're just trying to make a payment of hundred dollars then over here the amount variable will contain the hundred dollars right or 100 as a value but razor pay will consider it as a hundred cents so it will always consider the smallest unit of a currency so that is the reason we have to make it as a n200 so so that's in in that way it will be like uh it will whatever amount that we are we required the exact same amount it will it will be reflected in the razor pay also ah similarly if you are making making like transaction in the Indian rupees and if I just pass the value of ten thousand so it will not consider it as a 10 000 so it will consider it as a 10 000 Paisa and that is the reason we have to make it as a n200 so that it will be considered as a 10 000 rupees again so don't need to put a lot of logic over here whatever amount you are just giving just make sure that you are just making in 200 over here something like this now let me just copy this Json object and let me just paste it over here something like this now as soon as we will create the transaction or as soon as we will just try to prepare the transaction it will return us one uh it will return us bunch of details so let me just tell you what are the details it will return but first of all let me just try to put them in one variable so let me just try to put them in a order so now make sure that the order because for the order we have different choices but make sure that you are just using order object from the com dot razor pay itself because it because it is going to return us object of order so make sure that you are just trying to import it from the com dot razor P something like this and let me just give order is equals to resurrect pay client dot orders dot create in the bracket Json object something like this and lastly what we can just do is we can just use system.out.println and let me just use order something like this so as of now I'm just going to print this order details on the system dot with the helpbox system.parental and you know moment we are going to change the implementation and we are just going to return some details to the UI but as of now let me just save these changes and let me just start this application in a debug mode Let's see what is what exactly happens when we try to send this details meanwhile let me just open the postman because we are just going to try this particular API from the postman so if I just come back and meanwhile let me just tell you one thing what we have to do is we have to first of all log in with the user yeah and one more thing that we just left back yes so what we have to do is we have to just call order Detail Service dot create transaction from our controller something like this and now let me just save this sentence and now let me just restart the application again let's see what happens and let me just do one thing let me just come back and let me just copy these API and let me just make it as a local host colon 9090 and let me just paste it as a create transaction and over here we have to give the amount and let me just give it as a thousand rupees so let's say if I'm just going to create a transaction for a thousand rupees so we have to give it as a thousand something like this and one more thing as this particular API is only available for the user we have to pass a valid JWT token so let me just prepare a JWT token also so let me just try to use users credential so let me just try to use username and password something like this and let me just copy this JWT token and let me just come back to my create transaction let me just go to the headers let me just pass one header that is called as authorization let me pass the value as Bearer space let me just paste my JWT token now let me just come back to the IntelliJ and let me just put one debug point on this line number 106 and let's see what happens so let me just click on send now we are able to get the end point on our line number one zero six let's go to the next yes so now over here it will try to create uh object of Razorback client yes object is created now it will just try to create a order or create a transaction and after creating transaction it should return us some order details right so let me just see whether we are get order details or not yes now if you just see we got lot of order details so we got uh if I just show you okay so if I just open my debug and if I just show you over here so here also like we have the amount and let me just do one thing yes so over here we have we have received a amount then we have received amount pay as zero then there are some other details currency if you just see there is INR and there are different details also so now there are multiple details that we have received over here but we have few details really very important that we require on the UI so what we are going to do is we are just going to send some details to the UI so what are those let me just do one thing let me just create one new method that is called as a let me just stop debugging so let me just create one new method that is called as a prepare private void and prepare transaction details something like this transaction details something like this it will just take object of orders order again will come from com Dot reservey something like this now from this order what we are going to do is we are just going to fetch some details so what we are going to do is we just require a string order ID is equals to order dot get and we have to pass s um ID as a key then similarly we require currency so we have to just use currency over here something like this and we can just store it in a currency something like this and similarly we can just do one thing we can just take a amount also so we have to use amount as a key and we have to just create one new variable that is called as amount something like this now over here we have to return these three values to the UI so what we can just do is we can just go to the entity and we can just try to create one new Java class and we can just give the name as transaction details something like this now it should take three different variables let me just make it as a private private then string then order ID then private string currency and then private string then we have to give it as a amount something like this and then one more thing for the amount we can use maybe ah string or double or integer that whatever you want what I'm just going to do is I'm just going to keep it as a string only then what we can just do is we can generate Constructor using these three parameters and alongside we can generate a getter status as well so let me just use the generate get us and Setters something like this let me just save this changes let me just come back to the order Detail Service let me just do one thing let me just create object of transaction details transaction details is equals to new transaction details now there are three different things that we have to pass first is first one is a order ID then second one is a currency and then third one is a amount something like this and now whatever we will prepare we will just try to return the transaction details something like this now over here it is complaining me because I have just given the return type as a void so let me just make it as a transaction details now this particular method that we have just created let me just call this method from our uh create transaction method so let me just make it as a prepare transaction details and let me just pass the order as a parameter and let me just do one thing let me just try to return it as it is so whatever prepare transaction detail method will return that ah that as it is we are just going to return from this great transaction method also again it is complaining because we have used a return type as a transaction details and one more thing at the end we have to just return null something like this because if at all we get any exception and if at all this written statement does not execute then this return statement should execute something like this now let me just save it and let me just go to the controller again what I'm just going to do is I'm just going to write return in front of my create transaction method so this basically means that whatever create transaction method will return to my controller as it is I am just going to return it from the controller so again let me just give the type as a transaction details something like this and now let me just save these changes let me just start my application and let's see what happens whether we are able to get any details on the postman or not so let me just click on send again let's see what happens so now over here in the postman we are just not getting any response so let's see what we have done wrong over here okay so let me just save this changes again I'm not sure whether I saved this file or not and let me just restart the application ah this time let's see whether we get any ah output or not Okay so still we are not getting the expected output so let's see what have what is happening over here I will just do what I will just do one thing is I will just do [Music] um store it in a transaction detail is equals to something like this and I will just try to return the transaction detail something like this and I will put the debug point over here something like this and now let me just restart the application and let's see how it looks like maybe uh I think we might getting any exception Also let's see okay so let me just come to the next line yes okay so order is basically created we are able to create the order successfully then okay so now over here we are getting one exception so exception is basically saying that it is basically Class cast exception so it is basically coming from the coming for the amount so over here what we are just trying to do is we are just trying to store the amount in a stream we have to store it in a integer so let me just give the integer something like this and now we have to change the amount type in a class also something like this and we have to change the getter Setters also so let me just remove these geta Setters and let me generate a new one something like this and now let me just save all these changes and let me just restart the application and let's see now this time we should get some details on our Postman console itself yes now we are getting the expected result we are getting ah like we are getting the order ID we are getting the currency and we are getting the amount also so now every single thing is looking perfectly fine at the backhand side as of now we are done now we have to see all the changes that we have to do on the UI set also so let's see how we can those those changes on the UI side so on the UI what we have to do is first of all whatever the API that we have created we just have to call this particular API so let me just go to the vs code and let me just do one thing let me just go to the services and let me just go to the product.service.ts and then let me just add one more service point over here so let me just use public and let me just make it as a create transaction and over here we have to just pass a amount and then what we have to do is we have to just use return this dot http client Dot it was a gate mapping so we have to use a get mapping and then what we have to do is we have to just give endpoint API that is HTTP colon slash slash localhost colon 9090 slash let me just go to the postman let me just copy the endpoint name which is a create transaction let me just give a slash and whatever amount that we will receive we have to just append that particular amount something like this now let me just save these changes and let me just take you to the browser again and what we have to do is we have to first of all find which method gets clicked on this place order button and then whenever we will click on this particular button then we have to call the API that we have just created so for this let me just go to the vs code and let me just go to the byproduct dot component dot HTML file and then let me just find the place order button so yes this is the place order button and on this submit we call it as a we call one method that is called as a place order so now let me just do one thing let me just change the method over here let me just as of now let me just call it as let's suppose uh create transaction and place order something like this and now let me just copy this name because this method is now this method is not yet created that is the reason we are getting error over here let me just go to the buy product Dot component.ts and let me just try to create this method this method will take form order form as a parameter something like this which is of type NG form something like this and let me just give the curly bracket now this order form is basically nothing but this particular parameter that we are sending over here the next thing that we have to do is we have to just first of all create a transaction how we are going to do is we have to just use this dot product service Dot then we have to call create transaction and this great transaction basically takes amount as a parameter now if you just see there is one method which gives us the grand total so grand total is nothing but this particular total so ins in some cases let's suppose we have where where we have multiple products uh five to ten products then the grand total will be the will be the total which will be calculating for all the different products and all the different ah total of all the different products which will be a grand total right so this particular method calculate a grand total so we have to call this particular method over here let's see this dot grand total something like this and let's let me just store it into a variable let me just make it as a let amount is equals to this dot grand total now this particular amount that whatever we will receive we will just send it to the create transaction and then we will just make it as a subscribe now we have to add two callbacks first one for the success response and then second one for the error response so let me just add response then arrow and then let me just make it as a console.log response something like this and then we have to give a comma and we have to give error call back so let me just use console.log error something like this and now let me just save these changes let's see what happens on the UI when we just try to do the console so let me just go to the console and let me just do one thing let me just clear the console and now let me just put some details over here some random details I'm just putting as of now I am not interested in these details I am interested in the whatever output that we will receive so let me click on place order so yes we received the order ID we received the currency and received the amount as well the next thing that we have to do is we can just uh you know try to use these particular response and we can just try to do further in further operations now if you just remember in very initial stage of the video I just told you two different steps right the very first app is very first step is to prepare a transaction or to create a transaction and then second step is executing a transaction so whatever we have done till now it was basically about preparing a transaction now the Second Step that we are actually going to perform is all about executing a transaction so let's see how we can execute and finalize the transaction okay so one thing that we have to do is let me just go to the my notes yes so this is dependency that we have to add in our package.json so this is again nothing but a razor by dependency so let me just go copy this and let me just go to the package.json file and let me just paste it inside my dependencies something like this and now let me just save this now let me just stop the current execution of application and let me just do npm install because now we have added one dependency into the package.json so we must have to use these npm install command now make sure you are again connected to the internet because it is going to pull all the dependencies from the internet and it is going to use that dependency in our application now it might take a minute or one but till now let me just do one thing let me just go to my notes again and let me just copy this particular line so this all these lines that whatever I am using I'll just give you in the description box you can just click copy and paste in your application directly now let me just copy this particular line and yes now our dependencies installed let me just copy this particular line let me just go to the index.html file and then let me just do one thing let me just paste it after this uh line number 10 so make sure that whatever you have copied whatever script you have copied you are just pasting it into a head in something like this and now let me just save this changes let me just start my application again npm Run start something like this and then let me just do one thing let me just go to the buy product dot component.ts over here now what we have to do is we have to create one more method so this particular method that I we are just going to create it will basically it is basically for opening the pop-up or opening a transaction prompt I'll just show you what do I mean by that so what we have to do is let me just give the name as open transaction model something like this and it is going to take response or maybe anything so whatever response we will receive we will just send it as a parameter over here so over here what we have to do is we can just take response which is of type any as of now I'm just going to keep it as any so now what we have to do is over here we have to prepare one option so it is nothing but basically um it is something similar like we are we send headers in a different apis right so it is basically similar to that so we have to prepare this particular options so what we have to do is we have to use one variable of type where and let me just give the name as options now we have to give different options over here make sure that you are not doing any mistakes just make sure that you are whatever I am writing just you are writing in a pretty similar way over here so first of all what we have to do is we have to just use order underscore ID that is the first option that we have to give over here we have to give order ID so order ID we will receive in the response so we have to use response dot order ID something like this so response dot order ID something like this then we have to give a key so key again we will receive from the response so we have to give response dot key and if you just see uh okay so as of now we don't have the key over here but let's see how we can add that particular key so if I just go to the IntelliJ and if I just go to the okay so from over here we are we are not adding key over here let me just do one thing let me just create one more variable because key is really very important part so we require that key so let me just use private string key something like this and let me just remove this Constructor and let me just generate new Constructor let me just copy all these variables and similarly let me just generate a get a status also yes and now let me just save this changes let me just go to the order Detail Service now over here we are just getting the error so we have to just pass one more variable at the end which is nothing but a key and key we have already declared over here something like this and let me just restart the application and let me just let me just take a moment and let me just test this application on a postman first let me click on send yes now we are receiving the key also so this is the key that we have to use and we have to make it as a response dot key then third one that we have to use is use as amount so we have to use the response dot amount something like this after that we have to use a currency so we have to use a currency make sure you are not doing any spelling mistakes and we have to just use response Dot currency something like this after that we have to give a name so this name is basically a name of the person who is going to make a payment or any name that you just want to display so as of now I'm just going to make it as a learn programming yourself something like this after that we have to give a description so description you can give any description so description should be like a string and it should be something like payment of online shopping something like this you can give any description by the way the next thing that you can give is you can give any image so I'll just tell you I'll just show you like what this image is basically all about but you can just give URL of any particular image so let me just do one thing let me just go to the Pixar pay so let me just do one thing let me just go to the pixab A and let me just copy a dummy image let me just do one thing let me just copy okay uh URL of maybe any image so let me just do one thing let me just copy this particular copy image address and let me just paste it over here in a single quotes something like this after that the most important part is a Handler so we have to give a Handler because once like transaction is done then what is the method what is the action that you have to perform we have to give it in a Handler so for this Handler I'm just going to use one callback so it will be of type like we will receive some response once our transaction is done so that response will be of type any then we have to just give a curly bracket and then what we can just do is we can create one new method like process response something like this and this process response will take one parameter let's say resp something like this and let me just do one thing let me just use console Dot log r e s p something like this and this particular method we will call from our Handler so we can just use this Dot process response and we can just pass whatever response that we will receive we can just pass that response over here as it is now there are few more things that we can just do that we can just pass so there is one more option that is called as a pre-fill so I'll just explain you what is uh what is the pre-fill and all about and let me just do one thing as of now let me just use prefill and inside the prefill we can just pass a name so let me just give the name as let's suppose lpy which is learner programming yourself email I'll let me just give LP Y at gmail.com and the third one is a contact so let me just give it as a contact and let me just give some random contact over here something like this there is one more option after the pre-fill which is called as a notes so let me just use that also I'll just explain you I'll just show you directly on the UI like what is uh all these things all about address might be you can just give anything so address is nothing but a online shopping something like this something like this and there is one more option that is called as a theme so that theme is nothing but a you can just give a color of model that you want so let me just give the color as c o l o r as you can just give any color code let me just maybe give one thing uh hash um okay so let me just give one this random color name I'm not sure which color it will pop up so I'll just keep it as it is and now let me just save these changes now the next thing that we have to do is after preparing preparing these options we have to create one razor pay object so how we can create it we have to just use new razor pay and we have to pass the options that we have created over here something like this now it will return us one offset let me just store it into a razor pay object is equals to something like this now over here it is giving us one issue let's see what it is giving so it is basically okay so what it is basically saying that argument of type is not assignable okay uh key ID is declared okay I am not sure uh OK let me just do one thing let me just remove this razor pay config something like this and okay ins okay we can't remove it is the Razer pay class so we can't remove it so what it is basically saying that I'm not sure let me just make it as a don't save okay let me just remove this particular also this particular line also and let's see now how it looks like let me just import it again something like this yes now it is looking perfectly fine and let's see whether do we get any error so as of now we are getting one error but I think we should restart the application and then error will be resolved one more thing that we have to do is we have to just call razor pay object dot open so we have to just call razor pay object that opens something like this and now let me just save these changes now over here again we are getting one error so for this error what we can just do is we can just go to the top and then we can just use declare then where and then we can just use razor pay which is of type any something like this and now let me just save these changes now over here let me just comment out this particular line let's see what happens yes now let me just save these changes and let me just restart my application npm Run start let's see what happens do we get any error or maybe any something new that we have to handle so let me just wait till my application gets compiled successfully yes now it is compiled successfully let me just go to the UI let me just refresh the application let me just go to the uh any product by now let me just fill some details as of now I'm just filling some random details and now let me just open the console also so if at all we get any error then we should get it on the console okay now let me just click on the place order button let's see what happens okay so uh our prompt is not getting uh open successfully so we are not getting the model that we are expecting over here so let me just click on it again or let me just close it and let me just try to click on it again okay so still we are not able to open the prompt let me just do one thing let me just go back and yes so over here we haven't called our method so let me just copy it and let me just call it as a this dot open transaction model and then we have to pass the response something like this let me just save this changes again and let me just wait till my application compiled let me just refresh it let me just give some name something like this and let me just now click on the place order button let's see what happens yes now if you see we got the pop-up and we got the model if you just see ah whatever name we have K1 that name is basically popped up over here whatever image address that we have given that image is populating over here now in India we have different options to pay we have the Google pay we have the phone pay paytm that is the reason we are getting all these options over here then we are getting the QR code also and then we are getting some other uh like other payment ways like we have we are getting the cart and net Bank net banking and wallet also so now next question comes in mind is how to this how to test this particular transaction so now in order to test this transaction razor pay itself have given different UPI IDs and with the help of those UPI IDs we can test this particular transaction I will give that document Link in the description box to that recipe document you can just check and you can just see what are the different ways to test it but I have just noted them out and if I just go to the IntelliJ and if I just open this application properties then let me just copy this UPI ID so this is nothing but success at the rate razor pay so this is just test UPI IDs it is not actual the UPI IDs if I just click on UPI or QR then let me just click on UPI ID and let me just paste it over here and now let me just try to click on pay now button but before that let me just try to open the console so that whatever we are just trying to print on the console let's see what we like what it exactly pays what it exactly prints on the console so if I just go to the vs code then if I just go to the TS file of buy product.component.ts then if you just see in the Handler what we are just doing is we are just calling this dot process response method and we are just doing the console.log response something like this and now let's see let me click on the pay now button let's see what happens so it is now doing some processing of the payment and it is just doing some actions but we have to just wait and now if you just see we got the message like payment successful and on the console yes so as soon as pop-up uh like as soon as the pop-up closed then we got some information on the console so we got the order ID we got the payment ID alongside we got the payment signature so we got three different things on the console we are interested in the payment ID because we are going to store that uh in our database so payments payment signature is also really very important but as of now we are not doing any actual payments that is the reason I am just going to ignore it but I'm just going to store this payment ID or you can say transaction ID in my database so let's see how we can quickly do these also so what we have to just do is we have to just copy this key so let me just copy this razor pay underscore payment underscore ID and let me just come back to the vs code and over here what I'm just going to do is I'm just going to check if response Dot razor pay underscore payment underscore ID okay so what I'm just going to do is I'm just going to check if response not equals to null and response dot razor pay payment ID not equals to null if both are not equals to null then and only then I am just going to call this method that is process response or else if something is null then I am just going to use alert and I'm just going to show the message like payment filled something like this let me just save this changes the next thing that we have to do is we have to just uh like place the order because as of now what whatever we have done is it is all about the payment now actually once the payment is successful we have to place the order as well right so now let's see how we can do this again we have done every single thing previously itself we have already done one method that is called as a place order method so we have to call his place order method itself nothing more than that but one more thing that we have to just do is we have to okay so for this create transaction and place order what we are just doing is we are just calling this order we are just taking one parameter that is called as order form that parameter I'm just going to pass it for my open transaction model also something like this again we have to just add that parameter over here also NG form something like this and then next thing that I'm just what I'm just going to do is I'm just going to copy it and I'm just going to pass it for my process response also something like this and again we have to just add it in the parameter something like this and now let me just do one thing let me just copy let me just cut this line and let me just do one thing let me just call this dot place order and now it is asking me for the order form so let me just pass the order from order from that whatever we are receiving in the parameter over here something like this now one more thing that we have to do is we have to like whatever transaction ID we are taking we have to store that transaction ID into the order details so if I just show you online number 20 there is one object or maybe there is one uh you can just say that um yes there is one uh information object that is called as a name address contact number alternate contact number so these all the details are nothing but the details that we are just showing on this particular screen so these are the details which are getting stored into these particular fields and this particular order and quantity list is nothing but this particular list that we are preparing over here so in these order details we have to store a transaction also because that transaction we want to pass it to the back end and then we have to like store it into a database also so what I'm just going to do is I'm just going to add one more field over here so inside the order details interface let me just add one more field that is called as a transaction ID which is of type string again and now let me just save this again over here what we have to do is we have to just add the transaction ID I will be initializing it with the empty string something like this now the next thing that we have to do is we have to come back to the process response and then inside this process response what I am just going to do is I'm just going to make it as this dot order details dot transaction ID is equals to resp Dot and let me just copy the key which is Razor pay underscore payment underscore ID and let me just paste it over here something like this and now let me just save these changes now let's see what actually goes to the back end and how it looks like basically from the network tab uh so let me just click on save button again and if I just come to the Google Chrome let me just open the inspect and let me just open the network tab yes so over here inside the network tab let's see how what what is the data that actually goes to the back end let me just put some random names over here okay so now what we are making the payment of 1150 so let me click on place order again we have to give the UPI ID so let me just copy this particular API ID and let me just paste it over here something like this and now let me just clean my Network Tab and let me just click on pay button so there are different things happening behind the scenes so let's see what happens exactly when we try to place the order now order is now payment is successful let's see order when order gets placed okay so if you just see um in our case if I just show you place order yes so inside the place order inside the payload our transaction ID is going so if you just see uh this is the API that is getting called to place the order localhost colon 9090 place order slash true and then we have the contact number full address full name and we have the order product quantity list also and then lastly we have the transaction ID also yes now we are able to you know send this transaction ID successfully to the back end the only one thing that we have to do is we have to store it into a database right so let's see how we can store it into a database so if I just go to the IntelliJ again so one thing that we have to do is we have to just go to our order detail controller so place order is the API that gets called so we have order input so inside the order input we have to add one more field that is called as a private string transaction ID make sure whatever transaction ID whatever key you have used over here inside your or digital interface whatever ID whatever key you have used over here make sure that you are just giving exact same ID over here also let me just generate the Getters and setters let me click on OK let me just save it now let me just go to the controller and let me just go to the place order method now over here if you just see um there is one more object that we are preparing that is called as order detail and this order detail we are just storing into a database right if you just see the we are just storing order details into a database so these order details inside these order details we have to add one more field so how we can add this it is basically simple we have to just go to the order detail if you just see order return is nothing but a entity right so we have to add one more um what we have to do is we have to just add one more like field over here that is private transaction ID private string transaction ID something like this let me just generate a getter Setters and let me just remove this particular Constructor so let me just generate a new Constructor something like this and let me just generate a get a Setters for a transaction ID also so let me just click on get a Setters and let me click on OK and now let me just save these changes obviously we are getting some errors over here so this is really very simple what we have to just do is we have to just use order input Dot get transaction ID something like this and now let me just save these changes so over here again it is complaining me for something let's see what is happening over here okay so if I just come to the order detail yes so what we just studied we don't have to include this order ID into a Constructor let me just remove this Constructor again let me just click on it generate Constructor and let me just select all but let me just unselect this order ID and let me click on OK let's see what happens now whether our error gets resolved or not yes now our error is getting resolved now let me just restart the application and let me just take you to the database also because this time we are expecting some changes into a database structure let's see whether my application started successfully yes it is started if I just refresh it and if I just show you the table if I just show you the order detail table so inside the order detail table we got one new column that is called as a transaction ID right so let's see by placing One new order over here if I just go to the home page let me just select this by now and let me just Place some details over here then contact number something like this and if you just see the total is nine zero nine let me just click on place order let me just click on UPI UPI ID let me just copy the UPI ID let me just you open application property file let me just copy it and let me just paste it over here let me click on pay now let's see what happens yes payment is successful if you just see the messages it is giving some messages yes now your order is placed successfully and it will get delivered to you within the four to five business days right so now let me just refresh this particular again and if I just show you let's see whether a transaction ID is stored yes if you just see the transaction ID is stored and the amount was it was 909 and transaction ID is stored into a database right now let me just do one thing let me just check this particular with the card because if you if you just see we have a cart also and if we have the multiple cart multiple cart items let's see how it behaves let me just go to the few details let me just add it to the cart let me just go back let me just add it to the card and then let me just scope back and let me just add it to the card and one more item let me just try to add it to the card yes now we have four items if I just go yes okay so we have multiple items in my card and let me just try to do one thing let me just try to click on checkout if you just see the grand total is twelve thousand four hundred and twenty six we can change a quantity also if you just see now the grand total is fourteen thousand eight hundred and twenty six let me just put some details over here something like this and let me just try to click on place order let's see what happens now again if you just see it is taking the grand total as 14 826 which is exactly same that we that we have calculated behind the scenes Let me just click on UPI enter UPI ID let me just copy the UPI ID let me just paste it let me click on pay now and let me just wait till the transaction gets successful so yes transaction got successful and it is redirecting now we got the message and now let me just select from the database table again and if I just show you yes now we got the different orders placed over here and if you just see we are able to store the transaction ID for each of the different orders that we have placed just now so this transaction ID will be the single like will be the same for uh cart because like whatever car items we were having like for this all the cart items we done only one transaction that is the reason for all these order details we will be having only one transaction ID right so we are We call we are getting the expected output it is working perfectly fine in our in our single product checkout in our card product checkout also so uh yes it is working perfectly fine and as expected so again um one more thing that we have just left back is might be this particular page is not working as expected so I was supposed to uh it was supposed to like um go to the next page and it was supposed to show only one message over here and it was supposed to vanish this particular um like form let's see if it is a quick fix then we will just try to fix it in the in this session itself or else I'll just tell you how we can fix this into an accession so if I just go okay so navigate order confirm okay so I think the code wise it looks perfectly fine I'm not sure like why um why our form is not able to reset and why we are not be able to go to the next page actually we are able to go to the next page which is order confirm but still our existing form is not getting vanished or existing form is not getting flushed up so we can see this in the next session I just don't want to make this session uh large than this so I hope you got the idea like how we can do the payment Integrations I know like this is quite complex process or might be like if you are complete beginner then this might be a quite complex process for you but trust me if you just try to follow all the instructions that I have shown in this session you will not face any error you will just uh it will be a very smooth integration for you if you still have any questions let me know into a comment section and I will try my best to help you out in that case I hope you enjoyed this session and I'll see you in the next session

Channel: Learn Programming Yourself

Views: 10,508

Keywords: payment integration in angular and spring boot, payment gateway integration razorpay, spring boot payment gateway integration, payment gateway in spring boot, payment gateway in angular, razorpay payment gateway integration in spring boot, razorpay payment gateway integration in angular

Id: RaHn5juVYGA

Length: 67min 47sec (4067 seconds)

Published: Tue Feb 28 2023