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.

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)

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.

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.

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:).

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.

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.

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.
}

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.

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.

Related articles

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