How to Use a Credit Card Reader Without Modifying Your Website

Do you have a payment form on your website that you want to populate when a customer swipes their credit card?

This is a common situation when using a website for a POS or kiosk application.

PaymentFormThe following fields are contained in the track data on most credit cards and can be populated automatically when the customer’s credit card is swiped.

  • Cardholder’s Name
  • Card Number
  • Expiration Date

Automatically populating these credit card fields when the card is swiped will save time and reduce errors from manual data entry.

All you need 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 which can save on costs.  As an added benefit your website doesn’t need to be aware that it’s running on a kiosk or POS.

The reason no code changes are required to your website is because the KioskSimple kiosk software makes it trivial to “inject” a JavaScript file.

This simple JavaScript file “listens” for the card swiped event, then automatically populates the appropriate fields on the payment form.

The script will need to be customized to match the ids of the credit card fields on your payment form.  Here is an example script.

// Handler for cardswipe
window.OnCardSwiped = function (data, plugin, device) {
    try {
        if (document.getElementById("CardNumber") != null) {
            // Card name
            document.getElementById("CardName").value = data.Name;
            // Card number
            document.getElementById("CardNumber").value = data.CardNumber;
            // Expiration date
            var ExpDate = data.Expiration.split("/");
            // Expiration month
            if (ExpDate[0].length == 1)
                ExpDate[0] = "0" + ExpDate[0];
            document.getElementById("ExpirationMonth").value = ExpDate[0];
            // Expiration year
            if (ExpDate[1].length == 2)
                ExpDate[1] = "20" + ExpDate[1];
            document.getElementById("ExpirationYear").value = ExpDate[1];
    } catch (err) {

// Shortcut to check if KS is initialized
function K() {
    return !(typeof KioskSimple === 'undefined')

function init() {
    // Initialize KioskSimple
    try {
    catch (err) {

    // Wireup handler
    if (K()) {
        KioskSimple.Plugins.GetPlugin('Bank').OnCardSwiped = OnCardSwiped;
    } else {
        alert('KioskSimple Cardswiped handler NOT attached');

document.addEventListener("DOMContentLoaded", init);

How to get this example working 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.  Download the credit card reader JavaScript code example.

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

See the OnCardSwipedx function and change the GetElementByID calls to reference the ids of your payment fields.

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

Got Questions?

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

We also 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.

Andrew Savala
Follow me

Author: Andrew Savala

Andrew Savala is the CEO of RedSwimmer, with a background in designing and deploying complex payment kiosk systems. Andrew offers high-value, strategic consulting services to companies looking to develop their payment kiosks.