[Danny Berger](https://dpb587.me/ "Home")

# Bank Card Readers for Web Applications

March 23, 2013

I made a web-based [point of sale](http://en.wikipedia.org/wiki/Point_of_sale) for [The Loopy Ewe](http://www.theloopyewe.com/), 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 [parse](https://github.com/dpb587/dpb587.me/blob/master/appendix/2013-03-23-bank-card-readers-for-web-applications/cardparser.js) for the [card data](http://en.wikipedia.org/wiki/Magnetic_stripe_card) 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.

## Reader Comments

Copyright © 2026 // [dpb587.me](https://dpb587.me/) is a [personal](https://dpb587.me/projects/website), [open source](https://github.com/dpb587/dpb587.me/blob/main/content/post/2013/bank-card-readers-for-web-applications-20130323.md) site.