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.

score 41 · Answer 1 · edited May 23 '17 at 12:03

41

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.

edited May 23 '17 at 12:03

Community

1
1

answered Mar 13 '12 at 15:15

AngeloS

5,536
7
40
58

1

Hidden field still allows the user to type, if he wants. He'll just not see it. – Guilherme Ferreira Dec 18 '17 at 19:42
This seems a bit out of date and based on magnetic stripes, not sure how that would work with a chip & pin/contactless reader – james-geldart Jan 19 '23 at 16:38

score 8 · Answer 2 · edited Oct 21 '14 at 08:19

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.

You need to check if the user copy/paste the code to the input, to do so just check if the CTRL and SHIFT modifiers are on, if so just clear the field. Otherwise the user would just "type" instantaneously by pasting — Guilherme Ferreira, Dec 18 '17 at 19:43

score 0 · Answer 3 · answered Apr 21 '17 at 12:28

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.

How would authorize.net work? Do they have a service available to install locally? — PHPGuru, Jan 01 '21 at 15:29

Connect a credit card reader to web application?

3 Answers3