Learn how to add Paystack and Flutterwave payments in your flutterflow apps.

okay guys so before you understand or work with pay stack or flutter wave right for to accept payment in your flutter Flow app you have to understand API integration right how to work with apis and that's something a lot of NOCO developers working with FL flow don't know how to do Now API is a way for you to make your flter Flow app talk to external apps you know you can talk to char GPT you can do so many things right now if if you want to get the big picture here all you're doing is you're going to make your app right talk to P of you're going tell p of oh my user or my customer wants to pay me x amount of money 20,000 something right and then P will say okay here's a link to give your customer you give that link to your customer the customer pays or does not pay and payack sends you information and says hey this payment was successful or hey this payment was not successful and then you can do whatever you want to do in your app that's how it works so um there's a another video on API tutorials you can watch it check it check the link below or you can look for the um I might link it somewhere in the video and you can go and watch and learn more about API tutorials like or how to work with apis until then let's go into the next session so quickly before I show you talk about this this next section and I tell you what you're seeing on my screen by the way work with apis now you work with apis because you need to connect to other platforms that can give you information or data that you currently do not have access to for example there is an a website for Crime right talking about crime reporting the crimes are happening in a location at a particular period of time and you can actually connect to that website and find out you know information about oh it does who has a criminal activity things like this right these are things that on your own if you were to gather the resources to gather information about things like this or even for example Google Maps if you are to take out the resources and actually check out every single location in the world just like the way Google has done it you would spend a lot and to not make sense trying to build your platform you're going to spend millions and millions but your company has already done that compile the data now you can access it via apis you can talk to it and they talk back to you or you want a feature that you can't easily build right but you can connect to another platform that has built it it's going to take you so much time to do it imagine Char GPT trying to build your own um AI system that will take a lot of money but you can connect your GPT and have it into your app that's it now this particular thing was seeing on on my screen right now is called a documentation every single API has it an API when you're working with apis is a business people make money from apis so because it's a business they are going to tell you the developer how to install it safely in your app everything you need to know the only issue is as a NOCO developer looking at your screen you see some code you are scared all right so let me break it down for you but first things you need to know is everything you need is there on the screen they can tell you they literally tell you everything and you need to know if you take your time and read it you'll easily be able to understand what you're seeing on your screen now one of the easiest things you can also do is if you're looking at it if you want to read the documentation so you can understand how to install the API because you can install all that you can copy all the text you seeing on your screen and you can copy it and then go to somewhere like CH GPT and paste the information about that API and and then once you paste the information you can say please can you explain this API to me can you tell me why why do I need to do this particular thing or why do I need to do that what does this one mean what does that one mean you can talk about it but this video is also going to help you right this just so you can digest a very big or large documentation script now this is fla wave documentation this is space tax documentation just like any other application in the entire world that you want to connect an API to you can easily just go online and say for example payack um API all right once you click um the API documentation you'll taken to the first link you can click on it and you'll be able to read more information about that platform you want to to integrate now let's get on to the next thing now all of them always have a search button where you can search different kind of features that you want for example you want to accept the payment so I think I'm going to use a very simple keyword like accept payment all right now from there you can just try and look at more information about it but the typical way that you can find accept payment or that section that you're looking for to accept payment is called initialized transaction right um for P for FL wave you can just come and type accept in the search bar how do I accept payment so just come here very simple accept payments all right so we look for something that looks close to what we are looking for let me go to documentation we see payment methods so we can click there and we see a bun some information about the different type of payment method that they accept right and we can also see this section where we can click and choose what we want but for now we can see that oh there's even more information here go to overview and in the overview section we can see the type of payments that flutter wave can allow you to have these different methods you can actually work with your system and um if you take your time and read it which is what you need you can actually copy and go to like I said but if you take your time and read it you notice that the most important sections are flutter wave standard right and direct charge now what does this mean because if you read this flter wave in line it's actually a JavaScript library only majorly when you're working website this is not a website building us an application so you can't actually work with this now um HTML checkout still for websites so you can't really work with it but you can work with FL wave standard and direct charge now for FL wave standard this is an API direct charge is an API but you need to build your own UI so you can read more information you can click on them keep going deep just take your time and read be patient all right so that's how you read apis now in the next video I'm going to break down the documentation for you okay so now we understand documentation a bit and we're no longer scared let's Let Me Explain how apis work right now if you've ever browse online before you have interacted with the same technology that powers APS and I'm not going to use any technical language on your own you can do more research but when you what happens when you actually go online and you go to your web browser and type a particular URL for example instagram.com what happens is that the same way if you give me your address your home address maybe 476 La Street and I asking people okay where is this person located and they start telling me okay that's where your house is that's where your house is and on I find your house is the same way the internet would work in a very simplified manner that's me explaining to you so once you type the address here there are different protocols that are going to direct you to where that particular website is hosted on a server and then you now displayed on your device very simple right the same thing with API so basically apis are just hosted online too they are just the same way your websit are hosted on the servers and when you now um work with their URL right because just the same way the way your app talks to other apps is on on the internet right when you now use the URL just like a browsing online you will now be able to Now search for the particular location where this particular API or the resource is hosted so for example I can actually copy this link so this is a link right this like browser on internet every single going to work with that has to do with HTTP they call it HTTP re is going to have a link that they going to give you all the time all right so this is it here so copy here so let me let's let's check what happen when I put in this link here okay so what I'm seeing on my screen right now is status false no authorization header found now we know that we can actually access apis online just like we a website right but what is authorization header what does that mean now we just Tred to access in the previous section we just Tred to access you know the section you know um we went to P tax you know link to try and access their API right it's telling us authorization header was found what does this mean now let's explain something quickly before we actually go into that topic now if you go to FL flow and you click on add a new AP call right or create a new API call from here new API call now no depending on the way you do it you're going to see a section called method type now what is Method type remember I that API call is how you can make your app your app talk to other apps there are five ways you can talk to other apps you can have you can search for about this different methods right but um let me explain it quickly so get means all you want to do from that app other app or that other server whatever or database is that you just want to get information from there post means you want to create something new in their platform if you notice every single time a user makes a payment in your app if you go to pay stack your dashboard you're still going to see evidences of those payments recorded there right because you the one that actually created that new record based on you through the API delete means you want to delete something from their platform the other platform right put patch is means to edit but one is more dangerous than the other put means if you have a list of data right maybe like three data called Benjamin John three names Benjamin John and Peter the moment you use a put call you're going to it's going to erase all every all the names you have there and you are going to you going to be requir to put new names there but if you use patch you can use patch to only edit one maybe you just want to change Benjamin's name or one of the other names I can't remember you know that's how it works so that's put put is monance that patch now these five methods you don't have to put them in your head typically um if you go for example now I want to check how to initialize transactions that's how to make a payment you see that they're telling us that is a post call so they already giving us information about what type of call or API um this method we're going to use here so it's very simple they they're always going to tell you you don't need to memorize that now um that's where we now going into authentication where they said no authorization header was found now if you think about this the fact that you can actually create something in somebody else's um server or you know sorry the database right or edit something or delete something or you can access like information like a crime database the entire public should not have access to it now not all apis would do this there some that are free for everybody to use you know but not not everybody should have access to these kind of things inside of their own app not everybody so typically some AP are going to authenticate it they're only going to allow they're trying to make sure that only the right people can actually have access to their API so there a way of protecting themselves also because is some people some apis they actually make they use it to make money right so they want you to pay for it so they will have to manage to make sure that you have an account with them so you can be paying through the account right so they can monitor your usage of it and before they can give you a key so you paying them they'll give you a key or they will give you a password that shows that you actually have access to that API very simple right now so like I said not everyone will do this but even payack you think payack is free but it's not P will take charge you for every transaction that comes through their platform they make they make money from you so you can read more about that on their website it's still a business all right so there's more information about authentication here and you see something every single API the documentation always has information about authentication if you click on flood wave right so uh I'm trying to reload FL wave um if you click on Flor wave and I go to main menu all right main menu okay so um yeah I just went to their quick start so some they have something called authentication I don't know why I struggled to get that earlier so authentication so if you click on it you'll see more information about how their own works you know how you can actually get access to your keys they're going to tell you see they're telling you oh create a FL wave account you know things like that they giving you all the information that you need to work with even like as a beginner right so you can read this things and get this so same thing with pag too now in P they telling us that oh the key that's the password they going to give you you can actually get it from the from the dashboard so if you click there they're going to take you to your dashboard you'll be able to actually access your keys right very very simple so before I actually get to my own dashboard all I'm just trying to tell you is this right this um is a way to make sure that not everybody has access to their platform so now I want you to remember that this same thing with how flter wave work too but now they've taken me down to this section where I have two modes I have a live mode and a test mode now a live mode this is when I want to go live I actually want to start receiving payments from people around the world real payment a test mode is when I just want to test the API I want to make sure it's working so they will give me this this like a I can generate a new one so I can actually show the keyboard I'm not going to show it but when you click on on the eye open right they'll show you your your password and this is where you're going to work with this test secret key you can copy it and save it and in the next step I'll show you how we're going to work with it right like I said this is your password right this is where it is in P FL wave have the section it's the same thing they're going to direct you down to it all right remember don't use this key when you're going live this just to test it so click on the eye open and copy it okay guys so we've learned about authentication a bit right and um it's time for us to actually practice what we've learned so far in further flow now let me go back to the API section and um I was already working on something earlier but let's just try and clear it off so basically when FL FL when you click on add an API call you have two types that you can add you can add an API Group an API call typically you might always want to go for the group why because different apis you want to work would give you different kind of features right and each feature is one API call this is a post call this is a get call you know there are different kind of API calls to re to work with and you know they they also um feature different Endo or different URLs to interact with that particular feature or that particular information you want to interact with on their servers so you can see this one is transaction SL initialize this one to verify transaction is you know transaction SL verify reference and it keeps going on and on it's always going to be different first transaction is transaction SL ID it's always going to be different so if you're always going to come and be creating a new API new API call adding you know all the details again and again it's not it's not really the best idea to do that so FL um FL FL has already G an opportunity to create an API Group where you can just add a group and group all your API calls inside that group all the API calls are similar right and this is we can group all our pack API calls in now quickly right let's look at this particular URL here we have api. pay.co now typically API when you're working with apis you're always going to see a part of the link that is very very common right the most common version of that link you're going to keep seeing it again and again and again in all the other endpoints you can see api. API um api. you can see and you see up here too they don't even add API p. code they just add the ver the section of the of the link that is meant to interact with that particular feature all right so if you understand where I'm going with this let me explain so basically what you need to do is if you're working with an API Group you need to copy the section of the link that we spoke about earlier just like you're browsing the internet that is the most common and paste it in the API base URL right I'll call this pay stack payment so once you past it here the next thing I'm going to need is a all right remember we talk about authorization you know showing um them showing P that we are meant to you know to be here are meant to actually access their servers that is what this is all about right so let's click on header now um see they already giv us they already giv us the answer here or what to do so remember I put it down here if you let's look down here first you can see something called Coral then this is URL so the URL is what we've pasted here right then H authorization H content type D data now what does this mean h means header h means header right and d means body that's what it means I know that that can be a lot remember you can always copy and go to your gbt and it can explain everything to you you can always copy an AP and say what part of this is the header what part of this is the body just in case you are not sure when you're starting out right but once you are able to identify which part of it is the header which part of it is the body right which is quite simple here we know that these two are the header right and you know what we're doing is this header is doing is is passing information about this API call which is important for this particular API call so for example authorization is telling the AP the servers that oh yes um this person does have access because you know what we seeing is authorization that's the first thing then Bea what is Bea Bea is a way of telling the servers that what is coming next after it is the API key that's what B does it's telling that oh what is coming after me is AP that's what it does right so it's it's it's something that you're going to have to just memorize and work with and understand over time as you keep working with it then content type it's not always necessary to add a content type not always at all you know but basically what it does is it tells the you know the it communicates that the information you working with is in Jason and I will explain what Jason is shortly right because this also very very important for for us to understand Jason you are going to work with API C but let's just focus on the header first so for this header I'm going to copy this section here authorization Bearer your secret key all right and then I'm also going to copy the content type or application of Json awesome good so I'm going to add the group now and I've saved it now there's something I want to teach you quickly when you're working with API calls right you can pass things dynamically now let me explain what that means so if my secret key was one two no sorry 1 2 3 4 5 5 6 7 8 9 10 you know 10 now one of the issues with this type of API call is that if someone had access to our code they can easily be able to steal our API key and why would you not want someone to steal your API key because if somebody get access to your API key your your pay um paystack account is at risk because they could possibly siphone fund or get access to some information that they are not meant to get access to because that secret key will be telling pack that they are meant to have access to their platform and they meant to not only have access to payack platform they're also meant to have access to your own account right which you have sensitive customer data right money there are so many things that you know you you have you you you you have access to with this API key for example there's even a section to even transfer right so let's say transfers you can actually initiate a transaction or a transfer with your secret key so you need to be very careful about this you need to be very very careful now there are ways to actually secure this thing face has information about that in fact I think on default before anyone can transfer you have to have an OTP so don't be scared about that but if you disable it that's very very scary now let me just give you one of the it's very very simple um hack right and that hack is not to leave your secret key open what you do now you obviously have to send your secret key here but we want to make it dynamic in a way that we can put our secret key somewhere else maybe on our on our database somewhere somewhere that is secure some that we can hide it and then we can always make sure that it is it still shows here how do we do that what you do is you put this two brackets right this is how you can send Dynamic information that does not have to be static here what does that mean it means that we are just going to write something like this a key right so we'll call this this this will be like a a reference name right a a dynamic name and then the next thing we're going to do is we're going to go to something called group variables anytime you see variables in your flutter Flow app variables means anything that is dynamic dynamic information any key any value that holds data that is dynamic data that changes right for example most times your FL Flow app you might have a place I I'm going to fix this it's telling me it's misconfigured because it's this um API key here is supposed to be dynamic and I've not added a a dynamic variable yet but let me try and explain so let's say we have an app right and um I'm trying to see what I might use but let me maybe open My Notes app let's see so basically if I built this note app in Flor flow I would have that this top section here place can flter wave YouTube This Is Why I'm planning my I plan my YouTube video right place can flter wave YouTube should have a dynamic value right because what I will have here will be oh this will be the title of whatever their note is if I was creting a note app like this so basically I have to create in a way that the text that will be here would always display whatever the user is typing at that moment whatever I'm sure you're getting the picture sometimes it might be a username you might put a place or a space in your app where a username is going to show right and usernames will change right maybe a user is called Benjamin that user is calleda there are different names that would come up you will need to make sure that that name of that user is represented on your app that is dynamic content right so typically you you you send information from the database or from an app State these are things that you should know as a flutter flow Dev if you don't you can comment down below and I'll will explain more to you or try to help you out so yeah anytime you see variables that's what it means it means Dynamic content so what I've done here is I've told this Bearer and this secret key section that I want to send this API key as d as a dynamic variable right so the next thing I have to do is I have to copy the same name that I have here right paste it here then string boom so what I'm doing here is I'm I'm call I'm creating what you call a group varable and when you're working with an API Group it's very important to create group variables like this and group variables like this means that the entire um API calls under this group under this file would also have access to this group variable because all of them will always need to show that oh they have an API key that authorizes them to perform the action right or that author that you have access to perform the action so all of them will have access to this same API key that will be sent to this authorization be I hope this makes sense if it doesn't comment down below and I will try and help you out okay so let me click on Save and then the next thing we going to do is we're going to start adding all the all the calls that we need now this has secured us right so the first call that we need very e um very simply right is initialize transaction okay so what I do is I'm just going to copy this section of you see this section here I'm just going to copy it and I'm going going to paste it over here all right good the next I'm going to do is I'm going to add the API the call name this is called initialize initialize you can call it anything you want um transaction all right now it's time to check any other thing that we need to send now we don't need to add this authorization on be um authorization you know or content type because we've added to this top section all of them have access to what we put up here in the top section as you can see here now the only thing we need to do is the body now remember post calls means you are creating something new and when you are creating something new you need to send the data or the information that you're creating to that other platform to that other um to their database you need to send you need to tell them what you want to create and with payack you're creating a payment all right so that they can do something for you so they can create a a link that your users will now make sure they pay that exact money you specified in your API Cod and the way you you typically send data over the internet and receive data back because basically you're sending information that oh I want to create this um you know payment for customer email.com with this amount 20,000 naira all right now once it's done P will send you information back and you notice it's the same format the same format this is called Jason and what is Jason you can do your own research on what Jason is but Jason the simplest way to say it is it's one of the most organized way to send information over the internet in a way that humans and computers will easily understand it if I ask you to write um information about a particular user if I ask five of you watching this video right now to write information about me and how I talk or how I behave or how I speak different characteristics about me each and every one of you are going to have different things to say about me that's the funny thing you know you're going to write it in different ways and the computer doesn't have so much time to try and start trying to organize your text it it will make it slow in processing data it to make it also miss out on important sections where data was stored things like that and even human other human being can get tired of trying to read your lenty text so Jason is a way of organizing large amount of data because there's a lot of data you can store with Jason but in a very structured and organized way that when you tell your computer this is where I expect this data to be in it is always going to find that data there which is very important you always need to be precise when you're building computer programs so that you don't make mistakes and I'm sure you have noticed when you build or you build your logic in a way that is not logical you find your app is not doing exactly what you wanted to do all right so basically what we need to do right now we need to just copy this um Jason SE um this body the body exactly what we're saying here now you can see if you click on this body parameters you'll see more information you can actually send that you're not seeing here this is a simple example this one here is a simple example here but there's more more more information you can actually send and we'll get back to that later because this all this information here is not that important this is exactly what you need to create a payment but these are the most important Fields if you if I close this up the most important fields are I'm coming the amount and an email you must provide an email address for the customer and you must provide an amount right after you provide these two things the other things are just optional right you can provide a call back Ur and you can read what they all for read your documentation please so let's just use this basic one first and create a payment so I'm going to copy from here and I'm going to remember it's a post call so let us click on post body would so for the body we select Jason which is always going to most times you're going to be working with Jason most times so so we just paste it here good format so click on format to make sure that you have the right Jing structure and if you don't copy you can copy everything and paste it in your GPT and say please help me format to Jason and it's going to format it for you but let's say I wanted to add more information from their parameter just in case you want to for example call back URL all I need to do is come over here and I can so now let me give you one of the rules the last section of your Json of the information section in in your Jason field right should not have a comma right if not you have an error you have an error when you format it so they should always be empty like that right but then the um the section or the field that is the name of that part of okay let's give for example now email is the name of the user's email right we're telling the the server that oh or or telling them or telling P that this is the customer email so this is the name of that particular field email so it has to be in quot a quotation mark right and then you know the other the name or the actual value should also be in quotation mark and for example if I have call back URL here too the way I'm going to write it is this like this um sorry made a mistake call let me just paste what I copied call back URL and then all I have to do is Open Bracket like this and I have to also add a comma at the end of the day like that then I can write whatever I want in between and this will be correct format so you can keep adding things like that following this simple rule and you'll be good to go all right so once you have done this the next thing is to make this Dynamic but before we make it Dynamic Let's test if this API call is going to work right okay guys so if you check the response section you see that that API key um that I added before right over here is also showing here as a variable now this section in your API call section is how you can add the information that you want to send in your variables right any information I need to send to the API call so we're going to we're going to play around with it a bit so don't worry just follow me what I did was I I copied my my API key from secret key from pack and I came over here to paste it here right that's all you just need to do to test it out now I have not touched anything else let's just go and test the API call and see whether it works boom so we have a success code and typically you can come over here and you can check an example of how it should look like when it's successful so this is when it's successful this how it looks so if it was not successful let me show you an example of if was not successful now let me say I let's say I I make a mistake and I do not send an email which is an unnecessary field right and um let's say I just test the API call it's going to give me an error so status false email address is required so you see you must send an email address it's a it's it's a must all right so let's just try and you know remove that mistake you must send an you must send an email address for this to work all right now that's an example of a fielded API code now rarely are you going to see this API fa this particular call fail because yeah always Crea is like I'm not does not happen to me right so rely are you going to see F you know but if you do not send the right parameters you might encounter an error okay now the second thing that we need to focus on is that we cannot not all of our customers are going to have customer email.com not all our customers are going to always want to send 20,000 you might want them to pay 150k 200k depending on the kind of product you're selling also all right so we need to make this Dynamic just same way we did for this API key section we need to make it Dynamic so what do we do we I'm sure you can see something that's looks like a r of Hope which is the variables but after the body all right so you click on variables this we we can now set the dynamic sections for this you know whatever we have here now we don't need special names like we had for this API section we don't need those kind of names it can be anything you want right I can call this email 101 for example it doesn't need to be the same name as what we see there the only thing that the Only Rule that we have here is this section here right where we have this customer email at you know at email.com we'll delete it and we are going to put this whatever we have here that's supposed to represent the email over here and then for this this amount we are going to go to variables here and say we can call it anything we want but I'm I'm going to call it amount going to be a string then I'm going to bring it here awesome format save good so now we have a dynamic email and amount so what do we do we come over here and we can actually test out um how like different kind of emails B like based on this field because it's Dynamic so you can say g whatever right at mail.com so this is the email that the person that's going to be sending the money and amount can be whatever you want you know whatever we want so we can say test API call and um boom we have an API you know call here with a link that we can use to make customers pay now let's test this this link now so I'm going to copy this and take it to my browser and paste this here delete that and delete all of this and check it out so basically that link is meant to take your users to a section where they can actually pay you so this is a test version as you can see this is 675,000 87 um 79 naira good so we're saying success and once they pay your last transaction was declined due to insufficient Fund in your bank account I don't know why that did like that supposed to be successful let's see okay maybe it's just in test mode maybe because of the the amount that is here but let's see um transfer okay I've sent the money it should work so yeah while this is playing this is working I'm sure you get the idea or you get the picture of what is happening right now good so we can come back to this now one other thing about API call that we should know um is when you send a request right to whatever platform you're trying to work with they always going to give you a a a return value back sometimes it can be that oh this the status is true the API call worked right you know and they will send you some value that you need for example this link is very important to us our users must have access to it to pay us right or um sometimes it might be oh something did not work as expected so that you can do something your app or not do something in your app right and by in pack right now the most important things to us are the status the reference and the authorization URL so you have to determine what is important to you all right now let me show you why I think the status is very important so for example let's say I omit the email and I just try and test the API call loan it should give us an error status false so I'm going to what I'm going to do to pick this field here to tell flutter FL that I only want this field because sometimes they'll give you so much so much information that you don't need some other API calls might be longer than this this is very short that's why it's easy but some will be longer than this or let say that I did not write the email well I just wrote that let's say test API call status false invalid email address passed now you might also want to copy this to so that you might show your your user a message that oh invalid email address or this or that whatever you want to add you know you can just use it to to display your use as a a useful helpful message or that oh you passed the wrong email or you did this or you did that it is see right so let me show you how we can tell FL that we want this F so what you to do is go to adjon part click on it and now we we just told that we need information from this status field because if this status is ever equals to false then we know that this API C did not work so we call this um sorry status all right can call it status so let's check if it is real if it works mail.com so we test API call so let's see so you see status changes to true if the API call actually works the next thing we need is a link authorization URL so we going to click on adjacent part which is this then you can give it a name if you don't give it a name this is not you will not be able to save it see if I try and save it it will give me tell say name cannot be empty so you're giving it your own unique name all right now um on your own I will suggest that you go and study the topic Jason Parts how how you find a particular Jason part in a Json list all right and um to just give you a clue if you look at flutter flow here there's something called dollar sign do status if I move the S there you see null because there is no ST a tu in this line here there is nothing like that but if I remove this and I write data you see it changes it's showing it's collecting information from this data field and showing me everything that inside data field if I go over to reference do reference all right you see that it's going to bring I think I might have spelled it wrong um r e f e r e n c e I don't know why it's not bringing out the reference let me see let me copy from here so that okay is data dot okay I made a mistake it's my fault sorry so this what I'm talking about data dot reference so yeah so on your own you can try so you can see I've accessed the information here so Jon part the special method I was telling you about how computer programs can easily know even if this was this this list was as long as a whole textbook this computer system will be able to know exactly where any any kind of data you've stored there is exactly where because of Json parts right but there's a specific way in which it is organized for example um reference is inside the data section here right so the way you refer to reference is data do reference and there's other you know there are other things here but on your own go and read on Jason parts so you can understand it more more but for has already done simplified everything for you you don't need to go and read it yourself right now once you click on a p that you want FL automatically tells the computer system right now that this is exactly what you want to get from the part and it's always going to work on 100% of the time because this is the structure that you're going to get back from the API call I hope that makes sense now let us go back to what we are working before um and that was Let's see we wanted to get access to the status right so we say status all right which is true right now then URL we just call this payment payment link so this is the payment link I made a mistake with spelling then the next thing we need is the reference and I'll tell you why we need the reference if you really documentation you understand this is still pending I think it's just because of the price that we put most times when you put balances that above 50,000 in the test section it it messes up and that's because so people don't want to all people to fo other people that oh they received a payment of this amount of money when it was a test version all right so let let me just click close of that now let me go back to this section here and we click on reference adjacent parts now in further flow you're now allowed to write the word reference for reasons you know if for example now the one of the major reasons why you cannot add the word reference is because it is a keyword in that right used for different things when talk about like in the in the like in programming here is actually a keyword is used for things in the background by FL flu to reference so many things just that is used by F flow to reference a lot of things and they don't want the names to clash with what they are actually doing in the background right that's the best and simplest way I can explain that to you so you can't use the exact word you can use a different word Maybe ref right ref ID what I normally use and we can save this and we have our API call set right the next thing that we need to do is we also need to create an API call for verifi transaction now what's verifi transaction if you read the documentation this is one of the simplest ways to check whether a payment that was made before is actually successful but before we talk about verified transaction I want to let you know that in this particular lecture we're going to be learning um about we're going to that why say a full tutorial we're going to learn two different methods right the manual and the automatic ways of making like making payments we both pay stack and flutter wave right the manual and automatic ways of doing it right so right now the next lecture I'm going to teach you about the manual way of actually verifying transaction and then we'll now go into the automatic way of doing it okay guys so I told you in the last lecture that we're going to be learning two different methods manual and automatic and that's why I said this particular lecture is packed right and you're going to understand why shortly because we're going to move from less technical to very technical all right so let's go into this next next method now once you make a payment in so first things first we initialize a transaction in payack right and then we need to know if this payment was successful why because if you have goods or services you need to you need to give that user after they've made a payment we need to make sure that it was successful first now to do that payack will have to give you some kind of information that will tell you that hey this payment was successful or hey this payment was not successful so how do we do that how do we make that work right now the way we make that work is we can use you can just check it here verifi transaction we can literally confirm the status of a transaction whether it was true or false and we can see that all we need to pass is a reference and this is a get call not a post call because only getting information from pack all right but we can see something called part parameters now if you attentive you notice that this is called body parameter this is called part parameter which is quite different from body parameter now what does that mean now let's try and create that call that we seeing there so this is called confirm right transaction now it's time to put our end point what's our end point our end point is this now you can see something different here we don't have body we have something called query parameters now query parameters are a method of sending Dynamic content right Dynamic content in the URL of our API call right so what does that mean now this let me just add this this call is telling us that we need to pass a reference in the URL of this verified transaction endpoint now remember that when we made a um call here initialized transaction a reference was given to us if you remember you know 7p face tack automatically created a reference for us right now over here we can send that reference here and check whether the status of that transaction is true or false good so let's do that now now to make things dynamic in Flor flow like in um our API connector here the the easiest thing to do is this this is what I always do remember put in Brackets like this now once you put in bracket like this you can come to the qu parameter section and I won't call it reference remember reference is a key word in that you can't play around with it in like that so I'll call this ref ID all right now I'm just going to copy the same name has to be the same name same name here it doesn't have to be the same name that was here though because we are not passing the same name as reference I only passing whatever the reference you know um was that's what I'm passing that's what makes it successful this just like a keyw to tell you that oh it's the same thing supposed to be here though you know that we passing right what we looking for is this so we don't need it to be the same name all right that's how we can bypass this issue that we have in FL flow so we'll go to from variable now it cannot be specific value it's not going to work you need to go to from variable and still create a variable so you create a new variable and you see automatically that ref ID has been created for you and you can just select the data type that it's supposed to be this you have to create a query parameter and a variable too with the same name all right now it's going to be string because this is just a string of text as you can see it's not numbers only right and it always to use string so we go to response and test and we can pass the the reference ID here to check whether the um the call is successful you can see that even here too the um uh our API code or our secret code is also added automatically because of the group settings so I'm going to save this section here and I'm going to go over to initialize transaction and I will create another transaction um now I'm going to copy this reference here and let's go and check whether this transaction that we know have not paid for is successful so I'm going to go to response and test I'm going to paste it here sorry and we test AP cod as you can see we've gotten a a response back so the first thing we saw status true all right verification successful ID this domain status abandoned so we see that this status is actually interesting to get information from because we know that we've not paid this one says true it's quite confusing this one is telling us it was abandoned which we know is definitely abandoned so we can now you can see another one called Gateway response which saying transaction was not successful or completed so this to actually give us some kind kind of information that we need all right so I'm going to get access to the um let's look for the information that we need so from Gateway response number one um status number two this is actually cool um what else again so I think that's we take information from now you can browse through so you can see an example of a very long Jing um response that you now need to know the Jing part to get exactly what you want all right so I'm just going to copy Gateway response here and I'll paste it here and I'll copy status here too and I'll paste it here so now let's try and let's try and test if an API call was successful and let's see what happens so let's like that mean a payment was successful let's come over here and I'm going to use a smaller amount like's say 2,000 error and I going test API call and I am going to copy this URL here and this should work very quickly work really quickly so let's see um so face checkout loading success pay 20 n awesome so we just set for 20 Na and it went successfully now let's copy this reference from here and we are going to go to confirm transaction response and test we're going to paste the reference here and let's see what we get in these two Fields here so you can see successful success so we can check if status or G response is equal to successful or success then we can deliver our product or service now show you how that works later just stay tuned um let's save this now this is just the basic way that we can add pay stack payment to our app now let me show you something more technical still under the manual format right now in our manual format we have two methods we have um uh this thing it's called polling which I will show you I'll show you some information about it later it's called polling but it involves that we would um okay let me explain this right now there are two two two ways in which we can make p work in our app right we can create a method where the payment are done directly inside of our application which I'm going to show you later at end of this video and everything the payments are done inside of the app the user pays in the app and then every the verification is also done inside of the app we now so once has made a payment we will not because this is a link it's actually a link that we get back right so we don't want to send our users to maybe sometimes a browser outside of the app so we can work with um thr flow's um web feature so this is their web feature here um so it's called Web view we can work with it to to actually load a website content inside of it so we can just pass the pay URL here and then we can be making a call automatically using periodic actions right to check that verify um end point right this verifi section whether or confirm transaction whether the um payment is successful so but the issue is we have to keep doing it again and again and again and um it can cause some what we call rate claims which I'm going to explain later now the second method which is a bit better right is to send the user to an external web page in your app and then send the user back to your app with a link which I'm going to explain too so these are two methods then there's the last method which is FSE under automatic which um is more Technical and we'll go into that later all right so because we want to account for the second method where we send a user to an Channel link I'm going to duplicate this payack call here I'm going duplicate it and I'm going to say pay payments right so external link so this is space t payment to an external link right so that's to an external web page or something so I'm let me just let me even explain more okay so this is this is good now let me save it and we're going to go over to initialize transaction confirm transaction copy now in in initialized transaction there are things we need to do to make this particular session work or Feature work now the first thing we need to do we need to go back to initialized transaction and check for more information that we can send to it now the first information we can it is called call back URL this is what I told you about so we can actually um send um the user to an external browser with that link that is generated in the initialized transaction and then once the payment has been done and is successful the user will be directed back to our application right this is more technical than the other one this one is much more can be much more easier than this one so they are directed back to our application right with information that oh our you know our payment was successful right now the reason why I think I like this method better is because this one you have to and we will see that later you have to keep calling the verify or confirm transaction endpoint multiple multiple times because you're inside of the application and sometimes if you keep calling it that like an API call that many times it can cause issues because you know maybe to start rejecting your calls at the per for a period of time which you do not want you're doing it too frequently right and you have if you have a lot of users on your application doing that same thing with that same Endo with your secret key it can cause issues so you this but this method here only does it when the user has maybe made a payment or something or cancelled or something right it only does it when necessary not you keep checking it second per second per second now like I said you're going to see more information about that as we go deeper right so let's check this initialized transaction copy and um like I said there's something called call URL now fully qualified URL use this tode the call back URL provided on the dashboard now let me explain what this is so callback URL is a URL that you can tell or send to pack about your website or your application right that they can send the user back oh this is the page that they they want the user to land on when payment has been made so let me explain that again right so when you've made because let see look at this here when we generate the payack um link you know that this link here is to payack website it's not our own website we don't have control over it so we would want our users to have a page that is part of our website or our application right that is our own so that when payment has been made the the user is directed back to that website or that app and then we can you know do something or not do something you know make something successful or whatever we want to do right based on the redirection that has been done for our users and that is the what this callback URL does so let's copy the Callback URL and we'll go over to call definition go to body then we're going to add an extra parameter here so I want to go to variables because I want that callback URL to be to be um Dynamic awesome save now let's test it out so let's say for example um we want the user to be directed to Let's say Char GPT after payment has been made so I'm going to paste that link here I'm going to generate so let me delete and put mey 6,300 and um let's copy the link and paste it here enter so we say success pay and let's see what happens so after payment successful it should direct us to um chat or open a okay I'm not sure why it did not direct us back to open a ey but let me test again let's see okay so since it not direct us back I'm going to check uh here make sure that we did it properly go back here we did not add it oh I forgot so let me put this here I'm so sorry guys format save that was my bad so let's try it again [Music] um copy paste this here enter so let's successful transaction pay take us to see automatically taking us back to char GPT and let me show you something that is important important right in the link that we are getting here we not just getting um chats. open.com as we put here all right what we're getting is something different um payack is automatically sending the reference of the transaction all right and you know um so let's see I think they even sending it twice they are sending here TRX ref and they're also sending it here as reference also which is really really cool all right okay guys so as we can see pack we just sent we added a call back here so that mean after a successful payment on payack it should take us to a particular link right so let me just copy this link and paste into and ask you to explain what we're seeing here right can you you explain this link so because what we put in was just this we didn't put in this full URL here right um let me just say as a query parameter so basically here we have a base URL here and we have a query parameter right now let me try to explain this because I don't think is helping me out here all right now what is happening over what happened over here is pay stack automatically added two parts to this link what does that mean as they sending you back to your app or website or whatever they are sending extra information in the URL that you can actually use to verify whether the person has paid because right now you can see they sending 720 s which is I think the same thing that we have here 720 it it ends with 8 C 8 C so basically this is the reference the same reference that we can use to reference and check whether transaction was completed so they're sending it to your app and you if you can find a way to access this information here into your app you can actually call A a verify or confirm transaction whatever you call it endpoint and check whether transaction is successful which means problem solved so you can see it right so the only question is how do we send a user to our link to our app because we're not working with a website we're working with an application how do we send them to a link to our app and how do we get information from the link right in our application in flutter flow so that's the question I'm going to answer when it's time to actually fully build out this feature right the um this this second feature which is sending users to an external web page when it's time but for now we'll we'll Circle back to this question later and um you know that'll be later but for now let's try and build out the UI interface for this particular payment section here so which is the initialize and then confirm so let's say we have our app here and in our app we have the page called payments page payment and we have another page duplicate that will be for verify verify transaction oh it's not sorry okay so what I will do is simple I'm going to add about two Fields the first field is going to be um let's see label text is going to be email all right and I'm going to make the default text there initial value user at email right. as I going to leave it as then I'm going to duplicate this sorry um let me wrap it in a column because it's only it can't it can't work so yeah so let me click on the column and give it a spacing of 25 so this is going to be amount all right I'm going to move this I can put whatever amount I want amount then I'm going to have a big old button in the middle right so this button will be pay now so it's time to start working on it so basically what we need to do right now is we have these two FS that we need which is basically what you will need when you're building then we have this pay now button we're going to click on Open click on this add action here I'm going to say API call all right now be group pay stack payment initialize transaction then set additional variable so we need to send the information that we're going to need dynamically so first we need the email then we need the amount then we also need to pass the API key now in this section here where you working with API key if you saved your key in your back end in your in Firebase you can do a query you can query The Collection that you saved it and then pass it in the AP key if you don't know how to do that you can ask me in the comment section and I will try and provide description on how to do that but yeah that's that's what you need to do so I'm going to go and copy my API key and I'll be right back and I'm going to be pasting my API key here you can't see the full thing so let's go to the amount section and we're going to connect the amount section to the widget State amount and we'll connect the email to widget State user email.com awesome now once it is once the API call is successful now you can handle if it's not successful here probably can check the internet connection of the user do whatever you need to do here if it's not successful but if it is successful what we're going to do we're going to add an action right and that action is going to be to um probably send the user to another page but we have a couple of other things to worry about now the first thing we need to worry about is number one we need to pass uh um okay okay I actually did not do that now if you go and read flter flows documentation here sorry if you go and read PX documentation you can see that you can actually create your own reference as your own company for example now if you don't want P to generate your own reference for you you can actually pass your reference in the body parameter right you can pass your own reference so that's something that I do in my own projects but you don't actually need to do that um that's what I was trying to reference to um let me check let check our API call initialize we actually taking are we taking note of the reference okay so we just use whatever flter um payack generate for us right now it makes it easier for us so once the API call is successful what we will do is we are going to pass the user over to the next another page which going to be verify um transaction all right now the what we're going to do next is we'll add a parameter here the parameter is going to be ref ID it's going to be a string and we're going to confirm it good so what what is going to happen here is this we are going to pass the reference from this API code we get that's why we need we needed to Define exactly what we wanted to get from the API call so I'm going to go to action output because this is an action and the action has surely has a value if it was successful right so we need to go to action to get the value from it so API result can see the same thing for this one here API results we'll click here we'll click on Json body that's how we get the information that we want Jon part then we'll click on so you see ref ID so we can pass the ref ID over here now the next thing that we also need should also be the link payment payment link here that will be a string confirm and we can pass it here so the link if you guess it right will also come from the API results good now that we have done this we can go back to the other page and start building what we want so firstly we are going to add a web View and we're going to make the web view 100% now in this web view normally you have a link here to a website you want to view but in this case we are going to connect this link to the link the parer we getting from the payment link parameter on the page so that we can easily have a a unique paystack link always showing up right that we sending to the page all right now once we've done this you will know that in this particular page the same way we normally see pack when we want to pay that's what going to be happening on this page here so because Pack is not our platform we don't have access to payack we need to know when the user has paid because you know when the US has paid they should not still be on this page because they p we not going to show them any button that oh you're done with paying go back to the own page whatever they won't do that so we don't want to keep our users waiting so we want to automatically do something when they have paid right so what we'll do is that on this page here we can click on the top of the page click on the top of the page and we can go to the action section over here on the top of the page action action section now now this is how you can set automatic actions in flutter flow one of the ways you can do that now on page load once this page has loaded we are going to add a periodic action all right that and I think the best to do be after every two seconds that every two seconds verifies so we go to confirm sorry let me use an API call okay so I'm going to do a confirm transaction call then let's set the variables here um we need a ref ID which conveniently we pass through the page parameter we also need an API key right which I'm going to add shortly um Let Me Close go to the other page and click here open verify so let's Okay I'm going to go to the other page uh verify transaction open so this is how we can make it on page load is automatically checking so the the the periodic action is a way to to um activate an action right that checks that that performs regular um actions right or perform something regular based on the amount of time you give it so as long as this condition like as long as this periodic action is here it will keep performing this action until you set a condition that should stop right to keep doing it every two SEC every two seconds so your always need to be careful with the periodic action so that it doesn't break your up because it takes sometime it can take a lot of um you know um phone like it takes a lot of power from the from the device to actually execute these actions if it's on for so long right and it can affect you when you're trying to release your app okay um API transaction so let me just paste the key here okay so that's all we need to do so true um what we're going to do now is we're going to an action so now if this is true this is succeeded right now let me do something quickly we know that in the API call section here right confirm transaction response test um ref ID ref ID now once we make the call we check for status and Gateway response equals to successful so let me copy that text quickly so that we don't miss it successful all right so this what we looking for that Gateway response is successful but the thing here is if there was an error with this ref ID um we are not going to see any Gator response at all for example if I move R just remember that it's going to only show status true right sorry um it's like even this status is not showing I think there's a different status too let me check this status here I think I I not have added that one yesterday my mistake I I made a mistake actually so it's supposed to be dot status all right so this is false so you can see false but if it is true which is let me add an R here test AP the information I'm going to get back from it here you see true so yes let me save this so this is what I want to check right first if the response is equal to true then we know that it something you know happened right you know that means we know that oh we're getting some information back right so let's go back to because we don't have access to see this entire thing but I want to tell our app to how to interpret the information that is coming here so I'm going to go back to the main page here and we're going to go back to this actions here we're going to say that there's a conditional action and the conditional action is going to check based on a condition right um the response from the AP call let's see action output API um API response options Jason body Json part um Gateway no status here right so we going to look at the status and say confirm so if the status is equal to right you can say true or false so if it is equal to True right then we can do something if it is equal to false right right then we can know that oh this it didn't work right so um let's see we don't have to put anything here because you know it's a periodic action is going to keep performing the action every two seconds we don't need to do anything if the customer gets tired and doesn't want to pay they can click here and then just leave or you can deploy any other logic you want but we just keep checking and if it ever St equals to true then we can come down here and say add that conditional action and say condition all right and look we're going to check the API response options all right and check Jason body we going to check the Json part we going to check Gateway response and I going to check whether it's equal to okay so if the response is equal to successful so if it's equal to successful then we know that oh something happened here and you know the API call is successful so this is conditional actions in I think a lot of beginners have issues with understanding logic like this how it works to FL flow if you need help with it comment down below and I'm going to create a video a beginner friendly video for you so don't worry about that um so true once it's true what should happen for now I'm just going to say snack bar show snack bar successful payment payment successful all right great now on your own you can do any other logic you want from here for example you could create a new transaction record in your app so typically in Firebase if you're using Firebase you want to have a transaction record where you store if the user had a successful transaction or not or sometimes at the moment of of paying for the item before you actually take or integrate payack here or you call the API you can actually create a transaction record with a true or false statement that all you just need to do is um a true or false statement mean status maybe you can create something like status so you have things like amount customer name you know all those things then you have something like status which is a bullying field so if it it will be false at first then when they successfully pay you you can make it true just like this is happening so that means the payment is actually successful that's what you are going to do it makes things easy so I'm just going to put it for two seconds all right sorry and remember immediately add the other action here so that this would stop so you don't have to have this periodic action I'm working in the background and if you want to know how you want to stop a periodic action this is how you stop it um just go to stop periodic action and then you choose the timer you want to cancel all right so this is the you just name it this is instant timer just name it here and say you can say stop periodic timer all right and then it will still execute other actions under it so which is really cool but this is just the way you do it now once you've done this you this is how you successfully um create uh a payment in Pay stack using the first Method All right so let's test this out this method okay guys so we have our payment mode here so it's in dark mode so it's hard to see but I'm sure you can you understand what's happening on the page so we have the user email.com let's put it let's put an amount so I'm going to say 50,000 there right and we'll say pay now so this this account is in in Ira you can change it to your own currency now I'm sure we have some brethren from different parts and shortly I'm going to show you how you can actually change it but so let's see now you see it's automatically taking us to a page where we can pay and we're going to make it successful you know this this is just a test mode if you want to make it to onrun Mode still going to work so we just say pay 500 Na and boom so you see automatically we are detecting that there's a payment successful all right but you can see that it keeps bringing it up that's because I think my project inverted to an older version I was trying to fix an error that to do with Firebase uh what you just have to do is end the add action periodic action periodic action stop then you can put it up here other things can follow you know after that which is cool so just reload so yeah you can see that that's working now let me just address something two things I want to address so the first thing I want to address is that when you come over to the initialized transaction section for anybody who is watching me from another part of Africa or the world um what you can do to receive payments from other in other currencies number one make sure your P account was registered in that currency and you have access to International payments now P has there rules around that I think you have to be on the account for some time and sure that you're actually a real person you know because if you're working with International payment they they don't want to have the risk of you being a business that people are going to send refunds in your country if you're in Africa is not all the time that people ask for refunds it's not really a culture here but in the US and other parts of the world people ask for refunds a lot so you need to be prepared and P is trying to make sure that you're not that kind of business that people would would not be satisfied from so they you know they have their rules just read about it but once they giving you access you can actually do what I'm about to tell you right now so the here is a section called currency all right you can pass currency as a body and if I if I to do that quickly to just try and show you um sorry that's a mistake so if I'm that quickly let me go to the API section and open it up for you so I'm going to come to this section here go to the body and I'm going to put this that's going to be um I think currency let me just copy this quickly currency then going to have this um then obviously we have we cannot make it static we have to make it Dynamic so let's go over to variables and say say um ceny good so say it is string save this does not affect us in any way and we can say um amount sorry currency sorry then we'll drag it down there save now what that means is for example let's say we wanted to accept money now my account is not registered for international transaction this particular account is not registered for it so it's not going to work right but if I say this I want to receive money in Ghana cities um let's say test account it's not going to work say currency not supported by Merchant but if yours is supported is going to work you can say n GN and then we know that we're only trying to receive money in naira boom it's going to work we can say USD you know I don't think there's a particular page I've seen where they they mention how you must write the parameter but I think you should just write normal your normal currency parameters right depending on your contract and it should work so basically because I've done this I have to actually update it in the in the code there too where I built it so in the payment section I just go to pay now and um you know what we have sorry what we have what we do is go to the API call section and add on that value that value is going to be currency and this is just going to be ngn for now and because you can actually anytime you see this orange value you can actually set this from a parameter so probably you can adds a drop down or something of different currencies in your application and once they click on one it just update this field here and voila you can accept multiple currencies that is beautiful you know now fla wave allows you to easily um pay in different currencies it's more easier than pay stack but yeah let's just continue now we have seen this work if you want to switch from test mode to live mode go to your pack um platform go to payack once you go to payack you can easily um you can easily go to your dashboard where you copy your secret key and then instead of going copying secret key go to the live key and copy from there and all you just need to do is this section here where you put your key right um over here instead of using the test key SK test it to be live that's what's that's all you need to do all you need to do and people will be able to pay you you miss seeing all these test modes and everything here all right um so let me say so I want show another thing that you need to notice I'm putting 40,000 right now in naira I'm saying pay now all right it's taking me to the web page successful right but if you notice I put 40,000 Nair why is he only showing me 400 naira what's going on and now I think this is only for NG and this I don't know I've not really um checked for other Curren documentation but for ngn there is a particular rule you need to follow right so let's just pay this and let's see um good payment successful that periodic action should have stopped okay I've not reloaded the page all right so yeah now let me explain what's what's going on with pack and I don't know I've not really seen it in the documentation in a while I don't know where exactly but I've been working P for some time now in terms of integrating it let me see if I can find it um amount amount supported currency okay guys so the last time I was checking for this thing it took me a while to find it all I just did was I just typed ngn in the search bar here and I was able to find it um I can't believe I didn't do that the last time but I think if you click on supported comments it to take it down here and P makes use of the iOS 4217 format for currency codes when sending an amount that's why is a standard is a standard way of doing it that's why all the currencies I was showing were working right now you need to know that okay for coobo the base unit is co sorry for ngn the base unit is coobo for USD the base unit is sent for Ghana cities the base unit is p right for Z it's sent for K it's sent that's Kenyan Shilling so it's given on information here now you are going to have different currency um you know like you're going to have a different conversion based on your own um base units right but the first thing you need to know is what's the base unit of that like what's the amount of this of the of of the base units that will equal to one USD what amount of Cobble would equal to one NG that's the first thing you need to find out if you want to work with this thing right now the issue here is that um while not sending me see this one I think I put 20,000 or or 2,000 we're not sending the right base unit for p now not flave doesn't go through the same stress this is only payack a pay stack thing right let me address it quickly so let me go back to it so Bas unit and like so like I said for PES to send here send here to Kenan Shilling whatever you're working with find out how much or how many um or what's the amount of the base unit that will equal to one or amount of s that to 1 USD Etc so for for Nigeria now you can go to and ask that question it's very very very simple for for Nigeria 100 Cobo is equal to 1 NN 100 Cobo is equal to one now once you have mastered that you can see that they even giving you an an example here sending amount in subunit simply means multiplying by the base amount so like I said for example you can see for a payment of 100 na you would spend one um sorry 10,000 you send 10,000 as the base unit code so let me show you an example now if you see the example here sample request amount is 10,000 this is equals to 100 naira so what you do is before you send an amount to payack to make a payment with them you're going to have to um multiply that amount by 100 that's the only thing you need to do so let's pull up a calculator right now calculator and we are going to say if we want to send 50,000 naira right we are going to have to um multiply it right by 100 that's for Nira so this is what I meant to send all right this is 5 million so let's test it right now let's go to our test mode version here yeah so so you can see 50,000 na so just in to multiply it and if you wanted to bring it back okay okay what's let me just just in case you are you you are curious about that all you just need to do is you know divide sorry I made a mistake divide that amount that you got that so this is 5 million right divide it by 100 and you get the original amount back but you don't need to do this at all in P once this is the only thing you need to do that you have to calculate something special to convert whatever amount you're working with when p is sending information back to you they will send the actual amount you send to them so success pay 50,000 and boom payment successful done all right now let's go over to the um to to FL flow and let's ask ourselves a question how can we integrate this same logic in FL flow in a way that we're not going to have to do that again and again or calculate manually by ourselves right it's very simple now one of the simplest methods would be to come over to something called custom functions which if you don't know about custom functions we can talk about that another time but let me just give you the basis of custom functions right you can pass arguments that can be converted into a return value so for example 2 + 2 this can be number one number one this is number two remember I'm teaching local developers here people that don't have any experience flow so if you know this already you can skip so we have number one and number two so this these are numbers integers means numbers right you know this one also means numbers so you can calculate with them if it was string it can't work so we say we are returning back an integer and we can say something like okay um so this is a Code Pilot in further flow where you can you you can write code with AI so like I said all custom functions do is is a special way of Performing and it's performing some kind of logic in your app right that can be executed in the variables let me just see so I can't save it yet let me just finish it first so we can say addition addition all right so we can say um add n one to number two so it's going to generate a code for us code snippet that works in um fla flow perfectly so say copy function yes boom we have it here now if you're on the web version this is an app FL Flow app is only for Macbook so if you're on the web version you you you can be able to test this thing perfectly so I'm going to allow it to load up but yeah this code is going to work no matter what all you just need to do is provide the number one and number two and you would return the answer here so it's still loading up okay so let's go to it's not it's not showing yet I don't think it has saved yet so that's why it it takes some time to save from here but yeah you can test it you'll see a test version if you're on the web test this so you add the number one and number two you should get your integer back now that's one way to do it so if you want to this we can call this pack P um calculation all right and we'll come over here and say um multiply so we call this we can call this price whatever you want to call it you can call it that right multiply multiply price by 100 I just called the name there so once you do that it's going to automatic now remember when it comes to this a section if you're a beginner you don't know that you have to actually set this with this defined argument and the integer all this is you don't know you're meant to do that so that's is only when you do it that you'll be able to easily create um your your your um custom function that's the only is going to work so let's save the function and you can see you can use for different kind of calculations in your app so let's say we want to make a payment now we'll come over to this initialized transaction because that's where we're going to send the payments that we need and um let me just leave this page here that's going send payment that we need so let's do it quickly so we have amount here text feed amount so I'm going to copy this and let's use the let's see so we look for custom functions paste that calculation all right price is going to come from that text field amount that we had before all right we don't need any number value anything it's automatically calculated for us and we would have what we need so let's reload this page and I'm sure it's going to work now while this is reloading I will show you the second method quickly let me make sure that it works I'm going show you the second method quickly the second method is to do this simple step right instead of doing all of those things where you go to the um custom function section all you just need to do is we can just click on code expression code expression now this this is a one way to make simple calculations or just take it like it it for me I use it for calculations a lot you can do other things but I think it's majorly for calculations right majorly for calculations the other things you can do but still similar to C um you know custom functions it takes argument and is meant to return something back to you so you can calculate with it or do some other things with it too so for example we can say this is price this is faster price we say integer all right which are going to pass from the amount field and it's going to return an integer back and we in this expression what we do is you have to use the exact same name here copy this right the exact same name so you can know what which field is looking for or trying to work with I'm going to paste it here and we can now use this expression times 100 if it was plus you use plus it was minus you use minus check for errors if there are no errors then then you can pass it so I will not want any number format I say no further changes let me send it as it is the information it is and boom we should be able to work with that so let's test it right now let's try and reload our page again so either of the two should work so start periodic action so stop I'm not set what that's why I was still playing in the background then I have error errors found in custom functions so okay there's an error here um let's see I'm coming I think is this in is this null nullable values that is here because let me just see let me try and compile it again and we'll just go to the Code Pilot and say um add okay sorry [Music] um times the okay sorry let me just write this easily price times 100 that's what I just write very simple should understand what I'm saying sorry I don't I don't think I saw I looked at what I was saying what I did earlier so maybe that that's why they had the error so let's just um compile that so there's no error it was not the knowable field so let me go back here and we should be able to test the app so whether you're working with the custom functions or this method I just used it's going to work perfectly but me I think most times I always refer custom function when you're dealing with large calculations and things like that it handles it better in my opinion so let's say we want five or ,000 n right let's say pay now let's see whether it's actually giving us what we want all right now if everything works well we see that in the background it sent the right value for us success pay and voila we're done and this only should once cool so let's continue now in the next video I I'm going to show you the second method of actually working with um pack which is the other URL the the URL method where we sent to an external URL so that we don't have to keep calling the um the verified transaction Endo every two seconds it's you know when you trying to grow your and have a lot of users in your app at some point that method is not going to work so well for you okay guys so before I take you through the Section where we and let me explain instead of paying inside of our app we can make users D we can direct them to an external web page using the same link and once they make a payment we can direct them back to the app how do we do that just in case anybody is interested in that one um we'll click on enter screen and let me show you the basis of it now flutter flow has something called um they have something called parameters right parameters and let me show you what the parameter is basically let me show you what the parameter is so a parameter is on a page is this thing here page parameters parameters all right a parameters is what we see here and with a parameter when we use a link right to access our app we can actually send special characters or special information to that parameter is not I think most of us as no Dev devs you know working FL we only understand where we send information from one page pay now right sending information to this other page using this but you notice that it has to have the same name too right so you say oh I'm sending message to this ref ID or to this payment link but we can also do that with links to how does that work firstly you have to understand that fire um FL has something with Firebase called let's check um Dynamic linking so go to app details there something called Dynamic uh sorry yeah deep linking basically all right I'm sorry Dynamic links now on your own you can actually go and check the tutorial on fla FL about it but once you click on enable or use Firebase Dynamic links something happens all right something happens to your app so I'm not going to use this particular because I've not enabled Firebase for it I'm just I'm just using Firebase from a different application I'm going to teach you about shortly you know there's another application that I we that I worked on to for a lecture this is a bu payment app so I'm going to give you information about that later in the future right maybe in the next few days but for now if you go to my settings um see I have enabled Firebase Dynamic links so you see whether to use fireb Dynamic linking for this app see tutorial for more information so you can read any of this if youve enabled it now what do you should you expect if you enable it so to enable this feature firstly so remember let me just tell you why are we enabling it because we want to create a link that can send users to our any place in our app for example if somebody clicks this link right now they'll be able to take it it will take them to this app the homepage right and once it takes them here if they never downloaded the app to what this Dynamic link is going to do is that if if they click on it and they never they've never down downloaded the app it take them to either Play Store or App Store depending on the device they are on which is really really cool but right now we want to use it to take users back to our app so we are going to go to Firebase this is the same Firebase project all right I going to go over to Dynamic links and under Dynamic links what we're going to do is we are going to say um new now I've already done it I've already done this step so you can follow FL that documentation on it there they have a lot of information about it already but once you create you're going to be taking through a step to create a dynamic link once you've done that you have this here now you can copy this first section and paste it back in FL flow now if you have any error with these Dynamic links you can message me down below in the comment right or check my my number right it's been provided there so in case you need help right to ask question I I can offer help you know doing a booked section anyways so once you've done that now we've enabled Dynamic links in our app very very simple now the next thing we need to do is typically in FLA flow if you want to work with Dynamic links you click on this icon or any icon for example this let's say this is a share icon to share a link to another person right you click here and what will happen let me not even use that one let's use this text let's say this text is called share to share to a link to somebody the way you can work with FL flow is you generate you say generate generate current page link without this is not going to work so you can add a title you can add a preview image description whatever you need you also add an app store ID app store ID is when you're releasing your app to the App Store and other things there's a video that I will recommend that you watch if you want to learn more about constructing Dynamic links but once you do this you can now create or add a share action right that can allow users so you go to wiget State current page link and users can now share the generated page link now what does that mean it means that you can't go around just giving user this link like this FL flow needs to add some things to this link to make it work now some things that can be added to the link are parameters awesome now I told you does a lot of the work in the background but we're not going to use FL flows links we're going to create our own Dynamic link based on what we've added here like I said that video I recommended earlier is perfect you have to go and check it out and subscribe to his channel he's an amazing FL cont content creator right on YouTube all right now let's click here and you see so this is going to be typically your link right then you see this question mark here you can add all the parameters that your page is going to get up here you can add all of them and what what does that mean it means that whatever message you are sending to that page when people land on that page that is equal to or that looks exactly like what you have in this parameter here it is going to take that information all right very very simple now let's try and build this ourselves so I'm going to scroll down and let me see so you can see Firebase Dynamic link this is an example of a dynamic link here here this entire thing and this entire thing here is going to open up a section in my app where whatever page I want there's a but there's a way to actually construct the link now like I said that video would help you construct your own Dynamic links there's no special method to it but there's a formula that you have to use if you don't use that formula correctly it's going to break your app now firstly we have the base URL the base URL is this link that you got from Firebase at first then with a slash in front of it then the next thing we have is St which we can see over here so we have question mark it must look exactly like this question mark so so if you want access to how this looks I'm going to send you I'm going to post the structure in my comment section if anybody asks for it but first you have Bas URL then we have ST which is basically the name of the page you're trying to point to and like I said FL flow when you go to generate Dynamic link or current page link they do this automatically and they shorten it if you check FL flow here so this you are you are just trying to do the manual proc that FL flow normally automatically um perform you know in the background right if you check that link section that I was doing earlier there's a point to say shorten URL okay so let's go back so we have the the name of the page then we have another thing called APN so and APN it must look exactly like this so for example now once you have the name the link that you copied from Firebase question mark you will put the name of the page that you want to direct to so for example the name of the page here is home main right home main the page so that's the page that you want to use to verify the payment so let's say this is where I want to verify the payment home main all right so for this example here I'm going to create another page right just for testing Sorry keeps messing up so we say paste tack I think this what I was using before paste Tack and what I'm going to do is I'm going to put a um so this is called P right let's just let me just construct this page quickly okay guys so behind the scenes I on this project I added a payack um call so let me show you how it looks I added a payack call where the amount is fixed and the um email is also fixed here and uh that's what I did so so you'll notice that on this page I'm not adding any text field for amount or whatever but that's what I'm doing I'm just sending it as a fixed value the only thing I made Dynamic was the call back URL so once you click on pay it activates space Tack and let me show you how it looks now I'm sh you how I constructed my URL here do the same thing and it should it should work for you so firstly you have your link the link that you have so this is a combined text feature I'm sure you should know what the combined text feature is in Furlow combine combine text you can combine text together right so I'm not doing that right now so what I've already done that here so https you know your link then question mark St equals to the name of your page should be added here remember the name of your page should be added here then we have and APN so what does this mean this means Android package name but that doesn't matter you must have this exact same thing then this should come from right let me show you where it should come from it should come from the exact same name so even if you change it later it should have the exact same name that you have over here in the package name all right so let's go back here and check the next thing that we need that is dynamic should be the and isi right e this should be your um Apple ID for the app so when you've deployed the app to Apple you need to have your Apple ID here right that's what you need to do so some of these things can come from your back end in case you need to change them you can just do a quick query or a back end call to whever you store them in your back end and then pass it through here so you can be dynamic with it now the next thing is and Link equals to https then we have all these characters here then you also have to add your link again right I did not make the rules this just what you need to do add the end of the link again then you add the special characters again then you add the name of your page again I remember I did not make the rules it's just what you need to do right then once you are done with all of this you now put the final question mark and then on the other page you are now directing your users to whether it's a s like a a um whatever page you want your users to come to and Le and say oh payment has been successful that page is where you you're going to have to name so in this particular um app here the name of the page I want you still come back to is this same P page all right so I'm going to go back to copy so now let me delete this I'm going to go back to um pay stack and click on this pay here um we're going to go back to this section here and we're going to paste this all right paste T then we're going to come down to this section here to paste P tag there then we need to change this link from new select to our own link so this we'll go here we'll copy this come over here move over here click here click here click here open this page then we paste that link link here awesome now the next thing we need to also do is we'll come over here too and paste that link here confirm then we need to go to our Android package name and copy this come over here so you're passing all this Andro package names and the Apple ID so that it will activate that feature I told you about earlier that if the user has not downloaded your before they it's automatically to play store or the App Store all right then what else is any thing I'm missing okay so I think I'm done it's that simple now I'm not going to change this on I don't actually have an Apple ID yet so it doesn't need to change um pack so the next thing we need to do right now is we need to have some kind of parameter on this page that we can send information to so for example what I do what you do is I'll say ref I sorry we ID now remember earlier there was a um let me check your GPT quickly uh let me try and reload the page there was a link that we got from from flutter flow so from payack this was the link here this was the parameter because we had question mark then the parameter equal to this so we can also copy this same name because we can't use the word reference I love that P gave us two different names here in the query parameter I love that because flter flter wave doesn't do that and it's annoying that's why I'm going you the other method of constructing your own links with your own parameters but typically when when you send your own link which would be all with that entire link that you just constructed flutter wave um sorry P St will add automatically add even flutter wave will do this to the transaction reference of that particular transaction in the link so that you can query it yourself but we can still add it by ourselves too there's no h but what I do is I'm going to copy this reference here or parameter and I'm also going to add it did I copy it properly sorry need to do the exact name good [Music] string all right let's see good good good good good good good so let's just do something quickly now on your own whatever I'm doing right now should represent your logic that should the logic that should happen when they come back to the page page where they when they've made payment so this will just be font size will be 20 and let me duplicate this font size will be 20 so the um font weight will be 600 font weight should be 600 all right now let's go into so we say this is going to be ref ID ref ID all right and this is going to be the I think TRX sorry made a mistake oh my God the TR the T-Rex I think this one is from payack right this is the information from pay stack from pay stock so put equals to now we're going to use a combined text feature for all of this Fields here so that we can add more Dynamic variables to it so I say going to say you know ref ID equals to we're going to collect the information from the ref ID here and this is going to be um so let's copy this so we'll say um let's combine text paste this here and we say um you know it's going to come from this section here beautiful so when we first start our up this is going to be empty now the next thing I'm going to do is we're going to create a condition so just so you can whatever I'm doing here on your own you can replicate the same logic all right so we're going to go over here to where we have the color of the text all right this just my own special way of showing you what is happening um I'm going to go to com you know conditional value and that's how you can actually pass some kind of value this how you can pass some kind of value inside um you know based on the condition so basically for example you can change the color and you can you can add the value that you want to change the color to based on a condition so basically I'm going to go to single condition and I'm going to say if ref ID is set and not empty all right that means there's actually information in the ref ID that is being sent to the page normally we're not going to have anything sent to that to that ref ID yet unless is coming from that link so if that ref ID set not empty what will happen we have the success green Mark else are just going to have let's say a darker color a black color you know that's that's not bad so I'm going to do the copy this logic and paste it here too and what I will say is if TX ref let's click here TX ref confirm confirm confirm is set and not empty all right then what will happen is we're going to um we know that oh P has sent us some kind of information is going to be green beautiful all right beautiful then we also going to see equal to and then we going to see the reference that is actually pointing to which is beautiful also so now let's check it out and test it that it working it's working right okay guys so I just downloaded the app right now and I have uploaded it to my phone here which are going to see what is happening in real time with it but before that happens let's go over to this section and let me show what I did also um number one you don't need to make this parameters required at all you know it can happen occasionally that oh they going to be filled up with something or not right so just make sure your logic you make sure that you account for and FL does that for you for example if it's not empty or it's not nothing is there it to automatically default to this color things that that are not going to break you up all right that's I did that another thing that I had to you know work on was the root page I had to change this page to payack the main page that I going to be entering into the application and then finally if you click on the page here on the button I also had to launch create a launch URL action and a launch URL action is is simple you know launch URL it takes the user to another to to to to their browser it sends them with a link right and the link is coming from the API you know the response option all right so let's check it out so I'm going to click on the pay button right now and once I click on the pay button it's going to automatically direct me to pay stack okay good so once it has taken me to pay stack I'm going to directly to pay with card success pay 200 naira and automatically it should take me back to the app as you can see ref ID is has some information there because you can see that it's green but t t TRX from pack is equal to no so sometimes the the URL gets messed up so that's why it's always good to um create your own URL so let's try and you know fix this or check what's going on right now so currently we are checking whether right now I'm just going to totally disregard this reference from pack at the moment I'm going to disregard it um I've tested it out before it works but I just want to focus on this we ID that we're working on right now so what I will do is I'm going to copy this SE this D name and let's make sure that the name is exactly what we actually added here ref ID okay it then you can see that the ref ID here is actually empty that's why it's showing this it's empty here so what we're going to do is we are going to pass so let's do this so what we're going to do we're going to pass the ref ID of the um let's check so from the API response options API response options Jason body uh um Jason part URL sorry not URL sorry I think I meant [Music] to I meant to access the reference that we creating so let's see the reference that face is created I meant to access it sorry this is it here so once I've done that I can come over here and I can go over to the launch URL section sorry the API call section call back URL I think let's check whether we set it correctly yeah so we can come over here API response options let's see API response options ref ID so what we're doing right now is that whatever reference was generated from this API call right we are telling that we're telling P that the link that should be sent back to us should include a reference ID right that is equal to the reference ID just generated here now you you can tell that it's already working this is this is the logic behind it now I'm not going to go forther to test on my phone I'm just going to end this meeting right now I'm going to go forther test it right now so just you can play around with with it on your own just so that once you do this correctly it's going to automatically send you back to your app right with that particular link or that information and once you get it you can do anything you want to do with it so let me show you what I'm going to do with it currently so I'm going to copy this same logic here and I can go over to the start page of my application and click on cancel here so I just click here and we say on page load what should happen same thing as the other one right we are just going to automatically check okay sorry let me delete this so we don't need we don't need a periodic action here we just need a um a conditional action that on this condition that ref ID is set and not empty that mean you know that we are coming from a link only if we ID set are not empty else you can do any any other thing you want here if you had other things you wanted to add to the page but if it is set and not empty and it is true we can add an action and that action will be an API call that API call is going to be um a you know let's see I think we have P group here I I called it verify transaction all right so we can now do a verified transaction API call as soon as the page load was done and then the ref the reference is going to come from the ref ID that we getting because we know set are not empty and once it's successful you can now employ whatever you want to employ so I think typically um if I go back to this verify let's say transaction I go back there and we check the um response and test Let's test it out so you see successful status is equal to true all right now for me I think I I majorly look for this status equal to success but let's try and test it so if it was empty let's see what comes out status false so I'm going to pick from this status first right this I want to pick for let's check whether what it shows when is is [Music] true so this status shows true all right so now we know so we check whether this status is equal to true and then we can now check for Gateway response equal to successful cool so we can check for um now you can you know you know what to do already I'm just going to save this step all right on your own you can do whatever want to do I'm just trying to make sure that this is complete for you so I'm going to go to this action section here go to open and yeah so add conditional action you are just going to check if API response you know I think this is the one here ND you can always name them yourselves API response options Json body Jason part status is equal to true so if equal to true you can perform whatever action you want to perform maybe like for example you can check now one of the methods I use is this same ID that were passing along that doing all these things to what I typically do is that on the pay section where user is supposed to pay I will create a document right now what I normally do is I think in this app I have I have something so create document I'll create a document called transactions so let's see users transactions and I'll add all the fields there all the fields I need and I'm sure that one of the fields will also be reference so let's see reference ID all right so that ID is going to be so from variable is going to come from that reference ID that we are trying to pass that's coming from the API response so let me try and copy it we know that the sorry the AP the the reference ID coming from here that is coming from the API response I'm going to fit it into this reference ID here boom so I'll f it into the reference ID and I'll do it before the launch URL so I'll add all the information like the customer's name customer email all those things the customer's uid like the user reference I'll add it all I'll add it here then once I'm once I'm done so let me I I'll delete everything here let me just delete all this entire action because I'm done with it but once I'm done on this loading page here let's see I'm going to check if the reference ID are not empty and then I'm going to make a backend call and check whether the the call was it was successful if it was right what I'm going to do next because this is this right now call is successful but even though the call is successful we still need to know the status whether it's true because a successful call is still a successful call it can return failed or you know true at the same time so once we check that the next thing we can now do is that we can now query we can query add a query collection right we can query collection for user transactions whatever you name it in your own single document are going to query and check for ref ID equals to equals to the ref ID we getting from this reference the page parameter so we're going to look for where it and then typically as just as a layer of extra security I can say where you ID that U ID equals to the users the user the particular user or it can be email whatever you're doing in your app so equal to that particular user that created it so check for um user Auto you know uid so I checking for that particular that made whether is that particular is on that page so we can be very very sure you can name the output you know user found soorry transaction found transaction to verify and once you do it the next thing you can do is that once you've gotten the information you can now update the document so I can say update update document all right so what am I going to update I'm going to update the action output you know transaction to verify reference right and what am I going to update the I'm going to update the there should be a status I normally add status to true that means this user has actually paid and I can do other things in my app based on this logic after I verified now still do add some actions if it's not correct whatever you want to do on your verified um payment page I don't want to mess up up my app so yeah that's the second method now we're going to go over to the last method the most um the most advanced method right and I will explain what that method is in the next video but just know that this same method we're doing here we can also take it over to flutter wave and do the same thing and at the end of this video I'm going to show you how you can do snippet of how you can do it with flutter wave too okay guys so right now we've learned a bit about the different the two different me to actually have payment in an app which are you know you can click on pay and direct them within the app or direct them outside the app to a web URL and bring them back once they have successfully paid which is really cool but I'm going to take you to this documentation in payack and it's the same thing with flutter wave but you need to understand something there is a more Superior method to verifying payment in our app because of different issues like network issues you know pending payments things like that there are so many things that we have to look at when we are accepting payments from payx so the two method I taught you are not bad right but this one is more Superior and I'm sure that this is this is a lecture that you don't want to miss because normally people talk about this thing and in the web development space web hooks are very important to make external apps talk to your app automatically so right now what is happening here is that once a user makes a payment right we take them within the app and manually we keep checking it's it's still a mon thing even if it's automatic you're not doing it but it's a monor thing our app keeps checking the verified transaction end point keeps checking it asking P offter wave has this user paid and if it is true then you now give them the services if it is not true right what how do you what how do what do you do right what if it is what if they make that payment and um the the money has not reflected yet but it's successful if issues network problems like this happen all the time so we need to think about something like that right that's why we books are more Superior now if I come over to um this picture that from from from pack you see that the way polling they call it polling and we books the method using right now is called polling right so polling is where we keep we make a payment process um to payx server and then we keep checking PX server every few seconds or every 1 hour whatever amount of time you want to do it there are more advanced methods than even this method that every two seconds are doing it you can do it every 1 hour you keep checking right now the thing here is is you keep asking their server any any update and until you get an update then you now say yes which is a really really um let's say it's still a very manual process right and there are some issues with it let's read some issues that P talks about number one the mood of updates so the modood of updating your your information on your back end that um this user has paid is manual is a manual method because we keep checking we keep checking we keep checking you know that is is manual then the second thing is rate limiting now at some point if you have a lot of like if for example now I think this is not the app that we working with before let me quickly go to that app I'm coming I think it's so if we keep calling the end point the transaction endpoint every two seconds every two seconds every two seconds every two seconds right at some point you know let's say we have a lot of users a whole lot of users are trying to pay us at that period of time you know rate limitting states that you know there can be a point where the API will no longer respond um to your request so quickly it might not respond it might lag or something you know this man method is not always so reliable there sometimes you call an API even GPT and other platforms that we connect to that is not just going to give you a response there are just moments like that where there's a network issue or there's a downtime or something and this get request can fail you that's why for very big application when starting it's good to start with this polling method it's not bad everything I thought you is valid but over time let's say you are growing you have a lot of users you do not want to use this method then impacted by scaling just like I said this is impacted by scaling the web hooks version is not so if you have if you start having a lot of users coming to your app and this you are still calling this verifi Endo right through your your your your secret key at some point it can fail you that's what I'm saying so right now when you're starting you can start with this but later you have to upgrade to this that's why this video is very very helpful so you can read more about it so polling requires making a get request at regular intervals to get the final status of payment for example when a customer makes a payment for a transaction you keep making a request for the transaction status until you get transaction status with web hooks the resource server payack in this case sends updates to your server so whether is p FL wave P wave by themsel will tell you whether this the event is successful or not so instead of you asking payack oh is this transaction successful as soon as you create a transaction once you've done it P could tell you ah a sucessful payment was made at this time they'll give you all the information that you need this is way way way better now not only P does it many other API platforms they use we books to talk to your platform but how do we set this up now this is where is a bit more technical so just to go straight into into the meid and bone of this conversation we're going to go to a platform called R right because firstly before we can work with web hooks if we scroll down we need something called a web hook URL right same thing with FL wave too a webbook URL is simply a post endpoint that a resource server send update to so we just need a URL that face can send messages too all right now let me show you the best way to get that URL for free right right for any of your applications and then if you want to add more apps to it you have to pay so go to row all right and click on the first link that you get now this platform is going to save your life when it comes to building up the F flow it gives you a lot of superpowers right but for now we're not really going to talk about all of that we're going to talk about the web hook side of things all right so the first thing you're going to do is you're going to sign in now for this to work I just have to tell you your Firebase account has to be on the Pro Plan so let me show what I mean so um Firebase let's go to firebase.com I'm going to go to console and I am going to log in to um I'm coming uh which one I let me this one so your Firebase account has to be on the Pro Plan and you can see this is on the Pro Plan currently now you have to add a card to the pay as you go model so that you can actually work now if you're in Nigeria you find that it's not easy for you to actually do this you need to have um a a dollar card for this to work all right if anywhere else you can easily be able to pay I'm sure but always use a dollar card if your normal cards are not working right that's the best way thing to do you can go to a bank get a dollar card and you'll be able to do this okay so once you've done that now you can go to RI and now R would allow you set up your application now there are videos on this on how it works but simply you can create a project all right I'm still I'm on a free version here so I can actually create new projects let me see if I can actually um use a different account to sign into R probably let me see um let me use this one so let's check Rory and I'll click here I want to sign in okay guys so I've already logged into RI and before I go back to R let me just try and give you like a work through of what Rory is all about I think I explained it earlier but I still need to help you out for those who have never heard of Rory before um sorry now RI basically is a low code back end right it allows you to manage your database in a spreadsheet UI now this might be a lot of of information that you might not understand but basically um if I go to Firebase right now Firebase and I sign into one of my accounts you'll notice that for me this my own opinion and I don't think it's only my own opinion if not RI will not be as popular as it is right now but um a lot of people even no and NOCO developers and developers also do not like the way Firebase um you know working with fire it is to view your da in Firebase it doesn't look so intuitive right now you know this is how your data looks in fire base and I think it can be better right it can it can look better it can be presented better and that's where R comes in R allows you to manage your data in in a in an interface that is much more interesting much more exciting to work with ITC then you can allow you to manage much more backend um you know powerful Solutions like Cloud functions which I'm going to talk about in this video also because Cloud functions needed for this for this particular step that we're going to make but I'm going to show you something about Cloud function that you can do in FL flow that you will not have to write any code at all for anybody that knows what cloud functions are if you don't I will take you through the entire step that's why I said is a more complicated step okay so he said um anyways on your own you can read more about R but let's go into it so I've signed into R they're asking me to create a workspace and typically you can write whatever information you want to write I'll just say next just me 225 for example you know um database CMS just WR just feeling whatever you want to feel in so you can see an example of how you can represent your data from Firebase which is so amazing all right but now one of the exciting vesi gives that I am more excited about than any other thing is the um the ability to create a web web hook URL right for free right so let's try and do that right now as soon as we load up so you have to create a project you have to connect R to an existing project probably a Firebase project or mongod DB or post post g c right you give it a name you connect it or you can even create a new project from R which you can also do in Flor flow but once you've gone through all those steps you'll be you be you will see this and right now I've connected this account already called bills all right now what will happen is that all your existing collections in Firebase would automatically be shown in Rory and you can set them up what so when you set them up you can easily be able to view the data the way you want it do whatever you need to do ITC which is really cool but where um I'm more focused on is how you can create the web hooks right so it's quite simple first just go to create a new table all right then you you give the you give a a name to the collection for this collection we'll call it um I think let's call it I think normally you can actually select from one of the existing collections but we don't want that so we can say create collection or use custom part so we'll call this one pay pay lesson so we know where we're coming from lesson right Now display table name all right just call it whatever you want to write what you want to call it this is just the unique um name that you're going to be giving on for each document that you're working with then we can just say create I'm sure we can just skip all that we just want to create pry quickly so once we've done all of that you can actually import data if you already have information about this collection if you don't know anything about collections in fire B this will be hard for you to understand but you can also comment down below and I will try and create a video on that later but you can import that you can do or you can just add a column and I'll choose to add a column here and a column typically represent one um a field of data right a particular field of data that's what a column is going to represent so um for example now maybe a column for API calling code here or if we have something called users it can be a column for the emails right the they maybe all the users emails or all the users phone numbers you know it's that's how it's going to be represented represented in rows and columns like a spreadsheet so basically for example now we can call this one just um um status right um You can call it anything you want and then you can represent that particular data in any in any field like you can represent as a short text URL email it's the same thing as when you're in Florida flow you go you go to Firebase and you try and create a collection it's the same thing right once you create a collection for example let me just write this fom collection and you say start from scratch you add the name of the field you want then you determine how you want to save it but here you have more options right so that you can have a nice way of viewing your data but that's not what we're talking about right now you can do your own research but for this one I'm just going to I'm going to save it as a toggle which is either true or false status is true or false so that's how I want to save it I just add it now we have an entire column so anytime a new document is added here a new document added to the to that collection we're going to see the status here so um add row add row means to maybe most times to create a new document or a new entry all right so if I if I do this enter through I should see in Firebase a new um collection called pack lesson I should see here yeah so you can see I didn't have that before pack lesson so it's automatically updating fire Bas with that information so see um it created an automatic um you know reference for me ZZ z z z z y automatic but this how they they created it for me and then you can see status is equal to true if I add more Fields there I'm going to see more information so for every single I row every single document you add so you can see so it's supposed to be true I believe so every single document you add so you see there's another one this one is z x all right it has to be a unique reference so you can know this document is z z z z z x this one is z z y so that you so you can easily be able to reference and get information from it but that's not talk about you can see that oh I'm able to update it quickly here now using the same power that I already G gives us we are going to try and update so once you've created a you have to first thing you have to do you have to create a particular collection a new collection that is not you've not created before right once you created that collection inside of R you're going to go up here to web hooks all right and you're going to add a web hook you choose you choose basic all right then there they're going to give you a web hook with the name of that particular collection you just created all right so you can copy that this webbook here but first you can't you can't enable you can't enable verification for it this you can't do that just go to um you can say option you can write a function that means if that the web hook should be called should be processed leave the function to always return true if you don't want it to um write additional logic so you can just leave it right there other ways in which you can you can do whatever they're talking don't worry I explain explain what's going on don't don't get too scared okay I saying code let's just add the um webbook URL right now I'm coming trying to add it where book endpoint is okay so let's call it a name we can call this P tack lesson lesson web hook add so once we've added it all right we can copy the web hook and what you need to do is oh my God sorry I made a mistake um what are they saying no keep save and deploy so we have deployed that web hook right now very easily then we're going to go to pay stack all right we're going to go to payack or flutter wave flutter wave also has their own method too we're going to go to pay stack so I'm in payack here I went to pack.com I signed in to to my account and if you want to know how I got here this a test version of my account you just strugle to test uh you go to settings once you go to settings go to API and where books you can see where books here then you can go and paste the link that Rory gave you in payack once you do this any single time you make a transaction right and it's successful or it fails or transaction was reversed um they going to update you so let me give you an example of this so let's go to web hooks first before we see another information we can scroll down about it now there's something I want to tell you here I think both face and flutter wave um there is a this is a technical thing though but typically before you get a when you get information from a web hook it's always good for you to verify the origin of who sent you that web hook because there are people that if they ever that's why you need to secure this your link this link anybody can right now the way it set anybody can send messages or information to it right somebody can anybody even knows anything about programming or how P sends information can actually try and do as if they are paying you and then send if they have access to this link right and it is open they can send malicious requests that they made a payment and try and you know scam you right so you need to be careful while working with this number one secure your web hooks don't show it to everyone this just a test version I'm not I'm going to delete it after this that's that's one number two you can try and study more about this secure um you know securing your web Hooks and everything you can study more about it now this is a more technical area I'm not going to talk much about this right I think I think flutter waves version is much more simple it's more simple than this method here but it's it's it's easy all you have to do is just read more about it and understand what they're talking about right now we're not going to go into this right now let us go into the meat and bone of it now now these are the kind of messages you can get from your we books automatically from Pac now for example if a customer identification failed they can send you message automatically if a customer identification was successful dispute was create was created dispute reminder dispute resolved you know um invoice created invoice filled invoice updated payment request um pending right somebody asks for you to pay them payment request successful refund fied refund pending refund process you know and many more but the one want right now is transaction successful when somebody makes a payment and it's successful this is how it looks like this is what we get then when somebody um when a transaction let's see a transfer is reversed these are another I'm always concerned about so if somebody is transferring money to an account and I used this trans transaction or transfer feature in a an app I'm going to teach on this my platform very soon so just stay tuned and make sure you subscribe so but in case somebody transfers money and then money is reversed or something you can also get information about that right so so these are all the things you can actually get in terms of you know um events from P you can see all of them payment request. pending you know all these things are here transfer success transfer failed transfer you attended as failed and so on and so forth now I'm going to tell you how why this matters but firstly let's go over to paste um to our API section and create a payment so I'm going to go to pay stack payment all right let's see um initialize transaction response and test test API call so firstly we'll check this our paystack lesson let's reload the page a bit and check it past lesson only two documents are here true and false now I'm going to delete this entire collection so that we we can understand what's going on and I'm going to go back to payack and sorry to our FL flow website said currency not supported by Merchant okay sorry I forgot ngn so I'm going to click on test API call and now let's let's make a payment through this link okay I think the last time it didn't work so I'll just say 20 sorry okay 20,000 that should be like 200 I believe so if I'm not mistaken so or2 so I'm going to copy this link I'm going to paste the link here and I'm going to remove this and I will remove all of this enter this and and it's time to make a payment so it's going to load up a bit and once it's done once it's done okay this is T N sorry once it's done um we'll click on success and pay ngn all right so once you've made that payment automatically let's reload we should see that pay lesson a message was created and it's really really fast really really fast can see we just got the message from P that this transaction was successful so you can see charge. success and the rest is history now how does this help us in flutter flow how can this help us make automatic do things automatically in flutter flow let me tell you just wait you're going to love this but firstly let us go over to um FL flow and let us add this same um you know we can add the same um line or the same um name of the collection right can add it in FL flow so for example you could click here and you could do something like this you could still add it let me show you you could come over to F flow and add the name of that collection to so let me just save okay I've saved it so you can add the name of that collection too you can call it past lesson all right and if you want to add or you want to access any of the um Fields here you need to write the name of that particular field in flutter flow that's how you're going to do but we're not really going to use this field you know in flutter flow yet we're not going to do that we're going to use something called Cloud functions to do whatever we want it to do so let me show you what we're going to do right now we're going to create a collection called test transaction and it's only going to have three Fields the first field is going to be the username username all right that will be a string okay second field is going to be um email that will also be a string the third one is going to be um reference and I explain what I'm doing right now that Al be a string then the final one will be status okay amounts okay there are two more amounts that will be an integer final one is going to be status that will be a Boolean that would be true or false all right so what we're going to do here is this once a user tries to make a payment we're going to create a transaction a transaction record that shows oh this user just tried to make a payment here so we can have it in fire base right now what I'm I'm going to tell you is let's just talk about Cloud functions right now okay so what are Cloud functions now if you are just starting with fire and fire base and flutter flow you need to know that flutter flow is limited in one of the things that really limits flutter flow is that um and it's not flutter flow it's flutter the is the framework it's a highly client side language and what does that mean it means that typically before actions happen a user has to click a button a US has to be on the page is has to be on the app before actions can happen automatically even for automatic actions like verifying transaction where we put a um an auto you know a a periodic timer up here to automatically check whether the transaction is successful it's not automatic still because the user has to be the definition is just here on page load the user has to load the page for the action to work now it is limiting because what if you want to integrate actions that while the user is sleeping things are happening in the background right you know and there are many more things that you might want to do with it let's say you want to update 50 different records at the same time when one record has been created there are many things you can use cloud functions to do all right now let me go to F's official documentation about Cloud functions and you can see more information about it Cloud functions FL flow now Cloud functions allow you to run backend code in response to events triggered by Firebase right features and HTTP requests for example you might want to automatically send a welcome email to users when they sign up to your app right now let's say you want to do that where oh because right now in if you want to do that kind of thing where user is signing up to your app they have to click a button to sign up then while they are signing up in the action tree you now occasionally add a an API call to send an email that is beautiful but that's not perfect you can still do better you know as you upgrading your skills as a nood developer all right now let's go back to the documentation he say so we we allow so now for actually has a feature here that they released recently which I was praying for you know when they were actually doing their unveiling recently that was like some months ago where they where they can allow you to write Cloud functions inside of flter flow the issue with Cloud function is that you must know JavaScript and typescript and that was something I always used when I tell students that oh at the end of the day you must learn how to code you know so you can do things like this it was always it will always put you off it is annoying because you know that no code um that no code fever would have to die out that period of time that oh I can't actually do this I must make my users click on a button before things can happen right and that a last the final example I'm going to give you is um imagine there are some apps I've seen there's a particular app that I saw right send a message to your future self all right now this this app future me allows you to write a letter right right now once you write the letter right now you can send it over and tell it the time you want um the letter to arrive to you to you maybe 6 months from now 1 year from now 3 years from now 5 years 10 years from now you could even choose a date right you could you could you can you could make it private you could make it public you could enter an email Emil address and you know send the letter all right that's how it works it is a really really cool app now this for this app to work it needs to handle the information automatically because once they click the button it need that information has to be stored somewhere that at this so so date do this for me now such a feature you can't do it in flutter flow without having something like Cloud functions run it for you these are things like this you need to do things in the background now this is where you now start upgrading your skills like I said for example now also FL flow has linked you to fire base because Cloud function is a feature of fire base right it's actually a feature here if you if you come over here you see something called functions I think so um and basically you can deploy functions to so you can see I have some functions I've deployed here you can deploy functions or or some code that would run right any single time automatically even while you sleep that I'm trying to run it home for people who don't understand who have never been exposed to these things so these are things you can do and it's an amazing thing something should aspire to do and I'll tell you how you can do this without writing any code at all which was which you have not heard of before right and this is one of the first time I'm talking about this and I talk about in another class that I have on the B payments app I'm going to be talking about soon but you can see an example right you can do things automatically you can come and read some interesting use cases here there a lot of interesting use cases here a lot of so you see so for example a user uploads an image the image is stored in storage as as soon as there's a new um image stored in storage the functions are triggered automatically functions start working and what it does is it downloads image to um download image convert to thumbnail right right location upload thumbnail then download thumbnail I I'm not sure what's this app for you can take advantage of cloud functions upload the Google Cloud resource intensive work right running it on instead of running on your user's device improving the responsiv of your app for instance you could write a function to listen for images uploads to cloud storage download the image to the instance running the function modify it and then upload it back to Cloud functions right to cloud storage sorry your modifications could include resizing cropping or converting images call some so for example now instead of having a lot of heavy load on the front end of your work right where in on like on most times when you're doing all these things that users have to click a button that's what you call client side there's what you call client side and server side server side means back end client side means front end all right that's what it means so for example now once a user clicks on a button automatically things start happening but it's still on inside of the app it must it's part of the app right but right now we want to do it on the server to make things much more easier all right we're going to be using fire bases or Google Cloud servers for this work so like you can see there are so many things you can do with it another example that they have here is um GitHub and if you're not if you're know developer you might not really um flow with GitHub yet but yeah so this are you can come and read more information there you can ask GPT and say what are nice examples I can use cloud functions for but right now I'm going to actually practice with Cloud functions here so we're going to skip all of this because fire and FL also requires that you know how to write code in JavaScript or typescript before you can actually do it see they hav G me all the code here but what I did was because me I can't actually write code in JavaScript and typescript and I have some courses on it but I've not been able to learn because of a l i have had a lot of work I have a lot of work to do I've not I've not really had time and I really wanted to be able to start building Cloud functions so what did I do now what I did was I trained a chatboard so I'm going to go to play playground right. open.com I I train a chatbot now yeah I'm also training a chatbot on custom actions you know custom widgets to that that will be coming out soon but I'm not sure when but I was able to create a cloud functions helper that automatically allows you to write Cloud functions without writing any code it allow to be Cloud functions now I have a particular um now let me say this here um this is an assistant playground section of openi it allows you to automatically upload files right it allows you to also write an entire script to to instruct your assistant on what to do and I I uploaded a lot of data here of past conversations I've had with with charp about building Cloud functions that would work for flutter if you go and just write bu the cloud functions on 10 out of 10 times if you don't know what you're doing and you can't and paste it here it's not going to deploy to it's not going to work I tried it it didn't work right so I had to tell it specifically how it should work what and what it should look at you know make sure that it also logs in errors to if there's any error for me to be able to debug it well without having any coding knowledge of JavaScript or typescript I wanted to be free from all that stress and this is what I did here and you can also do it too you can try and take documentation from flut flow on the cloud function section you know you can even take things that because right now they also say to avoid deployment errors do not call admin does initialize app this something that flut FL automatically does now you might not you don't need to know what this is you can also try and instruct it do not do this also once you you put instructions like this into your CH so look at this it is it here playground platform. open.com so come to open open AI not Char GPT open AI you can even use Char GPT too you can try come to open AI WR create an assistant you can check more information about it online and send post all the information about the documentation about Cloud functions there and try and chat with it it will take some time then you enable code interpreter right it will take some time for you to understand what you're saying and what you are doing but then the trick is that you should stick to one conversation threade so if I say hello all right it runs and it runs a script it not it's not a noral Char GPT it runs a script that checks whatever you've uploaded whatever file you've uploaded and um whatever instructions you've given it it runs those scripts which is it can be heavy sometimes it can also impact how much you have to pay because if you check let me show you something usage um I was when I was trying to train the chat bot on um building um custom widgets I I it went up up to 20 something dollars within a day almost I think $1 that day that was 12th of December so but normally when I'm using when I was using for cloud functions alone it was it was not expensive at like $1 $1 I wasn't spending much at all so you have to put your card for it for it to work with it it was just like $1 it wasn't expensive at all but the I was working with custom wiget because I was uploading a lot of code a lot of information it shut up and I'm meant to pay this at the end of the month so you have to be careful with that when you're working with this but this one is very very light it's very easy all right very easy so once you click on code interpreter you can start chatting with it keep training it keep training until it's what you want now this is one Trad now once you like the particular trade that you're working with so you can save the information you can just copy the link and then May paste it in your notepad all right so anytime you want to come back to click on it it will take you to that chat trade and you can continue chatting with it now why do you need to have one chat trade and not um a new assistant trade again and again because the more you chat with the assistant the more it understands and learns more about you right it is really is more powerful than the normal charg in my own opinion that's why it can also impact your the cost sometimes if you have a lot of data and it keeps going up and down right so if you have like if you feel like the amount of messages you have here is too much you can copy all the messages and go and paste it in the instruction so you can say oh this is my past history with you and this is all the corrections i g i I gave you paste it there and you you know that's that's the way you do you'll be able to create your own assistant which is cool now if you want access to my own assistant that I I spend time creating I spent hours creating already so you can build Cloud functions with no code you can check my um you can check my patreon community right you subscribe to patreon and you'll be able to have access to it or you can contact me I can build it for you I'll charge $50 to build it and then I'll teach you exactly how to do it within one hour that would be cool okay so let's continue now let me go to my own Trad the Trad I was working with before because that trade is smarter than a new trade it already understand it understands more than opening up a new trade so let me see if I can find that note coming um yeah as you can see I have a bunch of things i' you know gone back and forth with it and it builds out it spills out perfect Cloud functions I can copy and paste in FL and I talk to it like I'm like I'm a child and it it it teaches me things up to the point I'm able to understand you know a bit of um of JavaScript and typescript without having to go to any class at all just sh in the chat but I'm building powerful Solutions at the same time all right so let's jump into it now what I'm going to do right now is I'm going to write a script right in Cloud functions that is going to do something for me so let me show you what's going to happen now one of the things that we need to not is that cloud functions can execute based on different methods there different methods you can make a cloud function run automatically without having anything happen but one of the meth one of the most basic methods are on create on updates and on delete so what does this mean now let's talk about uncreate it is it applies to the same for other other methods too so what this means is that any single time a document is created any like you have to specify the document you want right any single time any document is created in fire bit in your fire store in your in your database in your back end right you can make the cloud functions run you can make it do something you can make it perform in a certain way that's what what it does that's that's how it works so if you trying if you're following me what I want to do here I want to monitor this account sorry this um payack lesson this this what we're using as our example and because of R any single time a a successful payment comes in right we're going to check this charge do. success section let me show you so you go tobooks you see that charge do success is when a successful charge was made so they're telling us how we can know so anytime there's a we a new payack lesson document is created and that payack lesson document has charge. success then we can search different fields here for example how much was paid we can search things like that and once we search all those things we can now create a new or update an existing test transaction document automatically so instead of us maybe when somebody pays by ourselves we'll be checking um manually to check whether the payment was made and then we now update our transaction document that status is true we can do it via Cloud functions automatically so we'll just be checking and once it has the payment has been made automatically by itself we're going to update that status to true so let's test it out right now let's test it out so what we're going to do right now we need to know exactly what we want so using my cloud functions Builder what I'm going to say is that I'm going to describe to it very clearly what I want so on document so this something I will teach you if you if you want to hire me to build this Cloud functions for you it's $50 in one hour I'm going to take you through the training of how to actually do this yourself so yeah you can contact me down below my number is down below so on document creation right on document creation of the you can you can say this anyhow there's no method to it just make sure you describe it well so on document creation of the of payack lesson or you can I can make it more simpler right so you can you guys can you can understand when a a new I'll put it in bracket always good to put it in bracket so you can know the exact name when a new P tack I move this section when a new pack lesson document is created right search the now this is where it gets technical a bit right this is where it gets technical so let's let's let's break it down okay so when I'm talking about technicality right now let's look at this data field here what we're getting here now if you look at a a a a section or a document like this one for example let's say um this one top of P purchases right or let's say users for example you see it's straightforward we have balance we have email we have phone number we have uid SIMPLE Fields very simple so if you want to update balance you just have to to update balance you want to update email we have to update email it's really simple but in F flow or in Firebase there's a much more unique way of storing data right when you're dealing with Jason and that way let me show you an example P lesson this is a method right and that method is where you have a field and that field can have you know an like more information inside of it that's best way I can say it it's called a map see this an example it's called a map now for those who work with FL FL a lot that method of storing data will be called a data type and if you don't understand it you know maybe later you can ask questions down below and I'll try and explain it but basically it's a way of for example now we can say um if I wanted to represent this section here called authorization in FL FL what I would do is now that means I have more information down below all embedded in one in one field right the way I was going to build it was I will call let just call this Au it means authorization you know and then it can have things like um um card name what are the things that we saw here we saw account name um Bank bin brand all those things right so I'm just going to say card okay I so account name account name you know this will be a string that would be like that's text you okay actually now you can actually add default values something that F flow recently did oh F flow is amazing guys they always Innovative so um we have then we can also have like um Bank all those information so you can you can store all this information here and then when you come over to FL flow you can just add a section called Auto rization and then connect it to a data type called Art all right now let's go to manage content and test something out now in this manage content we're going to add some new values so let's wait for it to load now before before this is done with loading always note that when you add a new collection in Flor flow you need to deploy um rules fire store rules for it and this tells flutter flow who and who can have access to the data who can delete it I'm going to say everyone for now and I'm going to deploy this rules right now and yeah that's it so once I'm done with that I can come back here and I can actually create a new test transaction document so the first thing is going to be username Ben email we Ben at mail.com ref ID will be a random string right amount will be 12 1 2 3 4 5 you know status will be false authorization let's set the fields account name will be Ben so you can see Fields within a field all right bank will be Zen it how be name of the bank so you see field within a field so these fields are within authorization and that's how you can manage it in flter flow so once we do that you see that in fire base here all right let's try and reload in Firebase here we have something called test transaction under pack lesson and you can see we have something called authorization which is a map field automatically made Zenit account name so that's the way it works so now to be able to get information from a you I close it from a structure like this how do we do it because they're not straightforward Fields it's not just called bank or whatever it's on under a particular field now to be able to do that we are going to to employ this rule of let me show you the rule here to what what we need to do with Cloud function so basically all we need to say is we want to get information from authorization dot then we talk about the other name that were following to update so let's let's play around with this space tack lesson right so I'll show you what I mean so let right now we want to check for the create for this event section to check what the event is saying whether is charge. Success all right that's the first thing we need check because P told us that is a is a constant thing that will always tell us that oh there's a there was a successful payment all right so to know where what we're actually getting we can we can close down this field here we can even close down this Top Field you can see that this Top Field this charge. success is not under this field here you can see that all those things you are seeing was under this one field here called Data all right so we can easily just go and say um check so we can say check the let's make sure we copy the exact name so we can click on the pencil icon right click on the pencil icon and say check the open check the event field right um You can call it data field data field in the document if it is equal to then we'll put Open brackets because some it's K sensitive the name has to be the same so let's copy what we see here charge do success and if it is that the next important thing that we need right now is the reference now in your own you might there might be other things you need access to for example you might need to know more about the customer you might need to get information about the IP address whatever you want it's that's your business right so once we know that the successful charge the next thing I think I need is just going to be the reference so let's check for where we can find reference so Channel authorization you know signature country code Channel card currency so these are things you can actually save but what I'm looking for all right is the reference so here's the reference here now where is the reference the reference is under plan okay it's not under plan let me see let's try and elapse all these things here you know customer there's no reference there um let's see let's elapse that let's elapse this to I love this two so reference looks like is directly under data because if I close that I will not see reference again it's directly on data that's where reference is now another trick you can also use is that you can also go over to um you can go over to let's see um you know FL um p and you can copy the if I go to transaction successful they already giv me a way which is supposed to look it's the same thing that is being sent to you right and if you want quick details you can copy everything you seeing here go to char GPT all right and say um if if okay sorry um find the part to the reference field here so you can use it to to find complicated parts to easily tell you what you're looking for so you can see I I'm still waiting for it to load up so you can see data so data reference all right so that's how it works so the way you can reference it for the cloud function to be bu is um and if it is equal to that right then search the data field um in the document right so let's see um now what I'll do I want to copy all the words correctly so it's going to be data let me just copy this so instead of this you know sign here we're going to say data dot reference all right now once we do that and um and use the um the um value from so let me tell you what I want to do the way I'm going to build my own and you can build it that same way too is when remember um when a payment is made I am going to create so let me show you how I'm going to make my money so instead of all of these things here I'm going to go to um navigate to the verifi transaction page inside of my app as normal with the ref ID now I even the ref ID but what I'm going to do is I'm going to add another action so once the payment the transaction is Success the API call is successful all right I going to create a new document that document is going to be the transaction transaction this will be the transaction all right I'm going to add some Fields about the payment so stat status this was testing I was playing around so status would be equals to false amount right would be let's say from variable um okay we're not working with amount here I think okay we actually have an amount fi here so let me just go to wiet state amount then the email would be wiget state email then username um I don't think that's necessary but I really going to say name.com whatever all right so once we've done all of this this will represent a new transaction but it is false all right it is false in our application now what I'm going to do is there's also going to be a field for ref ID I think I added a few for that let me TR and see I didn't add that so let's go back to the documents so let me delete this that'll be a string okay we already have his ref ID here why didn't I find it earlier okay so I don't know why I didn't find that earlier so we're going to check we ID I think we already have that okay it's up here already so the ref ID is going to be from the API call so whatever the API call generate as a reference I'm going to save it in this document here all right so I'm going to go over to action output you know API response API response options Json body Jason part and then the part is going to be thef ID so we have username email ref ID amount and Status okay that's cool so what will happen here is that we now going to navigate this other page but while we navigate to the other page we don't need to do any other thing one the on Z is on this page so let me go to this other that page now and what I'm going to do is I'm going to remove while you building you can remove this entire step right and I'll tell you what you're going to do here right there's nothing else you need to do you don't even need all this extra information because it's all going to happen automatically so let me just show you in the background what you're going to do and in your mind you can think of anything you want to do to send the user back to another page or whatever but for now let's just check this so so what we'll do is this we can um let's copy okay we don't need to copy anything here let's go back here and we say so and use the value from the let me copy this exactly data do reference to query that's to search so there a lot of things you can do in fire Stu for you to query D all right now let's go over to this section here we're going to search the test transaction you know collection that will be the same name test trans to query the test transaction collection for a document with now let's check ref ID this the exact field ref ID with so I'm going to put it in bracket because it's K sensitive you know nothing should change here ref ID equal to data. reference right and update the so let's see I want to get the exact same word status update the update the status right data field always we want to be very very clear of the um what the document again of the test transaction of the test transaction document to True okay so this is how you write like I said if I'm going to if I'm going to set this up for you I'll teach you exactly how to do it and make it very easy so this is all we want to do we want to check whether there's a new charge transaction and once there is one and the charge the charge transaction that comes in that is successful has a reference that is equal to the um test transaction document that was just created that belongs to another user it's automatically updated to true that means oh if the payment was sucessful and the other things you can do you can also update many documents you can update more than 20 or 30 documents at the same time right you can for example in this app the payment app that was working on once a payment has been successful I automatically with Cloud functions to update the users balance right user has a balance where they pay for different things is automatically done with cloud functions all right but this just a simple example now let's run the script and um the instruction and let's see what Char charity comes up with now while that is loading remember you need a paid account on fire basis you go you don't have you're not they not going to charge you anything you need wait to come to this Step at all and once you do that you'll be able to deploy this script on Flor flow so I'm waiting for it to finish loading it's taking some time okay so my assistant has created the the the function for me right I'm seeing that down here below it's saying it's telling me exactly what the the function would do when the document is created in the Ping collection the function is triggered it read the event field right it event is equal to exactly what I wanted to do so say remember to deploy this function to a Firebase project we don't need to to follow this step also ensure you have the right access permissions to Tex transaction collection in your fire store security so it's even giv more information which is based on the instruction that I did give it that oh make sure that oh your your um fire base you know when you're going to your um when you're going to your security rules that it's actually open if not the cloud function will not be able to do anything on it right it's open it's reasonably open so let's go back to the playground let's check it out you see and sure you have direct access permissions to test transaction so you can see now this is the code that we want we'll copy everything that we have here and without any problem at all we can go to um the cloud function section in flow and then we can paste the new Cloud functions there we can even you know delete everything that was here before we come in you can delete everything that was there um and then paste it so once we paste this the name that was here too right the name that our Assistant gave us or you can change the name we have to paste that name here okay update so once we do that you can save the cloud function then we can deploy so we just click on deploy so this is on transaction success update transaction status on charge success so it's deploying is going to deploy to our Firebase accounts right so let's see let's see if there's any name like that before on so let's see update to purchase status nothing like that so let's wait and see whether it's going to be so it's saying error definitely it cannot be an error so most times it will do that just click on it again let's see okay guys with absolutely no code at all this something I built and I'm so excited about it you know I was thinking of maybe like putting it out where you know people can subscribe to be doing using this feature but something anybody can just train the chat but and do so if you choose to do it yourself good like all the best to you if you want to me to build it for you the same way I designed it is free you don't have to pay anything except when you're using it for a long period of time then probably not to subscribe like $5 per month you know to your open a organization dashboard right and it's very simple you know that's that's it so you can see it has deployed now let's test it which is this I'm I'm happy about this now we can go back to to over here you know over over to the function section here and I'm going to have a much more detailed video on function so you can see upate transaction status on charge it has been deployed I'll have a much more detailed video on functions and teach you exactly how to work with it even how to debug it if there's any error how to do it all right so let's go back um let's let's now test this feature to make sure it's working so what I'm going to do right now is I'm going to make it more I'm not going to go to my phone to test it out I'm going to create okay let's go over here I'm going to go to fire store now we are going to MIM if a user has clicked a button to make a payment all right so what will happen here is that once a user makes a payment we need to store the new reference of that payment that was made over here so let's so we can make it really quick for ourselves so what we're going to do is we're going to go over to um the API section and we're going to go over to initialize transaction response and test and we are going to create a new transaction so test API call so once we test it it should return a reference for us and a link so before we even make a payment that means the payment has not been successful yet we just going to copy this reference here go over to you know Firebase and then paste it here so this is what going supposed to happen on our app when somebody clicks on a button and tries to pay automatically the reference should be updated like this now once it updated what we are going to do so you can see right now the status is false right we are not touching anything so I'm going to go over here we're going to copy the link that we have over here sorry this link and we'll come over here and we would paste it we're going to delete Del this and sorry I'm going to delete all of this enter now so this is going to MIM so let's say a user right now is paying on your app they click on pay na once the payment is made this what is going to happen so let's watch this watch out for it it should update to true so you see it just updated to True automatically boom now you've leveled up your skills as a NOCO developer here automatically you do not have to do it manually at all automatically happened so what he did was as soon as a new pack lesson document was created so you can see that a new one was just created right now right and it was equal to charge the success a function just triggered so this is the function section you can see that there was a it was just used just now you know there was just a request that was just done right now and you can actually view the logs of so that's something I'm going to teach you that cloud functions video but yeah you can see that it's automatic now this is a much more advanced method now instead of you trying to do API calls API calls per second while the user is on this page it takes few seconds to do that you can just maybe you could still even do something where maybe it it keeps checking whether transaction is start is equal to true or you can display a popup once the transaction start is equal to true so maybe you'll be doing a read to that you can pass the reference of that particular transaction document that was created sorry you can pass the reference of it to this page then you can do a read on the page and be checking for when the status is equal to true and once equal to true you can show a PO up that your payment successful you can take them to another page whatever you want to do it's all up to you you could even take them to a page and say oh your transaction is spending right come back later or something or we update you once it's done and that's the cool thing about Cloud functions you know they can be the user can be doing something else and once the payment is successful you could also tell this stru this um Cloud functions helper to also send an email to your user so as soon as the message was done or it was successful you could also send an email thank you for purchasing this thing automatically I wish you can read my right now that is wonderful so that's the last method there's more things to it right you can ask your questions below there's more things to it but yeah you can receive payments and do so now your on your own you can write more information about all the different types of event that you have whether it was refunded whatever and then build upon it right these are the key words now in the next video I'm going to show you how you can work with FL flut wave briefly but the methods I thought about pack you can also take it over to flutter wave and still work with it successfully okay guys so this is a quick overview of flutter with their dashboard right and let's take a look at it quickly so if you go over to settings you have a section for API keys and web hooks so if you go over to API Keys you will see your live API keys and your test API keys so basically the secret key section is where you can actually have access to it so if I click on generate new API keys I'll be able to copy the new secret key and for test API Keys too I can also get the secret keys for the test API key so I can always generate a new key and to give me a new key you know so um just for security reasons but once you copy it you can take it over to flutter flow to do what you need to do all right now you can also see that web hooks too you also have a section for web hooks so you can add the web ql based on the teaching I just gave you in the last um session so let's go straight to the documentation of of the FL wave so once you click on documentation of FL wave you'll be taken to this section where you can start from the beginning so you can start reading and understanding how FL wave works right so firstly we're going to go to quick start and you see you have to create an account you see all the information from them you know the different types of payment options that they have and so on and so forth all right now we are going to go to authentication just like uh um P stack you can see that the same thing so they're talking about the test version and the live mode so you seeing you're seeing how authentication works so you have to do authorization Bearer then your secret key then this is the link you actually make um trans like you call the URL you actually call to to make flutter wave work so let's so you can see they also have a brief conversation about web hooks these are the kind of um you know transactions that that will be to your url so if you follow the same method I taught you in pack you'll be able to work with flut wave really really um like easily right so let's go to the um main menu API reference so this is where we see more information so when you go to the API section you can see more information about how to work with um payack right so firstly we'll go to charge and charge you there are a couple of methods that you can use when you're working with pack there is the card this most methods you know there are two methods I thought you on manual method in pack all these methods like cards um Bank transfers you know all these methods here won work with those first two methods this methods you have to use um you know Cloud functions to and web hooks so to get responses now you can read more information about that I'm not going to be working with you know that I'm not going to working with that right in this if you read the documentation you'll be able to work with it and get information from it this video should help you start that Journey right but what we're going to check for is something called standard standard um I'm coming standard flter wave standard now FL wave standard is an is a is an easier way to work with um flutter wave instead of having to in remember if you check the different ways in which flutter wave you you can accept payment in F wave so if we go back to the home and we go to quick start or let's go to collect payment let's go to collecting payment now there are different ways you can collect payments you can collect payment FL wave inline this is for websites right you have to have it it has a JavaScript library that's not part of what we're trying to do they have direct charge now direct charge falls under those card that was saying let me duplicate this page here so if you go if you go to the you go over here and go to API reference and we go to charge you can see things like cards you can see things like um Bank transfers that that can fall under direct charge it means you have to build your own UI and payment flow for is going to work but going this is going to be powering it and you still have to use um web hooks to be able to um update your your your your um database when the payment successful or not for example Bank transfers is it's better to use web hooks to actually find out when a bank transfer is successful because it can be it can be revers things like that but when it come it comes to um you know flutter wave standard flutter wave you can call on your API so if you read a bit about it say call on your API on your server and get a payment link which is what we worked with in pag and then redirect your customer to that link and then we redirect back to you when your payment is done so we can click on flter Wave standard are interested in that and you can see information so first you need to assemble the payment details right that you need to first first you need is txre that's a reference code you will generate to identify the transaction so in FL wave you must send them your own unique reference code face can you can send it or face will generate for you but this one you must send your own unique payment code amount currency redirect URL just just like pack they you know they also require a URL that you can redirect users to in case a payment was successful or not you know so you can see that there are similarities here so if we scroll down here um let's scroll down so this this is the link this what this where it will be directed to after payment you can scroll down here you can see more information over here but this is not the API section where we're going to see how to make that work so let's just scroll a bit let's see where that feature is over here so let's see over here so you can so you can see from your server call our create payment end points I think let's use let's check this one we should find it here create payment end points um okay let's just use this example here to work with it because I think this is this this is a document this is actually a document I worked with so this is the link that we can call to API flter wave.com you know and then you have to put the header you have to put your secret key here you know and then this is the Json body that you sending to pay stack so to flut wave sorry to flter wave and then you you you can get a response like this from them which is start to success hosted link and then this is a link that's how it works then this is the page that they directed to now you can also add more information inside but let's see um let's play around with it so let me click on or copy this the URL and I'm going to go over to our pay our app click here click on API call and then we're going to paste the link here and we let let's even create a group because we might want to do other things create API Group um let's just P the base URL I think this should be the base URL here delete that this will be flutter wave sorry flter flutter wave and then we going to create the first header that header is going to be so I'm going to go over here you can also copy and paste into chbt as you're reading to explain things for you so just going to copy from here and then we're going to go over here um sorry go over here I'm going to paste it here and then we remove this section here that that's where the API key needs to be in all right and what we'll do next is we'll just put this say API key all right then we say um group variables um copy paste here string add group come under here we say create payment this is the link that we need to work with so we just come over here and copy this version here V3 payments so we'll come over here and then we'll paste this V3 payment and we'll go to quer parameter so it's not qu parameter actually so let's check what kind of call is this right so let's see if there's any kind of um information here that tells us what type of call this is because I already know type of call it is but let's see if there's any information so um so you can see go. poost so this is a post call like I said you can also you can also um ask um Char GPT to explain this to you and give you more information just in case because it's not it's not as it's not looking the same way that um P own looked right and you know it might not be so simple for you it might look so complicated but it's very simple once you break it down it's the same it's the same method so I can just copy this section here and paste it here this is obviously a post score also because we are creating something new we know it's supposed to be post so we click on Json now what we need to do right now is we need to just strip copy this entire thing here all right and then paste it here format it okay it's telling us that there's an error in formatting okay I was supposed to copy it with I made a mistake um so that's the entire body that we need it's still giving us errors um what I do is simple I'm just going to go to GP and say format this format this to Json and I'll just paste it help me forat quickly then I'll just copy it then I'll take it over here and delete this paste this format and we're done now it's not everything that we're going to need need right for example now this metal customer ID you know consumer Mark all this information is not necessary I'm very sure it's not necessary you know you can keep testing so you can find out what exactly what's necessary but I think you know for example this information about customer should be important for example now we have customer email customer phone number customer name then customizations I don't think we need all of these things you can even send a logo the logo the the image of the logo that you show show when they actually making payments which is really really cool you can even customize the title of the page that been shown I think that is really cool from from FL W that's really really cool now on your own you can explore all those things later when you when you feel more comfortable to explore them but for now what I'll I'm just going to copy this section and then um I'll format it here copy I'll take it over here format awesome now now that I've have done that it's time to start filling out the Gap so you can see you can change currency if you want so I'm going to I can come here over here if you're not in Nigeria you're somewhere else you can just come over here and then create a currency field all right that will be string right then you can drag the currency field over here and then delete the engine oh my God and then delete the engine okay then you can also add something for redirect URL then this will be a string too then we can also add something for customer name you can call it whatever you want all right string and that thing will be customer email then customer phone um is what else do we need let me see I think that's it so let's just let me just go for customer name and then customer phone number string string body then email then we have redirect URL can call it redirect now the thing about this redirect URL is that if the user does not make a payment they cancel their payment on the web section or they is successful they will still send them back to your site all right so that's something you need to take note of so let me let me just drag the redirect URL here so you see the way I creating then the transaction reference you should if you don't send transaction reference flter waves API Cod will not work they don't generate it for you they don't do what pack does so you need to generate your own transaction reference yourself so obviously you write um I'll call it ref ID instead you can call it anything you want so I'm going to drag the ref ID here and like that we've configured everything that we need to configure so we can add the API we can come and test it but before we test it um I think we have a bunch of things to add here so what I'll do I'm going to go to my dashboard do am I still active there okay thank God so I'm going to copy this secret key here and I'm going to paste it in the API key here now once I paste it there I'm going to go to ref ID and the ref ID I'm going to generate to be one to you know random numbers like this it's just a random string of characters it should never be the same thing so redirect URL will be www. um let me just copy what do what we did last time chat. open.com copy this and then we come over here sorry so and then we'll past it here then customer phone number 0000 random string of characters then the the email is not really that important in um in in um flutter wave like it is in pack user at mail.com then redirect URL okay I think how many times that actually add the redirect URL I'm seeing it two times so so what I will do is let me see I I think IED it twice redirect direct URL which one did I use at the end of the day so let me try and see redirect URL capital letter let me just remove this one so yeah that's it so let's go back to response and test customer name is Ben Ben Benny currency is n GN so I'm going to test the API call let's see yeah so it's successful now you can you can come over here and add this sections that you need just like payack as we Tau earlier all right then um let's see something if we try and make a payment what happens so from this link here let's say that I paste the link here and I remove this section here and I also remove this section here too and I load it up let's see what happens okay so we've opened up the payment link for for for this for FL wave and you can I think this this a test version so we can just click any bank here randomly Pay n and you say I've completed his payment and you should complete it so once the payment has been completed they should direct us back to char GPT and the same way you structure the link in payack you can also structure the link for the redirect URL awesome beautiful so you can see if they to they also send us um information about let's copy what they send us here they send us information about two things the reference and then the transaction ID and theas there's a reason why they send two different things in their own um you know in their own documentation there's a reason why they send two different things let me show you why because there is a an end point that is very very unique that you use to verify transactions this is it here now I don't know why the main information I wanted to get it took me a while to get it I don't know why they just added it here so verifying transaction with transaction reference so you can verify with reference or you can verify with ID those are two different things you can verify that by they sending you both the ID of the transaction and the reference so I think the ID is what they generate by themselves the reference is what they generate by yourself so I I personally prefer because we are the ones that have to generate that reference by ourself I prefer that we use this verifying this section here this end point here to verify it so let me show you how you can do it so firstly we'll copy this link here I'll go over to um Flor Flor flow I'm going to save this one here then I'm going to say verify payment verify payment all right then I'm going to that link I think that was that link different let's see how different it is from this one so we have the api. fl.com co then we can just delete this section here and then we'll add this once we add that so we say verify by reference all right so I think there's something are supposed to do so let's check that's what I was saying it was so weird The Way They just added it there they didn't really give anybody much information about what they're trying to do like a test or something or the unexpected return value They just added it here she understand so you know if you if you follow this guy you'll be able to get what I'm trying you'll be able to get how to to do it so it's just a get call a get request and then you'll be passing the T the trxr EF as a reference as a parameter all right but you see that they did not make any part of this link a parameter because normally the link was supposed to be a parameter at least you might see this this icon here that you know is supposed to be a parameter all right so let's try and do it ourselves let me show you what what they what they want you to do so I'm going to copy this section here and to send a parameter in the call so to send a to send a parameter in the call what we'll do is we're going to go to PR parameters like normal come over to this place here we'll add the T rxw it does we don't have to add anything here in this in this case all right they not ask us to add anything here so go to um from variable go to add new variable then we'll come over here and add it as a string and then we'll come over to response and test and and we're going to actually test with something here now the thing about this um end point in my own opinion I've played around with it a bit because it took me a while to actually find it it was not easy to find it it was just in one position you know but um one thing about is that if the payment has not been made unlike payack it w tell you it don't give you information about it it just give you an error that's the thing the payment has it can only return a value back when the payment has been made that's thing about it so let me give an example here which which I don't really like because space tack if you actually create a payment right and you passed a reference even if you have not the user has not made that payment you can still verify and check whether the user has paid or not but FL waves own will not give you anything with this verifi payment I tried it unless I'm wrong I stand to be corrected yeah here all right so let me give an example here so let me create a random um this thing a random reference that reference is going to be 1 2 3 4 5 6 7 8 you know 79 all right let just copy this reference here and we'll create a payment so we're going to test do a test call here we create a payment so firstly let's just copy this link and then keep it somewhere let's just keep it somewhere here you know let just keep it there delete that and then we'll delete this so while that is loading we go back to fur flow and we are going to copy this reference and go over to verify payment now unless if this he wants to have a change of while I'm doing this live training that would be cool but let's test the API call you see it should not give us any any response so it's see error no transaction was found for this ID so it only records the transaction once the payment was successful that's the way they do they do it here so if you come over here it's only when a user has made a payment that it will now show successful so let me show you an example that's the only thing you need to know about it so if you want to collect information from this endpoint you can click on this error or maybe this message and if it is equal to error status equal to error you know then you know that okay U maybe the user has not made any payment at all so you can make your own judgment with that so I'm just going to click on status and I'll paste it here all right now let's see if we can make a payment access bank pay 100 I've completed this payment loading loading loading thank you for your payment it's successful now so once I come over here right and I test an the API call successful awesome trans transaction fetched successfully so we can see that the status is now equal to success instead of error so you can you can just use this to check so if it stat is equal to success you know that the payment was done successfully then you can get the information from any other thing you want to get and you know um do whatever you need to do in your application you know or deliver the goods or service you meant to deliver It's Quickly simple so it's the same method for payack you can do the same um method of checking a periodic action to check the verified transaction endpoint right after sending a unique link right you can still send them to a page inside of the app with that same payment link and then keep checking the verify endpoint until successful the same thing you you can see that right now and then if you want to use um you know Cloud functions you can go over to their um you can go over to the let's go home you can go over to the web hop section I think quick start I'm not sure yeah web hooks you can go back to the web Hooks and then you can read more information about the web hooks you know you can see pictures they adding pictures here implementing a web hook and now their own way of verifying their web hook that is coming from them is that they in their web hooks message they can send a very fash that you can check for it so these are things that you can actually use so if you need more help with this particular this is more technical you can actually shoot a message to me and you know and I can easily help you out with that you know right I do charge for services like that we just know that but yeah I can easily do that for you or on your own you can when they say very F inside of the return message you're going to get the webbook there will be something called very fash so you can tell your AI system going to make or if you want to get my own that you should check the very hash if it's equal to you know whatever F will give you is a secret code you understand so there's so there's so much you can do right now you can these are different type of of web hooks they can send to you failed payment and you can work with this to know exactly how to extract information all right so this is I'm sure this has been a beautiful lesson for you right if you have any questions at all comment down below all right if you want to view or clone any of the apps that are built today this entire um application just to play on and test it make sure you subscribe subscribe to my patreon make sure you subscribe to YouTube like this video comment down below and I'll help you out with any of your suggestions or questions that you have my number is also down below too all right thank you so much and you can check any of the other videos in you know on your screen to watch more and learn more from me right your favorite FL expert

Channel: Benjamin No Code

Views: 378

Keywords:

Id: hWoz_svvMkA

Length: 231min 18sec (13878 seconds)

Published: Sun Dec 17 2023