Scan a card via camera

BlinkCard includes a built-in scanning UI that opens the camera, guides the user with real-time feedback, handles the front-to-back transition, and returns the extracted card data through a result callback.

Initialize and scan

On Web, call createBlinkCard with your license key. This loads the scanning engine, opens the camera, and mounts the scanning UI in one step.

On Android, initialize the SDK and then show BlinkCardCameraScanningScreen, which owns its own camera lifecycle.

On iOS, create the SDK, build a BlinkCardUXModel from a BlinkCardAnalyzer, observe its published $result, and present BlinkCardUXView.

On Flutter and React Native, call performScan with the SDK and session settings. It launches the scanning UI and returns the result when scanning finishes.

Web (JS)

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

const blinkCard = await createBlinkCard({
  licenseKey: "your-license-key",
});

blinkCard.addOnResultCallback((result) => {
  console.log("Card number:", result.cardAccounts[0].cardNumber);
  void blinkCard.destroy();
});

Android (Kotlin)

val sdk = BlinkCardSdk.initializeSdk(
    context,
    BlinkCardSdkSettings(licenseKey = "your-license-key")
).getOrThrow()

BlinkCardCameraScanningScreen(
    blinkCardSdk = sdk,
    onScanningSuccess = { result ->
        val cardNumber = result.cardAccounts[0].cardNumber
    },
    onScanningCanceled = { }
)

iOS (Swift)

let sdk = try await BlinkCardSdk.createBlinkCardSdk(
    withSettings: BlinkCardSdkSettings(licenseKey: "your-license-key")
)

let analyzer = try await BlinkCardAnalyzer(sdk: sdk)
let uxModel = BlinkCardUXModel(analyzer: analyzer)

uxModel.$result
    .sink { resultState in
        if let result = resultState?.scanningResult {
            let cardNumber = result.cardAccounts[0].cardNumber
        }
    }
    .store(in: &cancellables)

// Present the scanning UI:
BlinkCardUXView(viewModel: uxModel)

Flutter (Dart)

import 'package:blinkcard_flutter/blinkcard_flutter.dart';

final blinkCardPlugin = BlinkCardFlutter();

final result = await blinkCardPlugin.performScan(
  blinkCardSdkSettings: BlinkCardSdkSettings(licenseKey: 'your-license-key'),
  blinkCardSessionSettings: BlinkCardSessionSettings(),
);

if (result != null) {
  final cardNumber = result.cardAccounts[0].cardNumber;
}

React Native (TS)

import {
  performScan,
  BlinkCardSdkSettings,
  BlinkCardSessionSettings,
  ScanningUxSettings,
} from "@microblink/blinkcard-react-native";

const result = await performScan(
  new BlinkCardSdkSettings({ licenseKey: "your-license-key" }),
  new BlinkCardSessionSettings(),
  new ScanningUxSettings(),
);

const cardNumber = result?.cardAccounts[0].cardNumber;

For installation, license setup, and hosting the WASM resources, see the quickstart.

Embed the scanning UI

On Web, the scanning UI mounts into document.body and covers the screen by default. To render it inside a specific element, pass targetNode.

On Android, place BlinkCardCameraScanningScreen anywhere in your Compose hierarchy. It renders within the layout you give it, so you control where the scanning UI appears.

On iOS, embed BlinkCardUXView in your SwiftUI view hierarchy. It renders within the container you place it in, so you control where the scanning UI appears.

On Flutter and React Native, the scanning UI always opens full screen.

Web (JS)

const blinkCard = await createBlinkCard({
  licenseKey: "your-license-key",
  targetNode: document.getElementById("scanner-container") ?? undefined,
});

Android (Kotlin)

BlinkCardCameraScanningScreen is a composable. Place it wherever you want the scanning UI to render in your Compose layout; no separate target node is required.

iOS (Swift)

BlinkCardUXView is a SwiftUI view. Place it wherever you want the scanning UI to render in your view hierarchy; no separate target node is required.

Flutter (Dart)

performScan shows the native scanning UI full screen, on top of your app. The Flutter plugin doesn't support embedding it in your own layout. To embed the scanning UI, integrate the native Android or iOS SDK.

React Native (TS)

performScan shows the native scanning UI full screen, on top of your app. The React Native module doesn't support embedding it in your own layout. To embed the scanning UI, integrate the native Android or iOS SDK.

Skip the onboarding guide

By default, BlinkCard shows an onboarding guide before scanning begins. On Web, disable it to start frame capture as soon as the camera is ready.

On Android, onboarding and help behavior is configured through the optional uxSettings: BlinkCardUxSettings parameter of BlinkCardCameraScanningScreen.

On iOS, onboarding and help behavior is configured through the optional uxSettings: ScanningUXSettings parameter of BlinkCardUXModel(analyzer:uxSettings:).

On Flutter and React Native, set showIntroductionAlert to false in the ScanningUxSettings you pass to performScan.

Web (JS)

const blinkCard = await createBlinkCard({
  licenseKey: "your-license-key",
  feedbackUiOptions: {
    showOnboardingGuide: false,
  },
});

Android (Kotlin)

Pass a BlinkCardUxSettings instance to the uxSettings parameter of BlinkCardCameraScanningScreen to control the onboarding and help experience. See the BlinkCardUxSettings reference for the available options.

iOS (Swift)

Pass a ScanningUXSettings instance to the uxSettings parameter of BlinkCardUXModel(analyzer:uxSettings:) to control the onboarding and help experience. See the ScanningUXSettings reference for the available options.

Flutter (Dart)

final result = await blinkCardPlugin.performScan(
  blinkCardSdkSettings: sdkSettings,
  blinkCardSessionSettings: sessionSettings,
  scanningUxSettings: ScanningUxSettings(showIntroductionAlert: false),
);

React Native (TS)

const result = await performScan(
  sdkSettings,
  sessionSettings,
  new ScanningUxSettings({ showIntroductionAlert: false }),
);

Handle errors

On Web, register an error callback to handle failures during scanning.

On Android, SDK initialization returns a Result; handle initialization failures where you call getOrThrow(), and handle cancellation through the onScanningCanceled callback of BlinkCardCameraScanningScreen.

On iOS, SDK and analyzer creation are throwing async calls; handle failures with try/catch where you create them, and observe $result for the scanning outcome.

On Flutter and React Native, performScan throws on initialization failures, scanning errors, and user cancellation, so wrap the call in try/catch.

Web (JS)

blinkCard.addOnErrorCallback((error) => {
  console.error("Scanning error:", error);
  void blinkCard.destroy();
});

Android (Kotlin)

val result = BlinkCardSdk.initializeSdk(
    context,
    BlinkCardSdkSettings(licenseKey = "your-license-key")
)

result.onFailure { error ->
    // Handle initialization failure.
}

Handle user cancellation through the onScanningCanceled callback of BlinkCardCameraScanningScreen.

iOS (Swift)

do {
    let sdk = try await BlinkCardSdk.createBlinkCardSdk(
        withSettings: BlinkCardSdkSettings(licenseKey: "your-license-key")
    )
    let analyzer = try await BlinkCardAnalyzer(sdk: sdk)
    // Continue setup.
} catch {
    // Handle initialization failure.
}

Flutter (Dart)

import 'package:flutter/services.dart';

// Canceling the scan also throws a PlatformException.
try {
  final result = await blinkCardPlugin.performScan(
    blinkCardSdkSettings: sdkSettings,
    blinkCardSessionSettings: sessionSettings,
  );
} on PlatformException catch (e) {
  print('Scanning error: ${e.message}');
}

React Native (TS)

// Canceling the scan also rejects the promise.
try {
  const result = await performScan(sdkSettings, sessionSettings, new ScanningUxSettings());
} catch (error) {
  console.error("Scanning error:", error);
}

Clean up

On Web, when scanning is complete or the user cancels, call destroy to release the camera, engine, and UI.

On Android, BlinkCardCameraScanningScreen owns its camera lifecycle, so no explicit cleanup is needed.

On iOS, BlinkCardUXView releases camera resources when dismissed, so no explicit cleanup is needed.

On Flutter and React Native, the scanning UI closes by itself; call unloadSdk when you want to release the SDK.

Web (JS)

await blinkCard.destroy();

Android (Kotlin)

No explicit cleanup is required. The BlinkCardCameraScanningScreen composable owns its camera lifecycle and releases resources when it leaves composition.

iOS (Swift)

No explicit cleanup is required. BlinkCardUXView releases camera resources when it is dismissed.

Flutter (Dart)

The scanning UI closes when scanning finishes. To release the SDK, call unloadSdk. Pass deleteCachedResources: true to also delete the downloaded resources from the device.

await blinkCardPlugin.unloadSdk();

React Native (TS)

The scanning UI closes when scanning finishes. To release the SDK, call unloadSdk. Pass true to also delete the downloaded resources from the device.

import { unloadSdk } from "@microblink/blinkcard-react-native";

await unloadSdk(false);

Related articles

• Scan a card from a static image
• Extract specific fields