Skip to content

Example

This page demonstrates a complete KYC flow implemented using only the Core SDK (BiometridStandard), without the UI SDK. Use this as a reference when building your own UI on top of the core primitives.

The flow covers document capture (front and back), document step submission, liveness detection, and liveness step submission — the typical sequence required to complete an identity verification process.

Flow Overview

  1. Initialize the SDK
  2. Retrieve the flow configuration
  3. Create a process
  4. Capture the front of the document
  5. Capture the back of the document
  6. Submit the document step
  7. Run liveness detection

KYC Example

import "@biometrid/standard-web-sdk";

async function runKYCFlow() {
  // 1. Initialize the SDK
  const sdk = await BiometridStandard.initialize({
    url: "https://api.uat.biometrid.com", // required
    credential: "your-credential-uuid", // required
    app: "your-application-uuid", // required
    language: "en",
    device: "desktop", // "desktop" || "mobile"
  });

  // 2. Retrieve the flow configuration
  // Returns the steps and settings defined for your application in the Biometrid admin panel.
  const flow = await sdk.getFlow();
  console.log("Flow loaded:", flow);

  // 3. Create a process
  // A process tracks the user's progress through the flow steps.
  const process = await sdk.createProcess();
  const { processId } = process.data;

  // 4. Capture the front of the document
  const front = await sdk.startAutoCapture({
    container: document.getElementById("capture-container"), // required
    type: "video",
    mode: "document",
    docType: "idcard",
    side: "front",
    captureType: "automatic",
    timerCapture: 3,
    hasFrame: true,
    forceBackCamera: true,
  });

  // 5. Capture the back of the document
  const back = await sdk.startAutoCapture({
    container: document.getElementById("capture-container"), // required
    type: "video",
    mode: "document",
    docType: "idcard",
    side: "back",
    captureType: "automatic",
    timerCapture: 3,
    hasFrame: true,
    forceBackCamera: true,
  });

  // 6. Submit the document step
  // Pass the captured images and document type to updateStep.
  // The `doctype` value must match what was used during capture.
  const docStep = await sdk.updateStep(processId, {
    doctype: sdk.docType.IDCARD, // "idcard"
    front: front, // base64 image string from startAutoCapture
    back: back, // base64 image string from startAutoCapture
  });
  console.log("Document step result:", docStep);

  // 7. Run liveness detection (Face06)
  // startLiveness handles the updateStep call internally — no manual submission needed.
  const liveness = await sdk.startLiveness({
    processId: processId,
    provider: "face06",
    container: document.getElementById("liveness-container"),
  });
  console.log("Liveness result:", liveness);

  if (liveness.status) {
    console.log("KYC process completed successfully.");
  }
}

runKYCFlow().catch(console.error);

Note

The exact fields required for each updateStep call depend on the step type configured in your flow. Refer to the Update Step endpoint reference for all supported payload shapes.

Tip

Always render document capture and liveness in separate containers, or unmount and remount the same container between steps, to avoid rendering conflicts.

Step Notes

Step Method Key Details
Initialize BiometridStandard.initialize() url, credential, and app are required
Get flow sdk.getFlow() Returns step definitions for your application
Create process sdk.createProcess() Returns { data: { processId } } — store processId for all subsequent calls
Capture front sdk.startAutoCapture() Set side: "front". Returns a base64 image string
Capture back sdk.startAutoCapture() Set side: "back". Returns a base64 image string
Update document step sdk.updateStep(processId, data) Payload: { doctype, front, back }
Start liveness sdk.startLiveness() Uses "face06" provider. Handles updateStep internally
  • AutoCapture — Full options reference for startAutoCapture
  • Liveness — Provider details and response shapes for startLiveness
  • Update Step — All supported updateStep payload formats