How to Parse Credit Card Track Data Using JavaScript

Magtek Parse Credit Card Track Data

In this article, we’re going to cover how to easily parse credit card track data 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.

parse credit card track data to populate payment formThe following fields are contained in the track data on most credit cards and can be easily parsed 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 a Magtek 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 the KioskSimple makes it possible to “inject” a JavaScript file, which we’ll explain in a moment.

Parse credit card track 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 customize the credit card script to work with your payment form.  Copy the script from the example below and name the file “CreditCardScript.js”, or download the code example “JavaScript Injection Credit Card Auto-Populate Payment Fields – Web JavaScript” and extract the file.

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 OnCardSwipedx 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:

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

to this:

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”
  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.

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.