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)

8. Call await VeryfiLens.initWasm(sessionToken, CLIENT_ID)

   • To capture detected document call await VeryfiLens.captureWasm()

9. Now if you run your app using node server.js, you should see a video feed from your device's camera (Give browser pemission to use camera)**

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. Initialize Lens

// you can save lens to state if you are using require instead of import
const [VeryfiLens, setVeryfiLens] = useState<{
    setUserAgent: (arg0: string) => void;
    initWasm: (arg0: string) => void;
    startCameraWasm: () => void;
    captureWasm: (
      arg0: React.Dispatch<React.SetStateAction<string>>,
      arg1: React.Dispatch<React.SetStateAction<boolean>>
    ) => void;
  } | null>(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.initWasm(sessionToken, CLIENT_ID);
        setVeryfiLens(lens);
      }
    }
    startWasm()
  }, []);

2. Add function to capture the frame

  const takePhoto = () => {
    if (VeryfiLens) {
      VeryfiLens.captureWasm(setImage, setIsEditing)
    } else {
      console.log('VeryfiLens is not initialized')
    }
  };
// setImage is cropped image setter(for example react's useState hook), returns string
// setIsEditing returns `true` if image was successfully cropped (we use it to change screens)

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. 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.initWasm(sessionToken, CLIENT_ID);
        setVeryfiLens(lens);
      }
    }
    startWasm()
  }, []);

2. Add function to capture the frame

  const takePhoto = () => {
    if (VeryfiLens) {
      VeryfiLens.captureWasm(setImage, setIsEditing)
    } else {
      console.log('veryfiLens is not initialized')
    }
  };
// setImage is cropped image setter(for example react's useState hook), returns string
// setIsEditing returns `true` if image was successfully cropped (we use it to change screens)

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. Initialize Lens

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

2. Add function to capture the frame

  async captureWasm() {
    await VeryfiLens.captureWasm(
      this.setImage.bind(this),
      this.setIsEditing.bind(this)
    );
  }
// setImage is cropped image setter(for example react's useState hook), returns string
// setIsEditing returns `true` if image was successfully cropped (we use it to change screens)

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. Initialize Lens (You can do it in onMount right after import)

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

2. Create a function to capture the frame

    const takePhoto = () => {
      if (VeryfiLens) {
        VeryfiLens.captureWasm();
      } else {
        console.log('veryfiLens is not initialized');
      }
    };