Connect a credit card reader to web application?

问题:

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.

回答1:

The short answer is - No. You can find some more explanation in How to link access card reader with PHP?

回答2:

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.

回答3:

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.

回答4:

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.

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.