Initialization

VanillaJS/Node

1. Create index.js next to your index.html
2. Import it to your index.html <script src="index.js" type="module"></script>
3. Import SDK to your index.js import VeryfiLens from "./veryfi-lens-wasm/veryfi-lens.js"
4. Set process url and your credentials from Authentification

const PROCESS_DOCUMENT_URL = "https://lens.veryfi.com/rest/process" or "https://lens-dev.veryfi.com/rest/process";
const CLIENT_ID = "YOUR_CLIENT_ID";
const API_KEY = "YOUR_API_KEY";
const USERNAME = "your.username";

5. Add function to validate client and receive session token (it is necessary to initialize Lens)

async function validatePartner(clientId) {
  const validateUrl = "https://lens.veryfi.com/rest/validate_partner";
  try {
    const requestOptions = {
      method: "POST",
      headers: { "CLIENT-ID": clientId },
    };
    const response = await fetch(validateUrl, requestOptions);
    const data = await response.json();
    return data.session;
  } catch (error) {
    console.error("Error validating partner:", error);
    return null;
  }
}

6. Call it const sessionToken = validatePartner(CLIENT_ID)

7. Call const deviceData = await VeryfiLens.getDeviceData() (Is reqiured to send an image to our backend)

1. Add following div to your index.html (Stitching preview will be rendered to it)

• <div id="preview-container"></div>

2. Call await VeryfiLens.initWasmLong(sessionToken, CLIENT_ID)

Long receipt capturing consists of 2 stages

1. await VeryfiLens.startStitching() - Starts sending frames to WASM and stitches long document together
2. await VeryfiLens.captureLong() - Stops stitching and returns result

Next.JS(TypeScript)

1. Create .env file
2. Store your credentials from Authentification in .env file

NEXT_PUBLIC_PROCESS_DOCUMENT_URL = https://lens.veryfi.com/rest/process or https://lens-dev.veryfi.com/rest/process
NEXT_PUBLIC_CLIENT_ID=YOUR_CLIENT_ID
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
NEXT_PUBLIC_USERNAME=YOUR_USERNAME

They are required for initialization of Lens For Web and for processing of resulting image

3. Import SDK

• import VeryfiLens from 'veryfi-lens-wasm'
• const VeryfiLens = require('veryfi-lens-wasm').default

4. Add a function to validate partner and receive session token (it is necessary to initialize Lens)

const validatePartner = async (clientId: string): Promise<any> => {
  const validateUrl = 'https://lens.veryfi.com/rest/validate_partner';
  const requestOptions = {
    method: 'POST',
    headers: {
      'CLIENT-ID': clientId,
    },
  };

  return fetch(validateUrl, requestOptions)
    .then((response) => response.json())
    .then((data) => {
      return data.session;
    })
    .catch((error) => {
      return error;
    });
};

1. Add container with id=”preview-container”

<div
  id="preview-container"
  className="absolute top-[100px] left-[10px] md:left-[40px] w-[22vw] md:w-[18vw] h-[70vh] rounded-md z-40 overflow-y-hidden border-[1px] border-solid border-green-300"
></div>

2. Initialize Lens

const [VeryfiLens, setVeryfiLens] = useState<{
    startStitching(): void;
    setUserAgent: (arg0: string) => void;
    initWasmLong: (arg0: string) => void;
    startCameraWasm: () => void;
    captureLong: (
      arg0: React.Dispatch<React.SetStateAction<string>>,
      arg1: React.Dispatch<React.SetStateAction<boolean>>
    ) => void;
  } | null>(null);
  const [isStitching, setIsStitching] = useState(false)

  useEffect(() => {
    const startWasm = async () => {
      if (typeof window !== 'undefined') {
        const lens = require('veryfi-lens-wasm').default;
        lens.setUserAgent(navigator.userAgent); // Use only if lens loads before userAgent
        await lens.initWasmLong(sessionToken, CLIENT_ID);
        setVeryfiLens(lens);
      }
    }
    startWasm()
  }, []);

3. Add functions to start and stop stitching

const startStitching = () => {
  if (VeryfiLens) {
    VeryfiLens.startStitching();
    setIsStitching(true);
  } else {
    console.log("VeryfiLens is not initialized");
  }
};

const stopStitching = () => {
  if (VeryfiLens) {
    VeryfiLens.captureLong(setImage, setIsEditing);
  }
};

React

1. Add your credentials from Authentification to your component (Recommended to use .env file to store sensetive data)

const PROCESS_DOCUMENT_URL = "https://lens.veryfi.com/rest/process"; or "https://lens-dev.veryfi.com/rest/process";
const CLIENT_ID = "YOUR_CLIENT_ID";
const API_KEY = "YOUR_API_KEY";
const USERNAME = "your.username";

They are required for initialization of Lens For Web and for processing of resulting image

2. Import SDK

• import VeryfiLens from 'veryfi-lens-wasm'
• const VeryfiLens = require('veryfi-lens-wasm').default

3. Add a function to validate partner and receive session token (it is necessary to initialize Lens)

async function validatePartner(clientId) {
  const validateUrl = "https://lens.veryfi.com/rest/validate_partner";
  try {
    const requestOptions = {
      method: "POST",
      headers: { "CLIENT-ID": clientId },
    };
    const response = await fetch(validateUrl, requestOptions);
    const data = await response.json();
    return data.session;
  } catch (error) {
    console.error("Error validating partner:", error);
    return null;
  }
}

1. Add container with id=”preview-container”

<div
  id="preview-container"
  className="absolute top-[100px] left-[10px] md:left-[40px] w-[22vw] md:w-[18vw] h-[70vh] rounded-md z-40 overflow-y-hidden border-[1px] border-solid border-green-300"
></div>

2. Initialize Lens

const [VeryfiLens, setVeryfiLens] = useState(null);
  useEffect(() => {
    const startWasm = async () => {
      if (typeof window !== 'undefined') {
        const lens = require('veryfi-lens-wasm').default;
        lens.setUserAgent(navigator.userAgent); // Use only if lens loads before userAgent
        await lens.initWasmLong(sessionToken, CLIENT_ID);
        setVeryfiLens(lens);
      }
    }
    startWasm()
  }, []);

3. Add functions to start and stop stitching

// Start button
const startStitching = () => {
  if (VeryfiLens) {
    VeryfiLens.startStitching();
    setIsStitching(true);
  } else {
    console.log("VeryfiLens is not initialized");
  }
};

// Stop button
const stopStitching = () => {
  if (VeryfiLens) {
    VeryfiLens.captureLong(setImage, setIsEditing);
  }
};

Angular

1. Import Lens to your app.component.ts import VeryfiLens from 'veryfi-lens-wasm'
2. Add your credentials

const PROCESS_DOCUMENT_URL = "https://lens.veryfi.com/rest/process"; or "https://lens-dev.veryfi.com/rest/process";
CLIENT_ID = "YOUR_CLIENT_ID";
API_KEY = "YOUR_API_KEY";
USERNAME = "your.username"

3. Add function to validate client and receive session token (it is necessary to initialize Lens)

  async getVeryfiSession(CLIENT_ID: string) {
    return await axios
      .post(
        this.VALIDATE_URL,
        {},
        {
          headers: {
            'CLIENT-ID': CLIENT_ID,
          },
        }
      )
      .then((response) => {
        console.log(response.data.session);
        this.session = response.data.session;
      })
      .catch((error) => error);
  }

4. You can call it in ngOnInit lifecycle hook (together with getDeviceData() which is required to send an image to our backend)

  async ngOnInit() {
    this.getVeryfiSession(this.CLIENT_ID);
    this.deviceData = await VeryfiLens.getDeviceData();
  }

1. Add container with id=”preview-container” to your app.component.html

      //TailwindCSS styles, you can use your own
  <div *ngIf="isLong" id="preview-container"
      class="absolute top-[100px] left-[45vw] md:left-[40px] w-[20vw] md:w-[18vw] h-[70vh] rounded-md z-40 overflow-y-hidden border-[1px] border-solid border-green-300"
      ></div>

2. Initialize Lens

async initWasmLong(): Promise<void> {
    setTimeout(() => { //use if Lens load before your layout renders (ERROR TypeError: Cannot read properties of null (reading 'appendChild'))
   await VeryfiLens.initWasmLong(this.session, this.CLIENT_ID);
  }, 1000)
  }

3. Add function to start stitching

  async startStitching(){
    await VeryfiLens.startStitching()
  }

4. Add function to capture stitched image

  async captureLong() {
    await VeryfiLens.captureLong(
      this.setImage.bind(this),
      this.setIsEditing.bind(this)
    );
  }

Svelte

1. Set process url and your credentials from Authentification in your component or in your .env file

const PROCESS_DOCUMENT_URL = "https://lens.veryfi.com/rest/process"; or "https://lens-dev.veryfi.com/rest/process";
const CLIENT_ID = "YOUR_CLIENT_ID";
const API_KEY = "YOUR_API_KEY";
const USERNAME = "your.username";

2. Add function to validate client and receive session token (it is necessary to initialize Lens)

async function validatePartner(clientId) {
  const validateUrl = "https://lens.veryfi.com/rest/validate_partner";
  try {
    const requestOptions = {
      method: "POST",
      headers: { "CLIENT-ID": clientId },
    };
    const response = await fetch(validateUrl, requestOptions);
    const data = await response.json();
    return data.session;
  } catch (error) {
    console.error("Error validating partner:", error);
    return null;
  }
}

3. Call it const sessionToken = validatePartner(CLIENT_ID)

4. Import Lens to your component inside onMount

  onMount(async () => {
        const module = await import('veryfi-lens-wasm');
        VeryfiLens = module.default;
    })

5. Call const deviceData = await VeryfiLens.getDeviceData() (Is reqiured to send an image to our backend)

6. Choose one of the Lens Flavors and Initialize (Pass your sessionToken and CLIENT_ID)

1. Add following div to your component (Stitching preview will be rendered to it)

• <div id="preview-container"></div>

2. Initialize Lens (You can do it in onMount right after import)

  onMount(async () => {
        VeryfiLens.initWasmLong(sessionToken.session, CLIENT_ID)
    })

3. Create functions to start and stop stitching frames

  function startStitching() {
    if (VeryfiLens) {
      VeryfiLens.startStitching();
      isStitching = true;
    } else {
      console.log('veryfiLens is not initialized');
    }
  }
  
  function stopStitching() {
    if (VeryfiLens) {
      VeryfiLens.captureLong();
    }
  }

Long receipt capturing consists of 2 stages

1. await VeryfiLens.startStitching() - Starts sending frames to WASM and stitches long document together
2. await VeryfiLens.captureLong() - Stops stitching and returns result