Skip to main content
Version: Next

Quickstart (Web)

Prerequisites​

  • License key: Get a trial or production key from the Microblink Developer Hub. Keys are bound to domain names. If you're testing locally, use localhost as the domain name when generating the key.
  • HTTPS: Serve your app over HTTPS so the browser allows camera access.
  • Supported browsers: Recent Chrome/Edge/Firefox and Safari. WebViews are not supported.

Fast track: try the example app​

You can try the SDK by cloning the web-sdks monorepo and running the BlinkCard example app.

From the repo root, install dependencies and build the packages:

git clone https://github.com/microblink/web-sdks.git
cd web-sdks
pnpm install
pnpm build:packages

Then navigate to the example app, add your license key, and start the dev server:

cd apps/examples/blinkcard-simple
echo "VITE_LICENCE_KEY=your-license-key" > .env.local
pnpm dev

Install the SDK​

To integrate the SDK in your codebase, add the @microblink/blinkcard package to your project:

npm install @microblink/blinkcard

Host WASM resources​

The scanning engine runs as a WASM module packaged with the SDK. You need to host the WASM resources in a location your app can serve, typically at /resources.

If you're using Vite, you can automate this with the moveResources helper included in the monorepo dev utilities. For other bundlers, copy the contents of node_modules/@microblink/blinkcard/resources into your public folder at build time.

If the resources aren't served from /resources, pass the correct path via the resourcesLocation option when calling createBlinkCard. If the resources are hosted on a separate domain, configure CORS headers accordingly.

Initialize and scan​

Import and create​

Import createBlinkCard and call it with your license key. This sets up the scanning engine, camera, and UI in one step:

import { createBlinkCard } from "@microblink/blinkcard";

const blinkCard = await createBlinkCard({
  licenseKey: "YOUR-BASE64-LICENSE-KEY",
});

You can get the license key on our Developer Hub. If you're testing locally, use localhost as the domain name when generating the key.

In production, keep the license key in an environment variable on your hosting provider:

const blinkCard = await createBlinkCard({
  licenseKey: import.meta.env.VITE_LICENSE_KEY,
});

By default, createBlinkCard mounts the camera UI into document.body. To mount it into a specific element, pass targetNode:

const blinkCard = await createBlinkCard({
  licenseKey: "YOUR-BASE64-LICENSE-KEY",
  targetNode: document.getElementById("scanner-container"),
});

Handle results​

Register a callback to receive scanning results:

blinkCard.addOnResultCallback((result) => {
  const cardholderName = result.cardholderName;
  const cardNumber = result.cardAccounts[0].cardNumber;
  const dateOfExpiry = {
    year: result.cardAccounts[0].expiryDate.year,
    month: result.cardAccounts[0].expiryDate.month,
  };
});

The full list of available response fields is available in the BlinkCard SDK source.

Cleanup​

Once scanning is finished, release all resources:

await blinkCard.destroy();

Photo mode​

For photo (file upload) mode, use the lower-level @microblink/blinkcard-core package directly. Create a scanning session with inputImageSource set to "photo", then call session.process(image) for each image frame.

See the advanced setup example for a full implementation.

Last updated on