How to Integrate Payment gateway In Angular | Payment Gateway Example | Angular Online Payment

by end of this video you will be able to create your own shopping website page like this where you will be able to sell your products you can show a list of products and your customer they can check out this product they can make a payment and you can accept the payments from your customers from your site user directly via this online payment Gateway and the money will get credited into your account so there are various payment methods like the card up IQR net banking wallets in this video I'm going to tell you all of those method how you can integrate this awesome payment Gateway in your angular application and you can start generating money so let's get started so before moving to the actual implementation let's try to understand the architecture of this or the workflow of this entire payment process so there are three main entities involved in this architecture or in this workflow which are client-side server side and our payment Gateway so since I in our case we are going to use this as a result pay as a payment Gateway that's why I have mentioned here but this is the generic architecture it's the generic workflow of any payment Gateway so you have a client side you have a server side and your process of this checkout start from the client side where your customer is using your application they are using your shopping site they create a order so once they create an order the order is get generated at our payment Gateway side and that goes through our server and once the order generator is written back to a client then client use that order ID to make a check out to initiate a checkout and in the checkout process there your actual payments start then once a payment has happened the new payment Gateway captures some information about that payment from your client side like what was the amount what is the customer name what is the product they are purchasing and once data has that then it returns a response that response basically has the payment ID along with the order ID and signature we use this signature this order ID and the payment ID later to verify whether the payment that has been done at a payment Gateway whether it was for the original order ID or not so there is one addition step that we do usually at the end where server side checks that uh the payment that has happened uh what is the authenticity of it what was the order ID and what is the response payment ID that has payment Gateway provided me and depending on it it then decide whether the payment has been successfully captured or not so these are the prerequisites that you need to have before you go to implementation so node.js we are going to use it as a backend and specifically we are using Express Chase as a server to create our backend apis as usual we have angular as our front end kind of payment Gateway there are a lot of popular payment Gateway available in the market so you need to have a payment Gateway account you have a PayPal you have a stripe you have to check out and you have also one from paytm and there are so many payment Gateway available so they comes in a different different shapes and the sizes in terms of their offerings and their features so for sake of this example I'm going to use a reserve pay as a payment Gateway so that's a theory here and now we'll move to our vs code and we'll start writing a code for it so let me first create a new directory so I will call this angular payment Gateway and I will create one more which will be basically to handle the backend related stuff so I'll create one more folder for that we'll go to my terminal and I want two terminal to be open one is for handling the front related stuff and other is for backend so I will create a new angular project using NG new with enter and this will take some time to install the dependencies I want to move to my backend services so now I'm in my backend so we'll simply clear this and here I will create a new npm project so I will just say npm innate site we'll hit enter I don't need in specific version description I don't need a little bit empty index Chase will be my starting point simply here add my name and it will create a new npm project in my backend and I can see that I have a package.json created so I will create one server file which is index.js I want to clear out the code that angular usually kills you every time when you create a new project new component and that component will be basically have a list of products inside it so I'm using this extension and uh using which it becomes very easy so product list is a name that I want to give so I create a product list component and there I have my HTML and CSS all those files created I will create few more components that I need checkout component I will create a payment success and payment failure I will create one more component so I will simply name it header I will also add one service so let's create one Services folder to keep our code more modular and inside that I will add one new service your generate service let's call this product service so we have some dependencies of the node modules that we need to download first so at a front inside for this example I'm going to use ionic as my uh UI widget Library so I will install the ionic using this command you can actually use any UI widgets Library whatever you are comfortable with or whatever you want let's just first check out this video I'm using ionic so I will set up the ionic in my angular so I will do npm ionic angular next thing in order to make the ioni components to be usable in front end we need to add one line in our index.html so I'll go to index.html and we'll simply add a link to the CSS file so let's start from the first thing and that is our product list so let's remove this first code and I will be using ionic the reason I'm using ionic here because I need to write very less number of lines and uh writing the view becomes little less time consuming okay so let's start by adding the header and inside the header I'm going to show a product list as just a title so don't worry about the source code I have provided the link of the my GitHub repository where the source code of this example is present so you can refer the description section then I will create a ion content which is basically to holding some section on the UI and I am using this grid and inside if you are familiar with the grid concept we need to have the rows and columns so inside this grid I will create one row that will be for my product row and one column so in the column I will specify that on the medium devices I want six column to be used and on the larger screens I want four column to be used and the total column size is of 12 and I have this to be repeated for every product so I have put the ng4 as a directive having this uh column I will put my card inside that column and which is my product card there I'm going to primarily show an image of a product uh title of a product and then all the details like the price and the disc and at the end I'm going to provide the two buttons there which is hard to cut and buy now and I can see that there is a error which is pretty valid here and that must be that ion heater is not a known element and for that we need to import the ionic module in our app modules ionic module like this and we'll initialize this with the for root and I need to import the ionic model at the top so with this I have the ionic module setup and that area must be gone now so I will go to a component TS and we'll write a code for the buy now add to cart and for fetching the product list so first I will create one object products and that will be of type product I have to Define that in my model so I will simply create new folder namely models here and inside that I will Define the type for this product so uh I will write a Constructor and I want a product service to be used uh inside my NG on it I want to call a gate product so inside my gate products I will call a get products method which is present in my service and in the once I receive response that response I am going to assign to the products that products will be rendered here in my card I also need add to cart method add to cart method will get called once my user clicks on the add to cart button and similarly buy now button there is a buy now method so for add to cart I will simply implement this and not going to write a cartoon lodging and inside by now my order creation part starts so I will call the create order it's which basically generates a new order ID at a backhand side and if backend it has 200 which is Success then I will store that in my front end somewhere as a payment order ID and I will also store the selected product for or check out which product currently user is checking out into one of the variable in my service so and after that I will navigate user to the checkout page and if there is any error from the backending creating order ID then I will simply say that server side error can't process the order so let me get rid of this error for the product I will create a model here so let me just generate the interface let's call this product and inside this module I will Define the schema for the product what all property is a product holds so I will make it this I need a title of the product price of the product description category image rating and for the rating it can be a rate which is number and the count how many people has given rating for this so this is my product object I have created this as a type product listing so let me import that and I have given the same so if I do import now this will resolve this error I am using a router to navigate to different pages so for that I will also import a router's module from the angular core and then I need to implement this get order create order and set selector portal this method in my service first thing we'll write a Constructor and I will initialize HTTP client that we need to make HTTP request for micro application and the base URL this is the best URL of our backend so we have not started to write a backend yet I'm going to come to a backend part once I have a product list page set that will be listening on the 3000 so that's why provided its best URL and then we have a selected product for checkout where we are going to store a product that user currently is checking out so get products is a method which will return the list of products to us and here I'm using this effect store API which is really cool if you are doing any such an example or you are testing the things so this API returns with a list of products which has a bunch of details like it's product title description price setting image all of those things I will write this gets letter product for checkout which will return the current product which user has checked out and there is again a similar set so these are the data Setter method just for your product check out the product which user currently is uh you know interested in I have a create order so as I was talking you need to create order before you move to actual checkout so once you click on buy now at the time we create order and here the request goes to a backend and if we have to send that request to backend we need to provide this two essential things to a backend which our product name and the amount what is the product name and what is the amount and the basis of it then order is created so this create payment order this is the API that we are going to write in our backend soon let me get rid of this import error I will import a product and the observable from the rxjs HTTP client also simply import the HTTP client here in the service and when I go to app module they're also the same thing HTTP client modular import and I will put it in the Imports array so I need to write something in my app compound HTML so that my view rendering start so as you know in angular everything start to render from the top component which is app component you we you can also call it as a root component so we write a code there we write a selectors of the component and then that selector gets entered in the term so app head is something that I want I will simply put some VR tag and router Outlet I want to implement a routing in my application so that a user can navigate from one page to another so in the header what I want to do is I want to show my logo of my site and the name of my site so I will create a in Grid and I will specify the size 12 and out of that 12 column two columns I will use for showing my column and 10 columns I will use for showing my header and the in the header I'm just giving a text this is the programmer shop you can give whatever your shop name let's write some CSS so for header I want to keep a background color this and the font color this height I want to give four REM display table and the width hundred percent I want it to be stretch across my viewport horizontally so that's why title this is my title where I given a font size as a 2 REM that text line Center vertical align middle I want to keep my text centrally aligned so that it looks nice and for the logo for the logo image I just want the width and height of the 6 REM and my logo is present in my image assets as I kept it here so in my app routing module I will simply write one route for the checkout so this router will use when user has clicked on the buy now and they are moved to a checkout stage and then I have two routes for the payment field and the payment success and uh one is my default this is like my landing page whenever there's no route then I want to land my user to a products page and if there is anything else then I will navigate user to a page node from component that I have not created it but I will just add it incoming moment write some HTML code for each of this now first simple method which tells that page not found for payment failure it is I want to show this message payment failed I can see there is one error which is a null injector error product service so I think this is very valid error and that is because we have not provided our product service in the provider side in the app module so if I do a product service in the providers that error should be gone now and if I do a refresh I can see a product list is there and my list of product is being fetched from the fake store API that I have been using then that's it here and now I will see how it looks on the UI so it stays little code compared to what now I can say it is little good compared to what I had previously now I'm going to extend this buy now option to initiate the checkout process so for that we need to now Implement our backend so I will switch to my back ends terminal and there I have just implicated index HTML so I need to add some dependencies Express so I will install Express payment gateways NPA model which is a Razer pay that we need in order to communicate with our payment gate so let's initialize the express instance with the app and the port number I want to use 3000 in this case I can use any number I want and I will simply listen on this port and this basically makes our Express server up so if I do node index.js it will run the server up so let's see if it works and I can say that the localhost 3000 it has started releasing on it one thing I want to do here is I want to use a nodemon which is really good package so if you are doing a development on the back end stuff like this uh every time you do a changes you don't want to restart your file like this node index.js so for that no demon is a really quick that helps you to restart the server automatically so I will do npmi note demon and in the package.json I will write my script that whenever I do a start I want to run no demon index.js so now going forward I will do just npm start it nodemon will start it and uh node one will take care of whatever changes I'm doing in the index.js one thing you will observe when you are doing a development on your local instance you get this creepy error for the course so to avoid the course error you need to do some setup so there is one course library that you can use and simply put app.use cards in your Express server so that it handles the course related configuration and you don't get a calls error so this is not required if you are deploying your application on the actual production or anywhere else except the localhost uh then you will not get this core zero you may get it depends on the network but in majority of the cases if you get a course error then you can get rid of this using this course to instance so resource pay requires Reserve pay and I will create instance of it and this instance need two things key ID and the key secret now from where to get this key ID in key secret so for that you need to log into your razer base uh account and if you go to the site I will provide the URL of this link so if you go here so once you're logging into a razer-based dashboard this is how it looks by default to complete the kyc if you have not completed a kyc you will be in a test mode like here it's showing in my case and once you complete a kyc then you will be able to do an actual payments and the money will start to be credited in your account basically you need to provide some uh details about your bank account to create an API key so for that I will simply search for the API Keys here so from this you can generate API keys so I already have generated this one but for showing a demo I will again create a new so I will deactivate old key immediately and I will create a new key so this is the key ID that I received so I will simply take it and put it here in my backend key ID and the key secret I will copy this and we'll put it in my key secret first API which is create payment order so in the express applicator post middleware and create payment order I will add these things inside this payment order which is basically amount that I will provide the amount and the currency currently I'm using INR you can use any currency you want I have this I will get order on my payment Gateway now this time it goes to a payment Gateway server and I will receive a response from a payment Gator service which will be either be 500 or the 200. so until now we have reached to this stage where we are able to initiate the order and the order will be created at the payment negative side and the order will be received back so we have reached till this point now we want to write a code inside our inside our front end initiate the checkout process please show a button which is pay now and on click of it I want to handle the payment so whenever user will click on the buy now option in the product list so once they click on it I will go to a buy now and in the buy now I am go navigate to user to checkout page and in the uh URL I'm passing the order ID that we have generated want to read here in my checkout so that I can make a payment to what order ID has been generated I mean you have to ensure your user make a payment for what they have ordered so read this param payment order ID from the URL parent and then listen to select a product of JavaScript application so we need to import the script which is checkout.js which comes from the reserve pay so let's try to understand the code line by line so first thing I will get the payment order ID create a new instance of rzp and this will rzp.open will allow me to open a window where I have a various option to do a payment like to choose a payment method UPI credit card debit card net banking or anything else then in the option I will provide my key and then the amount now here you have to be a careful the amount that you are providing here it need to be a same for what product you have chosen so there's a relationship between what order ID you have created and what is the amount that you are paying we have done an agreement that this order that we have created this need to have XYZ amount and now we are making uh something ABC amount so this XYZ and ABC need to be assigned if there is any discrepancy that means the order was created for something else and you have done payment which is something different so in that case it will lead to a failure of your payment name of your site I'm just giving this name here then the image what is the logo that you want to show on the payment window uh with the Escape false it will not allow your model to be closed captioning not available signature reserved signature that is written as a response to the checkout and we have order ID raiser payment ID and the key secret so what we have to do here is we have to generate a new signature and that new new signature will be generated from the initial order ID and the payment ID so if this generated signature is equal to a pressure-based signature that we have received from a checkout if both are same that means our payment is authentic and it has been successful we'll choose any product so here the amount is 15 rupees 99 and if I click on the pay now I can see that the order is created for that thing at this time if I click on the pay now now it has worked so the amount has also been picked correctly and now I can see this UI where I can do a payment a mobile number so if I give a number there I have the various options like I have card up IQR net banking wallet and all of those things I can choose any of it so uh there is one testing hack that you can do with this payment Gateway so if I have to do a payment I will choose a UPI let's say in this case and uh if I queue the success at the rate result pay UPI ID like this it will perform a testing as you can see that I am currently in the test mode so there is no actual money involved here so this 20 to 30 everything is in a test mode uh once I go live it will remain same like this so if view will remain same but the money and the transaction it will do an actual validation there so you cannot provide the up ID like this in your live mode you need to provide a correct up ID and uh then you need to you know it will be completely live and the transaction will happen on the actual money so either backend index.js I will add one more API which is valid payment so inside valid payment I need couple of things to verify the payment is valid or not this code is already written in this result so we are simply importing that and each payment verify it returns a Boolean if you look over it it says that it returns a Boolean response so validate payment verification it needs a initial original order ID payment ID and the signature in the response or sign is payment verified is my flag which will have true or false value if you just try to initiate it again it will not work because there is a timeout with each of the checkout process you can simply use them here you can add any um number that you want and uh you can provide any information since we are in a test mode and it will proceed for the payment so we can say that uh they say that this is a demo Bank page but uh in a live mode it will be your actual bank page and there you have to input your OTP all those authentication double authentication and then the payment will happen now here I have a choice whether to do a success or failure so I will uh just for showing a negative case I will say that it is failure my bank was not able to perform a transaction because of some reason and once I do that then it says that payment failed and you can have option to try again so I will try again I and this time I will do a success so if I do a success it says the payment has been successful and uh now since the payment was successful I am validated to a payment successfully completed so you can customize this whatever where you want all of these things what we did what I was showing here was in this testing mode uh there was no actual money involved so if you have to go to uh to allow you there are some uh checklist that you need to perform so code wise you are all good so whatever things we wrote all of those things are going to work in your application and we wrote them in a secure way remember in case of the payment gateways the payment process this is very sensitive and the critical part of your application you don't want to keep any loopholes or any back doors open so that attacker will try to perform some malicious action we want it to be a attack tolerant so write your code in a secure way don't expose your secret key directly via your front-end application that's why we have involved our backend here all of our secret key are present on the back end so this is very critical so when the transaction is filled because of Any error then it says failed but when it is successfully verified then it says the capture so and there are some charges that you also need to idea about you can go to pricing page of the any payment Gateway and understand that how they charge usually those charges are the very less and very marginal okay so time to wrap up that's all for this video the main intention of this video was to tell you how to integrate a payment Gateway in your and your application and again to remind all of the source code is present on my GitHub repository and the link is present down in the description of this video so don't forget to check out the code you can directly clone it extend to write your own custom Shopify application if you find this video helpful don't forget to like share and subscribe to our Channel thank you for watching thank you

Channel: Brogrammers

Views: 7,138

Keywords: payment gateway, payment gateway for website, razorpay, angular tutorial, angular 16, ionic angular, ionic angular tutorial, payment gateway system design, payment page for website, payment page in angular, payment gateway for shopify, shopping website, online shopping website in angular, ionic tutorial for beginners, ionic tutorial, ionic framework, node js payment gateway integration, node js paypal integration, express js server setup, express js cors, online banking

Id: PG-LK8Pv9yA

Length: 23min 32sec (1412 seconds)

Published: Tue Jun 06 2023