E2E Sample Code

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