Skip to main content

Features

  • OneSDK eKYC-only flow
  • Multi-step verification process
  • Retry handling mechanism
  • Using Sardine to help checking device verification
Instead of building your own flow, it’s highly recommended to fork an existing flow from the public sample codes found here
1

Initialize OneSDK

const oneSDKInstance = await OneSdk({
  session: sessionObjectFromBackend,
  mode: "production",
  recipe: {
    form: {
      provider: {
        name: "react",
        googleApiKey: '<YOUR GOOGLE MAPS API KEY>'
      },
    },
  },
});
Replace <YOUR GOOGLE MAPS API KEY> with your actual Google Maps API key for the address feature.
2

Set Up Individual Profile

const oneSdkIndividual = oneSDKInstance.individual();
oneSdkIndividual.setProfileType("auto");
3

Configure Form Components

  // Initialize device tracking
  const device = oneSDKInstance.component("device", {
    activityType: "REGISTRATION",
  });
  device.start();

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

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

const personal = oneSDKInstance.component("form", {
  name: "PERSONAL",
  mode: "individual",
  type: "manual",
  title: {
    label: "Personal Details",
  },
  descriptions: [
    {
      label: "In this section, we need your personal information",
    },
    {
      label: "Please enter your information accordingly",
    },
  ],
});

const result_success = oneSDKInstance.component("form", {
  name: "RESULT",
  type: "manual",
  state: "SUCCESS",
  title: { label: "Complete" },
  descriptions: [
    { label: "Process is now complete. You can close the page" },
  ],
  cta: { label: "Done" },
});

const result_fail = oneSDKInstance.component("form", {
  name: "RESULT",
  type: "manual",
  state: "FAIL",
});

​
Event Handling

welcome.on("form:welcome:ready", () => {
  consent.mount(appContainer);
});

consent.on("form:consent:ready", async () => {
personal.mount(appContainer);
});

personal.on("form:personal:ready", async () => {
document.mount(appContainer);
});

​
Retry Logic Implementation

The implementation includes a retry mechanism that allows users up to 2 attempts before showing the failure screen.
let retryCount = 0;
review.on("form:review:partial", async () => {
  if (retryCount < 2) {
    partial.mount(appContainer);
  } else {
    result_fail.mount(appContainer);
  }
});

partial.on("form:result:partial", async () => {
  retryCount += 1;
  retry.mount(appContainer);
});

​
Best Practices

Error Handling

Always implement proper error handling and validation for each form step to ensure data quality.

User Experience

Provide clear feedback and instructions in the user’s preferred language, especially for country-specific forms.