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

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

Set Up Individual Profile

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

Configure Form Components

1 // Initialize IDV (Identity Verification) flow
2const 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
2idv.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
10const 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
29idv.on('results', async () => {
30 handleIDVFinished();
31});
32
33// Handle any IDV errors by showing failure form
34idv.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"
40idv.mount("#form");
Built with