E2E Sample Code

Now let’s put all the screens together to run an E2E OCR and Biometrics flow.

Initialisation

Make sure to follow Getting started and Form recipe configuration to initialise OneSDK properly, before using the following sample codes.

1- Render default Review form after IDV flow

In this sample, we render the review and loading forms upon receiving a results event when running IDV flow in OneSDK:

1<html lang="en">
2  <head>
3    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4    <title>oneSdk onboarding</title>
5    <script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
6
7    <script>
8      async function startOneSdk() {
9        const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
10        const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
11        const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
12
13        const tokenResultRaw = await fetch("https://backend.kycaml.uat.frankiefinancial.io/auth/v2/machine-session", {
14                method: "POST",
15                headers: {
16                    "authorization": "machine " + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
17                    "Content-Type": "application/json"
18                },
19                body: JSON.stringify({
20                    permissions: {
21                        "preset": "one-sdk",
22                        "reference": //"<YOUR_UNIQUE_CUSTOMER_REF>"
23                    }
24                })
25            });
26
27        const tokenResult = await tokenResultRaw.json();
28
29        const sessionObjectFromBackend = tokenResult;
30
31        const oneSdk = await OneSdk({
32          session: sessionObjectFromBackend,
33          mode: "development",
34          recipe: {
35            form: {
36              provider: {
37                name: 'react',
38                googleApiKey: //"<YOUR_GOOGLE_API_KEY>"
39              },
40            }
41          }
42        });
43        oneSdk.on('*', console.log);
44
45        const oneSdkIndividual = oneSdk.individual();
46        oneSdkIndividual.addConsent("general");
47        oneSdkIndividual.addConsent("docs");
48        oneSdkIndividual.addConsent("creditheader");
49        await oneSdkIndividual.submit();
50
51        const idv = oneSdk.flow("idv");
52        const loading1 = oneSdk.component("form", {name: "LOADING", title: {label: "Loading..."}, descriptions: [{label: ""}]});
53        const loading2 = oneSdk.component("form", {name: "LOADING", title: {label: "Processing results..."}, descriptions: [{label: "Hold tight, this can take up to 30 seconds. Please don't refresh this page or click the 'back' button on your browser."}]});
54        const review = oneSdk.component("form", {
55            name: "REVIEW",
56            type: "ocr",
57          });
58
59        let before = true;
60        idv.on("loading", (display)=>{
61          if(display){
62            if (before)
63            {
64              loading1.mount("#loading1");
65            }
66          }else{
67            if (before)
68            {
69              loading1.unmount();
70            }
71            before = false;
72          }
73        })
74
75        idv.on("results", async ({checkStatus, document, entityId}) => {
76            if (checkStatus) {
77              console.log("results succesfful");
78              loading2.unmount();
79              review.mount("#idv-el");
80            } else {
81              console.log("no data returned");
82            }
83        });
84
85        idv.on("error", ({ message, payload }) => {
86          console.log("received error");
87          console.log(message, payload);
88        });
89
90
91        idv.on("detection_complete", (message) => {
92          console.log("capture finished");
93          console.log(message);
94          loading2.mount("#loading2");
95        });
96
97        idv.on("*", (message) => {
98            console.log(message);
99          });
100
101        review.on("form:review:ready", async (message) => {
102          console.log(message);
103        });
104
105        idv.mount("#idv-el");
106
107      }
108    </script>
109
110    <style></style>
111  </head>
112  <body style="background-color: white" onload="startOneSdk()">
113    <div
114      id="idv-el"
115      style="top: 0;left: 0; width: 100%; height: 100%; display: block"
116    ></div>
117    <div id="loading1"></div>
118    <div id="loading2"></div>
119  </body>
120</html>

You can optionally run a verification check upon receiving theform:review:ready event as the last step.

2- Render E2E forms along with OCR and Biometrics modules

In this sample, we render all the forms including Welcome, Consent, Document selection, and Review along with OCR and Biometrics modules.
In this flow, we leverage the separate OCR and Biometrics modules, to load the Review screen right after OCR and before Biometrics.

1<html lang="en">
2  <head>
3    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4    <title>oneSdk onboarding</title>
5    <script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
6
7    <script>
8      async function startOneSdk() {
9        const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx";
10        const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
11        const API_KEY =
12          "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
13
14        const tokenResultRaw = await fetch(
15          "https://backend.kycaml.uat.frankiefinancial.io/auth/v2/machine-session",
16          {
17            method: "POST",
18            headers: {
19              authorization:
20                "machine " +
21                btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
22              "Content-Type": "application/json",
23            },
24            body: JSON.stringify({
25              permissions: {
26                preset: "one-sdk",
27                reference: "YOUR_UNIQUE_CUSTOMER_REF",
28              },
29            }),
30          },
31        );
32
33        const tokenResult = await tokenResultRaw.json();
34
35        const sessionObjectFromBackend = tokenResult;
36
37        const oneSdk = await OneSdk({
38          session: sessionObjectFromBackend,
39          mode: "development",
40          recipe: {
41            ocr: {
42              maxDocumentCount: 3,
43            },
44            form: {
45              provider: {
46                name: "react",
47                //googleApiKey: "YOUR_GOOGLE_API_KEY"
48              },
49            },
50          },
51        });
52        oneSdk.on("*", console.log);
53
54        const form_welcome = oneSdk.component("form", {
55          name: "WELCOME",
56          type: "ocr",
57          /*descriptions: [
58              { label: 'This is a sample dynamic page.', style: {} },
59              { label: 'It can contain multiple paragraphs.', style: {} },
60            ], */
61          //cta: {style: {'ff-button':{backgroundColor: "red"}}}
62        });
63        const form_consent = oneSdk.component("form", { name: "CONSENT" });
64        const form_loading1 = oneSdk.component("form", {
65          name: "LOADING",
66          title: { label: "Loading..." },
67          descriptions: [{ label: "" }],
68        });
69        const form_loading2 = oneSdk.component("form", {
70          name: "LOADING",
71          title: { label: "Extracting data..." },
72          descriptions: [
73            {
74              label:
75                "Hold tight, this can take up to 30 seconds. Please don't referesh this page or click the 'back' button on your browser.",
76            },
77          ],
78        });
79        const form_loading3 = oneSdk.component("form", {
80          name: "LOADING",
81          title: { label: "Hold on..." },
82          descriptions: [{ label: "" }],
83        });
84
85        const form_document = oneSdk.component("form", {
86          name: "DOCUMENT",
87          showPreps: true,
88        });
89        const form_review = oneSdk.component("form", {
90          name: "REVIEW",
91          type: "ocr",
92        });
93
94        const biometrics = oneSdk.component("biometrics");
95
96        form_welcome.mount("#form-container");
97        form_welcome.on("form:welcome:ready", () => {
98          form_consent.mount("#form-container");
99        });
100
101        form_consent.on("form:consent:ready", async () => {
102          form_document.mount("#form-container");
103        });
104
105        form_welcome.on("form:welcome:failed", () => {
106          // display error message
107        });
108
109        form_welcome.on("*", (message) => {
110          console.log(message);
111        });
112
113        let docType;
114
115        form_document.on("form:document:ready", async ({ inputInfo }) => {
116          form_loading1.mount("#form-container");
117          docType = inputInfo.documentType;
118
119          const ocr = oneSdk.component("ocr", {
120            documents: [{ type: docType, countries: ["AUS"] }],
121          });
122
123          ocr.mount("#form-container");
124          ocr.on("ready", () => form_loading1.unmount());
125
126          ocr.on("*", (message) => {
127            console.log(message);
128          });
129
130          ocr.on("results", ({ document }) => {
131            doSomethingAfterOcr({ document });
132          });
133
134          ocr.on("loading", (display) => {
135            if (display) {
136              form_loading2.mount("#form-container");
137            } else {
138              form_loading2.unmount();
139            }
140          });
141        });
142
143        function doSomethingAfterOcr({ document }) {
144          // Present the details of the document that were detected from the uploaded image or images.
145          // Decide whether to proceed to the next stage of the onboarding process
146          // depending on whether document verification was successful.
147          if (document) {
148            console.log(document);
149            console.log(document.ocrResult.dateOfBirth);
150            console.log("trying to load review screen");
151
152            form_review.mount("#form-container");
153          } else {
154            console.log("No document returned");
155          }
156        }
157
158        form_review.on("form:review:ready", async () => {
159          biometrics.mount("#form-container");
160        });
161
162        biometrics.on("*", (message) => {
163          console.log(message);
164        });
165
166        biometrics.on("error", console.error);
167
168        let error = false;
169        biometrics.on("detection_failed", () => (error = true));
170        biometrics.on("session_closed", () => {
171          // If the session was closed due to an error, try running the biometrics component again.
172          if (error) biometrics.mount("#form-container");
173          error = false;
174        });
175
176        biometrics.on("loading", (display) => {
177          if (display) {
178            //alert("loading, show now")
179            form_loading3.mount("#form-container");
180          } else {
181            form_loading3.unmount();
182          }
183        });
184
185        biometrics.on("processing", () =>
186          alert("We will get back to you with results soon"),
187        );
188        biometrics.on("results", (result) => {
189          // Decide whether to proceed to the next stage of the onboarding process
190          // depending on whether biometrics verification was successful.
191          console.log(result);
192        });
193      }
194    </script>
195
196    <style></style>
197  </head>
198  <body style="background-color: white" onload="startOneSdk()">
199    <div
200      id="form-container"
201      style="position:fixed;top: 0;left: 0; width: 100%; height: 100%;"
202    ></div>
203  </body>
204</html>
Built with