Connect a credit card reader to web application?

Question

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?

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.

Answer 1

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.

Please see my answer on that question that Maris linked to.

EDIT: 2/2016

I created a GitHub Gist with a very simple jQuery implementation.

Answer 2

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.