Ep34 - PHP Payment Gateway Integration Tutorial with source code

all right welcome to the mini php project in this video we are going to see an application which will allow apartment member to pay their monthly maintenance using debit card let's see how it's done as you see uh for the first floor we have six rooms the first four rooms has paid their maintenance let's make this one zero six let's pay the maintenance for one zero six click on pay now and you will be redirected to the payment gateway it says 800 rupees by 106. let's fill the name email address the phone number and if you scroll down it says next and i'm going to choose the debate card option you can make any of the option let's pick the debit card it's an insta mo instamojo.com so we can fill the duplicate values the card number 0 122 and the cc number c c double v number is triple one and you will be getting an otp and you need to pass the ottb value which is one double to one click on submit and once everything is done you will be redirected to the same index page on the first floor we have paid 106. so you can see on the 106 uh the status the payment status has been changed from unpaid to paid and then we have the payment button uh disabled likewise you can make as many flows as you want as many rooms as you want now we are going to see how to create this using php and the payment gateway we are going to use is insta mojo you have to create an account so i have created a free account you can see this is a url we have to get into and you would be requiring two things the first one is private key and the second one is key as i said it's available on the api and plugin section private key and auth token these two things is required and i'll share the source code which i am creating right now in the description so that you can follow along uh we need two more files i'll leave that file in the description fine now let me show you the html so the first thing we are not going to create these many rooms we'll be just creating two rooms for understanding let's create a new file and we'll call it as demo dot php and let's get the port strap template i'm going to copy all this and paste it on the demo.php and i'm going to remove all this which is not required we just need script file script colon src and we need i'll be naming it as demo dot js and we'll be writing some internal css so style and let's work on the table as you see this is created with the help of table so let's start it we need to create table with class table since it's a bootstrap and this table should be surrounded inside container so that we can get some space between the left and right containers and class then table let's add the table head this table head will be having table row and then table data what are the things which is available room number and then we have name then we have amount then we have status and then actually it's pay button and finally we have status so this gets into the table head let's create table body inside table body we need table row then table data then it would be called as first floor and call span equal to five let's see how does it looks demo dot php so this is how it looks we can give background color class equal to bg hyphen danger the only problem that we made is the calls when will come on the table data not on the table row cool now let's check got it we can also write text to white and let's get into the another row table row table data into five the first one is room number the second one is name the third one is amount the fourth one is button anchor tag actually it should be form input type submit value equal to pay now and we will be using form so the name attribute is must okay now and finally another div we can have the design of button vtn danger i'll be calling it as unpaid let me show you how does this looks to make this button so that we can get some good padding around cool you can also give the class to the submit button class btn btn success cool now let's just copy the same before copying we need to surround this inside form it will be an act it will be having an action let's name let's submit the value of the form to the another php file we'll call it as d3 dot php and method is going to be post all right so we have form so we need values so let's create a input field input type hidden name we are going to have the name as room number and value is going to be one zero one the same way let's pick the name member name value is going to be mr we shall and then finally the amount amount and the value is going to be 800 so this is it let's copy this table row another one more time so you can have as many room as you want for just in for just showing you the demo i'm just going to have only two rooms which is one zero two the value is going to be one zero two we can change the name to david the maintenance amount is going to remain same and that's it let's see how does it looks cool this is how it looks now once i click on pay the data need to be submitted to the p3 dot php page let's create a new file and save it as page three dot php let's open the php file if is set what is it dollar underscore post since we have made the method post we can access the name variable using post so if the submit button is set then we can access the post data we need to add the authentication key which i have shown you on this page i have used it then we need two files let me show you that so we need two files the first one is instamoji.php and then the perm file i'll leave this file in the description copy this you can download this file from the instagram instamojo website as well but we'll just carry forward over here just to save time then we need to call the instamojo.php file in the page three dot php let's call it we have called it now this instamojo.php we need to create an object let's create an object for it so while creating object we need to pass the form value so we have created an object and called it as api and pass the key and the token we this is coming from the documentation we are writing the purpose uh it would be the amount 800 by the room number let's cross check the room number spelling let's here and then the amount is being passed amd room number then the member name we are passing it member name and then after after all these value we are submitting we are redirecting this let me comment this copy comment and that's the other step we are redirecting to this to another file called update payment 2 dot php let's create this so this this page will be called once after all the payment is done so let me create that and for now before redirecting i want to show the values so the output once the payment is done if it is succeeded or if it is not succeeded those thing will be available those information will be available using this get request i'll show you now so far this is complete so in case if there is an error we'll be getting this error so the purpose and amount is required if you miss any of this the error will be thrown let me remove the amount and show you we'll be creating database table as well click on pay it says the amount is required so this error is coming from the catch block so these two things are important as i shown you as i said refresh it click on pay properly it would be done except we won't be able to display the status payment status so to display the payment status we need table to store the data that mean we need the database connection so let me just show you the payment and after the payment what happens is it will be redirected to this page and this page will give you the status of the payment using the json array ignell agnel gmail.com you can enter any dummy value click on next uh instead of debit card let's just use netbanking for time being check out and it will take some time actually debit card is faster than this payment option net banking option if that doesn't work we have to pause it i will pause it it is taking too much time let me click no yeah the internet connection is not well close the payment and retry again retry payment net banking didn't work so let me choose debit card let's give the card number so these value you can get it from their website triple one no thanks in real you will be getting an otp and that otp is this we need to add this over here and click on submit once the payment is done it will be redirected to our page if everything is right you will be getting the status as credit if the payment is not done you will be not getting credit the payment status is credit so that means the payment is done now we are going to create a table let's create a database first click on this new let's name this as apartment i think i have already made the table structure it's here database name let's name this as maintenance and the table name is going to be maintenance table database maintenance and the table and the column is going to be four column is going to be four payment id let this be very care auto increment you can make this as primary key for now then we have room number which is going to be end and then we have payment status where care and then we have payment request id again where an alphanumeric value click on save once everything is filled let us make this int as well click on save and your table is ready click on maintenance so you click on browse it's blank it doesn't now what we need is we need the room number so to get the room number we need to pass this with the get request so you can see i'm concatenating the room number so this room number can be accessed over here so now i'm going to create the insert query cool now if you see let me go through the code once i have made the connection as i said if the payment status is credit on the json i have shown you that it will be showing if the status if the payment is complete it will be showing credit so if it is credit then create the database connection give the proper credential which is database name and the table name table is here so this is the room number we would be getting this on the json value you can see payment id payment status and request id cool then we are inserting this room number payment id status and once this is inserted it need to be redirected to the home page which is demo dot php let me show you again click on p the reason we are redirecting it is we need to show the status by making the button disabled again just filling the duplicate value click on next debit card fill the debit card value zero one two thousand twenty two triple one click on pay one double to one so these value got it from the insta module page and it would be redirected to the index page fine it is working actually it is showing you to the we need to redirect to the demo.php and it need to be this should be two previous or this should be two that's the reason it got redirected to the index demo.php let's do it again anyways nothing special is going to happen the data would be inserted let's check whether the data is inserted or not yes the data is inserted you can see the room number is zero we are not getting the room number y on update to payment update 2 i think we have a spelling mistake here for the room number it is oh no we have made the mistake of spelling the ins the data inserted is also wrong let's we need to try it again we i'll pause it cool now one double to one click on submit once it's done it would be directed to the demo.php page and a data would be inserted you can see one zero one we got the data one zero one now we need to check on the demo.php here we will be using again a database connection we will be fetching all the values from the table all not all the values only the room number from the table let me fetch it paste it let's change the database name which is maintenance and maintenance table and we will be getting all the values and we have stored it into an array we just fetched all the room number from the table and stored it inside the array called room arrow now we need to fetch uh we need to check whether we have let me comment this for now comment this uh what we need to do is we need to get the one by one value from the array and compare if it if it has the value 101 then show the button called don't show this button we have we need to create an alternate button let me comment this the trick part comes let me comment this first of all i'm creating a flag variable is one zero one on page load it is going to be false and as i said i'm going to get array and get one by one value using forage if we found 101 from the array then make the flag variable as true if the flag variable is true then show the button appropriately accordingly if the button is if the if you find a 101 in the database that means the payment is done so we need to disable the button you can see i have disabled the button the same way if the payment is not done then we have to make we have to remove the disable button and add the color success let me copy this and do it again for the one zero two remove the last two buttons and make the flag variable by default false and if you find in an array one 102 then make the flag array as true if it is true then that means the payment is done so we need to disable the payment button if it is not true then we need to show the payment button so let's refresh if everything goes right then we we would be getting disabled button here and here there would be paid option yes it is right you can see it's pay now that means this button is disabled that means it is already paid and the status is also paid and let's try to pay this one last time or let me comment this for you i think we have landed up into an error the thing is i have copy pasted it the name value got deferred the name is pay now let me do this for as well just to show you for the next time refresh it click again redirected to the payment gateway create gmail.com some dummy number click on next pay with debit card insert the testing values january 22 triple one p and the ottp is one double to one click on submit and the button would be disapp for one zero two as well now you can see it is because the table is the table has one zero two and one zero one if i remove these two then again the payment option will be shown cool so that's how the trick is if we make 101 as engage and it will show pay so i believe the scope of this video is done thank you so much for listening in case if you are wondering how to make the collapse it's really very simple where is the first floor here add the id first floor and for the table row add the class first underscore active for both the table row then on the css make this active class display none and now on page load it would be hidden and get the first class id and use pointer cursor pointer now let's get into the script we'll name this as demo dot js let me copy pc code so when i click on the first floor whichever whichever table row has the class first floor underscore active will get the css display reward previously it was display none now it will be rewarded let's check again reward it it's not getting rewarded i think it's the uh mistake of the spelling first floor first floor active let's do it again yeah you can see refresh it click on first floor you got it that's all for this video thank you so much for listening get this over the description

Channel: UI MONK

Views: 88

Keywords: php payment gateway, php project, php tutorial with source code

Id: 1u0azl70HvE

Length: 32min 31sec (1951 seconds)

Published: Sat Dec 04 2021