IDV Module | FrankieOne | Documentation

Sample Implementation

Complete IDV Flow Implementation

1 const idv = oneSdk.flow("idv");
2 
3 idv.on("ready", () => {
4   // IDV is mounted and ready
5 });
6 
7 idv.on("loading", (isLoading) => {
8   // `isLoading` is a boolean type indicating the loading state
9 });
10 
11 idv.on("input_required", () => {
12   // OCR or Biometrics failed to capture data
13 });
14 
15 idv.on("detection_complete", () => {
16   // Detection is complete, usually show a loading state here
17 });
18 
19 idv.on("processing", (result) => {
20   // Got pending result
21 })
22 
23 idv.on("results", (result) => {
24   // Do something with the results
25 })
26 
27 idv.on("error", (error) => {
28   // Handle errors
29 })
30 
31 // Mount the IDV flow to a container
32 idv.mount("#idv-container");

If you use daon, you have to explicitly define the vendor name in provider object.
see: Multi IDV, implementation section.

Define specific vendor at runtime

You can specify the identity verification provider at runtime by passing the provider option when initializing the IDV flow.
see: Multi IDV

Event System

The IDV module uses an event-driven architecture to communicate state changes and results.

Core Events

ready

Emitted when IDV is successfully mounted

1 idv.on('ready', () => {
2   console.log('IDV component is ready');
3 });

detection_complete

Signals successful information detection

1 idv.on('detection_complete', () => {
2   setMounted(false); // Clean up
3 });

Result Events

1 idv.on('results', (checkStatus, document, entityId) => {
2   switch(checkStatus) {
3     case 'COMPLETE':
4       // Handle successful verification
5       break;
6     case 'FAILED':
7       // Handle failed verification
8       break;
9   }
10 });

The results event provides comprehensive verification outcomes, including document data and entity references.

Input Required Events

1 interface InputRequiredEvent {
2   information: {
3     entityId: string
4   },
5   checkStatus:
6     | 'AWAITING_DOCUMENT_UPLOAD_INVALID_TYPE'
7     | 'WAITING_DOC_UPLOAD'
8     | 'WAITING_SELFIE_UPLOAD'
9     | 'INCOMPLETE'
10     | 'INTERRUPTED'
11 }
12 
13 idv.on('input_required', (information, checkStatus) => {
14   switch(checkStatus) {
15     case 'WAITING_SELFIE_UPLOAD':
16       console.log("Awaiting selfie capture");
17       break;
18     case 'WAITING_DOC_UPLOAD':
19       console.log("Awaiting document upload");
20       break;
21     // Handle other states...
22   }
23 });

For Incode integrations, the ‘INTERRUPTED’ status typically indicates missing camera permissions.

Error Handling

1 interface ErrorEvent {
2   message: string;
3   payload: object;
4 }
5 
6 idv.on('error', (error) => {
7   console.error(`Error: ${error.message}`, error.payload);
8   // Implement your error handling logic
9 });

For Incode integrations, refer to the Incode documentation for detailed error payload information.

Implementation Tips

Always test the flow on both desktop and mobile devices
Implement proper cleanup on component unmount
Consider implementing retry logic for failed verifications
Store the entityId for future reference

Typical Vendor Flows

Onfido

Incode

Daon

Country Selection

Users select their country of origin

Document Selection

Users choose their identification document type

Document Upload

Users capture or upload their chosen document

Biometrics Process

System prepares for biometric capture

Biometric Capture

Users complete their biometric verification

Onfido provides a complete in-browser verification experience without requiring device switching.

Best Practices

Error Handling

Implement comprehensive error handling
Log errors for debugging
Provide user-friendly error messages

User Experience

Guide users through the verification process
Handle device transitions smoothly
Provide clear instructions at each step

You may need to adjust your Content Security Policy (CSP) settings to allow the IDV module to function correctly. Refer to this page for more details.