Integrate Flutterwave or rave payment payment API to your web application using Javascript

hi everyone and welcome to your favorite channel the lord of apps in this video we're going to be doing this to learn how to integrate filter wave to our web application using javascript that's what we're going to be doing in this part of the video and if you don't see that as floater wave and sometimes your bank a payment normally calls that as a rate payment so if you see that as rave that's just the same thing and this is going to be based on the version 3 and that is the latest version from filter wave as of the moment and this is just a quick demo d just the landing page to the application you're going to have to fill this form it's your phone name phone number email and then amount then you click on continue for you to experience the payment and what i'm doing with this form is that on the field that says a full name i'm going to just have to create a full name for the customer and from there we're gonna move to the phone number field which is gonna help me create a proper customer within filter wave so without wasting monster and let me just look at how the application works i'm gonna just go ahead and put a name right here so i'm going to just call that as adams let me just say add-ons drinks and for the phone number i'm going to just go ahead and make up a phone number right here and for the email i'm going to go ahead and use one of my images right now so let me use cj banking at gmail.com and if you go to the amount you can enter any amount that you want to deposit right here so let's say i'm going to pay something like let's say 200 right there and if you click on continue right now it's gonna attempt to take you to to bring up what is it called the pop-up for our flutter wave and as you can see that is just what we have right here the 200 naira that i included right there and this is the email that i just typed has been passed on to this phone and payment by default has to use card if you want to pay with card but if you want to choose enough the payment what is it called channels right here you can use that but i'm going to go ahead and test this with the card right now and i'm still on a test mode so i'm going to have to use a test card right now so let me go to one of the documentations from a filter wave or ref payment it is in this page this is the page that um it kind of showcase the under test card for you i'm going to go ahead and use this first one i'm going to copy that right now get that copied and go back to the application i'm going to go ahead and paste that right here and as far as the value the date is concerned that's going to be 0 9 plus like 33 i mean 32 so i'm gonna just say zero nine and that's 33 for the expiration date and for the cvv the cvv that we should use right now is um that's a five six four so i'm gonna go ahead and enter five six four right here five four and i'm gonna go ahead and click if you can click on remember this card if you want to make use of it next time without having to type all of these i'm not gonna i'm gonna just leave that unchecked and click on pay 200 now and it's going to take you to this place where you have to enter the four digit card pane to authorize this payment so i'm going to go back to that place again and the pin is three three one zero so i'm gonna go ahead and enter um three three one right here and that's gonna automatically try to authorize that payment and next thing that you need to do is to enter your otp which is a kind of a mimikin um what is it called the whatever otp there's a one-time password that has been sent to your phone from your bank so you're going to receive an alert from your bank so they will send you a kind of number that you need to verify or to authorize that you are the one making this payment i'm going to make use of one two three four five right there and if you look at what this set right here you also use the same thing this is one two three four five right there so i'm gonna go ahead and click on authorized payments and hopefully that payment will go through and it's going to go ahead and then i did it in such a way that it's just going to it kind of output the reference to that particular payment on um the kind of a later script right here this is coming from javascript so i'm going to just click on ok and you can do it in such a way that it has to redirect to a different um page where they will you can actually pass on or allow filter will to pass this particular reference key on the url so you take the reference key from the url and also take the status of the payment or transaction from the url okay and as well pointing towards verifying the payment which i did not do in this video i'll have to let you know that right now i did not go through verifying the payment um before you give value which i believe you can do that on your own and if you want to do that you are not going to have to use javascript to do that you are going to have to use a server side or scripting language like php python or any other language so i don't want to complicate things right here um i only just stopped that this particular alert and if you click on okay and that means that that payment has gone through it says thank you for your payment and it now says your payment was successful we just sent your ua recipe to the email so the email you specified if you check it you are going to have to see that they have sent you um a recipe to that so we're going to do that in a moment so we'll go to a new tab and let's check our gmail right now and once you're in your gmail um you can click on the new successful transaction you see that the message just came in the rest it has been sent already so let's just go ahead and click on that and i have really used this before i've actually used this particular image before so the message that we have here should be two and um if we scroll down should be able to see the newly sent one which is this one right now so the first one you're seeing right here beginning from this place was the first one that i tested and i shouldn't i shouldn't have used this particular email again guys i should have used another one but i'm sorry for that we cannot go back right now but if we scroll down right now i want to see this particular one that we just worked on i mean the one we just tested right now so if you look at it we're going to see that this is um james adams which is the name i just typed and if you look at the amount this is 200 error that we just paid if you look at the what is it called the reference the same thing that i just showed you on the url just now and this is the payment reference okay so that means that this is really working and if you go to your what is it called the total wave dashboard you should be able to find that particular payment i'm talking about this one i will just test it right now i'm talking about this particular one but um no not this is for this this is james adams you should be able to see that okay so let's go to let's go and check that from our on filter with dashboard right now if we go to our dashboard and we go to transactions and this is it we have um a payment um from cj and if you click on it right now this is 200 now of course if you click on it to see the details of that particular payment and if you look at it this is cj bank united gmail which is the email we used and the reference or the transaction id is still the same as the same thing i just showed you and the rest of the things that you need will still be outputted right here for you so that is just that guys that is just that and um so let's the next thing that we should do now is to go ahead and start working on this application but before we do that if you don't have an account with flutterwave i want you to just go to filterweb.com right now and sign up or you can click on the on the description box below you are going to find a link to signing up with the twitter web which has a referral link if you sign up with them it's not going to change your integration experience but i'll gain some commission if you go through that and i promote you guys to go through that my link or in the description box below all right so once you get that done once you've signed up the next thing that you are going to do is to kind of take a look at the um the documentation page which i'm going to share with you right now so if you go to this particular url you are going to find um this documentation page and that's really the first step that you should take if you want to work on on filter wave integration so this is really the url or the end point to the latest version of filter wave okay this is the letter sound version or the end point that we're going to use and if you got that in place we're going to need that you are going to need some requests parameters or the request body which are these things that we have right here some of them are compulsory while some are not composing so anyone that is marked with true means that that one is compulsory like tx underscore f which is transaction reference is composed of every transaction you want to make the amount is compulsory if you look at the payment options uh compulsory which by default you don't need to but ourselves this will be put in place for you and the redraw url is also compulsory but those are the stuff then the customer you need to have the customer at least an email for the customer so we're going to kind of follow this um these are the request parameters that we're going to use customizations when you want to use title or something like description even the logo that's where you should do that okay and let me go to the inline filter with inline documentation right now i'm going to share with you um the javascript script that you can use so if you come to this page if you look at the url this is filter with dash inline if you scroll down we're going to find this particular documentation so what we are required to do right now is to go ahead and kind of create a form and include the script that um at the end product is going to kind of lead us to the end point which is this particular line that i have just highlighted that's going to take us to the particular endpoints and in this case this is just version 3 okay which i know that you guys have already known about that and you can follow this format but i'm not going to just say kind of a copy and paste this i'm going to have to type that and possibly change the things that i can change okay so it's really very simple to do all right so this is what i'm gonna kind of follow this right here but it's not gonna be the same thing i'm gonna change up some certain things right now but i just wanna share with you or show you this place so that if you want to come and copy and modify you can do that just come to this page and i'm going to have to i kind of have access to that so that is that let me go back and create a folder for what you want to do right now so my desktop i'm going to create a new folder right now which i'm going to just call there thank you for calling rave that would be okay so i'm going to just create a new folder and i'm going to just call that ray okay so that's just that and i'm going to go ahead and open this folder called rave in my editor which in my case is going to be a visual studio code all right so i have that open right now and it's completely empty so i'm going to create my first file within that and this is going to be called the index dot html and i'll go ahead and open that and i'm going to say exclamation and hit tab to generate the html boilerplate and if you don't know what i just did i just pressed exclamation then tab to generate this so what i'm going to do right now is first of all change the title so let's call this um so i'm going to go ahead and call this um filter web integration in javascript integration and the next thing that i would like to do nice to link to my css right away someone just a link and this is going to be well okay go to stylesheets and h1 is going to be sent to a file that i have not created but i'm going to create that in a moment so this is going to be costar.css so create that in advance and that is it for the head all right so now that we've included um the css the next thing that we're going to do now is to go ahead and create a section right here so i'm going to say section and i'm going to give that a glass of um let's go ahead and call that should we call that main content let's call that main dash contents um like that and let's go ahead and close this section down here and within this section i'm the first thing that i would like to do now is to kind of create a heading so that's going to be a heading one and i'm going to go ahead and copy this title right here and put it right here so this is going to be filtered with integration in javascript and i misspelled in i should probably also correct it from here and that's just that for that so the next thing that i would like to do now let me use um hr that's horizontal horizontal about separate dots and the next thing that i'm going to put right here is to go ahead and create a form so let me create a formula here and this is going to be form action and that is going to be sent to let's just leave that as empty strings which means it's gonna have to process this form within this page and the next thing that i want to do is to set the method which i'm gonna set to post so this is gonna be post like that and the next thing i'm gonna do now is to go ahead and set an id which i'm going to use within javascript to kind of work on this payment and stuff so it's going to be formed like that and um yeah so that is just what that is going to be so i'm going to go ahead and close the form right here and um the next thing that i would like to do is to create a label so this is going to be label and within this label what i need right now is just a full name and um on the next line i'm going to have to create the input for that label so this is going to be input type of course that's going to be text so i'm going to just say text right there and i can go ahead and give it an id um in this case let's go ahead and call that something like full name so this is going to be full name like that and um i'm going to create a placeholder so the placeholder is going to be called there something let's just go ahead and say enter your full name here enter your phone name here just like that and down the next thing or the next attribute i would like to add now would be the required attribute that's where i'll force my users to use them enter something in the action before they can proceed so that is just that on that line and i'm going to go ahead and copy that and modify it for the rest so copy that and then on the next line go ahead and paste that and instead of full name this time around the next thing that i need is a phone number so i'm going to go ahead and change this and i'm going to change this is gonna be number the id is gonna be phone number this is gonna be changed to phone number like that and the placeholder text is gonna be please enter your your phone number here and that should be that for that particular line i'm going to go ahead and just copy it before now and this is going to be changed from this is going to be called um email this time around so i'm going to go ahead and call this email and i'm going to change the type from what it is right now to email and for the id i'm going to change that to email email and for the place what i'm going to say please enter your email here and that is just that for that particular line and i'm going to paste that again or i just copied and i'm going to change this time around this one is going to be the amount this is going to be amount and i'll change this to number right there and i'm going to change the id to amount and as far as the placeholder is concerned just say enter amount and then finally i'm going to go ahead and create a submitter button for this and to do that it's really very simple so what i'm going to do is to i'm going to say input this is going to be input and the tab is going to be called submit so this is going to be sent to submit and after that i think um the next thing is you just go ahead and say value which is the text people are going to see i'm going to say continue and this can be anything you you want to put right here so this is going to be just called the container in my own case all right all right so let's go ahead and save that ctrl s to save and let's go ahead and open that in our browser so if i go to the desktop right now and open the folder called rave and i'm going to just double click on that to see that in my browser that's going to open in my browser and this is what we'll have so far it's all had so far it doesn't look beautiful but we're going to transform that in our css so let's go back to our development environment and then write some css for this and um what we're going to do now since we've created this particular file so all i'm going to do right now is to kind of complete that by creating the file right here so i'm going to just say style css open that up i'm going to write some css for that right now so the first thing that i want to put in the css is to change the background so i'm going to just say body that's going to be body and within this body the first thing is going to be the background it's going to be background color and i'm going to set that to this following heads are this amount remember this is going to be 0 0 and 9 9 right there so that's the number that i'm going to change it to or the background i'm going to change that to and that's the only thing i want to do on the body so the next thing is to work on the h1 so this is going to be h1 and within the h1 i'm going to just go ahead and change the text orientation to the center of the webpage i'm going to just say center so that's going to be set to the center of the webpage and then the next thing is to go ahead and change the color of that particular text so this is going to be called let's go ahead and call that navy like that and and for the font size so let the font size be so i'm going to just that is going to just be called a 3em and that is it for the h1 so we'll move on to the content remember the class that we created we call the main content so i'm gonna just say dot main dash content and work on that we're gonna just write quite a few styling for that so first thing i want to do is to set the width and let the width be eighty percent right now and on the next line is going to be the margin so i'm going to just say margin and i'm going to set that to auto and what that is going to do is to make sure i push the contents of this particular with me to the center of the page after we have really made that to take 80 of the screen so that is just that and then the next thing that i would like to work on right now will be the label so to work on the label i'm gonna just say label right here and that is gonna be i'm gonna set the font size so there's gonna be one point five etab for the label and for the next one it's gonna just be the color so the color is going to be set to maybe and that is that for the label so on the next line i'm going to just work on the input type and you'll see input and it's it's actually follows a difference different syntax so this is going to be just called type and i'm going to go ahead and set that to text and that is just that so to write the style for it um i'm going to go ahead and do that within this curly braces so the width of those that particular input is going to be set to 100 percent of the web page and then after that i'm going to just set the padding let the pattern of that be two pieces by 20 pieces so this is going to be 12 pixels by 20 pixels and on the next one is going to be the margin so the margin is going to be set to let's go ahead and we should spread that module right so the margin right now is going to be set to let's say 8 pixels by zero pixels for the box sizing so i'm going to go say box sizing and we're going to go ahead and set that you should put this on a separate line guys so the box size in my is going to be set to border box so that's going to be set to border box like that and um yeah so that i just did for that particular line called the entry type text but one will have to want to apply the same styling to other types like the email and that of the number so to do that i'm going to just introduce a comma right here and of course i should copy this let me copy this way i'll use it to modify i'll introduce a comma paste that right there and i'm going to change this type from text to email so it's going to be called the email this is email introduce another comma right there and i'm going to change this to number because we have a number type right there so this is going to be called a number and um that is just that for now and the next thing that we want to work on right now would be the subject button so to work on the submit button right now i'm going to just say input and that's going to be say that's going to be type so i'm going to say type and we'll set that to be the submit and to write the style for that i'm just going to do a couple of things right here so the first thing i want to do is to set the width which in this case is going to be 100 and on the next line we're going to just give that a padding so let the padding be it's going to be chopped easy i think i probably should have copied this so the pattern on the margin i should have copied that for now and paste it right here so i'll copy that and use that right so i want to make use of a decent padding and even the box sizing i'm going to take that paste it right there and um on the next line i think this is now the time to start doing something different so this is going to be color and the color is going to be white and as for the border so i'm going to set the border right now set that to none and after the border i'm going to have to set the border there it goes so this is border radius so we're going to go we're going to go ahead and set that to be equal to 8 pixels so it's going to be episodes and um finally we're going to send the causal so this is going to be called a pointer and yeah that is just that for and if you want to set the hoover effect for that button we can do that let me scroll up so that you guys can see everything you want to set the hoover effect for that you can go ahead and copy this so i'm going to just go ahead and copy this right now and paste this right here and i'm going to just include the color and just say something like cover and it's it's only one thing that i really want to do right here and that is just going to be the background so i'm going to just change the background and color to i'm going to just go ahead and change that to green right now well not green but needed i'm going to just go ahead and change that to maybe i just the only thing i want to change right there so all right so that's just basically what i want to do right now so if i save this i don't want to bother myself too much about the styling so if i save that and go back to the browser and refresh we should have the styling press right now and this is probably how it should be looking and we have a little issue right here so with the background of this particular thing so let's check why the background is not showing up let's check for the submit button so okay so we didn't set a background for that um we should have set the background for this so let's let's go ahead and put that right here so guys this is going to be background um let's say that the background is going to be something like green so let's just say clean right here and go back to the browser and refresh we should have that right there okay and um yeah so and another thing i discovered right now is that the text right here is not big enough we will set the font size for that we did not so we can do that right now let's just go ahead and put that right here so you can save fonts font size and go ahead and do that maybe something like 3am let's save it and see how big that is going to look so for refresh and we have something like that and that's really too big you should reduce it so let's reduce that to something like 3pm and save that and go back full refresh right now and i think this is this this looks better right now okay this looks better all right so the next thing that i want to do right now is um let's let's close this i think this is all we need from in on the css so what i want to do first of all is to go ahead and include the javascript script right here um if you go back to the browser right now we are going to have to copy this line this is what actually resource to the what is it called the version 3 endpoint so i'm going to copy that this is javascript's endpoint so copy this and go back to my work and i'm going to go ahead and paste that right here okay and the next thing that i'm i'm going to do right now is to go ahead and link to my javascript which i have not already done i'm going to have to link to a javascript that i have not created right now so um to do that it's going to be let me just create a kind of um link to that so that's going to be slc right here and i'm going to go ahead and link to something that i'm going to come in the gs and i'm going to go ahead and close this right here and of course i have not created this file so what i'm going to do right now is to go ahead and create a file right now so to do that i'm going to go ahead and do it right here so this is going to be called the main dot js and i'll open that up right now so this is where i'm going to have to type um my javascript code now it's going to enable me process this payment right now all right so in this page what i'm going to do first of all is to create a variable which i'm going to just call the form so this is going to be const form and i'm going to go ahead and set that to document document.getelementbyid which is really a method in javascript and i'm going to go ahead and grab that particular id that is on the form i'm talking about this id right now let me show you that talking about this id i'm going to go ahead and take this id from here so take that and paste it right here all right so the next thing that i'm going to do right now is to make sure that i add an event listener to this particular form anytime someone clicks on that form um now that will have taken the idea from here i want to make sure that to add an event listing after that and to do that i'm going to just take the variable up here which is called form so this is going to be form dots add event listing now and that's really um a method in you know in javascript so the first parameter that is going to need right now it's gonna be the submit because you're gonna have to send this as a submit and i'm gonna add a comma right here the second parameter is gonna be a function that we're gonna create which we have not created yet so i'm gonna go ahead and call that in advance like that is going to be called the pay form so i'm going to just say or something like now let's call that pay now that's really a function that we're going to create down here all right so the next thing that we're going to do now is to go ahead and create a function this particular function right here so to do that we're going to have to use the keyword chord function and we're going to go ahead and then name the function we call that appear now and um adjust the function right there so just like that and then the next thing that we're going to do right now is that um the normal behavior of a form getting submitted any time the page loads we're going to have to prevent that right now so i'm going to just put a comment here and say something like let's say prevent normal form submission like that and to do it is really very simple we're going to have to pass in a parameter here that we're going to just call e and down here what i'm going to do right now is to go ahead and then i will just take that e that we have up there so it's going to be e dot prevent defaults so we just that line alone will really prevent that default from submission anytime the page loads okay all right with that being put in place the next thing that we're going to do now right now is to set some configuration so i'm going to just set um configurations and to do that we're going to have to do that in um in a within a base tax class that way that it's already embedded within this tax um the software talking about this version three and the name of the class is called a floater this was called a floater wave checkout so all right so the object is called the floater wave check out and um we're going to within this place a kind of uh work on the objects let me go ahead and terminate this line if i forget so within this place we're going to set the configurations right now okay and the first thing i want to set for the configuration is going to be the public key page if you look at the documentation page which i've shown you before now all right so we're going to be taking some keywords from this place but before we do that the first one that we need now would be the was it called the the api key and then the keyword that they normally use for that um is the normal record that are public so it's just going to be public underscore key which is really the what they are using so that's going to be a column and i'm going to go ahead and get the public key and paste it right here and to do that you need to we need to go to our dashboard right now and then get our api key and to do that you need to log on to your dashboard and once on your dashboard you need to scroll down to where it says settings so if you click on the settings and you should click on this particular button that says api key i mean api and once that page opens we're going to see um a couple of keys right here okay and i'm on remember that i'm on a on a test mode so if you're on the live mode you may have to you may find another key right here but since i'm on a test board and that should be the mode that you will be in right now since you are still testing the application so what i'm going to do since we are using javascript the right key for us to use now will be the public underscore key or the public key right here which is this one and if you're using something like php here's a server scripting language or python you can go ahead and make use of this one on the test mode all right so the one that we need right now is this particular one so i'm going to just click on this copy key and i'll get that copied and go back to my development environment and i'm going to put that in quotation so i'm going to paste that right there and i don't want you guys to use my own keys you need to make use of yours because if you are using my own all the testing that i'm going to be doing will be coming to my own my own emails and then in my own dashboard and if i ever switch to a live board you are going to be having some issues okay um you don't have to see the truth is that you don't have to use my own api keys you just have to use your own so that you experience everything that you need to explain within the integration of a filter wave i'm going to just separate this with a comma because i have a couple of other things that i'm going to add so the next thing that i'm going to do right now is going to be the tx ref which is um talking about this i'm going to i'm going to need this so i'll copy this right now and once i go back to my development environment i'm going to paste that right here add a colon and within this place and what this is talking about is about generating the reference keys okay unique reference keys for every transaction that you make what i'm going to do right now is i'm going to use a particular method in javascript to be able to generate that you can on your phone add any odd you can just mix some characters right here and make use of it but i'm going to do it in such a way that it should automatically be generating stuff for me anytime the page gets loaded okay that's what i'm planning to do right now so the first thing that i'm going to do right now is to maybe if i want to include my initial or anything like that let's say that my initial is going to be something like ak like this so we can include that and within this place i'm going to go ahead and concatenate onto the method that i want to use to help me generate the random numbers which is going to be math like this and math should start with the capital letter dot floor and i'm going to just open up a couple of parentheses right here and look at it there were just two parentheses that i just opened right there and within this place i'm going to have to type math.random so this is going to be math is going to start with a capital letter and this is going to be math.random like that and within this random i'm going to go ahead and then let's say we'll get out of this place and we're going to include a multiplication sign right here and that is going to be multiplied by 1 zero zero zero zero zero zero that's going to be nine all right and that is really nine zeros right if you look at it so this make sure that what you add is just nine zeros okay that's what you need to add and i don't have too much explanation for that the only thing i can tell you right now is that that helps me generate random numbers okay so i'm going to just put a plus one right here and as simple as that line is or as complicated as it is we're going to properly be generating a random numbers from that okay and then let's move on to the next line right now and what we're going to do with the next line is to go ahead and bring in um we can go ahead and bring in the the amount right now so i'm going to just say amount which is the what the person really want to pay so we're going to go ahead and then say something like um remember that the amount is really found within the form we can go ahead and do something like let's say 100 if that is what we want to charge but because we want to capture that from the form that we have created we're going to have to look for the id that is within the form for the amount and in this case it was called amount so i'm going to have to capture this okay so go back to the development environment i mean um yeah so we go back to this page wind.js and we're gonna just say document dot get element by id and within this place you're going to have to pass in that id recorder amount like that and to grab wall is really within the form we're going to just save the value and that's going to help you capture what is within the form and that is that for that place not node value but just value so i'm going to take away this node value so usual value okay so this is what document.getelement within this bracket we're gonna have to have an amount and dot value so that is just that all right so we've got that in place the next thing that we need to set now would be the currency so we can let's copy this so this is the current so don't remember that we've done the amount i'm going to just copy currency and if i go back to my development environment i'm going to have to paste it right here include the column and in my own case it's going to be just mgn for naira nigerian era and if you are from ghana or kenya or any other part of the world or let's say you are from the united states you are going to just have to add a us right here so this is going to be usd for people residing them in the united states but if you are within nigeria they are going to just have to use ngn all right so ngn is for nigerian currency and you have to kind of find your own short code for your currency if you're in ghana kenya or any other country okay united states use a usd and that is just that so the next thing that i want to create right now will be an object for the customer so i'm just say customer and to create a customer right now i'm going to have to include this caller brace right here so i'm going to build my customer within this particular object so what i'm going to do right now is to first of all capture the email which is in this form okay so i'm going to have to capture the email and if you look at it the id for the email is called the email so i'm going to just look for a way to capture that right now let's go back to the main.js and i'm going to just copy i want to copy this line because i'll modify it right now and before i paste that i'm going to have to um create the email so i'm going to just say email and the email i'm going to paste what i just copied and instead of amount this time around this is going to be called the email right now and for the next one which is going to be the let's say the first name or the even the phone number so what let's go ahead and take the phone number first i'm going to copy this and then place that on the next line and i'm going to change this from what it is right now to phone number i remember that these names that i'm using right now really i'm not just making them up myself okay i'm just i'm not just making them up myself like for instance the phone number that i'm about to type right now is coming from the documentation that i have just shown you which i can still show you right now so if you go to the browser so if you look at this place right now and if you go down to where we have customer we're going to see that we have email right here and we have phone number right so this is where i'm picking that from if i want a name we're going to have to just type the word name right there so let's go back to our development environment and um this is phone number we should type that correct and on the next line i mean before we go to the next line we're gonna have to include whatever we have as an id right here so if i check the phone number field the phone number field was called um that was called phone number so i'm going to copy this right now and if i go back to scripts i'll go ahead and paste that phone number right there and i'll copy this line again for the name and if i paste that i'm going to go ahead to change this to name this is going to be called name so this is name and document will be changed um from phone number to name this is what i have on that form i think let me check that so that i don't make mistakes this is okay that was called the full name so i'm going to take free name right now and paste it right there so this is going to be called a full name instead of jose typing name writer okay this is full name all right all right so this is the just this is just the last line for this um customer object so it's a good practice to take away the last comma and we can put a comma if there's any other more thing that we need to create a comma has to be placed in this place and in our case we're going to have to create something like a callback function right now so i'm just saying callback and this is going to be a column and we can go ahead and say something like let's go ahead and say function which we really can also use as something like callback um the esc syntax right there so we can say something like function and we'll go ahead and pass in let's say we're passing data here and this can really be anything and then within this place right right now we're gonna have to i kind of go ahead and let's see we test what we're doing right now so if i say something like console dot log and we'll go ahead and then we're passing this particular data is here so i'm going to just say data within this place and if go ahead and save this right now all right so let's test the application right now so if i save this file right now and i go to my browser and let's go ahead and fill this form like let's go ahead and do that let's say that i'm going to use john doe as the person who wants to make this payment right now and then for the phone number let's make up a phone number and for the email let's see jdo at gmail.com and for the amount we're going to just let's see we'll pay 100 nana so if we click on continue and we should have opened our dev 2 right now so i'm going to hit a control i'm going to f12 for my cable to open up my console right now because i want to see the error that is going to show me if there is any error and i think we'll have an error so if you look at this right here it says on court reference floater wave checkout is not defined online nine and if you go back to our development environment and check line nine um i think one thing that i can find out right here is that uh i think that this particular filter will the first letter should start with the capture letter so it should be like this not just a small letter this but a capital letter f so that's the way it should be and another error that i can see right now is on this public key so we're supposed to type only one b not just two b's so i'm going to take away one b right there and if i save this and go back to my development environment and let's refresh this page and try again and let's fill the form again with another name this time around so i'm going to just say something like kino sunny as a name and i'm going to use something like ksani as his email gmail.com and um let's pick up a phone number for him right now and we're going to go say kinosani at gmail dot com let's say that that is his email and for the amount that he wants to pay let's say he wants to pay something like 300 naira and if you click on continue right now and hopefully that's how it's going to bring up the pop-up for the payment and congratulations we have that right now if you look at here we see kinosa gmail.com and the price that we really types in there is what we're seeing right here and you can now make the payment and um yeah so that is that congratulations if you have gotten it up to this point and remember what you can we corrected we only collected um this particular letter which was before it was a lowercase letter and we changed it to capital and now we remove the 1b which is a type of graphql that we already had so that's just the two things that we corrected to be able to bring this up right now and you can really make payment right now so if you want to make payments let's make use of that test cards right now so let's say that we're going to make use of that test card um let's make use of this okay that's copied and go back to the payment page i'm going to go ahead and paste that right here and for the validity date i think that the validity date is um zero nine three so this is gonna be what zero nine three two and for the cvv it was five 564 and if you click on pay 300 error you're gonna attempt to make that payment right now and it's going to say entire four digit card pin to authorize this payment which we can still get from the test cards and that is thread three one zero so if you go back to the payment page and we'll go ahead and enter three three one zero and that's automatically try to authorize that and um and as you can see the next thing would be to enter what is it called the the otp that has been sent to your phone right now and according to what they are showing us right here you can use one one two five as the otp has been sent to your phone right now so i'm gonna have to enter one two five right there and click on authorize payment and hopefully that payment should go through and congratulations as you can see the payment did went through and if you look at what is returning from us right now if you look at this page they said status is successful and you have your customer object and this is the transaction id right now and then even the reference payments are the transaction ref so everything is really i put that right here for you right now okay so how about the amount of the currency the customer name which is kind of sunny email kino sana gmail probably just read about everything that we just typed in that form will be kind of a sent back to us okay so have the object to have everything returned to us right now so that's a beautiful one as a mass development so let's let's finish up the coding right now and then yeah so let's go back to the development environment and all right so what i'm going to do right now is that i'm going to comment out this line and the next thing that i would like to do right now would be to go ahead and um let me set a variable for the for the reference code so that i can get that and display that on the url i mean on the alert box so to do that is very very simple so i'm going to just say const and i'm going to just call that reference which is available right now and i'm going to send that to this data that we have up here so this is going to be data dot and for me to take the reference i'm going to just go ahead and copy this so that's going to be um data dot reference or text wealth as it is right there so that's just what i'm going to put right there i'm going to need that line and i'm going to go ahead and unlock that down here so this is going to be a lot and within this a lot i'm going to just go ahead and put some um some messages here so i'm going to say something like um payment was successfully completed okay payment was successfully what completed and we can concatenate onto this we can concatenate onto that and then they kind of bring in this reference key that we have here this particular variable so i'm going to just take that variable and put it right here which means that it's going to go ahead and that put the whatever that is in the reference to us in the alert box so that's what that is going to do for us and i'm going to go ahead and separate this with a comma and the next thing that i would like to do right now is to set the customizations for what i want to do right now and if you look at this um this place all right so if you want to set the customization right now you're going to need to set the title and set the description and even the logo so those are just the things that you need to do in fact let me just copy this object right now i'm gonna just copy that and if i go back to my development environment um the first thing that i need to do is to just type the word customization like that and i think that i got that correct this is yeah customizations and if i have that right there i'm going to just put a column and paste what i just copied so this is how the object is going to be the first thing you need to do is to give it a title in this case what i'm going to just call this is a lot of apps that would be the title of so and then for the description i'm going to go ahead and do something like um let's see what testing filter with integration just like that and for the logo i don't want to bother myself going through the logo right now so i'm going to take this line away but it should include your logo if you want to use that so that's how to change the logo but i'm going to just take that away and that will be the probably the last thing that i'm going to do right now and that is just that so and it's a good practice to take away the last comma so i'm going to go ahead and save this page right now and then let's give that a shot again within our browser so i'm going to save this and if i go back to my browser and let's refresh this page and go back to the normal page and if you fill this form again let's say we fill it with the following details so i'm going to have to fill it with um all right so let's go ahead and feed this so let's see cheat so okay david and for the phone number i'm going to go ahead and put my phone number right there and for the email let's say i use one of my emails this is going to be let's say we use um let's see we use akin banky gmail.com and for the amount let's say that i'm going to pay something like let's say 2000 error like that and if i click on continue right now it's going to take me to the payment page again and you you see all these things that we have right here this is really coming because of the logo okay these are coming from the logo if any time you include the logo this error doesn't go off we don't need to borrow yourself this is just coming because of the logo and it's not so that's harmful and uh yeah so let's get our test cards again and i'm going to copy that go back to the payment page paste that right here and for the validity this is this was zero nine then three two and for the cvb it was five six four and we're going to click on pay and hopefully that payment is going to go through so we're going to have to enter our four digit pin right now so it was three three one zero so all right so we're gonna have to enter the otp right now and if you enter that you click on authorize payment and hopefully that should go through and as you can see the alert shows up right now if you look at it this is ak 7 0 4 two five eight seven seven okay i want you to just note this particular reference down okay so that's the payment really went through so if you click okay you see that it says uh it says thanks for your payment and um your payment was successfully was successful we just sent you a recipe to i came banking gmail.com and um yeah so that really went through so if we go to our gmail right now let's go to our gmail and find out if we really receive them that particular message or receipt so this is going to be gmail so all right and if you look at this we have um really have a recipient sent to us and if you click on need let's see what is in that place right now and if you look at it they say it's received from the lord of apps and this is the amount that we really paid that time and um the rest of other details will still be shown within as you can see all right so that means that the all did really worked and the other place that you can check this right now is to go to your dashboard within the um filter wave and let's let's check out our dashboard right now and if you go to transactions right now let's click on transactions we should be able to see that and if you look at the transaction table right now you see that that transaction really came in so if you click on that let's open that up right now and you see that the details for the transaction will open up so as you can see that really came in so this is if you look at this play the transaction id which i just showed you on the alert is the same thing right there so that means it's correct and the payment reference is right here so the this is the transaction fees and this is the amount due which you have to your that just the amount they can pay out to you so they'll take 289 up from that amount and if you look at the customer name which is what we typed and this is the email and um yeah almost everything you have we'll see everything that uh cons that really concerns that particular payment that we just made right now okay so that is just that guys so if you got it up to this point you need to congratulate yourself right all right guys so i think i'm going to stop it right here and then before i start i'd like to also let you know that um i'm putting an e-book together on how to integrate this particular filter with to your web application and i'm gonna do that in php and coi in case you guys are gonna need it you can pre-order that right now you can use um my email a lot of apps at gmail.com or you can even con contact me with this particular email i'll respond to you from that you can pre-order the e-book before i get it launched so that is it and you should check the description box to some other information like my social media handles so that you guys can follow me on the social media and thank you for watching and i will see you in the next one

Channel: CodeKinda

Views: 3,108

Keywords: Flutterwave, Rave, Rave integration, Flutter, Flutterwave Integration, Flutterwave payment, African Payment gateway, Flutterwave js, Flutterwave rave, Flutterwave Javascript, fluterwave, fluter rave, fluter wave, Flutter wave

Id: fwpu3NfkmwM

Length: 56min 14sec (3374 seconds)

Published: Sat Mar 27 2021