Sample apps

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.

<!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: '',
    });
  }
}

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { WindowRef } from "./WindowRef"

@NgModule({
  imports: [ BrowserModule, CommonModule ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ], // allows custom tag like <ff-onboarding-widget>
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  providers: [ WindowRef ]
})
export class AppModule {}

// provider here is required to get a reference to the browser window object
// because angular supports more platforms than just browser.
import { Injectable } from '@angular/core';

function _window() : any {
   // return the global native browser window object
   return window;
}

@Injectable()
export class WindowRef {
   get nativeWindow() : any {
      return _window();
   }
}

Vue JS Example

<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: "

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

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.

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.

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)

// 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.

🚧
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 are not supported by the Smart UI and will be rejected. Please let us know if this will prevent you from integrating.

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",
        }
      });
    }

Angular JS Example

Vue JS Example

Silent "Unknown custom element: "

React Example

React Native Example

Obtaining the token (Postman)

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

Using applicant Reference to update an entity

🚧Make sure applicantReference is unique

🚧
Make sure applicantReference is unique