How to Validate a Credit Card Using PHP & AJAX

Credit Card Number
Expiration Date (mm/year)
Security Code

In this article, we show how to validate a credit card using PHP & AJAX.

This credit card validation was shown just using PHP in this article found at the following link: How to Validate a Credit Card Number Using PHP.

However, using AJAX in conjunction with PHP, is much better and creates a much better user experience with the form.

This is because the page doesn't have to be refreshed when using AJAX. With AJAX, we can call the function to validate the credit card without the user even getting to the submit button.

So AJAX along with PHP is a powerful tool that can be used in forms, such as validation which is what we are doing now.

So, as you can see in the above form, a credit card can be entered in.

I used the Javascript onblur() function to validate the credit card number once the user clicks away from the credit card number text box to go to the expiration date text box, to enter in the expiration date. So when a user clicks the expiration date text box, s/he will know whether the credit card number entered is valid or not.

If the card is valid, this form can detect what type of card it is based on the number entered.

HTML Code

The HTML code to validate a credit card and find out what type of credit card it is is shown below.

<table> <tr> <td> Credit Card Number </td> <td> <input type= "text" id="number_entered" onblur="validatecreditcard();"/><label id="validate"></label> </td> </tr> <tr> <td> Expiration Date (MM/Year) </td> <td> <input type= "text" id="expirationdate_entered"/> </td> </tr> <tr> <td> Security Code </td> <td> <input type= "text" id="securitycode_entered"/> </td> </tr> <tr> <td> </td> <td> <input type="submit" value="Submit"/> </td> </tr> </table>

So the above code is the HTML needed to create the form to enter a credit card number, along with other information such as the expiration date and the security code.

We create a credit card text box, a expiration date text box, a security code text box, and a submit button.

It's in tabular form to be neat and orderly.

Javascript & AJAX Code

Below is the Javascript and AJAX code needed to make this credit card validation form.

So in this code, we create a function called validatecreditcard(). We create a variable called request. And we create a request object and store in this variable. This request object allows the browser to communicate with the server to run PHP code in the background.

We then create a variable named url. This stores the PHP file that has the PHP code that does validation processing of the credit card number. So this is a separate PHP file that you have to create in order for this script to work.

I then create 3 variables, cardnumber, expirationdate, and security code. These hold the data that the user enters into the credit card number, expiration, and security code text boxes,

The next variable that is created in vars. This is a very important variable because it's the variable sent to the PHP file so that PHP can extract the data that the user has entered into the text boxes, which represents the credit card number, expiration date and security code.

We then specify in the request.open() function that the method is POST, the url variable represents the file we want the posted data to go to, and the true makes the request asynchronous.

Once the request is ready, we have a creatd variable return_data and we set this equal to request.responseText. This request.responseText represents the output of the PHP file once it has done its processing. So the return_data variable holds the output from the PHP file that has processed the credit card number.

We then update the element on our page that has an Id tag of "validate" and change the contents of it through the innerHTML method() and set equal to return_data (the output of the PHP file). If you back at the HTML code, to the right of the credit card number text box is a label tag having an Id of "validate". This label tag will be updated when the PHP returns the output data.

The line, request.send(vars), actually executes the sending of the data.

This concludes the Javascript and AJAX code.

PHP Code

The PHP code that validates a credit card is shown below.

<?php

$number= $_POST['creditcardnumber'];
$expirationdate= $_POST['expiration'];
$securitycode= $_POST['security'];

function validatecard($number)
 {
    global $type;

$cardtype = array(
        "visa"       => "/^4[0-9]{12}(?:[0-9]{3})?$/",
        "mastercard" => "/^5[1-5][0-9]{14}$/",
        "amex"       => "/^3[47][0-9]{13}$/",
        "discover"   => "/^6(?:011|5[0-9]{2})[0-9]{12}$/",
    );

if (preg_match($cardtype['visa'],$number))
    {
	$type= "visa";
        return 'visa';
	
    }
    else if (preg_match($cardtype['mastercard'],$number))
    {
	$type= "mastercard";
        return 'mastercard';
    }
    else if (preg_match($cardtype['amex'],$number))
    {
	$type= "amex";
        return 'amex';
	
    }
    else if (preg_match($cardtype['discover'],$number))
    {
	$type= "discover";
        return 'discover';
    }
    else
    {
        return false;
    } 
 }

validatecard($number);

if (validatecard($number) !== false)
{
echo "<green> $type detected. credit card number is valid</green>";
}
else
{
echo " <red>This credit card number is invalid</red>";
}

So we retrieve the credit card number, expiration date, and security code from the text boxes.

We then create a function called validatecard and have it have a $number parameter.

We then create a global variable named $type.

We then create an array named $cardtype. This array holds a series of major credit companies. We use regular expressions to determine which credit card number belongs to which major credit card company based on the beginning numbers of the credit card.

Visa credit card numbers begin with 4. Visa credit cards can either be composed of 13 digits or 16 numbers. Older visa cards contained 13 digits. Newer visa cards now have 16 digits.

Mastercard credit card numbers begin with 5. Mastercards are composed of 16 digits.

American express cards start with either 34 or 37. Amex cards are composed of 15 digits.

Discover cards begin with 6. Discover cards are composed of either 13 or 16 digits.

If you understand regular expressions, these are what are encoded in the PHP code.

Once we have these regular expressions coded in the various credit card types, we'll be able to know whether or not they are valid based on whether the number the user enters matches the regular expressions.

To see if they match, we use the PHP preg_match function, comparing the element in the array (each various credit card type) to the number that the user enters. The preg_match() function takes 2 parameters. The first is the element in the array we created. And this array represents each card type we specified. The 2nd parameter is the number that the user enters into the text box. If the number is a match, fitting the regular expression, we return the credit card. In each if statement, we had the variable $type and set it equal to the credit card type it is.

Else, if there are no matches, we return false.

We then simply call the function validatecard so that we actually execute it.

We run an if statement to see if what the function returns is not equal to false. If not equal to false (if it is true), we output the card detected and that the credit card number is valid.

If what the function returns is equal to false, then we output that the credit card number is invalid.

And this is all that is required to validate a credit card using PHP.

Of course, there is so much more advanced analytics involved in this. We have taken into account expiration dates and the security code. That requires much more advanced analytics, in which you basically have to contact the credit card vendor to get confirmation. And this is normally what when the actual payment is submitted. You would then have to check the actual vendor. But what we are doing here is simply checking the format and seeing whether is card value initially just by the numbers that the user enters. If the credit card number isn't valued, then we're going to waste resources, sending this number to the credit card vendor to be processed when it's erroneous to begin with. It first has to be in correct format. This doesn't mean that the actual credit card is correct, but the format is. It's the right number of digits, beginning with the right numbers. Then after that, we can send the information to a credit card to be processed. But before we do that, we first have to make sure the credit card number to begin with. So this is what we're doing.

Related Resources

How to Retrieve Data From a MySQL Database Using AJAX and PHP

HTML Comment Box is loading comments...

Learning about Electronics

How to Validate a Credit Card Using PHP & AJAX

HTML Code

Javascript & AJAX Code

PHP Code