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 capture, submits to anydocs. Switch overlays during capture: bottle overlay records video, box overlay captures a still image | | 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 | | useDevApi | boolean | false | Route API requests to lens-dev.veryfi.com instead of production |

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 |

Review Gallery Settings

After each accepted capture, the document, anydocs, and prescription_label flavors show a unified review gallery where the user can review, retake, delete, add pages/documents, and submit. For single-document/single-page captures it collapses to a simple Retake / Submit preview. On submit, one package (a zip of its pages) is uploaded per document via /api/document, then finishBatch() runs.

| Option | Type | Default | Description | |---|---|---|---| | maxPagesPerDocument | number\|null | flavor-specific | Max pages per document (null = unlimited). 1 hides "Add Page". Defaults: document 1, anydocs null, prescription boxes = box max sides | | maxDocuments | number\|null | 1 (or null when multiSubmission) | Max documents per session. 1 hides "Add Document" | | reviewGalleryTitle | string | "Review" | Gallery title | | reviewAddPageText | string | "Add Page" | Add page action text | | reviewAddDocumentText | string | "Add Document" | Add document action text | | reviewSubmitText | string | "Submit" | Submit action text | | reviewDoneText | string | "Done" | Done action text | | reviewRetakeText | string | "Retake" | Retake action text | | reviewDeleteText | string | "Delete" | Delete action text | | reviewSubmitButtonColor | string | "#00AA00" | Submit button color (also used as the crop editor accent) | | reviewSubmitButtonTextColor | string | "#FFFFFF" | Submit button text color (also the crop editor Apply button) |

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 | Deprecated: alias for maxPagesPerDocument | | anydocAddPageText | string | "Add Page" | Deprecated: alias for reviewAddPageText | | anydocSubmitText | string | "Submit" | Deprecated: alias for reviewSubmitText | | anydocShowGuide | boolean | false | Show a dismissible on-screen text guide explaining how to capture. Auto-hides after each page capture and reappears when the camera restarts for the next page | | anydocGuideText | string | "Position the document within the frame..." | Guide text shown for anydocs capture. Separate steps with a blank line (\n\n) — each becomes a numbered step | | anydocGuideTitle | string | "Steps to Capture" | Heading of the anydocs capture guide panel | | guideShowOnce | boolean | false | Show the capture guide only for the first capture of a session instead of re-showing it every time the camera returns for the next capture (multi-capture / QR sessions) |

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) | | prescriptionLabelShowGuide | boolean | false | Show a semi-transparent guide explaining how to record the label. Auto-hides when recording starts and reappears on retake | | prescriptionLabelGuideText | string | "Position the bottle within the outline.\n\nPress the capture button to start recording.\n\nSlowly rotate the bottle to capture the entire label and press the capture button again to stop recording." | Guide text shown when the bottle outline overlay is active. Separate steps with a blank line (\n\n) — each becomes a numbered step | | prescriptionLabelSquareGuideText | string | "Position the prescription label within the square.\n\nPress the capture button to take a photo of the label." | Guide text shown when the box overlay is active. Separate steps with a blank line (\n\n) — each becomes a numbered step | | prescriptionLabelGuideTitle | string | "Steps to Capture" | Heading of the prescription label capture guide panel | | prescriptionLabelShowOverlayToggle | boolean | true | Show a toggle that lets the user switch between the bottle and box overlays during capture. The bottle overlay records a video; the box overlay captures a still image | | prescriptionLabelBottleLabel | string | "Bottle" | Label for the bottle (video) segment of the overlay toggle | | prescriptionLabelBoxLabel | string | "Box" | Label for the box (image) segment of the overlay toggle | | prescriptionLabelBoxMultiSide | boolean | true | When capturing with the box overlay, allow multiple sides of the same box. Sides become pages of one document, managed in the review gallery ("Add Page"). Sets the default maxPagesPerDocument to prescriptionLabelBoxMaxSides | | prescriptionLabelBoxMaxSides | number | 4 | Maximum number of sides (pages) that can be captured for a single box (feeds maxPagesPerDocument) | | prescriptionLabelBoxSideMessage | string | "Capture another side of the box?" | Deprecated: the review gallery replaced the "another side" prompt | | prescriptionLabelBoxSideAddText | string | "Capture another side" | Deprecated: use reviewAddPageText | | prescriptionLabelBoxSideSubmitText | string | "Submit" | Deprecated: use reviewSubmitText | | prescriptionLabelMaxVideoDuration | number | 12 | Maximum length, in seconds, of a bottle (video) capture. When reached, recording stops automatically. An on-screen countdown is shown while recording. Set to 0 to disable the limit | | prescriptionLabelProgressFill | boolean | false | When true, the remaining bottle capture time is shown by the bottle outline draining (with a centered countdown) instead of the "REC" box. Requires prescriptionLabelMaxVideoDuration > 0 |

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.