Skip to main content

Sample Implementation

Complete IDV Flow Implementation
const idv = oneSdk.flow("idv");

idv.on("ready", () => {
  // IDV is mounted and ready
});

idv.on("loading", (isLoading) => {
  // `isLoading` is a boolean type indicating the loading state
});

idv.on("input_required", () => {
  // OCR or Biometrics failed to capture data
});

idv.on("detection_complete", () => {
  // Detection is complete, usually show a loading state here
});

idv.on("processing", (result) => {
  // Got pending result
})

idv.on("results", (result) => {
  // Do something with the results
})

idv.on("error", (error) => {
  // Handle errors
})

// Mount the IDV flow to a container
idv.mount("#idv-container");
If you use daon, you have to explicitly define the vendor name in provider object.
see: Multi IDV, implementation section.
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.

ready

Emitted when IDV is successfully mounted
idv.on('ready', () => {
  console.log('IDV component is ready');
});

detection_complete

Signals successful information detection
idv.on('detection_complete', () => {
  setMounted(false); // Clean up
});
idv.on('results', (checkStatus, document, entityId) => {
  switch(checkStatus) {
    case 'COMPLETE':
      // Handle successful verification
      break;
    case 'FAILED':
      // Handle failed verification
      break;
  }
});
The results event provides comprehensive verification outcomes, including document data and entity references.
interface InputRequiredEvent {
  information: {
    entityId: string
  },
  checkStatus:
    | 'AWAITING_DOCUMENT_UPLOAD_INVALID_TYPE'
    | 'WAITING_DOC_UPLOAD'
    | 'WAITING_SELFIE_UPLOAD'
    | 'INCOMPLETE'
    | 'INTERRUPTED'
}

idv.on('input_required', (information, checkStatus) => {
  switch(checkStatus) {
    case 'WAITING_SELFIE_UPLOAD':
      console.log("Awaiting selfie capture");
      break;
    case 'WAITING_DOC_UPLOAD':
      console.log("Awaiting document upload");
      break;
    // Handle other states...
  }
});
For Incode integrations, the ‘INTERRUPTED’ status typically indicates missing camera permissions.
interface ErrorEvent {
  message: string;
  payload: object;
}

idv.on('error', (error) => {
  console.error(`Error: ${error.message}`, error.payload);
  // Implement your error handling logic
});
For Incode integrations, refer to the Incode documentation for detailed error payload information.
Implementation Tips
  1. Always test the flow on both desktop and mobile devices
  2. Implement proper cleanup on component unmount
  3. Consider implementing retry logic for failed verifications
  4. Store the entityId for future reference

Typical Vendor Flows

1

Country Selection

Users select their country of origin
2

Document Selection

Users choose their identification document type
3

Document Upload

Users capture or upload their chosen document
4

Biometrics Process

System prepares for biometric capture
5

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.