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