E2E Sample Code | FrankieOne

In the following sample codes, we put everything together to run an E2E Manual flow using Modular forms to showcase different use cases.

Initialisation

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

1- Two IDs flow with Driver Licence and Passport:

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 
47         const welcome = oneSdk.component("form", {
48           name: "WELCOME",
49           type: "manual",
50           /*descriptions: [
51                   { label: 'This is a sample dynamic page.', style: {} },
52                   { label: 'It can contain multiple paragraphs.', style: {} },
53                 ], */
54           //cta: {style: {'ff-button':{backgroundColor: "red"}}}
55         });
56         const consent = oneSdk.component("form", {name: "CONSENT"});
57 
58         const personal = oneSdk.component("form", {
59           name: "PERSONAL",
60           type: "manual",
61           personal: {
62             countries:{
63               default:{
64                 default:{
65                   fields:[
66                     {
67                       fieldType: 'date',
68                       dataType: 'text',
69                       name: 'dateOfBirth',
70                       hide: false,
71                       calendarConfig: {
72                         age: {
73                           min: 20,
74                           max: 65,
75                           message: "The age must be between 20 and 65"
76                         }
77                       }
78                     }
79                   ]
80                 }
81               }
82             }
83           }
84         });
85 
86         const document = oneSdk.component("form", {
87           name: "DOCUMENT",
88           type: "manual",
89           numberOfIDs: 2,
90           documents: [
91             {
92               type: "DRIVERS_LICENCE",
93               countries: {
94                 default: {
95                   default: {
96                     fields: [
97                       {
98                         fieldType: 'select',
99                         name: 'country',
100                         options: [
101                           {
102                             label: "Australia",
103                             value: "AUS"
104                           },
105                           {
106                             label: "New Zealand",
107                             value: "NZL"
108                           }
109                         ],
110                       }
111                     ]
112                   }
113                 }
114               }
115             },
116             {
117               type: "PASSPORT",
118               countries: {
119                 default: {
120                   default: {
121                     fields: [
122                       {
123                         fieldType: 'select',
124                         name: 'country',
125                         options: [
126                           {
127                             label: "Australia",
128                             value: "AUS"
129                           },
130                           {
131                             label: "New Zealand",
132                             value: "NZL"
133                           }
134                         ],
135                       }
136                     ]
137                   }
138                 }
139               }
140             }
141           ]
142         });
143 
144         const review = oneSdk.component("form", {
145           name: "REVIEW",
146           type: "manual",
147           verify: true
148         });
149 
150         const retry = oneSdk.component("form", {
151           name: "RETRY",
152           type: "manual",
153         });
154 
155         const result_fail = oneSdk.component("form", {
156           name: "RESULT",
157           type: "manual",
158           state: 'FAIL',
159           title: {label:'Max attempt reached'},
160           descriptions: [{label:'You have reached all the attempts. Our officer will review your details and get in touch.'}, {label:'Please close the browser'}],
161           cta:{label: 'Close'}
162         });
163 
164         welcome.mount("#form-container");
165         welcome.on("form:welcome:ready", () => {
166           consent.mount("#form-container");
167         });
168 
169         consent.on("form:consent:ready", async () => {
170           personal.mount("#form-container");
171         });
172 
173         welcome.on("form:welcome:failed", () => {
174           // display error message
175         });
176 
177         welcome.on("*", (message) => {
178           console.log(message);
179         });
180 
181         personal.on("form:personal:ready", async () => {
182           document.mount("#form-container");
183         });
184 
185         document.on("form:document:back", async ({inputInfo}) => {
186           personal.mount("#form-container");
187         });
188 
189 
190         document.on("form:document:ready", async ({inputInfo}) => {
191           review.mount("#form-container");
192         });
193 
194         let count = 0;
195         review.on("form:result:partial", async () => {
196           if (count < 2)
197           {
198             retry.mount("#form-container");
199             count+=1;
200           }
201           else
202           {
203             result_fail.mount("#form-container");
204           }
205 
206         });
207 
208       }
209     </script>
210 
211     <style></style>
212   </head>
213   <body style="background-color: white" onload="startOneSDK()">
214     <div
215       id="form-container"
216       style="position:fixed;top: 0;left: 0; width: 100%; height: 100%;"
217     ></div>
218   </body>
219 </html>

2- One ID flow with default Australian Documents

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 
47         const welcome = oneSdk.component("form", {
48           name: "WELCOME",
49           type: "manual",
50           /*descriptions: [
51                   { label: 'This is a sample dynamic page.', style: {} },
52                   { label: 'It can contain multiple paragraphs.', style: {} },
53                 ], */
54           //cta: {style: {'ff-button':{backgroundColor: "red"}}}
55         });
56         const consent = oneSdk.component("form", {name: "CONSENT"});
57 
58         const personal = oneSdk.component("form", {
59           name: "PERSONAL",
60           type: "manual",
61           personal: {
62             countries:{
63               default:{
64                 default:{
65                   fields:[
66                     {
67                       fieldType: 'date',
68                       dataType: 'text',
69                       name: 'dateOfBirth',
70                       hide: false,
71                       calendarConfig: {
72                         age: {
73                           min: 20,
74                           max: 65,
75                           message: "The age must be between 20 and 65"
76                         }
77                       }
78                     }
79                   ]
80                 }
81               }
82             }
83           }
84         });
85 
86         const document = oneSdk.component("form", {
87           name: "DOCUMENT",
88           type: "manual",
89           numberOfIDs: 1,
90         });
91 
92         const review = oneSdk.component("form", {
93           name: "REVIEW",
94           type: "manual",
95           verify: true
96         });
97 
98         const retry = oneSdk.component("form", {
99           name: "RETRY",
100           type: "manual",
101         });
102 
103         const result_fail = oneSdk.component("form", {
104           name: "RESULT",
105           type: "manual",
106           state: 'FAIL',
107           title: {label:'Max attempt reached'},
108           descriptions: [{label:'You have reached all the attempts. Our officer will review your details and get in touch.'}, {label:'Please close the browser'}],
109           cta:{label: 'Close'}
110         });
111 
112         welcome.mount("#form-container");
113         welcome.on("form:welcome:ready", () => {
114           consent.mount("#form-container");
115         });
116 
117         consent.on("form:consent:ready", async () => {
118           personal.mount("#form-container");
119         });
120 
121         welcome.on("form:welcome:failed", () => {
122           // display error message
123         });
124 
125         welcome.on("*", (message) => {
126           console.log(message);
127         });
128 
129         personal.on("form:personal:ready", async () => {
130           document.mount("#form-container");
131         });
132 
133         document.on("form:document:back", async ({inputInfo}) => {
134           personal.mount("#form-container");
135         });
136 
137 
138         document.on("form:document:ready", async ({inputInfo}) => {
139           review.mount("#form-container");
140         });
141 
142         let count = 0;
143         review.on("form:result:partial", async () => {
144           if (count < 2)
145           {
146             retry.mount("#form-container");
147             count+=1;
148           }
149           else
150           {
151             result_fail.mount("#form-container");
152           }
153 
154         });
155 
156       }
157     </script>
158 
159     <style></style>
160   </head>
161   <body style="background-color: white" onload="startOneSDK()">
162     <div
163       id="form-container"
164       style="position:fixed;top: 0;left: 0; width: 100%; height: 100%;"
165     ></div>
166   </body>
167 </html>

3- Personal only without document

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 
47         const welcome = oneSdk.component("form", {
48           name: "WELCOME",
49           type: "manual",
50           /*descriptions: [
51                   { label: 'This is a sample dynamic page.', style: {} },
52                   { label: 'It can contain multiple paragraphs.', style: {} },
53                 ], */
54           //cta: {style: {'ff-button':{backgroundColor: "red"}}}
55         });
56         const consent = oneSdk.component("form", {name: "CONSENT"});
57 
58         const personal = oneSdk.component("form", {
59           name: "PERSONAL",
60           type: "manual",
61           personal: {
62             countries:{
63               default:{
64                 default:{
65                   fields:[
66                     {
67                       fieldType: 'date',
68                       dataType: 'text',
69                       name: 'dateOfBirth',
70                       hide: false,
71                       calendarConfig: {
72                         age: {
73                           min: 20,
74                           max: 65,
75                           message: "The age must be between 20 and 65"
76                         }
77                       }
78                     }
79                   ]
80                 }
81               }
82             }
83           }
84         });
85 
86         const review = oneSdk.component("form", {
87           name: "REVIEW",
88           type: "manual",
89           verify: true
90         });
91 
92         const retry = oneSdk.component("form", {
93           name: "RETRY",
94           type: "manual",
95         });
96 
97         const result_fail = oneSdk.component("form", {
98           name: "RESULT",
99           type: "manual",
100           state: 'FAIL',
101           title: {label:'Max attempt reached'},
102           descriptions: [{label:'You have reached all the attempts. Our officer will review your details and get in touch.'}, {label:'Please close the browser'}],
103           cta:{label: 'Close'}
104         });
105 
106         welcome.mount("#form-container");
107         welcome.on("form:welcome:ready", () => {
108           consent.mount("#form-container");
109         });
110 
111         consent.on("form:consent:ready", async () => {
112           personal.mount("#form-container");
113         });
114 
115         welcome.on("form:welcome:failed", () => {
116           // display error message
117         });
118 
119         welcome.on("*", (message) => {
120           console.log(message);
121         });
122 
123         personal.on("form:personal:ready", async () => {
124           review.mount("#form-container");
125         });
126 
127         let count = 0;
128         review.on("form:result:partial", async () => {
129           if (count < 2)
130           {
131             retry.mount("#form-container");
132             count+=1;
133           }
134           else
135           {
136             result_fail.mount("#form-container");
137           }
138 
139         });
140 
141       }
142     </script>
143 
144     <style></style>
145   </head>
146   <body style="background-color: white" onload="startOneSDK()">
147     <div
148       id="form-container"
149       style="position:fixed;top: 0;left: 0; width: 100%; height: 100%;"
150     ></div>
151   </body>
152 </html>