Skip to main content
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
<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  <body>
    ...
    <script src="https://assets.frankiefinancial.io/onboarding/v4/ff-onboarding-widget.umd.min.js"></script>
  </body>
</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

import { Component, OnInit } from '@angular/core';

import { WindowRef } from "./WindowRef";

const widgetConfiguration = {
frankieBackendUrl: 'https://backend.demo.frankiefinancial.io',
documentTypes: [
'NATIONAL_HEALTH_ID',
{ type: 'PASSPORT', acceptedCountries: 'ALL' },
'DRIVERS_LICENCE',
],
idScanVerification: false,
checkProfile: 'auto',
maxAttemptCount: 5,
googleAPIKey: false,
phrases: {
document_select: {
title: 'Custom Text Here: Choose your ID',
hint_message: "Choose which ID you'd like to provide.",
},
},
requestAddress: { acceptedCountries: ['AUS', 'NZL'] },
consentText:
"I agree with the terms described in the Consent section of the Company's webpage",
};
const applicantReference = Math.floor(Math.random() \* 9999) + '-new-applicant';

@Component({
selector: 'smart-ui', // component name used in markup
template:
`     <ff-onboarding-widget />
  `
})
export class AppComponent implements OnInit {
private window;

constructor(private windRef: WindowRef) {
this.window = windRef.nativeWindow
}

ngOnInit() {
this.window.frankieFinancial.initialiseOnboardingWidget({
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
config: widgetConfiguration,
width: '500px',
height: '900px',
// The ffToken needs to be passed and can be retreived from postman/ API call, read our docs for more info
ffToken: '',
});
}
}

​
Vue JS Example

App.vue
<template>
  <div>
    <ff-onboarding-widget />
  </div>
</template>

<script>
const widgetConfiguration = {
  frankieBackendUrl: 'https://backend.demo.frankiefinancial.io',
  documentTypes: [
    'NATIONAL_HEALTH_ID',
    { type: 'PASSPORT', acceptedCountries: 'ALL' },
    'DRIVERS_LICENCE',
  ],
  idScanVerification: false,
  checkProfile: 'auto',
  maxAttemptCount: 5,
  googleAPIKey: false,
  phrases: {
    document_select: {
      title: 'Custom Text Here: Choose your ID',
      hint_message: "Choose which ID you'd like to provide.",
    },
  },
  requestAddress: { acceptedCountries: ['AUS', 'NZL'] },
  consentText:
    "I agree with the terms described in the Consent section of the Company's webpage",
};
const applicantReference = Math.floor(Math.random() * 9999) + '-new-applicant';

export default {
  mounted() {
    window.frankieFinancial.initialiseOnboardingWidget({
      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
      config: widgetConfiguration,
      width: '500px',
      height: '900px',
      // The ffToken needs to be passed and can be retreived from postman/ API call, read our docs for more info
      ffToken: '',
    });
  },
};
</script>

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

main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;
Vue.config.ignoredElements = ["ff-onboarding-widget"]; // tell Vue to ignore this tag

new Vue({
  render: (h) => h(App),
}).$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
import { useEffect } from "react";

const widgetConfiguration = {
  frankieBackendUrl: "https://backend.demo.frankiefinancial.io",
  documentTypes: [
    "NATIONAL_HEALTH_ID",
    { type: "PASSPORT", acceptedCountries: "ALL" },
    "DRIVERS_LICENCE",
  ],
  idScanVerification: false,
  checkProfile: "auto",
  maxAttemptCount: 5,
  googleAPIKey: false,
  phrases: {
    document_select: {
      title: "Custom Text Here: Choose your ID",
      hint_message: "Choose which ID you'd like to provide.",
    },
  },
  requestAddress: { acceptedCountries: ["AUS", "NZL"] },
  consentText:
    "I agree with the terms described in the Consent section of the Company's webpage",
};
const applicantReference = Math.floor(Math.random() * 9999) + "-new-applicant";

function App() {
  useEffect(() => {
    window.frankieFinancial.initialiseOnboardingWidget({
      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
      config: widgetConfiguration,
      width: "500px",
      height: "900px",
      ffToken: "",
    });
  }, []);

  return (
    <div>
      <ff-onboarding-widget />
    </div>
  );
}

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
import { View, StatusBar } from "react-native";
import { WebView } from "react-native-webview";
import source from "./smart-ui.html";

const smartUiHtml = `
<head>
    <meta charset="utf-8" />
    <script src="https://assets.frankiefinancial.io/onboarding/v4/ff-onboarding-widget.umd.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script>
        function initialiseWidget() {
            var widgetConfiguration = {
                frankieBackendUrl: "https://backend.demo.frankiefinancial.io",
                documentTypes: [
                    "NATIONAL_HEALTH_ID",
                    { type: "PASSPORT", acceptedCountries: "ALL" },
                    "DRIVERS_LICENCE"],
                idScanVerification: false,
                checkProfile: "auto",
                maxAttemptCount: 5,
                googleAPIKey: false,
                phrases: {
                    document_select: {
                        title: "Custom Text Here: Choose your ID",
                        hint_message: "Choose which ID you'd like to provide."
                    },
                },
                requestAddress: { acceptedCountries: ["AUS", "NZL"] },
                consentText:
                    "I agree with the terms described in the Consent section of the Company's webpage",
            };

            const applicantReference = Math.floor(Math.random() * 9999) + "-new-applicant";


            window.frankieFinancial.initialiseOnboardingWidget({
              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
              config: widgetConfiguration,
              width: screen.availWidth - (screen.availWidth / 20),
              height: screen.availHeight - (screen.availHeight / 5),
              ffToken: '',
            });
        };    
    </script>
</head>

<body responsive onload="initialiseWidget()">
    <ff-onboarding-widget />
</body>
`;

function App() {
  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <StatusBar />
      <WebView
        source={{ html: smartUiHtml }}
        originWhitelist={'["*"]'}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={false}
        scrollEnabled={false}
        style={{
          width: "100%",
          height: "100%",
        }}
      />
    </View>
  );
}

export default App;

​
Obtaining the token (Postman)

Postman Link

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

JavaScript
// Have your Frankie credentials in hand
const apiKey = process.env.FRANKIE_API_KEY,
  customerId = process.env.FRANKIE_CUSTOMER_ID,
  customerChildId = process.env.FRANKIE_CUSTOMER_CHILD_ID;

// Set the applicant reference to any html compatible string you can use to identify
//   this applicant, this will help us to preload applicant data and directly display the
//   applicant details review page if an applicant already exists.
// Note: the example here is just that. Use your own unique identifier.
const applicantReference = Math.floor(Math.random() * 9999) + "-new-applicant";

// Set Smart UI configurations as defined in "Configuration"
const widgetConfiguration = {
  documentTypes: ["PASSPORT", "DRIVERS_LICENCE", "NATIONAL_HEALTH_ID"],
  maxAttemptCount: 5,
  googleAPIKey: process.env.GOOGLE_API || false,
  frankieBackendUrl: process.env.FRANKIE_API_URL,
  checkProfile: process.env.CHECK_PROFILE,
  acceptedCountries: ["AUS", "NZL"],
};

// Serialize your credentials, by joining them with a ":" separator symbol
//   customerId:customerChildId:apiKey OR customerId:apiKey
//   where if you don't posses a customerChildId, you should omit it and the
//   separator symbol ":" all together
const decodedCredentials = [customerId, customerChildId, apiKey]
  .filter(Boolean)
  .join(":");

// Base64 encode the result string
const encodedCredentials = Buffer.from(decodedCredentials).toString("base64");

// POST the endpoint "/machine-session" of the backend service provided to you by Frankie
// Include the encoded credentials in the "authorization" header, as follows
// "authorization": `machine ${encodedCreentials}`
// and extract the header "token" from the response
const frankieUrl = process.env.FRANKIE_API_URL;
axios
  .post(
    `${frankieUrl}/auth/v1/machine-session`,
    {},
    {
      headers: { authorization: "machine " + encodedCredentials },
    },
  )
  .then((data) => {
    const headers = data.headers;
    const ffToken = headers.token;
    // render the html where you'll pass the extracted token to the Smart UI initialisation function (see "Getting Started")
    res.render("the-web-page.ejs", {
      title: "Frankie Financial Smart UI Demo",
      ffToken: ffToken,
      widgetConfiguration,
      applicantReference,
    });
  });

​
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.
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.
JavaScript
function onLoaded() {
  results = frankieFinancial.initialiseOnboardingWidget({
    ffToken: token_variable,
    // here
    applicantReference: "ff-test-20210712",
    // sitting outside the "config" object
    config: {
      frankieBackendUrl: "https://backend.kycaml.frankiefinancial.io",
      requestAddress: true,
      documentTypes: ["DRIVERS_LICENCE", "PASSPORT"],
      acceptedCountries: ["AUS", "NZL"],
      idScanVerification: {
        useLiveness: false,
        useMobile: true,
        welcomeScreen: {
          title: "Great Biometric check",
          content: [
            "you're one step close to finishing the application process",
          ],
          ctaText: "Start Identity Verification",
        },
      },
      ageRange: [18, 125],
      organisationName: "Bob's Burgers",
    },
  });
}