How to Use a Credit Card Reader to Populate Payment Fields on a Website in JavaScript

magtek-credit-card-reader1.png
Magtek USB HID credit card reader

Want to automatically populate the payment fields on your website with a credit card reader?  We’ve made this really easy to accomplish using a little JavaScript, KioskSimple and a Magtek credit card reader.

I’m guessing you’re reading this article because you’ve decided to place your Ecommerce website on a self-service kiosk and want to save time with data entry when processing payments.

In this example I’ll create a simple HTML payment form and use JavaScript to communicate with a Magtek credit card reader to auto-populate the payment fields.

Keep in mind this example is for when the user must type in their payment information manually, also referred to as a “card NOT present transaction”.  If you prefer to process your website transactions as card present, then please check out my article Accepting Card Present Transactions From Your Website With JavaScript.

The example payment form looks like this…

PaymentForm
Simple HTML payment form

and the code looks like this…

Now when the user swipes their credit card the fields in the form will be automatically populated.

How to get this example working in KioskSimple

  1. Download the example Credit Card Auto-Populate Payment Fields – Web JavaScript and store the HTML file on your desktop.
  2. Download and install the free demo of KioskSimple.
  3. Insert a Magtek USD HID credit card reader into your PC and ensure that the reader is in HID mode (not keyboard emulation mode).  You can set the mode of the card reader by using this tool from Magtek.
  4. Run the KioskSimple Configuration Tool and navigate to the PLUGIN STORE.
  5. Install the Magtek USB Credit Card Reader Plugin.  The configuration tool will restart and you should now see a menu option called CARD READERS.  You can detect the card reader to ensure it’s installed correctly under CARD READERS->CONFIGURE.  Don’t worry about any of the settings here.
  6. Navigate to BROWSER->BROWSER SETTINGS and set the Start-up Web Page to the HTML file in this example.  In the case of my PC the path is “file:///C:/Users/Andrew/Desktop/ExampleCreditAutoPopulate/CreditTest.html”.  This could also point to your web server if you stored the file there, but I find it easier to store the file locally for this example.
  7. Save your settings and close the KioskSimple Configuration Tool.
  8. Start KioskSimple.
  9. Select “Try the Demo” and then “Test Mode”.
  10. Now you’ll see the HTML payment form pictured above.  Swipe your credit card and the fields should auto-populate.
  11. When you’re done press ESC and any password will work while KioskSimple is unregistered.

Got Questions?

Please contact us and we’ll get you in touch with a developer.  We offer free phone and email technical support for all of our code examples.  Try finding that anywhere else in this industry.

We’re dedicated to making your next kiosk project a success and are happy to hold your hand through the hardware integration.

 

Be Sociable, Share!
Andrew Savala
Follow me

Andrew Savala

Andrew Savala is the CEO of RedSwimmer Inc., creators of the kiosk lockdown software KioskSimple. Andrew has been developing kiosk software since 2007, with an emphasis on self-service retail payment applications.
Andrew Savala
Follow me

Author: Andrew Savala

Andrew Savala is the CEO of RedSwimmer Inc., creators of the kiosk lockdown software KioskSimple. Andrew has been developing kiosk software since 2007, with an emphasis on self-service retail payment applications.

One thought on “How to Use a Credit Card Reader to Populate Payment Fields on a Website in JavaScript”

Comments are closed.