 In our last video we were able to add our payment mobile payment as a gateway here and you can see it's functioning with its icon but today I want to add a couple of extra settings or fields or form a form in here near this payment text that we actually get from our settings when we go to manage and then just make this description here that we do have so I'm going to add some fields here for us to actually validate and have the customer input all their details in here so first and foremost we need to go back to our code we'll look in our plugin which is the paleo right here we're going to create a new file which we shall call paleo check out description fields and we shall copy this and then make a new file inside our includes done and then we'll start it off with our php and then next we're going to use is a wukamas filter which is a very descriptive in nature called wukamas gateway description and wukamas has done a very good job about naming filters and the different hooks that it has and making it very easy for us to actually tap or even just look out and say whatever I tried this whatever I do this when you're googling it makes it very easy for you for our callback we're going to have take a press paleo then description fields so I'll add the pg that's missing here copy this shall add a priority of 20 because we don't need to do this immediately on firing and we're going to pass in two arguments the two arguments are actually very easy so I'll just correct this for coding's purpose then we'll pass in two arguments the next thing we will do is add our function here take a press like that and then we shall add our two brackets here now the two arguments that we actually get for free one is called a description which we shall return at the end and then we're also going to pass in the payment id so that will help us figure out a couple of things to make it very easy first of all we need to return this description to make sure nothing is broken and then what we're going to do is we're going to add an image then we're going to add some forms to our field now we need to get the payment id that we are looking for and our payment id for the paleo in our gateway was actually paleo so we get it and we're going to say if our current id is not paleo so not equal to the payment id if it's not that then we're just going to return the description immediately and stop anything else but if it's the payment id then we're going to do some other things so in this case we are going to actually start adding some html but before we do that we need to use the ob start to buffer up some content so we're going to do that and then at the end of the day we are going to say our description should actually have some other things appended to it and we're going to do the ob get clean to say get all the buffered content and then just add it to our description and echo it out now what kind of content are we going to have here we're going to echo and we're going to have an image i'll first terminate this so i'm going to add an image just to show us what could happen and we're going to add the source then we shall come in here with our single cuts to add some php and i'm going to come back to our payment gateway and just copy this plugin's URL to do something different come back to our fields and then paste this in here so when we save this let's go and see what we've done so far if we reload we'll see our kashok delivery shows its description and it's okay when we click our paleo power mobile payments we actually get a big image here showing off what we've been doing and talking about so of course we can style this differently we can target it and add a div to it to make it look a little bit neater so i'll just echo another div here echo a div and i will give it an inline style eventually i'm going to add a proper css file to help us deal with our css what we're going to do is just say this has a display block so that it doesn't have any elements around it it has a display block but it will have a width it'll just be 150 pixels and the height will be auto we'll make it work above so that is looking good we terminate this at the end and then we're going to echo our closing div terminate this come back and then close off our div we'll save this come back reload yeah so this is looking nice that's what we wanted to do now the next thing we're going to do is we want to add some fields to our particular description now already wukamas does sanitization it does the cleaning it does all the things the validation the sanitization wukamas does it out of the box for us so we don't need to reinvent the wheel so what i'm going to do is actually just use the wukamas form field that we've used before so wukamas form field and i have a video that goes in expanse of how you can use these particular form fields and i have added them to the description and also to the links that you see up there so we're going to have a number of fields the first field that we're going to have is actually going to be called let's say phone number so we'll give it an idea of phone number and then it's going to come with an array of details it's going to actually be just an input field so the type will be i need to wrap this in single quotes so the type will be a text field and then when we have our text field the next thing we're going to do is we're going to give it a label and this label will be of course we shall leave it translator but the different languages that available and we're going to say this label is going to be payment form number and then next thing we're going to do is add a text domain which we already quoted as paleo from the other pieces here paleo payments so copy this sum back add it here and then we shall have a class let's say if we wanted to add more styling to the fields so we can have a class by default we shall use the wukamas version of our classes now for classes in wukamas they actually are an array so you don't have just even if you had one you have to wrap it under an array so we shall have a default form row and then comma add to more single quotes form row wide that is to make it go all across the whole expanse or the field and then what we're going to do is we're going to require it so we'll add a required and then we shall say that is true so that's the first field that we're going to add let's serve this come back and check what we've done when i reload come back to the paleo you will see that we have a big beautiful box here that requires us to be fielding it has that it has everything as it should be so if we try to pay and order out these other fields are fielding and then try to place an order it actually works so nothing is broken and that is good so i want to make sure i am passing this along this block so i'll just style this i don't like the very large field so i will save this and then come back to our shop come back to our shop quickly orders you and then come down here and you will see the box is actually quite small it fits it doesn't look so nice so maybe i'll increase this and say this is 300 but i don't want the image to be so big so i'll increase this width about to 300 and save this so it's 300 save it reload we have our fields looks a little bit better next thing that we're going to do is add another form so i'll duplicate this to make it a quicker process and we're going to call that maybe paying network assuming the phone number we're going to add for that particular gateway has we have quite a number of supported networks that are aggregated so the type will be a select will say payment network leave it translatable it will also span all across we're going to give it a bunch of options so we'll use our single quotes they have options add our array and then inside here have an array of items and that with a comma because that's what my press requires and we're going to have the first field will actually be empty and then we shall have that also translatable so let me just copy this and say the first one will be select and network phone network that will be our first option the next option we shall have is we'll go down here and we'll add in my case we have MTN mobile so i'll just add this and i'll say this is MTN mobile money and then i'll duplicate this and say we also have air tail money so i'll just change this and say this is air tail money so with this done let's go back and look at this i'll reload and we'll see we have our payments a phone payments and then we can choose whether i want air tail or we want MTN so of course when we select that we'll have this id or that this was none to show that none was selected so that's the id for or the name for this field so we have this and this is ready so that's how we add form fields to a particular description or payment gateway we have to isolate it and know that we're working only with that id do some clean code here by using the the buffering and then end up returning our description so if you like the video please give it a thumbs up share it with your friends and consider subscribing if you have not watched the rest of the videos that are the end here so that you can see more things that are inside this series that i have planned out for you so enjoy yourself