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

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.

The example payment form looks like this…

Simple HTML payment form

and the code looks like this…

    <script src=""></script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <script src=""></script>
        $(document).ready(function () {
            try {
                KioskSimple.Plugins.GetPlugin('Bank').OnCardSwiped = OnCardSwiped;
                $(window).unload(function () {
            catch (err) {
                $("#output").append("Something went wrong intitializing KioskSimple. Error:" + err)

        function OnCardSwiped(data, plugin, device) {
            var isIE = true;

            // Try using IE
            try {
                var ccdata = $.parseJSON(data);
            } catch (err) {
                isIE = false;

            // Else use Chrome
            if (!isIE) {
                try {
                } catch (err) { $("#output").append(err); }
    <div style="padding-top:30px;" class="container theme-showcase">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2" for="name">Name:</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="name" placeholder="Enter email">
            <div class="form-group">
                <label class="control-label col-sm-2" for="ccnum">Credit Card Number:</label>
                <div class="col-sm-10">
                    <input  class="form-control" id="ccnum" placeholder="Enter password">
            <div class="form-group">
                <label class="control-label col-sm-2" for="expiry">Expiration Date:</label>
                <div class="col-sm-10">
                    <input  class="form-control" id="expiry" placeholder="Expiration Date">
        <div class="row">
            <div class="col-sm-12">
                <div id="output" class="list-group" style="color:red;">

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 credit card reader JavaScript code example 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.

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.