Bank Card Readers for Web Applications

March 23, 2013

I made a web-based point of sale for The Loopy Ewe, but it needed an easier way to accept credit cards aside from manually typing in the credit card details. To help with that, we got a keyboard-emulating USB magnetic card reader and I wrote a parser for the card data and convert it to an object. It is fairly simple to hook up to a form and enable a card to be scanned while the user is focused in the name or number fields...

require(
    [ 'payment/form/cardparser', 'vendor/mootools' ],
    function (paymentFormCardparser) {
        function storeCard(card) {
            $('payment[card][name]').value = card.name;
            $('payment[card][number]').value = card.number;
            $('payment[card][expm]').value = card.expm;
            $('payment[card][expy]').value = card.expy;
            $('payment[card][code]').focus();
        }

        paymentFormCardparser
            .listen($('payment[card][name]'), storeCard)
            .listen($('payment[card][number]'), storeCard)
        ;
    }
);

It acts as a very passive listener without requiring the user to do anything special – if there is no card reader connected then the form field is simply a regular field for keyboard input.