IDV with Review Screen — FrankieOne

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

Initialize OneSDK

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

Set Up Individual Profile

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

Configure Form Components

Creating OneSDK components

1  // Initialize IDV (Identity Verification) flow
2 const idv = oneSdkInstance.flow('idv');
3 
4   	// create OCR Review Screen component
5   const review = oneSdkInstance.component("form", {
6     name: "REVIEW",
7     mode: "individual",
8     type: "ocr",
9   });
10 
11   	// create Loading component
12   	const extract_loading = oneSdkInstance.component("form", {
13     	name: "LOADING",
14     	title: {label: "Extracting data..."},
15     	descriptions: [
16     		{
17       		label: "Hold tight, this can take up to 30 seconds. Please do not refresh this page or click the 'back' button on your browser."
18     		}
19     	]
20   	});
21 
22 // Create result component
23   const result = oneSdkInstance.component('form', {
24     name: 'RESULT',
25     mode: 'individual',
26     type: 'manual',
27     state: 'SUCCESS',
28     title: { label: "Thanks, you're all done" },
29     cta: null,
30   });

Mounting the component and event handling

1 // Listen for loading state changes and update UI accordingly
2 idv.on('loading', (l: boolean) => {
3   setLoading(l);
4   		if (l) {
5   			extract_loading.mount('#form');
6   		}
7 });
8 
9 // Handle IDV completion process, to mount Review OCR Screen
10 const handleIDVFinished = () => {
11   		extract_loading.unmount();
12   		review.mount(appContainer);
13 }
14 
15   	review.on('form:review:ready', async () => {
16   	setLoading(true);
17 
18   	try {
19   	  let res = await oneSdkInstance.individual().submit({ verify: true });
20   	} catch(e) {
21   			console.error(e);
22   	}
23   	setLoading(false);
24 
25   	result.mount('#form');
26   	})
27 
28 // Listen for IDV results and process completion
29 idv.on('results', async () => {
30   handleIDVFinished();
31 });
32 
33 // Handle any IDV errors by showing failure form
34 idv.on('error', (e: any) => {
35   // handle handle case with your custom logic here
36   console.error(e);
37 });
38 
39 // Mount IDV form to DOM element with id "form"
40 idv.mount("#form");

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

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

1	// Initialize IDV (Identity Verification) flow
2	const idv = oneSdkInstance.flow('idv');
3
4	// create OCR Review Screen component
5	const review = oneSdkInstance.component("form", {
6	name: "REVIEW",
7	mode: "individual",
8	type: "ocr",
9	});
10
11	// create Loading component
12	const extract_loading = oneSdkInstance.component("form", {
13	name: "LOADING",
14	title: {label: "Extracting data..."},
15	descriptions: [
16	{
17	label: "Hold tight, this can take up to 30 seconds. Please do not refresh this page or click the 'back' button on your browser."
18	}
19	]
20	});
21
22	// Create result component
23	const result = oneSdkInstance.component('form', {
24	name: 'RESULT',
25	mode: 'individual',
26	type: 'manual',
27	state: 'SUCCESS',
28	title: { label: "Thanks, you're all done" },
29	cta: null,
30	});

1	// Listen for loading state changes and update UI accordingly
2	idv.on('loading', (l: boolean) => {
3	setLoading(l);
4	if (l) {
5	extract_loading.mount('#form');
6	}
7	});
8
9	// Handle IDV completion process, to mount Review OCR Screen
10	const handleIDVFinished = () => {
11	extract_loading.unmount();
12	review.mount(appContainer);
13	}
14
15	review.on('form:review:ready', async () => {
16	setLoading(true);
17
18	try {
19	let res = await oneSdkInstance.individual().submit({ verify: true });
20	} catch(e) {
21	console.error(e);
22	}
23	setLoading(false);
24
25	result.mount('#form');
26	})
27
28	// Listen for IDV results and process completion
29	idv.on('results', async () => {
30	handleIDVFinished();
31	});
32
33	// Handle any IDV errors by showing failure form
34	idv.on('error', (e: any) => {
35	// handle handle case with your custom logic here
36	console.error(e);
37	});
38
39	// Mount IDV form to DOM element with id "form"
40	idv.mount("#form");