Sample apps

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

Demo App

We have hosted a JSFiddle link for you to see an 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 example of 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 = {
    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",
        }
      });
    }

Did this page help you?