How to Integrate an MEI Bill Acceptor into Your Website with JavaScript

How to Integrate an MEI Bill Acceptor into Your Website with JavaScript

It's easy to integrate an MEI bill acceptor into your website with a little JavaScript and KioskSimple.  This article will include a detailed MEI JavaScript code example so you can try it out for free.

You're probably reading this article because you've decided to create a website which needs to accept cash payments.  Maybe your website is running on a self-service kiosk or tablet and is attached to an MEI bill acceptor.

This example will work for any MEI bill acceptor which uses the MEI EBDS protocol.  At the time of this writing this includes the MEI AE and SC series bill acceptors.

The example website we've create to get you started quickly is pictured below and has the following features:

  • Enables and disable the MEI bill acceptor
  • Displays the user's credit (see Session Funds)
  • Includes a Result Output window which displays diagnostics from the bill acceptor when you insert bills

You can see from the MEI JavaScript code example the basic flow for interacting with the MEI bill acceptor is as follows…

  1. Initialize the KioskSimple API "window.external.KioskSimpleAPIInit();"
  2. Wire-up the bank events for tracking the user's credit (OnCreditChanged, OnCreditAdded, etc...)
  3. Wire-up the bill acceptor events (OnBillInserted, OnBillRejected, etc...)
  4. Enable the bill acceptor and wait for the user to insert cash "KioskSimple.Plugins.GetPlugin('_devices').EnableAllDevicesByCategory("BillAcceptor");"

Getting Started

KioskSimple configuration settings

  1. Download the MEI Bill Acceptor JavaScript code example from Github
  2. Download and install the free demo of KioskSimple.
  3. Connect an MEI bill acceptor to your PC.  The MEI Bill acceptor must use the EBDS protocol, which at the time of this writing includes AE and SC series devices.
  4. Run the KioskSimple Configuration Tool and navigate to the PLUGIN STORE.
  5. Install the MEI Bill Acceptor Plugin.  The configuration tool will restart and some dependencies will be installed.  You should now see a menu option called BILL ACCEPTORS.  Navigate there and select CONFIGURE.
  6. Add a new bill acceptor under the Device Settings and set it to the serial port assigned to your bill acceptor.  You can DETECT the bill acceptor to ensure its installed correctly.
  7. 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/ExampleWebMeiBillAcceptor/CashTest.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.
  8. 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 MEI bill acceptor website example shown above.  Press "Enable Device" and the lights on the bill acceptor's front bezel should turn on.  Now if you insert a bill you should see the Session Funds update and the Result Output change.
  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.