How to Accept Card Present Transactions from Your Website with JavaScript

JavaScript credit card reader integration
Magtek USB HID credit card reader

This article covers a simple way to accept card present transactions from your website using a Magtek credit card reader, JavaScript and KioskSimple.

You’re probably reading this article because you’ve decided to put your website on a self-service kiosk or tablet.  Rather than requiring your customers to enter all of their payment information, it makes more sense to have them swipe their credit card and process the transaction like a POS.

This also results in lower fees from the credit card processor, which is always a big plus.

This article includes an in-depth example, including source code, for integrating a Magtek credit card reader with your website via JavaScript and KioskSimple.

This example also processes the payment via Authorize.Net, which you can optionally substitute for your own payment gateway.  Please contact us if you want help substituting a different payment gateway.

Please keep in mind this article covers processing a card present transaction from your website.  If you’re interested in processing a card NOT present transaction from your website please check out my other article on Using a Credit Card Reader to Populate Payment Fields on a Website in JavaScript.

You can see from the following code example the basic flow for interacting with the Magtek credit card reader goes like this…

  1. Initialize the KioskSimple API “window.external.KioskSimpleAPIInit();”
  2. Wire up the events (OnCreditChanged, OnCardSwipped, etc…)
  3. Set the amount of the payment “KioskSimple.Plugins.GetPlugin(‘Bank’).SetAmountDue(InvoiceToCharge);
  4. Enable the credit card reader “KioskSimple.Plugins.GetPlugin(‘_devices’).EnableAllDevicesByCategory(“CreditCard”);”
  5. Listen for the result and display output to user
  6. Disable the credit card reader “KioskSimple.Plugins.GetPlugin(‘_devices’).DisableAllDevicesByCategory(“CreditCard”);”
var ccEnabled = false;

//Assuming using jQuery, lets wait until the document has finished loading. 
$(document).ready(function () {
    //This reaches out to KioskSimple and requests API initialization
    catch (err) {

        //If we got here then we are not running within KioskSimple, lets disable all buttons and output to user
        $("#btnEnableCredit").prop('disabled', true);
        $("#btnDisableCredit").prop('disabled', true);
        outputActionResult("Initialization", "Something went wrong intitializing KioskSimple. Error:" + err)
    //If we got this far, we are successfully running within KioskSimple's local code domain
    if (K()) {
        //If the credit in KioskSImple changes, lets update our own UI
        KioskSimple.Plugins.GetPlugin('Bank').OnCreditChanged = KSCreditChanged;
        KioskSimple.Plugins.GetPlugin('Bank').OnCardSwiped = OnCardSwiped;
        KioskSimple.Plugins.GetPlugin('Bank').OnPaymentComplete = OnPaymentComplete;
        KioskSimple.Plugins.GetPlugin('Bank').OnPaymentCancelled = OnPaymentCancelled;
        KioskSimple.Plugins.GetPlugin('Bank').OnPaymentError = OnPaymentError;
        KioskSimple.Plugins.GetPlugin('Bank').OnUnsupportedCard = OnUnsupportedCard;
        outputActionResult("Initialization", "Kiosk Simple loaded.")


//Not 100% needed but a nice shortcut to determine if KS is preset.
function K() {
    return !(typeof KioskSimple === 'undefined')

//KS Credit Changed Handler. Whenever credit changes in the KioskSImple instance. This handler will fire off. 
function KSCreditChanged(amount) {

function OnCardSwiped(data, plugin, device) {
    var output = new Object();
    output.plugin = plugin; = data;
    output.device = device;
    outputActionResult("OnCardSwiped", "result:" + JSON.stringify(output))

function OnPaymentComplete(type, amount, data, plugin, device) {
    var output = new Object();
    output.type = type;
    output.amount = amount;
    output.plugin = plugin; = data;
    output.device = device;
    outputActionResult("OnPaymentComplete", "result:" + JSON.stringify(output))


function OnPaymentCancelled(type, data, plugin, device) {
    var output = new Object();
    output.type = type;
    output.plugin = plugin; = data;
    output.device = device;
    outputActionResult("OnPaymentCancelled", "result:" + JSON.stringify(output))


function OnPaymentError(type, data, plugin, device) {
    var output = new Object();
    output.type = type;
    output.plugin = plugin; = data;
    output.device = device;
    outputActionResult(" OnPaymentError", "result:" + JSON.stringify(output))


function OnUnsupportedCard(type, plugin, device) {
    var output = new Object();
    output.type = type;
    output.plugin = plugin;
    output.device = device;
    outputActionResult("OnUnsupportedCard", "result:" + JSON.stringify(output))


var InvoiceToCharge = 0.00;
function setupUIButtons() {
    $("#btnEnableCredit").click(function () {
        // Some card readers act wierd if you enable them multiple times so we're preventing that
        if (!ccEnabled) {
            ccEnabled = true;

    $("#btnDisableCredit").click(function () {
        ccEnabled = false;

    $("#btnAddToInvoice").click(function () {

        InvoiceToCharge += 1.00;
    //string Track1  - Track 1 of the card being processed
    //string Track2  - Track 2 of the card being processed
    //string Track3  - Track 3 of the card being processed
    //string Name   - Name on the card.
    //string CardNumber  - Card Number  on the front of the card
    //string Expiration - Card expiration date in the '' format
    //decimal Amount - decimal representation of the amount being processed
    //string Description - description field that will be sent with the transaction to the processor
    //(this is useful to append data to the transaction itself for reporting and informational purposes)
    $("#btnProcessAuthDirectly").click(function () {

        KioskSimple.Plugins.GetPlugin('_devices').ProcessCCPayment("","","",InvoiceToCharge,"John Customer","4007000000027","01/22","Testing processing",false)



function outputActionResult(actionName, data) {
    var output = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'>Action Result: " + actionName + "</h4><p class='list-group-item-text'>" + data + "</p></a>";

function formatCashOutput(result, amount, data) {
    var output = new Object();
    output.result = result;
    output.amount = amount; = data;
    return output;

How to get this example working with a free demo of KioskSimple

Credit card processing test

KioskSimple configuration settings

  1. Download the example here called “Magtek Credit Card Reader Plugin Example – Web JavaScript” and store the uncompressed folder on your desktop.
  2. Signup for an Authorize.Net developer sandbox account.  You can still run the example without an account, you just won’t be able to complete a transaction.  Please contact us if you want help substituting a different payment gateway.
  3. Download and install the free demo of KioskSimple.
  4. 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.
  5. Run the KioskSimple Configuration Tool and navigate to the PLUGIN STORE.
  6. Install the Authorize.Net Credit Card Processor Plugin.  The configuration tool will restart.
  7. 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.  You can also enter your Authorize.Net credentials under the PROCESSOR section.
  8. 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/ExampleWebCreditCardProcessing/CreditTest.html”.  This could also point to your web server if you stored the folder there, but I find it easier to store the files locally for this example.
  9. Save your settings and close the KioskSimple Configuration Tool.

Running the example in KioskSimple

  1. Start KioskSimple.
  2. Select “Try the Demo” and then “Test Mode”.
  3. Now you’ll see the HTML payment form shown above.  Press “Enable Card  Reader” then “Add $1 to Charge”.  Now if you swipe your credit card you should see the payment confirmation screen.
  4. 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.

One thought on “How to Accept Card Present Transactions from Your Website with JavaScript”

Comments are closed.