Quickstart: Working Examples

To help speed your integration Below are some code snippets to get you integrating with the Smart UI.

Demo App

We have hosted a JSFiddle link for you to see implementation of the Smart UI.
Fiddle Link.

Angular JS Example

You can clone this basic Angular JS repository to get a running example of the Smart UI
Angular Repo Link

Vue JS Example

You can clone this basic Vue JS repository to get a running example of the Smart UI
Vue JS Repo Link

React Example

You can clone this basic React JS repository to get a running example of the Smart UI
React Repo Link

React Native Example

You can clone this basic React Native repository to get a running exampleo f the Smart UI
React Native Repo Link

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 = {
    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 api 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;
    // pass the extracted token to the Smart UI as an html attribute called 'ff' (see "Embedding Smart UI" below)
    res.render('the-web-page.ejs', {
      title: "Frankie Financial Smart UI Demo",
      ffToken: ffToken,

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.

For the avoidance of doubt, 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 highly recommends that the applicantReference be a unique reference otherwise the retrieve process will have an inconsistent result in fetching details to preload into the portal.

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

Did this page help you?