Welcome to IDV Platform Web Components documentation!

Overview
Before You Start
Compatibility
Install via NPM
Install via CDN
Setup
Events
Configuration
Methods
Examples

Overview

The available component is <idv-flow>.

The component is based on WebAssembly (compiled from our core C++ code and wrapped with JavaScript). The same code is used across all SDK packages, ensuring consistency between platforms.

Before You Start

Components require HTTPS — they will not work over plain HTTP.
The library automatically registers web components. Import it before adding the components to your HTML.

Compatibility

Devices
Mobile (iOS)	99 (iOS14.4+)	99 (iOS14.4+)	11
Mobile (Android)	69	63	-
Desktop	66	69	11

Install via NPM

If you are starting a new project, initialize it:

cd /path/to/project
npm init

Install the main package:

npm i @regulaforensics/idv-capture-web

Optionally, install additional modules:

npm i @regulaforensics/idv-face
npm i @regulaforensics/idv-document

Create index.html and index.js files in the root directory of the project.

Import @regulaforensics/idv-capture-web into your index.js:

import './node_modules/@regulaforensics/idv-capture-web/dist/main.js';

In index.html, add the component and load index.js:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My app</title>
    </head>
    <body>
        <idv-flow></idv-flow>
        <script type="module" src="index.js"></script>
    </body>
</html>

Here is an example of index.js file.

Install via CDN

Use a CDN if you don’t have a build process (for example, a plain HTML/JS project). Add the following script tags to your .html file. The CDN link format is unpkg.com/:package@:version/:file:

<script src="https://unpkg.com/@regulaforensics/idv-capture-web@latest/dist/main.iife.js"></script>

<script src="https://unpkg.com/@regulaforensics/idv-face@latest/dist/main.iife.js"></script>
<script src="https://unpkg.com/@regulaforensics/idv-document@latest/dist/main.iife.js"></script>

Setup

The setup process involves four steps: Initialize → Configure → Prepare → Start.

Initialize

import { IdvIntegrationService } from '@regulaforensics/idv-capture-web';
import { FaceIdv } from '@regulaforensics/idv-face';
import { DocumentIdv } from '@regulaforensics/idv-document';

const service = new IdvIntegrationService();

// Event listener
service.eventListener = (event) => console.log(event);

// Initialize modules
const initResult = await service.initialize({
  modulesConfig: { docreader: { devLicense: 'yourBase64license' } }, // For development use only. Do not use it in production.
  includedModules: [FaceIdv, DocumentIdv],
});

if (initResult.error) {
  console.error(initResult.error);
}

Configure

Use credentials, API key, or token URL.

With username/password

const configureResult = await service.configure({
  baseUrl: 'https://your.host.com',
  userName: '',
  password: '',
});

With API key

const configureResult = await service.configure({
  baseUrl: 'https://your.host.com',
  apiKey: 'yourApiKey',
  ttl: 86400, // Optional. Default is 86400 seconds (24h). You can set a custom TTL in seconds.
});

With token URL

const configureResult = await service.configure({
  url: 'your-token-url',
});

Prepare Workflow

const prepareResult = await service.prepareWorkflow({
  workflowId: 'your_workflow_id',
});

// Error handling
if (prepareResult.error) {
  console.error(prepareResult.error);
}

Start Workflow

const metadata = { anyMetadata: 'Any Metadata' };
const locale = 'en-us';

const startWorkflowResult = await service.startWorkflow({
  locale,
  metadata,
});

// Error handling
if (startWorkflowResult.error) {
  console.error(startWorkflowResult.error);
}

console.log('WORKFLOW FINISHED:', startWorkflowResult);

Events

You can subscribe to service events such as status updates, errors, and workflow progress by assigning a listener:

const service = new IdvIntegrationService();

// Define your listener
service.eventListener = (event) => {
    console.log('Event received:', event);
};

Configuration

Setters

Setter	Description
`nonce`	Sets a CSP nonce for `<style>` tags.
`sessionRestoreMode`	Restores a session if the page reloads. `false` by default.

const service = new IdvIntegrationService();
service.nonce = 'nonceId';
service.sessionRestoreMode = true;

Getters

Getter	Description
`version`	Returns the version of the component.

const service = new IdvIntegrationService();
console.log(service.version);

Methods

Method	Description	Type	Notes
`initialize(config: InitConfig)`	Initializes the service. Returns error if initialization fails.	`async initialize(config: InitConfig): Promise<{ error?: BaseInitializationError }>`	Call this first before any other method.
`configure(config)`	Configures the service with credentials, API key, or token.	`async configure(config: CredentialConnectionConfig \| TokenConnectionConfig \| ApiKeyConnectionConfig): Promise<ConfigureCompletion \| TokenConfigureCompletion>`	Required before preparing a workflow.
`getWorkFlows(params?)`	Returns a list of available workflows.	`async getWorkFlows(params?: WorkflowListRequest): Promise<WorkflowListCompletion>`	Useful for dynamically displaying workflows to users.
`prepareWorkflow({ workflowId })`	Prepares the service for the given workflow. Checks module and step compatibility.	`async prepareWorkflow({ workflowId }: { workflowId: string }): Promise<PrepareWorkflowCompletion>`	Must be called after configure. Validates workflow and modules.
`startWorkflow(config?)`	Starts the workflow. Show the web component before running and remove it after completion.	`async startWorkflow(config?: StartWorkflowConfig): Promise<WorkflowCompletion>`	Display the component before calling. Pass locale/metadata if needed.
`deinitialize()`	Deinitializes the service. Run `initialize` again to restart. Recommended after completing work.	`async deinitialize(): Promise<DeinitializeCompletion>`	Clean up resources after finishing a workflow. Use `initialize` to start again.

Examples

You can find examples of using the components on the Samples page.