javascript 使用javascript从磁条阅读器解析信用卡数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19018799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parsing Credit Card data from magnetic stripe reader using javascript
提问by Mitch Evans
Ok, So I have an html form that is displayed like so:
好的，所以我有一个 html 表单，显示如下：
<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.
我对这种东西的了解非常贫乏。我有一个基本的小型信用卡读卡器，可通过 USB 插入我的计算机。我希望能够刷信用卡并让我的网站将信息解析到上面的表单字段中。
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 Informationfield which will store the string of data from the magnetic stripe reader.
我onclick=readCard();在表单下方的链接中添加了一个事件，当它被推送时，java 脚本被启动以将焦点放在Swiped Information将存储来自磁条阅读器的数据字符串的字段上。
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.
我的想法是，员工会点击“刷卡信用卡”，这将使刷卡信息字段具有焦点并用字符串填充该字段，然后 javascript 会将这些信息分解成碎片并相应地填写表单。
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.
我已经搜索了很多次以尝试找到解决方案，我能找到的最接近的是一个使用 asp.net 作为语言的教程，但我不能这样做。PHP 或 JavaScript。提前致谢。
All I need to do is break that long string up into multiple and display the appropriate parts in the html form.
我需要做的就是将这个长字符串分成多个并以 html 形式显示适当的部分。
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!
PS 我不担心表单验证 ATM，在我设法让它填写表单字段后，我会处理这个问题！谢谢！
UPDATE:
更新：
I created a JSFiddle although the java script I put in doesn't appear to be working. http://jsfiddle.net/r8FJX/
我创建了一个 JSFiddle，尽管我放入的 java 脚本似乎不起作用。 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?
回答by Zack Newsham
Option 1)
选项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)
选项 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;
回答by user3179317
I had success with the follow for expiration date:
我成功地遵循了到期日期：
exp_date = exp_date.substring(2, 4) + "/" + exp_date.substring(1, 3);
exp_date = exp_date.substring(2, 4) + "/" + exp_date.substring(1, 3);
回答by Anthony Porter
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...
像我这样正在搜索的 Just For Future 观众。需要调整到期时间。这将使到期看起来像...... 10/18。不像我得到的 10/81
Below shows the corrected formatted date of ex: 10/18 not 10/81 or 1/1
下面显示了更正后的格式化日期：10/18 而不是 10/81 或 1/1
exp_date = exp_date.substring(2, 4) + "/" + exp_date.substring(0,2);
回答by Boris
(For future people trying to parse USB credit card reader data)
（对于未来尝试解析 USB 信用卡读卡器数据的人）
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).
有两个（有时是 3 个）数据轨道，它们以?. 到期日期在第一首曲目和第二首曲目上重复。如果您想读取足够的数据来从信用卡中扣款，您可以忽略 Track 2 数据（以后的所有数据;）。
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.
CVC 不存储在磁条数据上。您必须在付款处理器中禁用 CVC 检查。使用 Stripe，您可以在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 v2you can pass the object returned by parse()directly to Stripe.card.createToken().
如果您使用的是Stripe.js v2，则可以将 返回的对象parse()直接传递给Stripe.card.createToken().
I've seen LASTNAME/FIRSTNAME MIDDLENAMEin sample data, this code should turn that into FIRST MIDDLE LAST.
我LASTNAME/FIRSTNAME MIDDLENAME在示例数据中看到，这段代码应该把它变成FIRST MIDDLE LAST.
Read https://en.wikipedia.org/wiki/Magnetic_stripe_card#Financial_cardsfor more info.
阅读https://en.wikipedia.org/wiki/Magnetic_stripe_card#Financial_cards了解更多信息。
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).
我不知道这样做是否合法。较新的 USB 信用卡读卡器对他们读取的数据进行加密（您必须将数据发送到他们的 api（并付款）以对其进行解密）。
If you're having issues with the regex try https://regex101.com/for debugging it.
如果您在使用正则表达式时遇到问题，请尝试使用https://regex101.com/进行调试。
