bank card readers js

blog/_posts/2013-03-23-bank-card-readers-for-web-applications.md

@@ -0,0 +1,41 @@
+---
+title: Bank Card Readers for Web Applications
+layout: post
+tags: bank-card forms javascript reader
+description: Scanning credit cards into website forms.
+code: https://gist.github.com/dpb587/5229239
+---
+
+I made a web-based [point of sale][1] for [The Loopy Ewe][2], 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][3] for the [card data][4] 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...
+
+{% highlight javascript %}
+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)
+        ;
+    }
+);
+{% endhighlight %}
+
+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.
+
+
+ [1]: http://en.wikipedia.org/wiki/Point_of_sale
+ [2]: http://www.theloopyewe.com/
+ [3]: https://gist.github.com/dpb587/5229239#file-cardparser-js
+ [4]: http://en.wikipedia.org/wiki/Magnetic_stripe_card

include/site/default.css

@@ -161,7 +161,7 @@ section .timeline > * {
     margin-bottom: 4px;
 }
 
-    article.layout-post .timeline > *,
+    body.layout-post section .timeline > *,
     section:hover .timeline > * {
         opacity: 1;
     }