VP3300 WebHID setup
Our browser demo reads Apple Wallet passes with an ID TECH VP3300 USB reader on firmware NEO 1.01.182. Open nfcpasses.com in desktop Chrome or Edge, choose your reader, and tap one of the demo passes: a coffee card, an event ticket or a membership. The page talks to the reader over the WebHID API, with your permission.
The same approach turns the VP3300 into a browser NFC reader for a web POS: the reader logic lives in the web page, and the browser asks the operator to choose the reader before the page can use it.
What WebHID enables in the browser
The WebHID API provides a way to implement device-specific logic in JavaScript. For a compatible HID reader and browser, that design provides three characteristics:
- No separate native companion app for the browser path: Device-specific JavaScript runs in the web page rather than through a separate local bridge executable. Operating system permissions still apply where required: Chrome's documentation notes that on most Linux systems, HID devices are mapped with read-only permissions by default.
- Browser-side JavaScript updates: Because the web application's own reader logic is written in JavaScript, changes to that browser-side application logic ship with the website.
- Initial chooser selection and reusable permission: Granting a site access to a new HID device requires the user to take active steps to select that device in response to a user prompt (
navigator.hid.requestDevice()), while previously granted devices can be accessed vianavigator.hid.getDevices()while permission remains.
How the browser connection and demo flow work
Connecting an ID TECH VP3300 in the browser follows three steps:
- Select the reader on first connect: when the operator clicks Connect, the page calls
navigator.hid.requestDevice()and the browser asks which USB reader to share. - Reuse or revoke previously granted access: Once permission has been granted, the website can retrieve previously granted devices via
navigator.hid.getDevices(), receive connection and disconnection events by listening to"connect"and"disconnect"events, or clean up permissions by callingforget()on theHIDDeviceinstance. - Check the reader, add the demo passes, and wait for a tap: on the nfcpasses.com demo, connecting checks the reader's firmware and reads its settings. If the demo passes aren't on the reader's list yet, the page asks before adding them to empty slots, then waits for the customer to hold their iPhone to the reader.
Browser support for a Chrome USB reader
In MDN's browser compatibility data (api.HID), support for a Chrome USB reader over WebHID is recorded per browser:
| Browser | WebHID (api.HID) support |
|---|---|
| Google Chrome (desktop) | Supported since version 89 |
| Microsoft Edge (desktop) | Supported (follows Chrome) |
| Opera (desktop) | Supported (follows Chrome) |
| Firefox | Not supported |
| Safari (macOS & iOS) | Not supported |
| Chrome on Android & Android WebView | Not supported |
For the nfcpasses.com demo, open the page in desktop Chrome or Edge on a computer.
What the VP3300 reads when a customer taps
Along with traditional EMV payments, ID TECH states that the VP3300 and VP8300 support mobile loyalty programs such as Apple VAS and Google SmartTap 2.1, and that both the VP3300 and VP3320S support mobile wallets and mobile loyalty programs (Apple Pay VAS and Google Pay SmartTap 2.1). For how the wallet protocols work, see Google Smart Tap vs Apple VAS and Apple VAS and ECP explained.
When a customer taps an iPhone carrying an NFC-enabled Apple Wallet pass, the device transmits the pass's message payload—of no more than 64 bytes (the system truncates longer messages).
On the nfcpasses.com demo, connecting checks that the reader is a VP3300 USB on firmware NEO 1.01.182, asks before adding any missing demo passes to empty slots, and shows the demo pass's message when you tap.
When you move from the browser demo to your own passes, adding NFC to an Apple Wallet pass requires a special entitlement issued by Apple, and Apple is selective about who gets one. PassNinja lets you skip Apple's lengthy approval process: its software and APIs create, issue, update, and revoke passes for Apple Wallet and Google Wallet, and on the Apple side PassNinja signs your NFC passes itself under its own entitlement and never gives you a certificate to sign with. Alternatively, you can apply to Apple at developer.apple.com/contact/passkit and sign with your own Apple Value Added Services (Apple VAS) certificate. For your counter hardware, you can configure a reader yourself, pick from PassNinja's list of compatible NFC reading hardware—which includes ID TECH's Kiosk V (though the VP3300 is not on that list)—or, when you order a Socket Mobile S550 from PassNinja and have existing pass templates created in your account, have PassNinja pre-configure that reader with the credentials that allow the reader to work out of the box with your passes (see How to read an Apple Wallet NFC pass and An NFC loyalty card for your café for the full walkthrough).
Frequently asked questions
Why doesn't the Connect button appear in Safari or on my phone?
In MDN's compatibility data, Safari, Firefox, Chrome on Android, and Android WebView do not support api.HID; open the demo in desktop Chrome or Edge on a computer.
Does the demo change my reader's pass records without asking?
No. The demo is tested with the VP3300 on NEO 1.01.182, asks before adding the demo passes to empty slots on the reader, and lets you remove them again.
Does WebHID open the device chooser on every tap or reconnect?
No. Initial access to a device requires the user to select the HID device in response to a user prompt (navigator.hid.requestDevice()), after which the site can retrieve previously granted devices via navigator.hid.getDevices() while permission remains.
Sources
- PassNinja — Socket Mobile S550 NFC reader
- PassNinja — Compatible hardware
- Chrome for Developers — Connecting to uncommon HID devices
- MDN Browser Compatibility Data — WebHID API (
api.HID) - ID TECH — Recertifies contactless kernels for the VP3300/VP8300
- ID TECH — Release of the ViVOpay VP3320S
- Loyalty passes — Apple Wallet — Apple Developer
- Pass.NFC — Apple Developer Documentation
- How Can I Enable NFC Functionality in an Apple Wallet Pass? — Apple Developer Forums
- PassNinja — Create and deploy a digital Wallet pass in 10 minutes
- PassNinja — Apple Wallet and Google Wallet passes