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

​
Overview of this Example

Features

  • OneSDK eKYC-only flow
  • Country-specific form fields
  • Multi-step verification process
  • Retry handling mechanism

Supported Countries

  • Philippines (PHL)
  • Australia (AUS)
  • Singapore (SGP)
  • China (CHN)

​
Implementation Guide

1

Initialize OneSDK

const oneSDKInstance = await OneSdk({
  // Pass session object received from backend for authentication
  session: sessionObjectFromBackend,
  // Set environment mode to production
  mode: "production",
});
2

Set Up Individual Profile

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

Configure Form Components

 // Initialize IDV (Identity Verification) flow
const idv = oneSdkInstance.flow('idv');

  	// create OCR Review Screen component
  const review = oneSdkInstance.component("form", {
    name: "REVIEW",
    mode: "individual",
    type: "ocr",
  });

  	// create Loading component
  	const extract_loading = oneSdkInstance.component("form", {
    	name: "LOADING",
    	title: {label: "Extracting data..."},
    	descriptions: [
    		{
      		label: "Hold tight, this can take up to 30 seconds. Please do not refresh this page or click the 'back' button on your browser."
    		}
    	]
  	});

// Create result component
  const result = oneSdkInstance.component('form', {
    name: 'RESULT',
    mode: 'individual',
    type: 'manual',
    state: 'SUCCESS',
    title: { label: "Thanks, you're all done" },
    cta: null,
  });

// Listen for loading state changes and update UI accordingly
idv.on('loading', (l: boolean) => {
  setLoading(l);
  		if (l) {
  			extract_loading.mount('#form');
  		}
});

// Handle IDV completion process, to mount Review OCR Screen
const handleIDVFinished = () => {
  		extract_loading.unmount();
  		review.mount(appContainer);
}

  	review.on('form:review:ready', async () => {
  	setLoading(true);

  	try {
  	  let res = await oneSdkInstance.individual().submit({ verify: true });
  	} catch(e) {
  			console.error(e);
  	}
  	setLoading(false);

  	result.mount('#form');
  	})

// Listen for IDV results and process completion
idv.on('results', async () => {
  handleIDVFinished();
});

// Handle any IDV errors by showing failure form
idv.on('error', (e: any) => {
  // handle handle case with your custom logic here
  console.error(e);
});

// Mount IDV form to DOM element with id "form"
idv.mount("#form");