Integrate Payments in Flutter with Razorpay Payment Gateway

so hello and welcome back to my channel my name is Sanskar and in this video we are going to learn how to integrate razor pay main gateway to our flutter app so let me show you the demo of the app or how the payment gateway works and what are the different options they provide so first I have a sample app over here where I am accepting the amount from the user for a product or an e-commerce app you can provide this amount when the user clicks on it and you can make it fix it every time so the first thing it will ask is the phone number I am going to provide it an example phone numbers totally okay and then I'll provide our emulator then I will click on proceed so as you can see there are multiple options available we have card we have net banking we have wallet and we have UPI so this is the best part about integrating resulting the first part is it's really easy to in delete at the same time it provides a lot of options so as you can see we have UK option of the bill so if the user wants he can pay through the upid heha or he can use different wallets available he may have some balance or movie click or move your free charge a little money Gio money patreon or fees wrap there are other options like net banking and card which are most used or something but yeah so overall we can provide a lot to amount of options for the user to pay and at the same time making sure as a developer we don't have to do or integrate all of these separately so first to show you the whole payment process I will submit a testing card number and a random month and over here over here and card card holder name and CB to be one two three and then I'll click on a now so you can click on skip saving card and now this is actually a testing API so that's why it will show me this pop-up that what do you want this to be who you want this to be success or failure so I will click on success and that it will show me the payment successful so overall you can see if there are multiple option available with this recipe payment gateway you can pay through UPI you can pay through different wall it's available and also the other options like net banking and debit card and credit card so now let's see how we can configure 8 air in our flow graph so to make it very easy for you to understand I have created this movie and I am going to get rid of all of the unwanted comments and I'm going to create another stateless or a stateful widget for the home class so I am going to get rid of that my home page has been inside the Lib folder I am going to create our new folder or package and Android studio which is going to be called views not video inside of that I am going to create our new dart file in that dart file is going to be called home contact and the first thing which we will do over here is we will import material the reason why we are importing but it means we are using a stateful and State widget so that's what I'm going to say stateful this is the shortcut so you just have to write st at ul and it will create a new stateful a budget for you it works both on Android studio as well as if you are using vs code as well ok then I will name this as home now since my home page does not exist anymore I am going to call home stateful widget in the home section of mine but in your lab and I need to import this so you can import this by clicking on this bulb icon and just it will be important ok so the next step is we want this kind of very simple you one so the first thing is this is a material UI including of app bar and you know we have buttons another so that's why we will be using a scaffold scaffold provides us all these material components out of the box so we don't have to create them from scratch so as you can see we have a power option which is this top section we can say app bar and inside of that we can provide the title so title is nothing but this tay's and pay which I have set so let me change it a little bit or do something we will be providing that by text so now over here I can say there is it sorry there is a don't so something like that it is just so that you know for your ok I don't know the spelling that's good anyways did tour I think that's funny anyway we will move on to the body section of this now and the body section as you can see we we just have two visits now if you don't have a lot of experience with read of how shredder works is we have different widgets everything is a vegetable if we talk about this app bar it is a widget if we talk about this but if it is a widget if we talk about this text it's amazing so over here as we can see these two things the thing which is accepting the text which is called text field and this button is actually aligned vertically so that's why we will be using a column so and inside the column I can say children because column accepts multiple children and it aligns them in a vertical manner so the first thing which I want to provide this it's a text we shall say text fi eld field and inside this this is a this is very easy like you don't have to provide even any other option and it will be able to accept the user input but obviously we want to use the user input and other stuff so we will do that but for now let me do the next thing which is I am using a sized box the reason why I'm using the sized box is because I want a little bit of a vertical spacing now who uses vertical spacing in through the sized box we will provide hi to it now if there was a case in which we are using this for the horizontal then we will have used okay so for the height I am going to go for something like 12 I don't I think it may be a little bit more but we can go with this now so for the button I am going to use or raised button now release button have two very important thing the first one is called the child so child can be the text which is written over here as you can see this is P now so I can say is something like donate now because most of the time if you are creating an app where you are accepting the user to pay for it and most cases it is a donation we don't want our normal products to be something which user can decide the price of right so then we have this on pressed button or is an amount raised option in this raised button which are now in the own pressed what basically happens is whenever the user or someone clicks on this we can perform some action we can perform something in the background and we can get and fetched results is done so what do we actually want is vents and we'll click on this we want the user to send him to the Razr pay premium gateway so how are we going to do that so the first thing for using the paym raise the pay payment gateway is we have to visit Bob dot Deb okay let me close this we have to visit this website called pump dot dev and that we have to use this particular package there are a lot of different packages for his recipe which you make it little bit misguided because you can see we have raised a payday circulatory zip and a lot of them okay so I will recommend to go with this razor pay flutter one because this is the official but a one by the or team at a recipe okay so you have to I'll provide a link in the description so you don't have to worry about it now this is it how we have warned so first we will click on installing we will copy this one then we will paste it over here okay make sure it's in align with this because if you will have any space here if you cause an error so just have it like that and click on packages again once you will do that it will take some seconds maybe four or five something like that and it will show an exit code of zero so you can see took three point one second and it should show the exit code to be zero once that is done that then the package has been successfully imported now you can use it so the first thing to use that package is we have to go inside the home state over here and we have to define the recipe options for a series of a recently okay so how this works is there are two things which we need to do first in inside the init state basically when the app load or the spring or this particular home screen loads we want to provide some events or so basically we want to handle the event of the payment such as we want to handle the event of the cave and error and we want to handle if there was an external wallet selected so for our the all of these events we want we can create our custom function which we can call when any of these events happen okay and these are going to be defined inside the in its state so let's do that first so we will say in its state now what is in its state basically in state it is a function which gets called then the screen or this particular stateful widget of home get loads on the screen okay so what we want to do over here we will say razor pain God first we are actually will say it is appease equals to new razor it's just to make sure it's not like that and then what we will do we will say recipe dot on okay now you can see when we click on dot on it creator have two things the first thing which we need to provide is a string for the event what kind of event it is and then we want to provide the function or for handling that particular event basically handle it's don't don't take it any complicated it's really easy the function basically it is going to be a function which is going to handle what we want to do when any kind of event happens now for this string you don't have to define something from your own laser by already have that he just have to say razor bait and you can see we have these multiple events so the first one we will select is razor Bay dot even payment success in this one we have we can provide a handler payment success what is this this is the name of the function which we are going to create later on okay so now the second thing is defining the other events so we are going to say on then we will say razor Bay event and the second one which I will select is the error and over here I will say hopefully the spelling is Right error handler okay failure then the next thing which are the next even which we want to handle is the razor pay dot on a razor P dot external water over here I can name the handler to be external wallet okay sorry for the spelling errors and stuff podium ok so we have successfully defined these now the thing is if we are you know using these events and initiating them when the app loads in the unit state we should remove or close these when the screen or the widget disposes so how we can do that we can basically say the razor P dot close or actually clear path so yeah we have to find them in the init state and then we suppose now the most important part right now is we have to actually create functions for these events so let's go ahead and create these function the reason I'm saying void over here so if you don't know or there are different kind of functions to define a function first you mentioned what it's going to return so in some cases you can just not mention it and it will be predefined kind of that it's going to be a void but if you want your function to do something or return something in that case you can define it here so I'm defining a function which is going to be called handle payment success okay this is the name of the function and I'm mentioning void because it's not going to return anything it's going to do something but it's not going to return anything and this is how we define a function we have these arguments you may or may not be accepting it but you have to use these brackets and then you will using this curly bracket to define whatever you want to do okay over here we will say so basically what I am going to do I am going to just simply show our toes we can use a snack bar but I feel toast will be a better option maybe just a quick one you know so we can use a toast so you can just search a toast over here and hopefully this is the best one I'm not sure okay I feel this is the good enough but in now if it works okay so you can use any one of those and you can even use and just making using this toast for making it quick so we can save people over here and also you can do some custom things for example you want when it's successful you want to show you some kind of animation to the user you may want to update some kind of data or something in your database so all of that will be handled in this particular payment success function okay so you can call that and it it will be done for you so for me I'm just going to dole state that the payment is successful it's taking a little bit of a time so for now let me just do one thing quick let me just show a print for now so I can say sorry payment payment success and I think that's fine for now I will add that toast you can use other options as well like for example you can show with a snack bar or something so this is the next function which I created and this is going to be the one for handling the error if any kind of error happens so I can say error and then I can go here and say void and then I can say handle external wallet okay so handle external wallet Brent and then we can say external wallet okay so that's done as well okay so we have successfully created all the different functions required for this it just minimize this the next step is actually creating the function which is going to provide all the different options which the payment gateway requires so when you saw the payment gateway so for example you show you that again if I click on the spine option there are multiple things which needs to be shown over there so as you can see we have this title or kind of name how its fall and this is the description okay so this is a very important to provide and we will provide this through options which is going to be a map which we will pass to actually open the desert pea gate payment gateway so we are providing the name we are going to provide the description we we can also provide some region so for example if you have already saved with a username sorry use an email and user phone but you can also provide that as a reason so you know the user don't have to write it again also we can mention with what are the different external wallets we want so for example you can mention EPM to spend ok so let's see how we can do that so as I mentioned we will be creating a function for that so I'll go over here let me create it below the dispose I'm going to say void again because it's a function which is not going to return anything it will do something but it's not going to return something so we will create it again it's not going to accept any arguments for now we are going to create a variable which is options it's basically a map as you can see I am going to define it like this yeah so what is the map map basically comprises of two things first is the key and another is the bad so if you have used our database kind of like for example five stone another works like similar thing you have a keel and that II have a value so over here we actually for using this razor pay option and making sure razor they understand so they do just this about we will be providing our key right it makes sense yeah also we need to provide the amount so so where can we get that amount so for s for this particular app we are actually accepting that amount from the user input okay so if I will click on back let me just close this one so basically we are accepting that through the user input in our text field so for getting the the text from the text field we have multiple options you can use the on changed option in which we are updating the text s when the user is you know writing it out but for this particular one I the best thing will be using a text editing controller and we can say that X to the controller is equals to new text editing controller so through this we will be able to get what they use it have submitted in the textbook so now I can provide that a controller and that will be a text editing controller and I can also mention some hint text through the decoration option which is input decoration I can mention that in text to be enter the amount or among the suffer however you want to end mention that amount to thing something like that okay so we have a donate button and we have that you also want to provide it as some color or some kind so I can just say color color start blue I feel like that's going to be the origin but yeah so a little bit of styling will not have a lot so in this one say textile and then I can provide the color to be what colors and oh by the way then the source code will be in the description so you don't have to worry about following me one by one just try to understand stuff and once you are clear about how things works then you just have to you know write it down and integrate it in your own app okay so now we have the amount of pay option where user can input the the amount and we can get that through text editing controller so what we can do is over here at the amount I can just mention just a second I can mention text editing controller dot text okay and then I can mention so that's how we can get the text so the key we will be creating an account signing up on the resume I will show you how to do that about as well so now this is the amount that the next thing is the name so name can be the company name or however you want whatever you want to show on that particular page I'm just going to say sample app so now and then we have to provide the description so I can say description and then I'll say you or something like a meant for the payment for some random other okay whatever you want that that description to be and then we can provide a prefilled so what is prefilled is basically as you can see when we it's in a wide amount stead of the app there was two options right you should have to submit his contact phone number and also the email ID so rather than him or submitting that if you already have that saved or submitted from the user before you can pass that values so how you can do that you can define a key which is called contact on that yeah that's fine and then you can define that so right now I'm not going to provide anything because I'm not accepting that before but if you want you can it and it's also good user experience definitely if you have although if you already have those details it makes sense to just pass them up and make the thing easier for the user less friction more modest that's how it works so external and this is for providing external payment gateways so I'm going to mention a Paytm over here so we have to use a comma that it's fine and I am going to mention wallets and the wallet which I'm going to mention over here is ATM so I will save a TM okay so this is a function and these are the options which we are going to pass and now the signal and the next thing is we want to open up the payment gateways so we have created all the options created a map out of it so now the next thing is passing this map and opening up the payment gateway of reasoning now we want to make sure we don't crash the app if any any kind of error happens so I'm using a try-catch for that and and for now let me just be bug that or I can print it out or I can debug that however I want let me just do the print for now it ought to stand so that I can understand what is the error or the problem we are facing okay that's fine so what do we want to cry well as I mentioned it's really easy to integrate what do we want to do we want to open up the payment gateway so we will say it is it pay dot open and as you can see that accepts we are the map so I am going to provide options here and this system icon and that's all we have to do now the very important thing is we want to call this function when we click on that button right so I'm going to use this over here and like bad and done okay so let me check this out now we need the key where it's the lame part so you need to just visit on this website show you animation before the link will be in the description or in the github repository I will directly link the github repository and I will mention both of these links over there make sure to give it stars just so if you like so yeah that was my another email ID we can sign up with another so once you will successfully sign up for this then you can click on try our dashboard click on generate test keys so we are going to right now just create test keys so I'm going to click on generate test fee it's going to provide me a key ID and click on OK and click on OK ok then you just have to provide that key over here I'm going to paste that obviously when you're going to complete this for an actual production then you just have to change the mode to get the live key just activate your account by following the step-by-step process for that and yeah so for now just for testing we are going to use this particular key ok so then we can actually provide the phone number an email ID I'm just going to provide something so that I don't have to type it out again and again 1 2 3 4 5 6 7 8 9 10 this is making sure that Indian guidance for me so tangent and digit number and an email ID so ok so we have this perfectly working fine and it should work so let's let's run it and see if it works so it's going to take a second or so but basically what would happen is if we go to the transaction side we should be able to see all the payments over here so let's see if it runs we can actually minimize this for a second so as you can see it's showing some hair and if I will go down I can see okay so the it is mentioning that the minimize minimum SDK should be more than 16 so you just have to go through the project then go inside the Android section and then inside the app then bill dot greater so make sure you are inside the app level build or gradual not the project level built out later which will be available over here so what you have to do you just have to increase this to something more than 19 I am going to go for 21 you can go with exact 19 in that shit work of 85 so now let's restart the app and let's see what okay so it's finally running it it also caused one error and which was like for the size and to solve that you just have to click on the stools then click on flutter and then click on filter clean so once you will clean that and then you will restart the app again it should work perfectly fine okay so just a little bit tweak which I wanted to do like just want to provide it as some kind of padding and stuff so I'm just going to click on padding and maybe 40 would be fine just for that quick so that we can have a little bit space okay so now we are going to test so let me enter at our random amount I can say on 300 and click on donate now so once I will click on that it's going to call this open check out function this open check out function is first assigning all the options to our map and then passing that map to the razor pane and it's going to try to open that if it's successful then it will open or if it's not successful causing some error then it will be shown over here so these are the things which we are passing you're passing the key we are passing the amount okay and then we are passing the name which is the sample half which will be visible over here I believe the internet speed is a little bit slow maybe but yeah so then we're there is a description and these are the prefilled so basically we don't have to enter these details if they will be pre entered for us then we have also entered this external wall adsorption so let's see how it works so now as you can see it's finally working successfully and we have not shown the option to enter the decimal of the number phone number and the email ID there it is already entered if the user want to edit he can just click on this and he can add it but the one thing which you can notice is this 3 we actually entered 300 and but we can only see 3 over here the reason for that is it allows you to give an option of an amount which is for understanding you can say it like you know multiply by hundred so you can actually give an option of the amount payment amount to be three hundred point four six points something like that right okay so in passes and something like that so that's why what we have to do over here is first we will convert this to number so let Paytas text convert this to a number how can we do that we will just say now dot parts okay and then we will parse this value second thing which you want to do we want to multiply that value with hundred why because it have a point zero zero already with it so for example if you are providing a value of 400 it will take it as four point zero zero if you provide a value of 369 it will take it as three point six nine so if you want that to be a full number then or then just multiply that by hundred so that's what we are going to do so as you can see if we click the user can actually change these things but let's see proceed with the same so if I will click on the proceed button now let's see what happens click on card so it will first look for the card if they have a card with the same number and then it will show us this card option so I'm just going to enter the test card number which is going to be 4 1 1 1 1 1 1 1 and as much as we can enter and then you have to enter the expiry so just let's say for 11 and then we can go for something like 22 we can enter the card holder name you can enter something random string and then just enter the CV to be 1 2 3 click on paid 3 rupees obviously this should be updated when you fill you know kind of run it with these this thing updated but anyways we are going to click on a skip saving card for now and now since this is a test API key it will show us an option that do you want this payment to be successful do you want this to be a Fame so I can click on this paid $3 and it will show me this your payment is being crossing processed and let me open up my dashboard that is a paid dashboard the payment is on doing are you sure you want to cancel the payment ok I should click on cancel right sorry actually I believe it's running quite slow let's just give me a second so as you can see once the payment is going to be successful because this is our demo or our test mode which we are using right now so it will choose this option so I can make it a success if I will click on success that function which we created initially we are this one handler payment success will be called and we will be able to see that print hopefully I'm not sure if that printed but it should so let me copy that and search for it this is also causing some code capacity problems - the code which we need to do some stuff so let's try once again and this time what we are going to do we are going to use that flutter toast as then I'm gonna say flutter toast so that was a different one which I used I believe okay so we can use a toast and we can say toast dot show and we can provide the message so the message is going to be the same payment success copy paste it and use it like that copy paste copy paste okay so now what we are going to do we are going to run the app again so as we can see the app is running restarted successfully now let's try the amount to pay again so I'm going to enter this time something like 450 and I'm going to click on donate now and as you can see we have this description we have the name of the app we have the contact and email ID and this time the amount is also correct since we have changed that to a number and then we multiply that with hundred okay so now let's try which one should we go for so let's go for the third option okay so after the completion or the successful payment we can see this pop up or do you want this to be success or do we want this to be failure so I'm going to click on success okay so the women was successful - and that's how you include there is a payment gateway integration in your shredder app hope you enjoyed this video hopefully this was helpful let me know if you face any problem in the comment section below and I'll see you in

Channel: Sanskar Tiwari

Views: 21,987

Keywords: how to integrate razorpay payment gateway in flutter app, razor pay flutter, razorpay flutter example, razorpay payment gateway flutter, flutter payments, upi payment flutter, paytm payment flutter

Id: 7xcYSTH6Kx8

Length: 31min 38sec (1898 seconds)

Published: Wed May 27 2020