From f11d01a113a5d2073db45c86173ae4fbd9de91ae Mon Sep 17 00:00:00 2001
From: Danny Berger <dpb587@gmail.com>
Date: Sat, 23 Mar 2013 14:49:14 -0600
Subject: [PATCH] bank card readers js

---
 ...-bank-card-readers-for-web-applications.md | 41 +++++++++++++++++++
 include/site/default.css                      |  2 +-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 blog/_posts/2013-03-23-bank-card-readers-for-web-applications.md

diff --git a/blog/_posts/2013-03-23-bank-card-readers-for-web-applications.md b/blog/_posts/2013-03-23-bank-card-readers-for-web-applications.md
new file mode 100644
index 0000000..b4f6317
--- /dev/null
+++ b/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
diff --git a/include/site/default.css b/include/site/default.css
index cbec3d6..0a4719a 100644
--- a/include/site/default.css
+++ b/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;
     }