Integrate razorpay payment gateway in angular and springboot | razorpay | angular | springboot

hi guys welcome back to coding one today in this video we are going to see how to integrate a result in a application which is developed by angular as a front end and springboot as a pattern so before starting the actual integration i want to show how result they work and its architecture so this is this first line is our client side middle one is for the backhand side and the last line which is the third one is for the disappear so from ui whenever you go into checkout and click on the checkout button we call our backend api which will create a order id and that order for creating order id he will call a raiser api so it files order api of the razer page and reset will return as a already that order id you can save into your database for your status purpose and then pass that order your your client which is your checkout screen at an angular level so and from angular we will call razer pay pop-up window that reserve a url you will call and it will show you the pop-up where you can select the bank id bank online bank net banking in that pop-up you will see net banking then scanner scanner also all type of scanner also ubi also and other wallet also then when you select any of them and to the payment then that success api will return you payment id reason pay order id which you have passed from this second second state and there is a signature which you use for the validation purpose capture the payment which you can do as hot also and you can do manual so capture the payment and save entry into your database okay this is the simple flow of the recipe implementation now let's start the implementing same so second step is to create a recipe account so you have to go into recipe website log in there and create a test account so there will be a test mode and live mode ah currently i'm in a live currently i'm in test mode and if you go into settings you will be able to see these options configuration webhooks and api keys click on api keys and generate the api keys it will create a key id and secret id you will able to download that at first time i have downloaded that and we are going to use that in our springboot backend api springboot backend server and yeah this is it for our result account now next step is to create the backend server which will accept your payments and hit into our recipe api and get the order id so our next step is to create a spring boot back in microservice for that we have to go into star dot spring dot io if it is a where you will easily set up your back in springboot service so i am selecting a main project java is my language and 2.6.11 as my version and group will be coding world and artifact payment gateway payment gateway okay and name i am keeping as a payment gateway so here i am using a jar as my packaging and java it has my java version we are going to expose the endpoint so here i am including spring web and all i am keeping as it is create on generate and import this into your current ide in my case i am opening this into our springboot toolset here i am going to i am going to open exiting maven click here okay this is our payment application currently we don't have anything in this project apart from this payment gateway application main springboard application class okay now we have to add a spring boot dependency of the reserve okay this is the dot com reserve team and version is 1.4.2 for the java once you imported this dependency just build your project and start coding for the payment kit first of all i am going to create a one controller and in that controller itself we are creating the we are calling the order api and creating the order id from wizard so let's create a first controller so i am testing all my code here so it will save our time okay this is my recipe code for that i have to import the order response and order request so guys i have copied my all code of the payment controller and it's in front of you and here i am creating one control controller endpoint which is a create order and this is my request mapping starting point of our payment controller okay and i want to show you that i have created two secret id one is for like i'm going to show you how to name how to route your payment from one recipe account to another reservation so what we are doing like we have created two account one is for the transaction which are less than 100 sorry thousand and one is for the greater than thousand so according to that we are doing the routing instead of resulting in future we can integrate any other payment also so let's go step by step i have created a reason controller and up below that we are creating a create order and order request we what we are taking customer name customer email id phone number and amount these are my request which i'm getting from the client second is that the response which we are sending to the client in this we have a secret key resulting order id application fee which is amount which we are sending to there is order order api then secret id and the payment gateway name like is it razer p1 or is there p2 so like i am this is the main method which is creating a order and if you go here below first of all we are using this condition 100 sorry greater than thousand or less than thousand so according to that we are picking the result one or is updated two now second step is it to create a order in that resulting account so if you go here here we are passing the amount then currency type receipt and captcha so you can enable this if you want to do auto capture in my case i am doing auto capture that's why i'm setting as a one and all those options we are passing to the client raiser client which we have imported here reason be client and from that we are calling orders and create orders so this is a simple code which is like a four five lines code uh using that dependency and when we get the order back from that request we are getting the order id from that json json this is the json object so and that order id we are setting to the response which we need at the us side and the amount also again we are setting as it is which we get from the request this payment gateway and secret id which we need at the client side that's why we are setting all those and returning the response right this is the same simple endpoint which is used to create the order order and now second third and last part is to create the create ui client using angular so guys i have created this demo project using a ng generate new and demo it will create automatically angular project this is a sample project i have not added anything apart from this order service service that i will explain you later first of all whenever we come to the project we have to inc include the script like checkout.reservey.com this will use too this will help us to call reserve api now i have created this sample form which will take a name email and fee that will look like this name email phone number amount and this code is available on my table repository so this is the ng form whenever you click on the submit button in that submit button we are calling on submit and all submit our look like this so we have declared reason pay variable and that result variable we are using below okay first of all let's go to the order submit and in submit i am passing this form which is giving us all those four fields now when this is order service which is created by us and this is nothing but importing the http client http headers and we are calling our backend api with the observable and this is a pg endpoint eight zero eight zero we have one pc create order once we get the success response we are setting customer we are returning response to our app.component and in our app.component once we get the successful response we are creating the options and all those options we are setting all the keys secret secret id order id amount and name that we will able to show on our pop-up and according to pg name we are showing which recipe we want to call and according to that we are passing so for first result we are passing image as a java china this image i have copied from the one tutorial uh which is present on the server so this will show and when result p2 call we are not showing anything on the success of this payment we are called i am printing all the events successful detail which will print our reserve signature order id and one more thing okay and on failure we are calling failure event this will show us reason and everything instead of this we can call a backend api which will update all our payment status that is that is not our scope of this tutorial so just i'm printing all the logs now let's run this project and test our payment is getting captured or not so i'm running my payment gateway okay application has been started now let's fill this detail coding work email it's ddj gmail.com phone number 99999 okay 15 k and if i click on the pay we are getting a pause okay so first of all we have to enable the parse in our springboot application let's do that okay so i have added this component for our course issue with msc configure now where i am adding the mapping is star all origin as a star all and allow method as a star let's rerun this application and test application has been started let's click on this pay and we are getting successful response okay which is our razor pid secret ident key now according to our logic it is rewriting redirecting to our payment one all this mobile number email everything is coming it will look like this if you click on proceed let's give a valid phone number 915. okay let's proceed and it is providing us all the available options your net banking wallet pay letter upi card then upf phone pay up gpa and all everything right click or whatever the options are available those options we are getting here now create on phone pay it is showing us a qr code if you click on this qr code it start loading and payment will happen automatically if you click on this and this payment has been happen now according to our amount it is going to our uh it is going to our razer pay 2 now let's reduce this amount and give us a 130 and click on pay so now you are not able to see this icon here that means if we are able to navigate this into our our recipe first now if you click on proceed you will able to see the payment option if i click on this show it will automatically capture this payment has been automatically captured because we are passing as a one and all those payments you will able to see here at home if you go down all this payment will duplicate here okay 130 few seconds ago which is a capture and this is all this payment statement and everything so guys this is it like how do you integrate a reservation in angular and spring boot application this is a simple tutorial which will cover all payment gateway from top to bottom okay end to end if you guys this is it like okay if you like this video please share with your friends and please do subscribe my channel it will motivate me to do more technical video thank you

Channel: Coding World

Views: 8,646

Keywords: Integrate razorpay payment gateway in angular and springboot, razorpay angular springboot, razorpay payment gateway integration, razorpay java integration, razorpay angular integration

Id: DdFFuifQgXc

Length: 17min 0sec (1020 seconds)

Published: Mon Aug 22 2022