Oct 16 2008

This JavaScript function will successfully extract a credit card number, name of the card holder, and expiration date from any standard credit card reader. I’ve tested this on numerous card types from American Express to Visa and many in between. This function was originally a method within a MooTools class that I wrote for a web application. So it will look a little strange, but is easily modifiable if you know your way around JavaScript, especially if you have played around with any JavaScript framework. A typical string stored with in the magnetic strip of a credit card will look something like the string below. In this string you can see the card belongs to Jon Fubar, the credit card number is 123401230123012, and the expiration date is 01/09. It is not possible to extract the CVV from this string (good for security purposes).

%b123401230123012^foobar/jon^0901111111111?;123401230123012=0901111111111?

1. First pass in the credit card string to the function
2. Next the ‘%B’ amd ‘%b’ are removed from the string as we don’t need these
3. Next I split the string into an array based on the carrot symbol ‘^’
4. The first element, arr[0], is the actual credit card number
5. The month is stored in the third element, arr[2], but I need to substring the element to get the month out
6. The year is also stored in the same element as the month string and again I need to substring it out of the element
7. Finally to get the first and last name I look in the second element, arr[1], and split on the slash ‘/’
8. I store the split string as nameArr, with the first element nameArr[0] containing the last name and nameArr[1] containing the first name

	setCreditCardAttributes: function(string){
        try {
            string = string.replace('%B', '');
            string = string.replace('%b', '');
            
            var arr = string.split('^');
            var nameArr = arr[1].split(' ');
            var len = nameArr.length;
            
            this.creditcardnumber = arr[0];
            this.month = arr[2].substring(2, 4);
            this.year = arr[2].substring(0, 2);
            this.first_name = '';
            this.last_name = '';
			
			nameArr = arr[1].split('/');
            this.first_name = nameArr[1];
            this.last_name = nameArr[0];
			this.payment_method_id=1;
			this.type='credit';
        } 
        catch (err) {
            pushToErrorLog('class Payment::setCreditCardAttributes() ' + err);
            displayMessageWindow('Error With Card', 'There was an error reading the data from this card', 'error');
        }

I wrap this in a try catch block so we can notify the end-user if this process fails in any sort of way, I then log the error so I can fix an issue that may arise. This is of course optional. Now you may be wondering “how do we know when to call this function?” Luckily most credit card readers send a return key ASCII code the O.S. and subsequently the users browser once it hits the end of the string. You’ll want to write a listener that waits for the return key ASCII code to be detected. The following code is suitable for this:

function returnKey(evt)
{
	var evt  = (evt) ? evt : ((event) ? event : null);
	var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

	if ((evt.keyCode == 13) && (node.type == "text")) 
	{
		switch(node.id)
		{
			case 'p1cc':
				setCreditCardAttributes($('p1cc').value); break;

		}
	}
}

This simply listens for a return key press, where the node type is an input type=”text”, and the id of the node is ‘p1cc’. This function will need to be initiated on body load like this:

document.onkeypress = returnKey;

I also have some code written for handling EFT scanners for reading the routing and account number from a Check, but I’ll have to post that some other day.

writing classes in javascript using mootools JavaScript snippet for handling EFT check scanners