Parsing Credit Card data from magnetic stripe reader using javascript

Question

Ok, So I have an html form that is displayed like so:

   <span style='required'>*</span> - Indicates required field.
   <div class='fields'>Swiped Information</div>
     <input type=text name='swiped' id='swiped'>
   </div>
   <div class='fields'>First Name</div>
    <input type=text name='first_name' id='first_name'><span style='required'>*</span>
   </div>
   <div class='fields'>Last Name</div>
    <input type=text name='last_name' id='last_name'><span style='required'>*</span>
   </div>
   <div class='fields'>Expiration</div>
    <input type=text size=8 name='expiration' id='expiration'><span style='required'>*</span>(MMYY)
   </div>
   <div class='fields'>CVV Code</div>
    <input type=text size=8 name='cvv' id='cvv'><span style='required'>*</span>
   </div>
   <div class='fields'>Credit Card Number</div>
    <input type=text name='card' id='card'><span style='required'>*</span>
   </div>
   <hr>
   <div class='buttons'></div>
    <a onclick="readCard();" style="cursor:pointer; color:red;">Swipe Credit Card</a>
   </div>

My knowledge of this kind of stuff is very poor. I have a basic little Credit Card Reader that plugs into my computer via USB. I am wanting to be able to swipe a credit card and have my website parse the information into the form fields that are above.

I have added an onclick=readCard(); event to a link below my form and when that is pushed java script is initiated to put focus on the Swiped Information field which will store the string of data from the magnetic stripe reader.

function readCard () {

   document.getElementById('swiped').focus();

}

My thoughts would be that the employee would hit "Swipe Credit Card" which would make the Swiped Card Information field have focus and would fill that field with the string, then the javascript would break that information up into pieces and fill the form accordingly.

I have searched high and low to try and find a solution and the closest I could come was a tutorial that used asp.net as the language and I can't do that. Either PHP or JavaScript. Thanks in advance.

All I need to do is break that long string up into multiple and display the appropriate parts in the html form.

PS I'm not worried about form validation ATM, I will be taking care of that after I manage to make it fill the form fields! Thanks!

UPDATE:

I created a JSFiddle although the java script I put in doesn't appear to be working. http://jsfiddle.net/r8FJX/

UPDATE:

As per the comments below, I have added an example of the data sent from my card reader to the computer. I went in and replaced every number in the string with randomly typed fake numbers and replaced my name with a fake one. (Sorry scammers!)

%B6545461234613451^DOE/JOHN^00000000000000000000000?;6545461234613451=984651465116111?

I am assuming this how the code above is laid out, I can't find any documentation:

%Bcardnumber^lastname/firstname^expDate?;cardnumber=expDate?

Answer 1

Option 1)

var card_data = "%B6545461234613451^DOE/JOHN^00000000000000000000000?;6545461234613451=984651465116111?"

var details1 = card_data.split("^");

var card_number = details1[0];
card_number = card_number.substring(2);

var names = details1[1].split("/");
var first_name = names[1];
var last_name = names[0];

var details2 = details1[2].split(";");
details2 = details2[1].split("=");

var exp_date = details2[1];
exp_date = exp_date.substring(0, exp_date.length - 1);
exp_date = exp_date.substring(2, 3) + "/" + exp_date.substring(0,1);

Option 2)

var pattern=new RegExp("^\%B(\d+)\^(\w+)\/(\w+)\^\d+\?;\d+=(\d\d)(\d\d)\d+$");
var match = pattern.exec(card_data);

card_number = match[1];
first_name = match[3];
last_name = match[2];
exp_date = match[5] + "/" + match[4];

Then Do:

document.getElementById("first_name").value = first_name;
document.getElementById("last_name").value = last_name;
document.getElementById("card").value = card_number;
document.getElementById("expiry").value = exp_date;

Answer 2

I had success with the follow for expiration date:

exp_date = exp_date.substring(2, 4) + "/" + exp_date.substring(1, 3);

Answer 3

Just For Future viewers like myself that was searching. The expiry needed to be adjusted. This will make the expiry look like... 10/18. Not 10/81 like I was getting...

Below shows the corrected formatted date of ex: 10/18 not 10/81 or 1/1

exp_date = exp_date.substring(2, 4) + "/" + exp_date.substring(0,2);

Answer 4

(For future people trying to parse USB credit card reader data)

There are two (sometimes 3) tracks of data, they are separated with ? . The expiry date is duplicated on the first track and the second track. If you want to read enough data to charge a credit card you can ignore the Track 2 data (everything from the ; onwards).

The CVC is not stored on the magnetic stripe data. You'll have to disable the CVC check in your payment processor. With Stripe you can do it at https://dashboard.stripe.com/radar/rules .

let parse = readerData => {
    let card = readerData.match(/%B([0-9]+)\^([A-Z /.]+)\/([A-Z /.]*)\^([0-9]{2})([0-9]{2})/);

    let lastName = card[2].trim();
    // 'LASTNAME/FIRSTNAME.MR' is possible
    let firstName = card[3].trim().split('.')[0];
    let fullName = `${firstName} ${lastName}`;

    return {
        exp_month: card[5],
        exp_year: card[4],
        number: card[1],
        name: fullName,
    };
}

parse('%B6545461234613451^DOE/JOHN^21040000000000000000000?;this part does not matter')
// {exp_month: "04", exp_year: "21", number: "6545461234613451", name: "JOHN DOE"}

If you're using Stripe.js v2 you can pass the object returned by parse() directly to Stripe.card.createToken() .

I've seen LASTNAME/FIRSTNAME MIDDLENAME in sample data, this code should turn that into FIRST MIDDLE LAST .

Read https://en.wikipedia.org/wiki/Magnetic_stripe_card#Financial_cards for more info.

I don't know if doing this is legal . Newer USB credit card readers encrypt the data they read (you have to send the data to their api (and pay them) to decrypt it).

If you're having issues with the regex try https://regex101.com/ for debugging it.