Card reader widget (CRW)

React component for scanning credit card numbers via webcam and OCR (Tesseract.js).

Installation

npm install card-reader-widget react react-dom

Peer dependencies: react and react-dom (v18+).

Usage

import CardReader from 'card-reader-widget';
import 'card-reader-widget/style.css';

function App() {
  const onDone = (response) => {
    console.log('response', response);
  };

  return (
    <CardReader logger={console.log} onDone={onDone} />
  );
}

Props

| Prop | Type | Description | | -------- | ---------- | ------------------------------------------------ | | onDone | function | Called when scan completes with card details | | logger | function | Optional logger (defaults to console.log) |

Styles

Import the package stylesheet once in your app:

import 'card-reader-widget/style.css';

On dark backgrounds, you may need to invert the scan icon (e.g. filter: invert(1) on .scan-icon).

Build (for maintainers)

npm install
npm run build

Outputs:

• dist/index.esm.js — ESM (Vite, modern bundlers)
• dist/index.cjs.js — CommonJS (Create React App, older tools)
• dist/card-reader.css — component styles

Publishing

npm version patch   # or minor/major
npm publish

License

ISC