nfcpasses

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:

How the browser connection and demo flow work

Connecting an ID TECH VP3300 in the browser follows three steps:

  1. 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.
  2. 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 calling forget() on the HIDDevice instance.
  3. 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:

BrowserWebHID (api.HID) support
Google Chrome (desktop)Supported since version 89
Microsoft Edge (desktop)Supported (follows Chrome)
Opera (desktop)Supported (follows Chrome)
FirefoxNot supported
Safari (macOS & iOS)Not supported
Chrome on Android & Android WebViewNot 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