KioskSimple

How to Parse Credit Card Data from a Magnetic Stripe Reader Using JavaScript

How to Parse Credit Card Data from a Magnetic Stripe Reader Using JavaScript

May 20, 2021

Filed under: Credit Card Reader,  Magtek,  USB HID

In this article, we’re going to cover how to easily parse credit card data from a magnetic stripe reader using JavaScript.

This is particularly useful when you want to put your website on a kiosk and automatically populate the credit card fields when the customer swipes their card.

By automatically populating the credit card payment fields, you reduce the potential for user error and speed up the checkout process.

The following fields are contained in the track data on most credit cards and can be easily parsed from the credit card data using JavaScript when the customer swipes their credit card.

  • Cardholder’s Name
  • Card Number
  • Expiration Date

All you need to get started is KioskSimple and an unencrypted Magtek USB HID credit card reader like the Magtek Dynamag.

The solution outlined in this article doesn’t require any code changes to your website.  This is especially beneficial if you’re using a 3rd part POS which you can’t modify.

The reason no code changes are required to your website is because KioskSimple makes it possible to “inject” a JavaScript file, which we’ll explain in a moment.

Parse credit card data in KioskSimple

The first step is to download and install the free demo of KioskSimple.

Customize the script to your payment form

Next, we need to download the credit card reader JavaScript code example and customize the credit card script to work with your payment form.

You’ll need to make some minor changes in order to make the script reference the credit card fields on your payment form.

This example JavaScript file “listens” for the card swiped event, then parses the credit card track data and automatically populates the appropriate fields on the payment form.

In the OnCardSwiped function you’ll need to change all the GetElementByID calls to reference the ids of your payment fields.

For example, your credit card number field might look like the following:

<input id="ccNum" maxlength="50" type="text" />

So you would need to change the field id in your JavaScript file from this:

document.getElementById("CardNumber")

to this:

document.getElementById("ccNum")

If you have any questions please feel free to contact us and we’ll be glad to help.

Configure KioskSimple to inject your credit card script:

  1. Copy the file CreditCardScript.js from the code example you downloaded to the folder “C:\ProgramData\RedSwimmer\KioskSimple”
  2. Start the KioskSimple configuration app.
  3. Select the BROWSER left menu
  4. Select JAVASCRIPT
  5. Under JavaScript Injection URL enter the path of the credit card script “file:///C:/ProgramData/RedSwimmer/KioskSimple/CreditCardScript.js”.  You can also drag the JavaScript file into a browser like Chrome to get the local file path.
  6. Save your settings

Configure KioskSimple to run your website:

  1. Select the BROWSER left menu
  2. Select BROWSER SETTINGS
  3. Under Start-up Web Page enter the URL of your website to run in kiosk mode
  4. Save your settings

Install the Magtek Credit Card Reader Plugin

  1. Select the PLUGIN STORE left menu
  2. Select the Available plugins tab
  3. Download the Magtek Credit Card Reader Plugin
  4. You’ll be prompted to restart the configuration app after which the new CARD READERS menu item will appear

Configure the Magtek Credit Card Reader Plugins

  1. Select CARD READERS from the left menu
  2. Select the Magtek credit card reader and press CONFIGURE
  3. Enable the device and press DETECT to confirm it’s properly configured. The device must be attached to a USB port and configured in HID mode (not keyboard emulation mode). If the device is not detected it’s probably not in HID Mode. You can use this app from Magtek to reconfigure the card reader to HID Mode
  4. Save your settings and close the KioskSimple configuration app

Start KioskSimple in Test Mode

If you swipe your credit card on your payment page the following fields should be automatically populated…

  • Cardholder’s Name
  • Card Number
  • Card Expiration

If they’re not then you probably either didn’t modify the JavaScript example correctly, or didn’t inject it.  As a sanity check try adding some alerts() to confirm the script is running.

Got Questions?

Please contact us if you need help customizing the script to match your payment form.

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