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”);”

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

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.

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

Comments are closed.