Biometrics Module

Quick Implementation

Add HTML Element

First, add a container element to your HTML:

<div id="biometrics"></div>

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.

Initialize Module

Create and mount the biometrics component:

const biometrics = oneSdk.component("biometrics");
biometrics.mount("#biometrics");

Handle Events

Set up event listeners for biometric operations:

biometrics.on("detection_complete", (event) => {
  console.log("Biometric capture completed");
});

biometrics.on("results", (results) => {
  console.log("Verification results:", results);
});

Provider-Specific Implementation

Onfido
Incode

Implementation Flow

Mount component
User clicks “Upload Recording”
Receive detection_complete event
Background processing begins
Receive results event

Example Usage

const biometrics = oneSdk.component('biometrics');

// Mount component
biometrics.mount("#biometrics");

// Handle recording upload
biometrics.on('detection_complete', (event) => {
  console.log('Recording uploaded');
});

Implementation Flow

Mount component
Follow on-screen instructions
Receive detection_complete event
Background processing begins
Receive results event

Example Usage

const biometrics = oneSdk.component('biometrics');

// Mount component
biometrics.mount("#biometrics");

// Handle verification completion
biometrics.on('detection_complete', (event) => {
  console.log('Verification completed');
});

Biometrics Events

ready

When the Biometrics component is successfully mounted, it will emit a ready event.To listen to this event, use:

  biometrics.on('ready', () => {
    console.log('idv component is ready')
  }); 

detection_complete

When the Biometrics component successfully detects your information, it will emit a detection_complete event. This event will be emitted immediately before results. To listen to this event, use:

  biometrics.on('detection_complete', () => {
    // programatically unmount your component
    setMounted(false);
  })

results

The end-user data is being submitted during this event. To listen to this event, use:

biometrics.on('success', 
  (checkStatus, document, entityId) => {
    // you can extract information emitted from success event
    // and use it to your own use
  }
)

where the data types for the parameters are:

  checkStatus: 'COMPLETE' | 'FAILED',
  document: Object
  entityId: string

checkStatus will consist of either COMPLETE or FAILED, where

“COMPLETE”: The process and the check results are ready.
“FAILED”: The process is done but there was a genuine failure validating the captured ID and face.

document: the document object generated after the OCR extractentityId: FrankieOne’s internal reference for the individual

detection_failed

The component has run unsuccessfully. You can handle this event using a custom loading spinner or additional styles. To listen to this event, use:

biometrics.on("detection_failed", () => {
  // programatically unmount your component
  setMounted(false);
});

input_required

To listen to this event, use:

biometrics.on("input_required", (information, checkStatus) => {
  if (checkStatus === "WAITING_SELFIE_UPLOAD") {
    console.log("waiting for selfie capture");
  }
});

input_required will emit entityId and current status of the process, such as:

waiting for Document upload WAITING_DOC_UPLOAD
waiting for selfie upload WAITING_SELFIE_UPLOAD
uploaded document has invalid type AWAITING_DOCUMENT_UPLOAD_INVALID_TYPE
or the process is either incomplete or interrupted INCOMPLETE / INTERRUPTED.

For Incode, a lack of camera access permissions triggers the INTERRUPTED event.

error

On error events, we throw all events from vendor back to you. To listen to this event, use:

biometrics.on('error', (e) => {
console.log(e.message, e.payload)
})

If you’re using Incode, the possible messages are: InternalServerError, OSVersionNotSupported, and browserNotSupported

Implementation Best Practices

Mobile Optimization

<meta 
  name="viewport" 
  content="width=device-width, initial-scale=1.0" 
  charset="UTF-8" 
/>

Ensure proper viewport settings for mobile devices.

Error Handling

biometrics.on('error', (error) => {
  console.error('Biometrics error:', error);
  // Implement user-friendly error handling
});

During development, test with both providers (if applicable) to ensure consistent behavior across different biometric implementations.

For detailed event documentation and advanced configurations, refer to the complete Biometrics Event Reference .

OneSDK

Smart UI (for deprecation)

Quick Implementation

Provider-Specific Implementation

Implementation Flow

Example Usage

Implementation Flow

Example Usage

Biometrics Events

Implementation Best Practices

Mobile Optimization

Error Handling

​Quick Implementation

​Provider-Specific Implementation

Implementation Flow

Example Usage

Implementation Flow

Example Usage

​Biometrics Events

​Implementation Best Practices

Mobile Optimization

Error Handling

Quick Implementation

Provider-Specific Implementation

Biometrics Events

Implementation Best Practices