Initialization

info

The SDK requires initialization with your client ID and configuration options before use.

Basic implementation

await VeryfiLens.init("YOUR_CLIENT_ID", {
    lensFlavor: "document",  // Type of document to scan
    docValidation: true,     // Enable document validation
    blurModal: true,         // Show blur detection modal
    isDocumentModal: true,   // Show document detection modal
    torchButton: true,       // Show torch/flash toggle button
    exitButton: true,        // Show exit button
});

info

You can find more information about configuration options in the Configuration section.

Flavor specific implementation

Receipts & Invoices

    await VeryfiLens.init("YOUR_CLIENT_ID", {
        lensFlavor: "document",
        blurModal: true,
        isDocumentModal: true,  
        exitButton: true,
    });

Long Receipts

    await VeryfiLens.init("YOUR_CLIENT_ID", {
        lensFlavor: "long_document",
        enableLongReceiptPreview: true  // Shows live preview of stitching
    });

Checks

    await VeryfiLens.init("YOUR_CLIENT_ID", {
        lensFlavor: "checks",
        captureBackOfCheck: true  // Enable back side capture (TBD)
    });

Credit Cards

    await VeryfiLens.init("YOUR_CLIENT_ID", {
        lensFlavor: "credit_card"
    });

Document Upload

    await VeryfiLens.init("YOUR_CLIENT_ID", {
        lensFlavor: "upload"
    });

Event Handlers

Set up event handlers to manage the document processing workflow:

// Success handler - called when document is successfully processed
VeryfiLens.onSuccess((result) => {
    console.log("Document processed successfully:", result);
});

// Failure handler - called when an error occurs
VeryfiLens.onFailure((error) => {
    console.error("Processing failed:", error);
});

// Update handler - called for status updates during processing
VeryfiLens.onUpdate((status) => {
    console.log("Processing status:", status.status);
});

Starting the Camera

Start the document scanning process with the showCamera method:

// Basic camera start
VeryfiLens.showCamera();

// With image setter callback
VeryfiLens.showCamera((image) => {
    console.log("Captured image:", image);
    // image is base64 encoded
});

Example Implementation

Vanilla JS

import VeryfiLens from 'veryfi-lens-wasm';

async function startDocumentScanning() {
    try {
        // Initialize SDK
        await VeryfiLens.init("YOUR_CLIENT_ID", {
            lensFlavor: "document",
            blurModal: true,
            isDocumentModal: true,
            torchButton: true,
            exitButton: true,
            onCloseRedirectUrl: "/", // Optional: URL to redirect after closing
            onClose: () => {
                console.log("Scanner closed");
            },
            submitHandler: (image) => {
                console.log("Document submitted:", image);
            }
        });

        // Set up event handlers
        VeryfiLens.onSuccess((result) => {
            console.log("Success:", result);
        });

        VeryfiLens.onFailure((error) => {
            console.error("Error:", error);
        });

        VeryfiLens.onUpdate((status) => {
            console.log("Status update:", status);
        });

        // Start camera with image handler
        VeryfiLens.showCamera((image) => {
            console.log("Image captured");
            // Handle the captured image
        });

    } catch (error) {
        console.error("Failed to initialize Veryfi Lens:", error);
    }
}

React/Next.js

import { useEffect, useState } from 'react';
import VeryfiLens from 'veryfi-lens-wasm';

function DocumentScanner() {

    useEffect(() => {
        async function initializeScanner() {
            await VeryfiLens.init("YOUR_CLIENT_ID", {
                lensFlavor: "document",
                torchButton: true,
                blurModal: true,
                isDocumentModal: true,
                exitButton: true,
            });

            VeryfiLens.showCamera(setCapturedImage);
        }

        initializeScanner();

        // Cleanup on unmount
        return () => {
        };
    }, []);

    return (
        <div>
        </div>
    );
}

export default DocumentScanner;