Skip to main content

Quick Start

Here you can find easy to follow step by step instructions to get you started with the Veryfi Lens SDK. More detailed instructions can be found in the Setup and Installation section.

info

Prerequisites:

  • Node.js (latest LTS version recommended)
  • CLIENT ID from the Keys section in Settings of your account
  • Lens For Browser enabled for your account (confirm with Customer Support)

Authorization​

  1. Create an account at Veryfi Portal
  2. Contact Veryfi's sales/support team to request SDK access
  3. Once approved, obtain your Client ID from the Keys section in Settings

Project Setup​

1. Create Project​

In current directory

npm create vite@latest . -- --template vanilla

Or in a new directory

npm create vite@latest lfb-test-app -- --template vanilla
cd lfb-test-app

This will create a structured vanilla js project in a directory opened with terminal using Vite (build tool which will allow you to use Lens For Browser SDK installed from npm and will provide you with development server with hot reload)

2. Install SDK​

npm install veryfi-lens-wasm@latest

3. Copy WASM files​

Copy WASM files manually from node_modules/veryfi-lens-wasm/wasm to public folder or by using terminal:

mkdir -p public/wasm
cp -r node_modules/veryfi-lens-wasm/wasm/* public/wasm/

4. Store Client ID in .env file​

info

Make sure to add .env file to .gitignore file to avoid committing it to the repository.

Create .env file and set VITE_VERYFI_CLIENT_ID variable equal to CLIENT ID 

VITE_VERYFI_CLIENT_ID=your_client_id_here

5. Create vite.config.js file in the root of your project and copy-paste contents from below​

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    }
  },
  // Needed if crypto/fs/path errors occur
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis'
      }
    }
  }
});

6. Locate index.html file at the root of your project and change its content to following:​

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veryfi Lens Vite Demo</title>
</head>
<body>
    <div id="app">
        <header>
            <h1>Veryfi Lens Scanner</h1>
        </header>
        
        <main>
            <div class="scanner-controls">
                <button class="scan-btn" data-type="document">
                    Scan Document
                </button>
                <button class="scan-btn" data-type="long_document">
                    Scan Long Receipt
                </button>
                <button class="scan-btn" data-type="credit_card">
                    Scan Credit Card
                </button>
                <button class="scan-btn" data-type="checks">
                    Scan Check
                </button>
                <button class="scan-btn" data-type="upload">
                    Upload Image
                </button>
            </div>

            <div id="status-display" class="status-display"></div>
            <div id="result-display" class="result-display"></div>
        </main>
    </div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

7. Locate style.css file in src folder and change its content to following:​

:root {
  --primary-color: #4CAF50;
  --hover-color: #45a049;
  --error-color: #ff4444;
  --text-color: #333;
  --background-color: #f5f5f5;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--background-color);
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

header {
  text-align: center;
  margin-bottom: 2rem;
}

.scanner-controls {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 2rem;
}

.scan-btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.scan-btn:hover {
  background-color: var(--hover-color);
}

.status-display {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 4px;
  background-color: white;
}

.result-display {
  padding: 1rem;
  border-radius: 4px;
  background-color: white;
  overflow-x: auto;
}

.error {
  color: var(--error-color);
}

8. Locate main.js file in src folder and change its content to following:​

import './style.css';
import VeryfiLens from 'veryfi-lens-wasm';

const CLIENT_ID = import.meta.env.VITE_VERYFI_CLIENT_ID;

class ScannerApp {
 constructor() {
   this.statusDisplay = document.getElementById('status-display');
   this.resultDisplay = document.getElementById('result-display');
   this.initializeEventListeners();
 }

 async initializeScanner(flavor) {
   try {
       await VeryfiLens.init(CLIENT_ID, {
         lensFlavor: flavor,
         torchButton: true,
         blurModal: true,
         isDocumentModal: true,
         exitButton: true,
         enableLongReceiptPreview: flavor === 'long_document'
       });
       this.setupEventHandlers();
     } else {
       VeryfiLens.configureLens({ lensFlavor: flavor });
     }
     this.updateStatus('Scanner initialized');
     await VeryfiLens.showCamera();
   } catch (error) {
     this.handleError('Initialization failed', error);
   }
 }

 setupEventHandlers() {
   VeryfiLens.onSuccess((result) => {
     this.updateStatus('Scan completed');
     this.displayResult(result);
   });
   VeryfiLens.onFailure((error) => {
     this.handleError('Scan failed', error);
   });
   VeryfiLens.onUpdate((status) => {
     this.updateStatus(`Status: ${status.status}`);
   });
 }

 updateStatus(message) {
   this.statusDisplay.textContent = message;
 }

 displayResult(result) {
   this.resultDisplay.innerHTML = `
     <h3>Scan Result:</h3>
     <pre>${JSON.stringify(result, null, 2)}</pre>
   `;
 }

 handleError(context, error) {
   console.error(`${context}:`, error);
   this.statusDisplay.innerHTML = `
     <div class="error">
       ${context}: ${error.message}
     </div>
   `;
 }

 initializeEventListeners() {
   document.querySelectorAll('.scan-btn').forEach(button => {
     button.addEventListener('click', () => {
       const scanType = button.dataset.type;
       this.initializeScanner(scanType);
     });
   });
 }
}

// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
 new ScannerApp();
});

9. Run the development server​

npm run dev

Click on the link provided in terminal example: http://localhost:5173/

Choose one of the available lens flavors and click corresponding button to initialize Lens For Browser

Final Project Structure​

/your-project
├── node_modules/
│   └──veryfi-lens-wasm/  # Installed sdk files
├── public/             # Folder containing static files
│   └── wasm/           # WASM files from SDK
├── src/
│   ├── main.js
│   ├── style.css
│   └── components/     # Optional: for organized code
├── index.html
├── package.json
└── vite.config.js