Skip to main content

​
Quick Implementation

1

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.
2

Initialize Module

Create and mount the biometrics component:
const biometrics = oneSdk.component("biometrics");
biometrics.mount("#biometrics");
3

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

Implementation Flow

Mount componentUser clicks “Upload Recording”Receive detection_complete eventBackground processing beginsReceive 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');
});

​
Biometrics Events

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')
  });
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);
  })
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
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);
});
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.
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
});
Testing Tip
During development, test with both providers (if applicable) to ensure consistent behavior across different biometric implementations.