eKYC Standard Flow — FrankieOne

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

Initialize OneSDK

1 const oneSDKInstance = await OneSDK({
2   session: sessionObjectFromBackend,
3   mode: "production",
4   recipe: {
5     form: {
6       provider: {
7         name: "react",
8         googleApiKey: '<YOUR GOOGLE MAPS API KEY>'
9       },
10     },
11   },
12 });

Replace <YOUR GOOGLE MAPS API KEY> with your actual Google Maps API key for the address feature.

Set Up Individual Profile

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

Configure Form Components

Basic Forms

1 // Welcome Screen
2 const welcome = oneSDKInstance.component("form", {
3   name: "WELCOME",
4   mode: "individual",
5   type: "manual",
6 });
7 
8 // Consent Form
9 const consent = oneSDKInstance.component("form", {
10   name: "CONSENT",
11   mode: "individual",
12   type: "manual",
13 });

Personal Details Form

1 const personal = oneSDKInstance.component("form", {
2   name: "PERSONAL",
3   mode: "individual",
4   type: "manual",
5   title: {
6     label: "Personal Details",
7   },
8   descriptions: [
9     {
10       label: "In this section, we need your personal information",
11     },
12     {
13       label: "Please enter your information accordingly",
14     },
15   ],
16 });

Document Form

1 const document = oneSDKInstance.component("form", {
2   name: "DOCUMENT",
3   mode: "individual",
4   type: "manual",
5   numberOfIDs: 2,
6   title: {
7     label: "Choose your identification",
8   },
9   descriptions: [
10     {
11       label: "We need two forms of ID to verify your identity",
12     },
13   ],
14 });

Review Form

1 const review = oneSDKInstance.component("form", {
2   name: "REVIEW",
3   type: "manual",
4   verify: true, // When true, automatically triggers verification
5 });

Result Handling Forms

1 const result_success = oneSDKInstance.component("form", {
2   name: "RESULT",
3   type: "manual",
4   state: "SUCCESS",
5   title: { label: "Complete" },
6   descriptions: [
7     { label: "Process is now complete. You can close the page" },
8   ],
9   cta: { label: "Done" },
10 });
11 
12 const result_fail = oneSDKInstance.component("form", {
13   name: "RESULT",
14   type: "manual",
15   state: "FAIL",
16   title: { label: "Verification Failed" },
17   descriptions: [
18     { label: "We were unable to verify your identity. Please contact our support team for assistance." },
19   ],
20   cta: { label: "Done" },
21 });
22 
23 const result_pending = oneSDKInstance.component("form", {
24   name: "RESULT",
25   type: "manual",
26   state: "PENDING",
27   title: { label: "Verification Pending" },
28   descriptions: [
29     { label: "We are currently verifying your identity. Please contact our support team for assistance." },
30   ],
31   cta: { label: "Done" },
32 });
33 
34 // Partial result form - Not required if implementing a retry mechanism per the Retry Logic Implementation section
35 const result_partial = oneSDKInstance.component("form", {
36   name: "RESULT",
37   type: "manual",
38   state: "PARTIAL",
39   title: { label: "Verification Partially Complete" },
40   descriptions: [
41     { label: "We were unable to fully verify your identity. Please contact our support team for assistance." },
42   ],
43   cta: { label: "Done" },
44 });

Event Handling

1 welcome.on("form:welcome:ready", () => {
2   consent.mount(appContainer);
3 });
4 
5 consent.on("form:consent:ready", async () => {
6   personal.mount(appContainer);
7 });
8 
9 personal.on("form:personal:ready", async () => {
10   document.mount(appContainer);
11 });
12 
13 document.on("form:document:ready", async () => {
14   review.mount(appContainer);
15 });

Retry Logic Implementation

The implementation includes a retry mechanism that allows users up to 2 attempts before showing the failure screen.

1 // Define the retry form
2 const retry = oneSDKInstance.component("form", {
3   name: "RETRY",
4   type: "manual",
5 });
6 
7 // Define the retry count
8 let retryCount = 0;
9 
10 // Add partial result event listener to the review form
11 review.on("form:result:partial", async () => {
12   if (retryCount < 2) {
13     retry.mount(appContainer);
14   } else {
15     result_fail.mount(appContainer);
16   }
17 });

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.

1	const oneSDKInstance = await OneSDK({
2	session: sessionObjectFromBackend,
3	mode: "production",
4	recipe: {
5	form: {
6	provider: {
7	name: "react",
8	googleApiKey: '<YOUR GOOGLE MAPS API KEY>'
9	},
10	},
11	},
12	});

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

1	// Welcome Screen
2	const welcome = oneSDKInstance.component("form", {
3	name: "WELCOME",
4	mode: "individual",
5	type: "manual",
6	});
7
8	// Consent Form
9	const consent = oneSDKInstance.component("form", {
10	name: "CONSENT",
11	mode: "individual",
12	type: "manual",
13	});

1	const personal = oneSDKInstance.component("form", {
2	name: "PERSONAL",
3	mode: "individual",
4	type: "manual",
5	title: {
6	label: "Personal Details",
7	},
8	descriptions: [
9	{
10	label: "In this section, we need your personal information",
11	},
12	{
13	label: "Please enter your information accordingly",
14	},
15	],
16	});

1	const document = oneSDKInstance.component("form", {
2	name: "DOCUMENT",
3	mode: "individual",
4	type: "manual",
5	numberOfIDs: 2,
6	title: {
7	label: "Choose your identification",
8	},
9	descriptions: [
10	{
11	label: "We need two forms of ID to verify your identity",
12	},
13	],
14	});

1	const review = oneSDKInstance.component("form", {
2	name: "REVIEW",
3	type: "manual",
4	verify: true, // When true, automatically triggers verification
5	});

1	const result_success = oneSDKInstance.component("form", {
2	name: "RESULT",
3	type: "manual",
4	state: "SUCCESS",
5	title: { label: "Complete" },
6	descriptions: [
7	{ label: "Process is now complete. You can close the page" },
8	],
9	cta: { label: "Done" },
10	});
11
12	const result_fail = oneSDKInstance.component("form", {
13	name: "RESULT",
14	type: "manual",
15	state: "FAIL",
16	title: { label: "Verification Failed" },
17	descriptions: [
18	{ label: "We were unable to verify your identity. Please contact our support team for assistance." },
19	],
20	cta: { label: "Done" },
21	});
22
23	const result_pending = oneSDKInstance.component("form", {
24	name: "RESULT",
25	type: "manual",
26	state: "PENDING",
27	title: { label: "Verification Pending" },
28	descriptions: [
29	{ label: "We are currently verifying your identity. Please contact our support team for assistance." },
30	],
31	cta: { label: "Done" },
32	});
33
34	// Partial result form - Not required if implementing a retry mechanism per the Retry Logic Implementation section
35	const result_partial = oneSDKInstance.component("form", {
36	name: "RESULT",
37	type: "manual",
38	state: "PARTIAL",
39	title: { label: "Verification Partially Complete" },
40	descriptions: [
41	{ label: "We were unable to fully verify your identity. Please contact our support team for assistance." },
42	],
43	cta: { label: "Done" },
44	});

1	welcome.on("form:welcome:ready", () => {
2	consent.mount(appContainer);
3	});
4
5	consent.on("form:consent:ready", async () => {
6	personal.mount(appContainer);
7	});
8
9	personal.on("form:personal:ready", async () => {
10	document.mount(appContainer);
11	});
12
13	document.on("form:document:ready", async () => {
14	review.mount(appContainer);
15	});

1	// Define the retry form
2	const retry = oneSDKInstance.component("form", {
3	name: "RETRY",
4	type: "manual",
5	});
6
7	// Define the retry count
8	let retryCount = 0;
9
10	// Add partial result event listener to the review form
11	review.on("form:result:partial", async () => {
12	if (retryCount < 2) {
13	retry.mount(appContainer);
14	} else {
15	result_fail.mount(appContainer);
16	}
17	});