Guest Post by Bill
In this tutorial, I will be describing a more effective way to validate credit cards when accepting payment on your site. This method provides smoother and more compact way of verification, eliminating the use of larger scripts. The plug-in I will be describing will help you so that you can check a credit card number you are given for correct checksum values as well as correct format before submitting for processing.
To begin, we will describe how this plug-in works. This plug-in takes details about a credit card and returns true or false depending whether the card passes checksum and date verification. It requires the following arguments:
Number: A Credit Card Number
Month: The Credit Card's Expiry Month
Year: The Credit Card's Expiry Year
Variables, Arrays, and Functions
left Local variable containing the first 4 digits of numbercclen Local variable containing the number of digits in numberchksum Local variable containing the card’s checksumdate Local date objectsubstr() Function to return a portion of a stringgetTime() Function to get the current time and dategetFullYear() Function to get the year as a 4-digit numbergetMonth() Function to get the month
This function first ensures that all three parameters passed to it are strings by adding the
empty string to them, like this:
Next, each argument is processed through a CleanupString() to ensure that they are in the formats required:number += ' 'month += ' 'year += ' '
number = CleanupString(number, true, false, true, true)
month = CleanupString(month, true, false, true, true)
year = CleanupString(year, true, false, true, true)
After this, the variable left is assigned the first 4 digits of number, cclen is set to the
card number’s length, and chksum is initialized to 0:
var left = number.substr(0, 4)
var cclen = number.length
var chksum = 0
Now with several if() ... else if() statements we check that left contains a valid sequence that matches a known brand of credit card and, if it does, that the card number length in cclen is correct for the card type. However, If left doesn’t match a known card, or it matches one but cclen is the wrong length, then the plug-in returns false to indicate that the card cannot be verified.
If these initial tests are passed, the card’s checksum is then calculated using a very known algorithm that gives us just what we need (this algorithm was invented by a the famous IBM scientist Hans Peter Luhn)
for (var j = 1 - (cclen % 2) ; j < cclen ; j += 2)
if (j < cclen) chksum += number[j] * 1
for (j = cclen % 2 ; j < cclen ; j += 2)
{
if (j < cclen)
{
d = number[j] * 2
chksum += d < 10 ? d : d - 9
}
}
if (chksum % 10 != 0) return false
To use this plug-in, pass it a card number, expiry year, and month and it will return true or false. Of course, this algorithm tests only whether the card meets certain requirements. This program will give the customer a "heads up" to check their info before trying to submit their information; it does not test whether the user has entered a genuine card or whether the charge will go through. This plug-in is best for preventing errors before the processing state, e.g. catching mistakes made by customers in typing numbers, entering correct numbers in the wrong area of a form, etc).
Again, a big warning here: We are not connecting to a bank or any financial party to provide us any verification as to whether this card is good to go for a certain amount of payment or not.
The purpose of the plug-in is to catch typing errors, as well as people entering random data to see what happens.
Here is a full coded example using our previous code:
<h3>Your credit card details:</h3>
<font face='Courier New'>
Card Number: <input id='ccnum' type='text' name='n' size='24' /><br />
Expires: Month <input id='ccmonth' type='text' name='m' size='2' />
Year <input id='ccyear' type='text' name='y' size='4' /><br />
<button id='button'>Submit Credit Card</button>
<script>
window.onload = function()
{
O('button').onclick = function()
{
if (ValidateCreditCard(O('ccnum').value, O('ccmonth').value, O('ccyear').value))
alert("The card validated successfully")
else
alert("The card did not validate!")
}
}
</script>
If you are to use this plug-in with your own code, you will probably want to replace the onclick event attachment used in the example with a function attached to the onsubmit event of your form. Also, make sure that when you do this your function returns true if the card verifies to allow the form submission to complete, and false (along with and alert message stating the error message) if the card submission doesn’t validate, to stop the form submission from going through.
The full plug-in code:
CODE
function ValidateCreditCard(number, month, year)
{
number += ' '
month += ' '
year += ' '
number = CleanupString(number, true, false, true, true)
month = CleanupString(month, true, false, true, true)
year = CleanupString(year, true, false, true, true)
var left = number.substr(0, 4)
var cclen = number.length
var chksum = 0
if (left >= 3000 && left <= 3059 ||
left >= 3600 && left <= 3699 ||
left >= 3800 && left <= 3889)
{ // Diners Club
if (cclen != 14) return false
}
else if (left >= 3088 && left <= 3094 ||
left >= 3096 && left <= 3102 ||
left >= 3112 && left <= 3120 ||
left >= 3158 && left <= 3159 ||
left >= 3337 && left <= 3349 ||
left >= 3528 && left <= 3589)
{ // JCB
if (cclen != 16) return false
}
else if (left >= 3400 && left <= 3499 ||
left >= 3700 && left <= 3799)
{ // American Express
if (cclen != 15) return false
}
else if (left >= 3890 && left <= 3899)
{ // Carte Blanche
if (cclen != 14) return false
}
else if (left >= 4000 && left <= 4999)
{ // Visa
if (cclen != 13 && cclen != 16) return false
}
else if (left >= 5100 && left <= 5599)
{ // MasterCard
if (cclen != 16) return false
}
else if (left == 5610)
{ // Australian BankCard
if (cclen != 16) return false
}
else if (left == 6011)
{ // Discover
if (cclen != 16) return false
}
else return false // Unrecognized Card
for (var j = 1 - (cclen % 2) ; j < cclen ; j += 2)
if (j < cclen) chksum += number[j] * 1
for (j = cclen % 2 ; j < cclen ; j += 2)
{
if (j < cclen)
{
d = number[j] * 2
chksum += d < 10 ? d : d - 9
}
}
if (chksum % 10 != 0) return false
var date = new Date()
date.setTime(date.getTime())
if (year.length == 4) year = year.substr(2, 2)
if (year > 50)
return false
return false
else if (year < (date.getFullYear() - 2000))
return false
return false
else if ((date.getMonth() + 1) > month
return false
return false
else
return true
}
return true
}
CODE
So this is how we can use JavaScript in a more effective way to verify the credit card information.
About the Guest AuthorThis article was contributed by Bill at Spotted Frog Design, a web development and online marketing company based in the Philadelphia area. For more information about Spotted Frog, please visit their site, or follow them on Twitter at spottedfrog
Loved the Story!!!!! Comment and let's know.
.jpg)
.jpg)
3 comments:
Hey keep posting such good and meaningful articles.
That is an extremely smart written article. I will be sure to bookmark it and return to learn extra of your useful information. Thank you for the post. I will certainly return.
I really appreciate your professional approach. These are pieces of very useful information that will be of great use for me in future.
Post a Comment