Technical Post
Control a Chip Card Reader with Your Browser!
In a previous post, I showed how to establish USB connectivity using NodeJS, the popular JavaScript runtime engine. In a followup post, we saw how Websockets can be used for inter-process communication between NodeJS and any browser (even older browsers that don’t know about Websockets).
If we tie together the USB connectivity code and Websockets code, it becomes possible for a web page to control a USB device (such as our VP3300 3-way card reader, shown at right) using only JavaScript. That’s the code I want to show you today.
If you didn’t already download the scripts from my previous posts, don’t worry: The script below (around 360 lines of JavaScript) contains everything you need (except Node itself). We’ll talk about the code in a minute, but right now, let’s talk about how to use it.
HOW TO USE THE SCRIPT (THE EASY WAY)
1. Go to the ID TECH Knowledge Base and download the node-driver.zip archive. (No login required.) NOTE: This is a sizable (11 megabytes) download, because it includes Node.exe, so allow a few seconds. Also: It is for Windows machines only. Put the archive anywhere on your local machine.
2. Expand the archive. It contains all the scripts you need. (No need to copy/paste the code shown below!)
3. In the expanded archive, find the file called start.bat. Run it. (A console window will open; just leave it open.) The Node driver is now running.
4. Plug a supported device (ID TECH BTPay Mini, VP3300, UniPay III, VP8800) into your machine’s USB port. The Node driver will automatically connect to it.
5. Open the client.html file (in the archive) using a web browser. Click the Connect button. You should see a message confirming that a Websocket connection has been established on port 9901. The driver will use this connection to talk to your USB device.
HOW TO USE THE SCRIPT (ADVANCED USERS)
See the 360 or so lines of JavaScript further below? Copy and paste that whole thing into a text file and save it as, say, driver.js.
Install NodeJS on your machine if you haven’t already done so. But before running driver.js with Node, do the following.
Use npm to install the following Node modules (available on Github, etc.):
1. node-hid (for USB connectivity)
2. socket.io (for Websockets connectivity)
3. socket.io-client (so Node scripts can be socket.io clients)
Now run driver.js (the code shown below) using Node. To connect to the driver from a browser, create an HTML page that contains:
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.slim.js"></script>
And also:
You need to import the socket.io.slim.js script in order to use the Websockets implementation of socket.io. Use the socket variable (var socket, above) to emit Websocket messages.
Here’s the code you need to run in Node in order to have USB connectivity in a browser, via Websockets:
The first part of this code contains the USBProvider class definition (using the ECMA 6 notation supported by Node), which I talked about in an earlier post. The middle portion of the code has the SocketProvider class definition, which allows for the creation of a Websockets server. The bottom half of the code is “shim code” tying the first two parts together. It creates a USBProvider instance, and a SocketProvider instance, starts them up, and talks to each, so that commands can be sent from browser to USB device using a simple JSON data object construct:
To send a raw device command to a reader, you will do something like:
var cmd = "5669564f74656368320060040000f5e1";
dobj = dataObject( 'client',cmd,'raw command');
socket.emit( 'echo', dobj ); // send command to device
The cmd string shown above represents the raw hex bytes for the “Get Terminal Settings” command for ID TECH’s UniPay III, BTPay Mini, or VP3300 devices.
In the client.html file that accompanies the node-driver.zip archive mentioned earlier, I’ve already included a method called getTerminalSettings() that sends the above command to the connected device. When you run that command in the client.html console, you get a detailed listing of device settings, as shown below:
This screenshot shows some of the default Terminal Settings of the ID TECH BTPay Mini (VP3300) product. (NOTE: Not all settings are shown because the screenshot didn’t capture the entire scrollable area.)
SUMMARY
Let’s quickly review some of the important takeaways from this post and the two prior posts on USB connectivity. We’ve seen, among other things, that:
1. With the aid of NodeJS (a deservedly popular open-source JavaScript runtime engine), you can easily talk to any USB device using JavaScript. This by itself is pretty amazing!
2. You can also easily (with 75 lines of code) use Node to create a Websocket server that can allow fast, easy, robust, and secure inter-process communication on any device that supports Node.
3. Your Node scripts can easily pass USB data (via Websockets) to any browser that supports Websockets — which is to say, any modern browser.
4. As a result, it’s easily possible to use JavaScript, running in a web browser, to control a USB device (such as a credit card reader) connected to your laptop, PC, tablet, or other host. All of this, in turn, means you can create powerful browser-based payment apps that can talk to any number of ID TECH card readers using no code other than JavaScript. There’s no need to write native code in C or C++.Thus, you can prototype almost any payment app very, very quickly, with little coding effort.
In future posts, I’ll have a lot more to say about how to use web technology to create payment apps that leverage ID TECH’s readers. Come back soon for more!
In the meantime, if you want to find out more about any of ID TECH’s products, call us toll free: