Sample apps — FrankieOne

To help you integrate the Smart UI in your application, we’ve created a few code snippets using different Frameworks.

Before you start on any of these examples, please remember to install Smart UI first by including this script in your entry html file, as instructed in Getting started.

index.html

1 <!DOCTYPE html>
2 <html lang="en">
3   <head>
4     ...
5   <body>
6     ...
7     <script src="https://assets.frankiefinancial.io/onboarding/v4/ff-onboarding-widget.umd.min.js"></script>
8   </body>
9 </html>

In the examples below, please change frankieBackendUrl to your FrankieOne environment of choice and ffToken to the token retrieved in Getting started.

Angular JS Example

1 import { Component, OnInit } from '@angular/core';
2 
3 import { WindowRef } from "./WindowRef";
4 
5 const widgetConfiguration = {
6 frankieBackendUrl: 'https://backend.demo.frankiefinancial.io',
7 documentTypes: [
8 'NATIONAL_HEALTH_ID',
9 { type: 'PASSPORT', acceptedCountries: 'ALL' },
10 'DRIVERS_LICENCE',
11 ],
12 idScanVerification: false,
13 checkProfile: 'auto',
14 maxAttemptCount: 5,
15 googleAPIKey: false,
16 phrases: {
17 document_select: {
18 title: 'Custom Text Here: Choose your ID',
19 hint_message: "Choose which ID you'd like to provide.",
20 },
21 },
22 requestAddress: { acceptedCountries: ['AUS', 'NZL'] },
23 consentText:
24 "I agree with the terms described in the Consent section of the Company's webpage",
25 };
26 const applicantReference = Math.floor(Math.random() \* 9999) + '-new-applicant';
27 
28 @Component({
29 selector: 'smart-ui', // component name used in markup
30 template:
31 `     <ff-onboarding-widget />
32   `
33 })
34 export class AppComponent implements OnInit {
35 private window;
36 
37 constructor(private windRef: WindowRef) {
38 this.window = windRef.nativeWindow
39 }
40 
41 ngOnInit() {
42 this.window.frankieFinancial.initialiseOnboardingWidget({
43 applicantReference: applicantReference, /// the string reference that will be injected into this applicant's data, will be used to prefill data and can be used to request their details aftwerwards, both via Frankie API and Frankie Portal
44 config: widgetConfiguration,
45 width: '500px',
46 height: '900px',
47 // The ffToken needs to be passed and can be retreived from postman/ API call, read our docs for more info
48 ffToken: '',
49 });
50 }
51 }

Vue JS Example

App.vue

1 <template>
2   <div>
3     <ff-onboarding-widget />
4   </div>
5 </template>
6 
7 <script>
8 const widgetConfiguration = {
9   frankieBackendUrl: 'https://backend.demo.frankiefinancial.io',
10   documentTypes: [
11     'NATIONAL_HEALTH_ID',
12     { type: 'PASSPORT', acceptedCountries: 'ALL' },
13     'DRIVERS_LICENCE',
14   ],
15   idScanVerification: false,
16   checkProfile: 'auto',
17   maxAttemptCount: 5,
18   googleAPIKey: false,
19   phrases: {
20     document_select: {
21       title: 'Custom Text Here: Choose your ID',
22       hint_message: "Choose which ID you'd like to provide.",
23     },
24   },
25   requestAddress: { acceptedCountries: ['AUS', 'NZL'] },
26   consentText:
27     "I agree with the terms described in the Consent section of the Company's webpage",
28 };
29 const applicantReference = Math.floor(Math.random() * 9999) + '-new-applicant';
30 
31 export default {
32   mounted() {
33     window.frankieFinancial.initialiseOnboardingWidget({
34       applicantReference: applicantReference, /// the string reference that will be injected into this applicant's data, will be used to prefill data and can be used to request their details aftwerwards, both via Frankie API and Frankie Portal
35       config: widgetConfiguration,
36       width: '500px',
37       height: '900px',
38       // The ffToken needs to be passed and can be retreived from postman/ API call, read our docs for more info
39       ffToken: '',
40     });
41   },
42 };
43 </script>

Silent “Unknown custom element: `<ff-onboarding-widget>`”

main.js

1 import Vue from "vue";
2 import App from "./App.vue";
3 
4 Vue.config.productionTip = false;
5 Vue.config.ignoredElements = ["ff-onboarding-widget"]; // tell vue to ignore this tag
6 
7 new Vue({
8   render: (h) => h(App),
9 }).$mount("#app");

Our <ff-onboarding-widget> is a non native html tag and for Vue 2 it will throw out warnings about it. To silence the warnings, we need to config Vue to ignore that html tag.

React Example

App.jsx

1 import { useEffect } from "react";
2 
3 const widgetConfiguration = {
4   frankieBackendUrl: "https://backend.demo.frankiefinancial.io",
5   documentTypes: [
6     "NATIONAL_HEALTH_ID",
7     { type: "PASSPORT", acceptedCountries: "ALL" },
8     "DRIVERS_LICENCE",
9   ],
10   idScanVerification: false,
11   checkProfile: "auto",
12   maxAttemptCount: 5,
13   googleAPIKey: false,
14   phrases: {
15     document_select: {
16       title: "Custom Text Here: Choose your ID",
17       hint_message: "Choose which ID you'd like to provide.",
18     },
19   },
20   requestAddress: { acceptedCountries: ["AUS", "NZL"] },
21   consentText:
22     "I agree with the terms described in the Consent section of the Company's webpage",
23 };
24 const applicantReference = Math.floor(Math.random() * 9999) + "-new-applicant";
25 
26 function App() {
27   useEffect(() => {
28     window.frankieFinancial.initialiseOnboardingWidget({
29       applicantReference: applicantReference, /// the string reference that will be injected into this applicant's data, will be used to prefill data and can be used to request their details aftwerwards, both via Frankie API and Frankie Portal
30       config: widgetConfiguration,
31       width: "500px",
32       height: "900px",
33       ffToken: "",
34     });
35   }, []);
36 
37   return (
38     <div>
39       <ff-onboarding-widget />
40     </div>
41   );
42 }
43 
44 export default App;

React Native Example

There’s no Smart UI component for React Native, or any other cross platform/native framework. Since the Smart UI is a web compliant widget, to get it to work into any native app we need to embed it into a Webview. For React Native, first you will need to install this package to use WebView.

Node

$ npm install --save react-native-webview

Then you can either code the html into WebView by creating a string variable like in the snippet below, or you can host and serve an html file and load it via uri.

App.js

1 import { View, StatusBar } from "react-native";
2 import { WebView } from "react-native-webview";
3 import source from "./smart-ui.html";
4 
5 const smartUiHtml = `
6 <head>
7     <meta charset="utf-8" />
8     <script src="https://assets.frankiefinancial.io/onboarding/v4/ff-onboarding-widget.umd.min.js"></script>
9     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
10     <script>
11         function initialiseWidget() {
12             var widgetConfiguration = {
13                 frankieBackendUrl: "https://backend.demo.frankiefinancial.io",
14                 documentTypes: [
15                     "NATIONAL_HEALTH_ID",
16                     { type: "PASSPORT", acceptedCountries: "ALL" },
17                     "DRIVERS_LICENCE"],
18                 idScanVerification: false,
19                 checkProfile: "auto",
20                 maxAttemptCount: 5,
21                 googleAPIKey: false,
22                 phrases: {
23                     document_select: {
24                         title: "Custom Text Here: Choose your ID",
25                         hint_message: "Choose which ID you'd like to provide."
26                     },
27                 },
28                 requestAddress: { acceptedCountries: ["AUS", "NZL"] },
29                 consentText:
30                     "I agree with the terms described in the Consent section of the Company's webpage",
31             };
32 
33             const applicantReference = Math.floor(Math.random() * 9999) + "-new-applicant";
34 
35 
36             window.frankieFinancial.initialiseOnboardingWidget({
37               applicantReference: applicantReference, /// the string reference that will be injected into this applicant's data, will be used to prefill data and can be used to request their details aftwerwards, both via Frankie API and Frankie Portal
38               config: widgetConfiguration,
39               width: screen.availWidth - (screen.availWidth / 20),
40               height: screen.availHeight - (screen.availHeight / 5),
41               ffToken: '',
42             });
43         };    
44     </script>
45 </head>
46 
47 <body responsive onload="initialiseWidget()">
48     <ff-onboarding-widget />
49 </body>
50 `;
51 
52 function App() {
53   return (
54     <View style={{ flex: 1, backgroundColor: "#fff" }}>
55       <StatusBar />
56       <WebView
57         source={{ html: smartUiHtml }}
58         originWhitelist={'["*"]'}
59         javaScriptEnabled={true}
60         domStorageEnabled={true}
61         scalesPageToFit={false}
62         scrollEnabled={false}
63         style={{
64           width: "100%",
65           height: "100%",
66         }}
67       />
68     </View>
69   );
70 }
71 
72 export default App;

Obtaining the token (Postman)

Postman Link

Obtaining the token (example in Node + Express + Axios)

JavaScript

1 // Have your Frankie credentials in hand
2 const apiKey = process.env.FRANKIE_API_KEY,
3   customerId = process.env.FRANKIE_CUSTOMER_ID,
4   customerChildId = process.env.FRANKIE_CUSTOMER_CHILD_ID;
5 
6 // Set the applicant reference to any html compatible string you can use to identify
7 //   this applicant, this will help us to preload applicant data and directly display the
8 //   applicant details review page if an applicant already exists.
9 // Note: the example here is just that. Use your own unique identifier.
10 const applicantReference = Math.floor(Math.random() * 9999) + "-new-applicant";
11 
12 // Set Smart UI configurations as defined in "Configuration"
13 const widgetConfiguration = {
14   documentTypes: ["PASSPORT", "DRIVERS_LICENCE", "NATIONAL_HEALTH_ID"],
15   maxAttemptCount: 5,
16   googleAPIKey: process.env.GOOGLE_API || false,
17   frankieBackendUrl: process.env.FRANKIE_API_URL,
18   checkProfile: process.env.CHECK_PROFILE,
19   acceptedCountries: ["AUS", "NZL"],
20 };
21 
22 // Serialize your credentials, by joining them with a ":" separator symbol
23 //   customerId:customerChildId:apiKey OR customerId:apiKey
24 //   where if you don't posses a customerChildId, you should omit it and the
25 //   separator symbol ":" all together
26 const decodedCredentials = [customerId, customerChildId, apiKey]
27   .filter(Boolean)
28   .join(":");
29 
30 // Base64 encode the result string
31 const encodedCredentials = Buffer.from(decodedCredentials).toString("base64");
32 
33 // POST the endpoint "/machine-session" of the backend service provided to you by Frankie
34 // Include the encoded credentials in the "authorization" header, as follows
35 // "authorization": `machine ${encodedCreentials}`
36 // and extract the header "token" from the response
37 const frankieUrl = process.env.FRANKIE_API_URL;
38 axios
39   .post(
40     `${frankieUrl}/auth/v1/machine-session`,
41     {},
42     {
43       headers: { authorization: "machine " + encodedCredentials },
44     },
45   )
46   .then((data) => {
47     const headers = data.headers;
48     const ffToken = headers.token;
49     // render the html where you'll pass the extracted token to the Smart UI initialisation function (see "Getting Started")
50     res.render("the-web-page.ejs", {
51       title: "Frankie Financial Smart UI Demo",
52       ffToken: ffToken,
53       widgetConfiguration,
54       applicantReference,
55     });
56   });

Using applicant Reference to update an entity

When initialising the Smart UI, If an entity is found for the given applicantReference, the entity data will be retrieved and preloaded into the smart UI so that the user can continue their onboarding journey.

The snippet below demonstrates where the applicant reference goes in relation to the rest of the config. For a complete and up to date details on the configuration, please refer to the Smart UI Configuration page.

Make sure applicantReference is unique

FrankieOne requires applicantReference to be a unique value across your different applicants, otherwise the retrieve process will have inconsistent results. Applicant references with whitespace characters aren’t supported by the Smart UI and will be rejected. Please let us know if this will prevent you from integrating.