Skip to main content
Instead of building your own flow, it’s highly recommended to fork an existing flow from the public sample codes found here

​
Flow Overview

1

Welcome Screen

Initial user greeting and introduction
2

Consent Screen

Capture user consent for data processing
3

OCR Component

Document capture for Identity check
4

Biometrics Component

Biometrics (selfie capture) for facial identity
OCR Review Features
The OCR Review screen automatically extracts data from captured documents and allows users to verify:
  • Personal information (names)
  • Address details
  • Document information
  • Biometric data accuracy

​
Implementation Guide

const oneSDKInstance = await OneSdk({
  session: sessionObjectFromBackend,
  mode: "production",
  recipe: {
    form: {
      provider: {
        name: "react",
        googleApiKey: '<YOUR_GOOGLE_API_KEY>'
      },
    },
  },
});
Replace <YOUR_GOOGLE_API_KEY> with your actual Google API key for address autocomplete functionality.
// Set up individual profile
const oneSdkIndividual = oneSDKInstance.individual();
oneSdkIndividual.setProfileType("auto");

// Configure form components
const welcome = oneSDKInstance.component("form", {
  name: "WELCOME",
  mode: "individual",
  type: "manual",
});

const consent = oneSDKInstance.component("form", {
  name: "CONSENT",
  mode: "individual",
  type: "manual",
});

const biometrics = oneSdk.component("biometrics");
const ocr = oneSdk.component("ocr");

​
Event Handling

// Welcome screen to Consent screen
welcome.on("form:welcome:ready", () => {
  consent.mount(appContainer);
});

// Consent screen to OCR component
consent.on("form:consent:ready", async () => {
  ocr.mount(appContainer);
});

ocr.on("results", ({ document }) => {
    // Present the details of the document that were detected from the uploaded image or images.
  // Decide whether to proceed to the next stage of the onboarding process
  // depending on whether document verification was successful.
  console.log('ocr results');
  if (document) {
        console.log(`document: ${JSON.stringify(document)}`);
      console.log(document.ocrResult.dateOfBirth);
      //oneSdkIndividual.submit();
      biometrics.mount("#form");
  } else {
        console.log("No document returned");
  }
});

biometrics.on("results", ({checkStatus}) => {
    // Decide whether to proceed to the next stage of the onboarding process
  // depending on whether biometrics verification was successful.
  console.log('biometrics results');
  if (checkStatus === 'COMPLETE') {
        console.log(checkStatus);
  } else {
        console.log("no biometrics returned");
  }
});

// Initialize flow
welcome.mount(appContainer);

​
Complete Implementation

async function loadOneSdk() {
  const appContainer = document.getElementById('form-container');

  // Initialize SDK
  const oneSDKInstance = await OneSdk({
    session: sessionObjectFromBackend,
    mode: "production",
    recipe: {
      form: {
        provider: {
          name: "react",
          googleApiKey: '<YOUR_GOOGLE_API_KEY>'
        },
      },
    },
  });

  // Initialize individual profile
  const oneSdkIndividual = oneSDKInstance.individual();
  oneSdkIndividual.setProfileType("auto");

  // Configure components
  const welcome = oneSDKInstance.component("form", {
    name: "WELCOME",
    mode: "individual",
    type: "manual",
  });

  const consent = oneSDKInstance.component("form", {
    name: "CONSENT",
    mode: "individual",
    type: "manual",
  });

  // Set up event handlers
  welcome.on("form:welcome:ready", () => {
    consent.mount(appContainer);
  });

  // Consent screen to OCR component
  consent.on("form:consent:ready", async () => {
    ocr.mount(appContainer);
  });

  ocr.on("results", ({ document }) => {
      // Present the details of the document that were detected from the uploaded image or images.
    // Decide whether to proceed to the next stage of the onboarding process
    // depending on whether document verification was successful.
    console.log('ocr results');
    if (document) {
          console.log(`document: ${JSON.stringify(document)}`);
        console.log(document.ocrResult.dateOfBirth);
        //oneSdkIndividual.submit();
        biometrics.mount("#form");
    } else {
          console.log("No document returned");
    }
  });

  biometrics.on("results", ({checkStatus}) => {
      // Decide whether to proceed to the next stage of the onboarding process
    // depending on whether biometrics verification was successful.
    console.log('biometrics results');
    if (checkStatus === 'COMPLETE') {
          console.log(checkStatus);
    } else {
          console.log("no biometrics returned");
    }
  });

  // Initialize flow
  welcome.mount(appContainer);
}

​
Best Practices

Error Handling

Add try-catch blocks around asynchronous operations and SDK calls to handle potential errors gracefully.

User Experience

Provide clear loading states and feedback during document processing and verification steps.

Testing

Test the flow with various document types and edge cases to ensure robust implementation.

Security

Ensure secure handling of the session object and API keys.
Remember to handle API key security appropriately. Never expose your Google API key directly in client-side code in production environments.