WebCard

Step 1 — Add the library to your page

Choose whichever loading method suits your project:

CDN (recommended — auto-initialises navigator.webcard)

<script src="https://cdn.jsdelivr.net/npm/@cardid/webcard/dist/webcard.iife.js"></script>

ES Module

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@cardid/webcard/dist/webcard.min.js';
  // navigator.webcard is now available
</script>

npm

npm install @cardid/webcard

import '@cardid/webcard'; // navigator.webcard is now available

Step 2 — List connected readers

const readers = await navigator.webcard.readers();
// readers: [{ name: "ACS ACR122U", atr: "3B8F80..." }, ...]

Step 3 — React to card & reader events

navigator.webcard.cardInserted = (reader) => {
  console.log(`Card in ${reader.name}, ATR: ${reader.atr}`);
};

navigator.webcard.cardRemoved = (reader) => {
  console.log(`Card removed from ${reader.name}`);
};

navigator.webcard.readersConnected    = (count) => { /* USB reader plugged in   */ };
navigator.webcard.readersDisconnected = (count) => { /* USB reader unplugged    */ };

Step 4 — Communicate with a card

// connect(true) = shared mode, connect(false) = exclusive
await reader.connect(true);

// transceive sends an APDU hex string and returns the response hex string
const response = await reader.transceive('FFCA000000'); // Get UID
console.log(response); // e.g. "0412345678901234 9000"

await reader.disconnect();