Quickstart

This guide takes you from zero to a working payment card scan in about five minutes. It uses the built-in scanning UI, which opens the camera, guides the user, handles the front-to-back transition, and returns the card data with the least code.

The steps are the same on every platform:

1. Get a license key.
2. Add the SDK to your project.
3. Launch the scanner and read the result.

Get a license key

1. Go to the Microblink Developer Hub.
2. Select BlinkCard as the product.
3. Select your platform.
4. For web, set the domain to localhost while testing, or the domain where your app is hosted.

Keep the key somewhere your app can read it, such as an environment variable. Never commit a production key to source control.

Add the SDK

Install the SDK and complete the platform-specific setup. The READMEs cover everything beyond the snippet below: required versions, repository configuration, and camera permissions.

Web (TS)

Install the package:

npm install @microblink/blinkcard

The scanning engine runs as a WASM module that must be served from your app, by default under /resources. See the web README for the resource-hosting step and the full integration.

Android (Kotlin)

The SDK is published on Maven Central. Add the dependency to your module's build.gradle.kts:

dependencies {
    implementation("com.microblink:blinkcard-ux:3000.0.1")
}

See the Android README for repository configuration and the camera permission.

iOS (Swift)

Add the SDK with Swift Package Manager, either through Xcode or in your Package.swift:

dependencies: [
    .package(
        url: "https://github.com/microblink/blinkcard-ios.git",
        .upToNextMajor(from: "3000.0.0")
    )
]

See the iOS README for the camera usage description requirement.

Scan a card

Initialize the SDK with your license key and launch the scanner. When scanning finishes, you receive the extracted card data in a callback.

Web (TS)

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

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

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

createBlinkCard loads the engine, opens the camera, and mounts the scanning UI in one call. Call destroy when you're done to release the camera and engine.

Android (Kotlin)

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

BlinkCardCameraScanningScreen(
    blinkCardSdk = sdk,
    onScanningSuccess = { result ->
        println("Card number: ${result.cardAccounts[0].cardNumber}")
    },
    onScanningCanceled = { }
)

BlinkCardCameraScanningScreen is a composable that owns its own camera lifecycle, so no explicit cleanup is needed.

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 {
            print("Card number:", result.cardAccounts[0].cardNumber ?? "")
        }
    }
    .store(in: &cancellables)

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

BlinkCardUXView releases camera resources when it's dismissed, so no explicit cleanup is needed.

That's a complete, runnable integration. Point the camera at a payment card and the card number prints to your console.

Read the result

The result is a structured object with the card data BlinkCard extracts: card number, expiry date, cardholder name, IBAN, and more. Card accounts are returned in cardAccounts, so a typical single-card scan reads from cardAccounts[0].

For the full list of fields and their types, see the result reference.

Next steps

• Scan a card from a static image: scan an uploaded image instead of the live camera.
• Extract specific fields: read the card number, expiry, CVV, IBAN, or cardholder name.
• Customize the UI: branding, instructions, and overlay.
• Anonymization: mask sensitive card data in results and images.