Smart UI will soon be retired

We’re officially discontinuing Smart UI support and updates effective December 31, 2024. It will be replaced by our new OneSDK Onboarding Forms.

What This Means for Current Smart UI Users:

Until December 31, 2024:

No new feature requests will be accepted.
Smart UI will remain functional, and support requests will be addressed.

After December 31, 2024:

All support requests and updates will cease.
Smart UI will still function, but no support will be provided.
Information on how to migrate to OneSDK is found at Migrating to OneSDK.

Contact your Customer Success manager for further details about the Smart UI integration to OneSDK.

OneSDK offers enhanced flexibility regarding IDV vendors, and introduces new modular components such as OCR capabilities and advanced analytics functionalities.

If you’re currently using Smart UI with your FrankieOne integration, use the following information to migrate to OneSDK.

Migration Paths

There are two main migration paths expected, based on your current integration with Smart UI:

SmartUI implementation	Migration path
SmartUI + Onfido	Biometrics-first for a faster and better UX
SmartUI Only	Leverage the new eKYC forms (manual capture)

To get a quick start on how the onboarding flow looks like for these migration paths, please visit OneSDK Quick Start.
For further details, please go through the following sections.

Migration Path 1: OneSDK Biometrics-first

If you have been using Smart UI with Onfido, we recommend Biometrics-first approach in OneSDK to have a faster and better onboarding experience. In OneSDK, you can switch to either Onfido Motion or Incode to run OCR and Biometrics.
Please go through the following steps to learn more about OneSDK:

Step 1: OneSDK initialisation

Please visit OneSDK Getting Started to learn more about OneSDK and how to initialise it.

Session token

Generating a session token is similar as before but you need to change the preset to one-sdk

Step 2: Integrating with an IDV vendor

Once you get started, to integrate with different IDV vendors, navigate to the following pages:

To have a full E2E experience and optimise your UX, OneSDK modular forms will also provide out-of-the-box screens which you can embed at any point of your onboarding. The most commonly used screens are loading and review screens.
Please visit Modular Forms - Biometrics/OCR flow to learn more about OCR/Biometrics onboarding forms. You can find a couple of sample codes here: E2E sample code.

Step 3: E2E Sample code - Smart UI vs OneSDK

Here’s an example of the current Smart UI + Onfido integration vs OneSDK Biometrics-first with Onfido. In this sample, we configure Australian DL and Passport in both Smart UI and OneSDK:

1 <html>
2 
3 <head>
4   
5   <meta charset="utf-8" />
6   <meta name="referrer" content="no-referrer" />
7   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap"
8     rel="stylesheet" />
9   
10   <script src="https://assets.frankiefinancial.io/onboarding/v4/ff-onboarding-widget.umd.min.js"></script>
11 
12   <script>
13     //Here's the environments available to run this. Please don't use this html page for production it's meant as an illustration only
14     
15     let backend_URL_UAT = "https://backend.kycaml.uat.frankiefinancial.io";
16     let backend_URL_PROD = "https://backend.kycaml.frankiefinancial.io";
17 
18     // Set your environment
19     let selected_ENV = backend_URL_UAT;
20 
21     // Set customer ID and API Key
22     const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
23     const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
24     const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
25 
26     const getToken = async () => {
27         const response = await fetch(
28           `${selected_ENV}/auth/v2/machine-session`,
29           {
30             method: "POST",
31             headers: {
32               "Content-Type": "application/json",
33               authorization: `machine ${btoa(
34                 `${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`
35               )}`,
36             },
37             body: JSON.stringify({
38               permissions: {
39                 preset: "smart-ui",
40               },
41               referrer: "https://*.2.63.80:5500/ || *://*.2.63.80:5500/*"
42             }),
43           }
44         );
45         return response.headers.get("token");
46       };
47 
48     //This is the configuration for the smart UI object. Please see https://apidocs.frankiefinancial.com/docs/smart-ui-configuration for full list available of options
49     //HOT TIP: leaving list of accepted countries to null gives you the full list of countries to chose from.
50     
51     let ff_config_object = {
52       "mode": "production",
53       frankieBackendUrl: selected_ENV,
54       ageRange: [18, 125],
55       "checkProfile": "auto",
56       "phrases": phrases_v2,
57       "welcomeScreen": true,
58       "maxAttemptCount": 2,
59       "documentTypes": [
60         {
61           "icon": "driving-licence",
62           "type": "DRIVERS_LICENCE",
63            "acceptedCountries": [
64             "AUS"
65           ]
66         },
67         {
68           "idExpiry": true,
69           "icon": "passport",
70           "type": "PASSPORT",
71           "acceptedCountries": [
72             "AUS"
73           ]
74         }
75       ],
76       "successScreen": {
77         "ctaUrl": null,
78         "ctaText": "Continue to My Account"
79       },
80       "failureScreen": true,
81       "progressBar": true,
82       //"googleAPIKey": "YOUR_GOOGLE_API_KEY",
83       "acceptedCountries": [
84         "AUS"
85       ],
86 
87       "organisationName": "Organisation",
88       "dateOfBirth": {
89         "type": "gregorian"
90       },
91       "idScanVerification": {
92           "releaseVersion": "v1.2",
93           "welcomeScreen": {
94             "title": 'Verify your identity',
95             "content": ["We need to collect some personal information to verify your identity before we can open your account."],
96             "ctaText": 'Start Identity Verification',
97           },
98           "useMobileDevice": true,
99           "useLiveness": true,
100           //injectedCss: string,
101           //language: PhrasesDictionary
102       },
103       "pendingScreen": {
104         "htmlContent": null,
105         "ctaActions": []
106       },
107       //"consentText": "help",
108       "requestAddress": {
109         "acceptedCountries": [
110           "AUS"
111         ]
112       },
113       "documentUploads": false,
114       "lazyIDCheck": false,
115       "requestID": true,
116       "disableThirdPartyAnalytics": false,
117       "saveOnly": true
118     };
119 
120 
121     var phrases_v2 = {
122       "failure_screen": {
123         "title": "Oh no!",
124         "subtitle": "Unfortunately we couldn't verify your identity at this time.",
125         "failure_hint": "Please contact our customer support team who will be happy to help you open your account."
126       }
127     }
128     
129     // Specify a customer reference
130     let applicant_reference = "YOUR_UNIQUE_CUSTOMER_REF";
131 
132     function onLoaded() {
133         getToken().then((token) => {
134           frankieFinancial.initialiseOnboardingWidget({
135             ffToken: token, //This is the token to authenticate your Smart UI session
136             applicantReference: applicant_reference, //This should be your unique customer reference for the person filling in this form.
137             
138             config: ff_config_object,
139             width: "390px",
140             //height: "844px",
141           });
142         });
143       }
144 
145     var body = document.getElementsByTagName("body")[0];
146 
147     document.addEventListener("DOMContentLoaded", onLoaded);
148   </script>
149 
150 </head>
151 
152 <body style="background-color: black; position: absolute; top: 0; left: 50%; transform: translateX(-50%)" >
153   <ff-onboarding-widget> </ff-onboarding-widget>
154 
155   <script>
156     //Once you get the FF_CHECK_RESULT event AND you're not going to do the biometrics/idScanVerification process it's a trigger to do something for the customer.
157     //if they've gotten to the end of the smart UI move them along to your next part of the process.
158 
159     window.addEventListener("FF_CHECK_RESULT", handle_results);
160     function handle_results(event) {
161       //Console log the event details if you want to see the structure of the event returned. YOU DO NOT WANT TO DO THIS IN PRODUCTION AS IT DOES CONTAIN PII INFORMATION!
162       console.log(event);
163     }
164 
165     window.addEventListener("SCREEN:FAILURE", handle_failure_screen);
166 
167     function handle_failure_screen(event) {
168       console.log("Emmiting the Screen Failure event");
169       console.log(event);
170     }
171 
172     window.addEventListener("SCREEN:DOCUMENT_TYPE_SELECT", handle_doc_select_screen);
173 
174     function handle_doc_select_screen(event) {
175       console.log("Emmiting the DOCUMENT_TYPE_SELECT event");
176       console.log(event);
177     }
178 
179 
180     window.addEventListener(
181       "FF_EXTERNAL_IDV_CHECK_COMPLETED",
182       handle_biometric_results
183     );
184 
185     function handle_biometric_results(event) {
186       console.log(event);
187     }
188   </script>
189 
190 </body>
191 
192 </html>

Migration Path 2: OneSDK eKYC forms (Manual capture)

If you have been using Smart UI only, without IDV, we recommend using the new Manual Forms in OneSDK. Please go through the following steps one by one for the migration:

Step 1: OneSDK initialisation

Please visit OneSDK Getting Started to learn more about OneSDK and how to initialise it.

Session token

Generating a session token is similar as before but you need to change the preset to one-sdk

Step 2: Render Manual forms

OneSDK modular forms will provide manual forms as well. Please visit Modular Forms - Manual flow to learn more about manual onboarding forms. You can find a couple of sample E2E scenarios here: E2E sample code

1	<html>
2
3	<head>
4
5	<meta charset="utf-8" />
6	<meta name="referrer" content="no-referrer" />
7	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap"
8	rel="stylesheet" />
9
10	<script src="https://assets.frankiefinancial.io/onboarding/v4/ff-onboarding-widget.umd.min.js"></script>
11
12	<script>
13	//Here's the environments available to run this. Please don't use this html page for production it's meant as an illustration only
14
15	let backend_URL_UAT = "https://backend.kycaml.uat.frankiefinancial.io";
16	let backend_URL_PROD = "https://backend.kycaml.frankiefinancial.io";
17
18	// Set your environment
19	let selected_ENV = backend_URL_UAT;
20
21	// Set customer ID and API Key
22	const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
23	const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
24	const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
25
26	const getToken = async () => {
27	const response = await fetch(
28	`${selected_ENV}/auth/v2/machine-session`,
29	{
30	method: "POST",
31	headers: {
32	"Content-Type": "application/json",
33	authorization: `machine ${btoa(
34	`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`
35	)}`,
36	},
37	body: JSON.stringify({
38	permissions: {
39	preset: "smart-ui",
40	},
41	referrer: "https://.2.63.80:5500/ \|\| ://.2.63.80:5500/"
42	}),
43	}
44	);
45	return response.headers.get("token");
46	};
47
48	//This is the configuration for the smart UI object. Please see https://apidocs.frankiefinancial.com/docs/smart-ui-configuration for full list available of options
49	//HOT TIP: leaving list of accepted countries to null gives you the full list of countries to chose from.
50
51	let ff_config_object = {
52	"mode": "production",
53	frankieBackendUrl: selected_ENV,
54	ageRange: [18, 125],
55	"checkProfile": "auto",
56	"phrases": phrases_v2,
57	"welcomeScreen": true,
58	"maxAttemptCount": 2,
59	"documentTypes": [
60	{
61	"icon": "driving-licence",
62	"type": "DRIVERS_LICENCE",
63	"acceptedCountries": [
64	"AUS"
65	]
66	},
67	{
68	"idExpiry": true,
69	"icon": "passport",
70	"type": "PASSPORT",
71	"acceptedCountries": [
72	"AUS"
73	]
74	}
75	],
76	"successScreen": {
77	"ctaUrl": null,
78	"ctaText": "Continue to My Account"
79	},
80	"failureScreen": true,
81	"progressBar": true,
82	//"googleAPIKey": "YOUR_GOOGLE_API_KEY",
83	"acceptedCountries": [
84	"AUS"
85	],
86
87	"organisationName": "Organisation",
88	"dateOfBirth": {
89	"type": "gregorian"
90	},
91	"idScanVerification": {
92	"releaseVersion": "v1.2",
93	"welcomeScreen": {
94	"title": 'Verify your identity',
95	"content": ["We need to collect some personal information to verify your identity before we can open your account."],
96	"ctaText": 'Start Identity Verification',
97	},
98	"useMobileDevice": true,
99	"useLiveness": true,
100	//injectedCss: string,
101	//language: PhrasesDictionary
102	},
103	"pendingScreen": {
104	"htmlContent": null,
105	"ctaActions": []
106	},
107	//"consentText": "help",
108	"requestAddress": {
109	"acceptedCountries": [
110	"AUS"
111	]
112	},
113	"documentUploads": false,
114	"lazyIDCheck": false,
115	"requestID": true,
116	"disableThirdPartyAnalytics": false,
117	"saveOnly": true
118	};
119
120
121	var phrases_v2 = {
122	"failure_screen": {
123	"title": "Oh no!",
124	"subtitle": "Unfortunately we couldn't verify your identity at this time.",
125	"failure_hint": "Please contact our customer support team who will be happy to help you open your account."
126	}
127	}
128
129	// Specify a customer reference
130	let applicant_reference = "YOUR_UNIQUE_CUSTOMER_REF";
131
132	function onLoaded() {
133	getToken().then((token) => {
134	frankieFinancial.initialiseOnboardingWidget({
135	ffToken: token, //This is the token to authenticate your Smart UI session
136	applicantReference: applicant_reference, //This should be your unique customer reference for the person filling in this form.
137
138	config: ff_config_object,
139	width: "390px",
140	//height: "844px",
141	});
142	});
143	}
144
145	var body = document.getElementsByTagName("body")[0];
146
147	document.addEventListener("DOMContentLoaded", onLoaded);
148	</script>
149
150	</head>
151
152	<body style="background-color: black; position: absolute; top: 0; left: 50%; transform: translateX(-50%)" >
153	<ff-onboarding-widget> </ff-onboarding-widget>
154
155	<script>
156	//Once you get the FF_CHECK_RESULT event AND you're not going to do the biometrics/idScanVerification process it's a trigger to do something for the customer.
157	//if they've gotten to the end of the smart UI move them along to your next part of the process.
158
159	window.addEventListener("FF_CHECK_RESULT", handle_results);
160	function handle_results(event) {
161	//Console log the event details if you want to see the structure of the event returned. YOU DO NOT WANT TO DO THIS IN PRODUCTION AS IT DOES CONTAIN PII INFORMATION!
162	console.log(event);
163	}
164
165	window.addEventListener("SCREEN:FAILURE", handle_failure_screen);
166
167	function handle_failure_screen(event) {
168	console.log("Emmiting the Screen Failure event");
169	console.log(event);
170	}
171
172	window.addEventListener("SCREEN:DOCUMENT_TYPE_SELECT", handle_doc_select_screen);
173
174	function handle_doc_select_screen(event) {
175	console.log("Emmiting the DOCUMENT_TYPE_SELECT event");
176	console.log(event);
177	}
178
179
180	window.addEventListener(
181	"FF_EXTERNAL_IDV_CHECK_COMPLETED",
182	handle_biometric_results
183	);
184
185	function handle_biometric_results(event) {
186	console.log(event);
187	}
188	</script>
189
190	</body>
191
192	</html>