Javascript 将信用卡读卡器连接到 Web 应用程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5243165/
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
Connect a credit card reader to web application?
提问by ajsie
Is there a way to connect a card reader to my web application (javascript) so that the user don't have to manually type in the credit card information?
有没有办法将读卡器连接到我的网络应用程序 (javascript)，这样用户就不必手动输入信用卡信息？
This web app is for buying products on a store. The user clicks on what items he want to purchase and then he swipes the credit card in the reader and he will get a receipt.
此网络应用程序用于在商店购买产品。用户点击他想购买的商品，然后在阅读器中刷信用卡，他会得到一张收据。
回答by AngeloS
Actually, it is possible due to the fact that simple USB card readers act as keyboard input devices. Since it acts as a keyboard input, once an inputbox is in focus you could swipe the card, push it to a hidden field using some nifty jQuery etc and then process it from there.
实际上，这是可能的，因为简单的 USB 读卡器可以充当键盘输入设备。由于它充当键盘输入，一旦输入框成为焦点，您就可以刷卡，使用一些漂亮的 jQuery 等将其推送到隐藏字段，然后从那里处理它。
Please see my answer on that question that Maris linked to.
EDIT: 2/2016
编辑：2/2016
I created a GitHub Gistwith a very simple jQuery implementation.
我用一个非常简单的 jQuery 实现创建了一个GitHub Gist。
回答by jay temp
As mention on the other answer, bar-code scanner or card reader works like a keyboard. You can attach a listener, for example in the whole document:
正如另一个答案所提到的，条形码扫描仪或读卡器就像键盘一样工作。您可以附加一个侦听器，例如在整个文档中：
document.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
// store it , in this example, i use localstorage
if(localStorage.getItem("card") && localStorage.getItem("card") != 'null') {
// append on every keypress
localStorage.setItem("card", localStorage.getItem("card") + String.fromCharCode(charCode));
} else {
// remove localstorage if it takes 300 ms (you can set it)
localStorage.setItem("card", String.fromCharCode(charCode));
setTimeout(function() {
localStorage.removeItem("card");
}, 300);
}
// when reach on certain length within 300 ms, it is not typed by a human being
if(localStorage.getItem("card").length == 8) {
// do some validation
if(passedonvalidation){
// do some action
}
}
}
You can attach listener on a textbox if you want to. Make sure it is focused when the card is swiped.
如果需要，您可以在文本框上附加侦听器。确保在刷卡时聚焦。
回答by chrony
This is how it works I think. The credit card will give you a piece of software that you install on your machine. That software exposes a service on a local port.
这就是我认为的工作方式。信用卡会给你一个安装在机器上的软件。该软件在本地端口上公开服务。
You're web application will POST a request to that local service. The request you made may just include the amount you want to charge plus some authentication token to authenticate against the service.
您的 Web 应用程序将向该本地服务发布请求。您提出的请求可能只包括您要收取的金额以及一些用于对服务进行身份验证的身份验证令牌。
After which the credit card terminal will process the charging and either return a reference number on success or a message on failure.
之后信用卡终端将处理收费并在成功时返回参考号或在失败时返回消息。
As you can see this process doesn't expose the credit card information to your web application. It just gets notified whether the transaction was approved or not so you can proceed or decline the processing of the order.
如您所见，此过程不会向您的 Web 应用程序公开信用卡信息。它只会收到交易是否被批准的通知，因此您可以继续或拒绝处理订单。
