php - Parsing Credit Card data from magnetic stripe reader using javascript - Stack Overflow

admin管理员组

文章数量:1344607

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 puter 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 e was a tutorial that used asp 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.

P.S. 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. /

UPDATE:

As per the ments below, I have added an example of the data sent from my card reader to the puter. 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?

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 puter 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 e was a tutorial that used asp 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.

P.S. 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/r8FJX/

UPDATE:

As per the ments below, I have added an example of the data sent from my card reader to the puter. 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?

• javascript
• php
• jquery

Share Improve this question Follow edited Sep 26, 2013 at 3:57 Mitch Evans asked Sep 26, 2013 at 3:24 Mitch EvansMitch Evans 64133 gold badges1010 silver badges2525 bronze badges 6

• could you give an example of the swiped credit card data? – Andy Jones Commented Sep 26, 2013 at 3:31
• You will need to let us know the details of the credit card as well - we can probably figure out from looking the card number and name - but we have little chance of guessing wich the CVV and date fields are. – Zack Newsham Commented Sep 26, 2013 at 3:40
• What do you mean "details" I'm not posting my real credit card information – Mitch Evans Commented Sep 26, 2013 at 3:42
• Right - thats fine of course. But youve just given us a load of random numbers there - how are we to know which of those numbers represents a date, and which represent a CVV, and which represent a credit card number? Without going through the code of the credit card reader (if its available) there is no way of us knowing - so, which of the numbers above is the valid from date? Which is the expiry date? Thats what I'm saying - does the manufacturer not provide any example data? – Zack Newsham Commented Sep 26, 2013 at 3:50
• You're still missing CVV number, but I will continue my answer without it. – Zack Newsham Commented Sep 26, 2013 at 4:02

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 5

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;

I had success with the follow for expiration date:

exp_date = exp_date.substring(2, 4) + "/" + exp_date.substring(1, 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);

(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./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/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./ for debugging it.

本文标签： phpParsing Credit Card data from magnetic stripe reader using javascriptStack Overflow