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>