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
isBlurModal: 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
- Long
- Checks
- Cards
- Upload
- Caps
- Strips
- AnyDocs
- Prescription Label
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "document",
isBlurModal: true,
isDocumentModal: true,
exitButton: true,
});
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "long_document",
enableLongReceiptPreview: true // Shows live preview of stitching
});
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "checks",
captureBackOfCheck: true
});
tip
See the Checks Quick Start Guide for comprehensive check scanning examples and best practices.
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "credit_card"
});
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "upload"
});
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "caps"
});
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "code_strips"
});
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "anydocs",
anydocMaxPages: 2,
anydocShowFlipMessage: true
});
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "prescription_label",
prescriptionLabelShowOverlay: true,
});
tip
See the Prescription Label Quick Start Guide for the full video capture workflow, overlay customization, and recording lifecycle events.
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
- React/Next.js
import VeryfiLens from 'veryfi-lens-wasm';
async function startDocumentScanning() {
try {
// Initialize SDK
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "document",
isBlurModal: true,
isDocumentModal: true,
torchButton: true,
exitButton: true,
onCloseRedirectUrl: "/",
onClose: () => {
console.log("Scanner closed");
}
});
// 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");
});
} catch (error) {
console.error("Failed to initialize Veryfi Lens:", error);
}
}
import { useEffect, useState } from 'react';
function DocumentScanner() {
const [capturedImage, setCapturedImage] = useState(null);
useEffect(() => {
async function initializeScanner() {
const VeryfiLens = (await import('veryfi-lens-wasm')).default;
await VeryfiLens.init("YOUR_CLIENT_ID", {
lensFlavor: "document",
torchButton: true,
isBlurModal: true,
isDocumentModal: true,
exitButton: true,
});
VeryfiLens.onSuccess((result) => {
console.log("Document processed:", result);
});
VeryfiLens.onFailure((error) => {
console.error("Processing failed:", error);
});
VeryfiLens.onUpdate((status) => {
console.log("Status:", status.status);
});
VeryfiLens.showCamera(setCapturedImage);
}
initializeScanner();
return () => {};
}, []);
return (
<div>
{capturedImage && <img src={`data:image/jpeg;base64,${capturedImage}`} alt="Captured" />}
</div>
);
}
export default DocumentScanner;