---
Source: https://docs.microblink.com/blinkcard/quickstart-web
Title: Quickstart (Web)
Description: Step-by-step guide to integrate BlinkCard Web SDK for credit card scanning in browser applications
---

# Quickstart (Web)

## Prerequisites

- License key: Get a trial or production key from the [Microblink Developer Hub](https://developer.microblink.com).
  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](https://github.com/microblink/web-sdks) monorepo and running the BlinkCard example app.

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

```bash
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:

```bash
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:

<Tabs>
  <TabItem value="npm" label="npm">

  ```bash
  npm install @microblink/blinkcard
  ```

  </TabItem>
  <TabItem value="yarn" label="yarn">

  ```bash
  yarn add @microblink/blinkcard
  ```

  </TabItem>
  <TabItem value="pnpm" label="pnpm">

  ```bash
  pnpm add @microblink/blinkcard
  ```

  </TabItem>
  <TabItem value="bun" label="bun">

  ```bash
  bun add @microblink/blinkcard
  ```

  </TabItem>
</Tabs>

## 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:

```ts

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

You can get the license key on our [Developer Hub](https://developer.microblink.com).
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:

```ts
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`:

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

### Handle results

Register a callback to receive scanning results:

```ts
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](https://github.com/microblink/web-sdks/tree/main/packages/blinkcard-core).

### Cleanup

Once scanning is finished, release all resources:

```ts
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](https://github.com/microblink/web-sdks/tree/main/apps/examples/blinkcard-advanced-setup) for a full implementation.


Last updated on Apr 16, 2026