Howdy dear friends? Hope everyone is well. Today I am going to teach you how to implement payment gateway simulation for PHP project. We all create PHP project. Online pay function is mostly a mandatory feature in a web system. Therefore we all usually include a online payment modules in our PHP projects. But the problem is we have to buy payment gateway. Buying a payment gateway is not an easy process and also it is costly. So how do we implement payment gateways in our PHP projects? If our projects are a non – commercial one we can do payment gateway simulation. Payment gateway simulation means we simulate the process happen in an actual payment gateway. We accept card numbers and all. Once pay button hit we don’t actually do a payment. We validate entered details if they are true we send success massage from back end to the front end. Actually this is happening in real also. Once we enter data it will validate data with bank. Since we don’t have bank details we omit that step. As alternative we just validate the entered data is in correct format. Then we send success message. So let’s see how to implement payment gateway simulation for PHP project.
HTML code for payment gateway implementation
Firstly we need the interface of the payment gateway. Therefore firstly we will create the interface for that. You can design a simple nice design for the payment gateway. Please don’t use high end graphics and red colors to the payment gateway. Your payment gateway designs should not confuse the people. Therefore make it simple as much as possible. Usually a payment we done for an order or purchase kind of thing. Therefore you can show order id, payment id, and amount as details. We have the option to select whether it’s visa or master. You can use radio button for that. The payment gateway definitely ask for a card number, CVC and expiry date.
When designing this for card number field you can use several designing. Other than just type all 16 characters together you can type it four characters together and have a space. As an example like this 1234 1234 1234 1234. You can use this format other than 1234123412341234. The first one add nicer to your design. Usually visa or master cards start with 4 or 5. Therefore when users typing the card number if your radio button adjust according to the first digit of the card number would make a nicer design. Let’s see the HTML code for payment gateway implementation. Here I used bootstrap also.
<div class="shadow col-md-6 ml-5" style="padding-top: 20px;padding-bottom: 10px;margin-top: 20px;margin-bottom: 10px;">
<form>
<div class="form-group col-md-6">
<label for="" class="col-form-label">Payment Id</label>
<input type="text" name="id" id="id" class="form-control">
</div>
<div class="form-group col-md-6">
<label for="" class="col-form-label">Payment For</label>
<input type="text" name="paytype" id="paytype" class="form-control">
</div>
<div class="form-group col-md-6">
<label for="" class="col-form-label">Payment Amount</label>
<input type="text" name="bkadv" id="bkadv" value=" " class="form-control">
</div>
<div class="form-group col-md-6">
<label for="" class="col-form-label">Card Number</label>
<input type="text" name="txtcno" id="txtcno" size="16" maxlength="16">
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="" class="col-form-label">CVC No</label>
<input type="text" class="form-control" id="txtcvc" name="txtcvc" size="3" maxlength="3">
</div>
<div class="form-group col-md-4">
<label for="" class="col-form-label">Expirey Month</label>
<input type="text" class="form-control" id="txtmonth" name="txtmonth" maxlength="2" size="2">
</div>
<div class="form-group col-md-4">
<label for="" class="col-form-label">Expirey Year</label>
<input type="text" class="form-control" id="txtyear" name="txtyear" maxlength="2" size="2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<div class="form-check">
<input class="form-check-input" type="radio" name="optctype" id="optvisa" value="1" checked>
<label class="form-check-label" for="optvisa">Visa</label>
</div>
</div>
<div class="form-group col-md-2">
<div class="form-check">
<input class="form-check-input" type="radio" name="optctype" id="optmaster" value="option1" checked>
<label class="form-check-label" for="optmaster">Master</label>
</div>
</div>
<div class="form-group col-md-6">
<img src="../../images/imagname.png" height="100%" width="100%">
</div>
</div>
<button type="button" class="btn btn-success" id="pay" name="id">pay</button>
</form>
</div>
Payment gateway simulation code explanation
The above code will create this GUI. In this the image you have to add. Replace <img> tag details with yours. Adjust height and width as well if you want. Change the id and names if you wish. Use meaningful words for that. If you want to show pay amount you can load it as get variable to the form and show as a PHP echo. For that echo that value inside value attribute. Change the padding and inline CSS as you wish. I used inline CSS mostly here. Apart from using GET method you can use session to store variables. If you add jQuery to your project you can store details in the session using sessionStorage.setItem(“variablename”,value);. You can use sessionStorage.getItem(“variablename “); to retrieve that value. Most of the time we came to the payment gateway screen from another screen. You can use setitem in that page mostly inside the button click event code. Now let’s look at the validations and all.
Validation code for payment gateway simulation
We have to write these validation code inside payment gateway button click. Because we have to do the validation once after user click pay button. “pay” is the button id in this form button. So we can write the button click jQuery like this.
$("#pay").click(function(){
});
Inside this function we have to write the validation codes.
For the validation firstly we have retrieve customer entered value for those text fields. For that we can use val() function. Val() will return the entered value for that text field. We can write below code for that.
var cno = $("#txtcno").val();
var month = $("#txtmonth").val();
var year = $("#txtyear").val();
var cvc = $("#txtcvc").val();
After this we can write the validations. We do the validations by using regular expressions.
Validate the card number pattern
Card numbers usually starts with 4 or 5. Then they are maximum 16 character long. We can validate it like this.
var cpattern = /^[4-5]{1}[\d]{15}$/;
if(!cno.match(cpattern)){
alert("Invalid card Number");
return;
}
Validate the year
Usually in payment gateway we use year and month both in 2 digits. We don’t write year with four digits. And also month needs to a value within 1 to 12. The year should be current year or future year. We can do those validation from this.
var mopattern = /^[0-1]{1}[\d]{1}$/;
if(!month.match(mopattern)){
alert("Invalid month");
return;
}
month = parseInt(month);
if((month<1) || (month>12)){
alert("Invalid month");
return;
}
var cdate = new Date();
var cyear = cdate.getFullYear();
var cmonth = cdate.getMonth()+1;
year = parseInt("20"+year);
if(year<cyear){
alert("Invalid year");
return;
}
if((year==cyear) && (month<cmonth)){
alert("Invalid expire date");
return;
}
var cvcpattern = /^[\d]{3}$/;
if(!cvc.match(cvcpattern)){
alert("Invalid CVC no");
return;
}
});
After these validations you can type AJAX code if you want to save payment details for a database table. If not you can use alert success message.
Conclusion
As usual we have come to the conclusion of our post. Today I gave you instructions about how to create a payment gateway simulation for PHP project. I hope this will help you. If you like this post please don’t forget to give us a comment. How to create a login page using PHP and MySQL if you interested please visit post. Then we will meet with another interesting topic till then goodbye! all.
Incredible points. Outstanding arguments. Keep up the good effort.
Thank you. Keep reading