Veryfi Lens for Web SDK (v3)

Veryfi Lens for Web is a browser SDK that gives your web app document capture superpowers in minutes. It uses WebAssembly for fast, on-device document detection, blur/lcd detection and cropping .

Supported Flavors

| Flavor | Description | |---|---| | document | Standard document/receipt capture with auto-detection | | anydocs | Multi-page document capture with optional blueprints selection | | long_document | Long receipt stitching from video stream | | checks | Check capture with optional front/back detection and manual mode | | credit_card | Credit card scanning (name, number, date, CVV) | | caps | Bottle cap capture with circular guide overlay | | code_strips | Code strip capture with rectangular guide overlay | | prescription_label | Prescription label video capture with pill bottle overlay, zips video and submits to anydocs | | upload | File upload with crop and submit (no camera) |

Installation

npm install veryfi-lens-wasm

Quick Start

import VeryfiLens from 'veryfi-lens-wasm';

// 1. Register event handlers
VeryfiLens.onSuccess((result) => {
  console.log('Capture result:', result);
});

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

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

// 2. Initialize with your client ID and config
await VeryfiLens.init('your-client-id', {
  lensFlavor: 'document',
});

// 3. Show the camera UI
await VeryfiLens.showCamera((result) => {
  console.log('Captured image:', result);
});

API Reference

VeryfiLens.init(clientId, config)

Initialize the SDK. Must be called before showCamera.

• clientId — Your Veryfi client ID
• config — Configuration object (see Configuration)

VeryfiLens.showCamera(setter?)

Start the camera and display the capture UI. Shows a loading spinner while WASM models are loaded and the camera initializes.

• setter (optional) — Callback that receives captured image data

VeryfiLens.stop()

Stop the camera, release resources, and remove the UI.

VeryfiLens.configureLens(config)

Update configuration at runtime. Cannot change lensFlavor or container.

VeryfiLens.getCardData()

Returns the scanned credit card data object (credit_card flavor).

VeryfiLens.getDeviceData()

Returns device fingerprint and browser data for the current session.

VeryfiLens.setCustomSubmitHandler(handler)

Override the default submit behavior with a custom function.

VeryfiLens.setCustomData(data) / VeryfiLens.getCustomData()

Set or get custom key-value data included with submissions.

Event Handlers

VeryfiLens.onSuccess((result) => { /* capture succeeded */ });
VeryfiLens.onUpdate((update) => { /* status/progress update */ });
VeryfiLens.onFailure((error) => { /* error occurred */ });

Configuration

Core Settings

| Option | Type | Default | Description | |---|---|---|---| | lensFlavor | string | — | Required. Capture mode (see Supported Flavors) | | container | string | — | ID of an HTML element to render into. If omitted, creates a fullscreen overlay | | enableSubmit | boolean | true | Show submit button after capture | | enableFullScreen | boolean | false | Enable fullscreen mode | | debug_mode | boolean | false | Enable console logging |

UI Controls

| Option | Type | Default | Description | |---|---|---|---| | torchButton | boolean | true | Show torch/flashlight toggle | | torchOnStart | boolean | true | Turn torch on when camera starts | | switchCameraButton | boolean | true | Show switch camera (front/back) button | | mirrorButton | boolean | true | Show mirror/flip video button | | mirrorOnDesktop | boolean | true | Auto-mirror video on desktop (front-facing webcam) | | exitButton | boolean | false | Show exit/close button | | onClose | function | — | Callback when lens is closed | | onCloseRedirectUrl | string | — | URL to redirect to on close | | boxColor | string | "rgba(84, 192, 139, 0.6)" | Document detection bounding box color |

Detection Settings

| Option | Type | Default | Description | |---|---|---|---| | detectBlur | boolean | true | Enable blur detection | | isBlurModal | boolean | true | Show modal when blur detected | | isDocumentModal | boolean | true | Show modal when no document detected | | isLcdModal | boolean | true | Show modal when LCD/screen capture detected | | enforceDocumentDetection | boolean | false | Block submission if no document detected | | enforceBlurDetection | boolean | false | Block submission if image is blurry | | enforceLcdDetection | boolean | false | Block submission if screen capture detected | | blurThreshold | number | 0.7 | Blur detection threshold (0-1, higher = stricter) | | lcdThreshold | number | 0.4 | LCD detection threshold (0-1) |

LCD Detection

| Option | Type | Default | Description | |---|---|---|---| | lcdDetectionForDocuments | boolean | false | Enable LCD detection for documents | | lcdDetectionForChecks | boolean | false | Enable LCD detection for checks | | lcdDetectionForCards | boolean | false | Enable LCD detection for credit cards |

Auto Document Capture

| Option | Type | Default | Description | |---|---|---|---| | autoDocumentCapture | boolean | false | Enable hands-free automatic capture |

Check Capture Settings

| Option | Type | Default | Description | |---|---|---|---| | captureBackOfCheck | boolean | false | Enable back side capture | | enforceBothSides | boolean | false | Require both sides | | enforceAndSkipBothSides | boolean | false | Auto-proceed to back capture without prompt | | delayBetweenCaptures | number | 0 | Delay (ms) between front and back capture | | frontBackDetectionForChecks | boolean | false | Enable front/back side detection | | checksEnableManualMode | boolean | true | Enable manual capture mode with guide overlay | | checksManualModeTimeout | number | 3000 | Timeout (ms) before switching to manual mode | | checksCropMargin | number | 0.1 | Margin around check crop (0.0-1.0) | | cropMargin | number | 0.0 | Margin around crop for all document types | | persistManualModeOnRetake | boolean | true | Keep manual mode when retaking front side | | forceLandscapeCheckPreview | boolean | true | Force horizontal display of check previews |

Check Crop Layout Appearance

| Option | Type | Default | Description | |---|---|---|---| | cropLayoutAspectRatio | number | 0.0 | Aspect ratio (0.0 = use default) | | cropLayoutBorderColor | string | "#54C08B" | Guide border color | | cropLayoutStroke | number | 2 | Guide border width (px) | | cropLayoutOverlayAlpha | number | 0.6 | Overlay transparency (0-1) | | cropLayoutCornerRadius | number | 0 | Guide corner radius (px) | | cropLayoutTipMessage | string | "Position check inside rectangle" | Instruction text | | cropLayoutTipPosition | string | "right" | Tip text position: "top", "bottom", "left", "right" | | cropLayoutGuideTopPosition | string | "40%" | Vertical position of guide | | cropLayoutGuideLeftPosition | string | "50%" | Horizontal position of guide | | cropLayoutGuideWidthScale | number | 0.90 | Guide width relative to video (0-1) | | cropLayoutGuideMaxHeightScale | number | 0.70 | Guide max height relative to video (0-1) |

Long Document Settings

| Option | Type | Default | Description | |---|---|---|---| | enableLongReceiptPreview | boolean | false | Show stitching preview panel |

Anydocs Multi-Page Settings

| Option | Type | Default | Description | |---|---|---|---| | enableBlueprintsModal | boolean | false | Show blueprints selection modal | | selectedBlueprint | string | — | Pre-selected blueprint (skips modal) | | anydocMaxPages | number\|null | null | Max pages (null = unlimited) | | anydocAddPageText | string | "Add Page" | Add page button text | | anydocSubmitText | string | "Submit" | Submit button text | | anydocShowFlipMessage | boolean | false | Show flip document message between pages | | anydocFlipMessageText | string | "Please flip the document..." | Flip message text | | anydocFlipContinueText | string | "Continue" | Continue button text |

Bottle Cap Settings (caps flavor)

| Option | Type | Default | Description | |---|---|---|---| | capCircleRadius | number | 0.7 | Capture circle radius (0-1 relative to viewport) | | bottleCapText | string | "Position bottle cap in circle" | Instruction text |

Code Strip Settings (code_strips flavor)

| Option | Type | Default | Description | |---|---|---|---| | rectWidth | number | 0.7 | Capture rectangle width (0-1) | | rectHeight | number | 0.08 | Capture rectangle height (0-1) | | codeStripsText | string | "Position code strip in rectangle" | Instruction text |

Prescription Label Settings (prescription_label flavor)

| Option | Type | Default | Description | |---|---|---|---| | prescriptionLabelShowOverlay | boolean | true | Show the bottle cutout overlay guide | | prescriptionLabelWidthRatio | number | 0.55 | Bottle overlay width (0-1 relative to viewport) | | prescriptionLabelHeightRatio | number | 0.65 | Bottle overlay height (0-1 relative to viewport) | | prescriptionLabelText | string | "Position prescription label in outline" | Instruction text | | prescriptionLabelShowSquareOverlay | boolean | false | Show a square/rectangular overlay guide | | prescriptionLabelSquareWidthRatio | number | 0.8 | Square overlay width (0-1 relative to viewport) | | prescriptionLabelSquareHeightRatio | number | 0.5 | Square overlay height (0-1 relative to viewport) |

Upload Settings (upload flavor)

| Option | Type | Default | Description | |---|---|---|---| | cropButtonText | string | "Crop" | Crop button text | | resetButtonText | string | "Reset" | Reset button text | | dropZoneText | string | "Click or drag and drop to upload an image" | Drop zone text |

Customizable Modal Messages

| Option | Type | Default | |---|---|---| | documentModalMessage | string | "Oops, There appears to be no document on your image" | | blurModalMessage | string | "Oops, The image is too blurry to process" | | lcdModalMessage | string | "LCD screen detected. Please capture a printed document instead" | | submitButtonText | string | "Submit Anyway" | | retakeButtonText | string | "Retake a picture" | | checkEnforcedModalMessage | string | "Please flip the check and capture the back side" | | checkOptionalModalMessage | string | "Do you want to capture the back side of the check?" | | wrongSideFrontMessage | string | "This looks like the back of the check..." | | wrongSideBackMessage | string | "This looks like the front of the check..." |

Fingerprint Settings

| Option | Type | Default | Description | |---|---|---|---| | enforceFingerprint | boolean | false | Fail if fingerprint cannot be generated | | disableFingerprint | boolean | false | Disable fingerprinting entirely |

Custom Data

| Option | Type | Default | Description | |---|---|---|---| | customData | object | {} | Key-value data included with submissions |

CSS Customization

All UI components support CSS variable overrides for styling. Use the --spinner-*, --cropped-image-*, --anydoc-*, --gallery-*, --file-upload-*, and --modal-* CSS variable families to customize appearance without modifying SDK code.

TypeScript

Type definitions are included in veryfi-lens.d.ts.