Javascript to Parse Credit Card Track 1 and/ or 2 Magnetic Stripe Read

Your mileage will vary based on what your hardware is configured to return. The simplest way to test is to swipe into your favorite text editor.

My hardware returned a format like this for Track 1:

B9999999999999999^lastName/FirstName^yymm....

And like this for Track 2:

9999999999999999=yymm...

Where “…” is a bunch of stuff I didn’t care about for the purposes of this particular project. If you care, you may wish to refer to the Wikipedia entry about the data encoded on tracks 1 and 2. That entry may prove helpful if your hardware is tweaked differently from mine.

Side Rant Begins:

An aside having nothing to do with this script at all, but rather with the dearth of useful information available in regards to hiding the address bar. Especially the snotty tone used by those who scorned such javascript tactics as hiding the navigation bar as something “you just don’t do.”

Well, I want to. I want to hide everything except the form I’m showing. I’m not writing this web application for the General Public. I’m writing a private application used only within the four walls of my company only on the browser I designate.

More importantly, I’m writing the code, and should be able to do whatever I damn well please. I despise these environments and attitudes designed to protect a lazy programmer from their own code. I am reminded of the SCO Xenix man page for “setjmp, longjmp — non-local goto”, years ago, which stated (I swear I am not making this up):

“If longjump is called before setjmp, absolute chaos is guaranteed.”

Doesn’t that sound exactly like something you want to try right now?

Side Rant Ends.

On to the code! My html form has 5 input fields:

  • ccNum: the field into which you swipe a card. add an “onBlur=’swipedCreditCard();’” to this field.
  • ccExpir: Expiration date. Note that I’m swapping the yymm into mmyy, as that’s the way it appears on the physical card and is simpler for our users to grok.
  • ccCvv: Those 3 digits on the back of your card, after the card number (Visa/MC) or the 4 digits after the card number on the front of the card (American Express just loves to be different) (P.S. I don’t want to hear anything about American Express not being a credit card. I don’t care.).
  • fname: First Name
  • lname: Last Name

The code is pretty careless about checking lengths of the various pieces of data, so you might want to bulletproof it a bit more.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
function
swipedCreditCard() {
 
    ccField = document.getElementById('ccNum');
    expirField = document.getElementById('ccExpir');
    cvvField = document.getElementById('ccCvv');
    fname = document.getElementById('fname');
    lname = document.getElementById('lname');
 
    if( ccField.value.length <= 0 ) {
        return true;
    }
 
    if ( ccField.value.substr(0,1) == "B" ) {
        var containsCaret = ccField.value.search('^');
        if( containsCaret &lt; 0 ) {
            expirField.focus();
        }
        else {
            var pieces = ccField.value.split('^');
            if( pieces.length >= 3 ) {
                var cardNumber = pieces[0];
                var name = pieces[1];
                var exp = pieces[2];
 
                ccField.value = cardNumber.substr(1,(cardNumber.length-1));
                expirField.value = exp.substr(2,2) + exp.substr(0,2);
 
                namepieces = name.split('/');
                var l = namepieces[0];
                var f = namepieces[1];
 
                fname.value = f;
                lname.value = l;
 
                cvvField.focus();
            }
        }
    }
    else {
        var containsEqual = ccField.value.search('=');
        if( containsEqual < 0 ) {
            expirField.focus();
        }
        else {
            var pieces = ccField.value.split('=');
            if( pieces.length <= 2 ) {
                var cardNumber = pieces[0];
                var exp = pieces[1];
 
                ccField.value = cardNumber;
                expirField.value = exp.substr(2,2) + exp.substr(0,2);
 
                cvvField.focus();
            }
        }
    }
    return true;
}

I only tested this out on Firefox 3 so your mileage may vary there, too.

Facebook comments: