Migrating to OneSDK

FrankieOne's OneSDK is soon replacing Smart UI. OneSDK offers enhanced flexibility regarding IDV vendors, introduces new modular components such as OCR capabilities and advanced analytics functionalities.

If you're currently using Smart UI with your FrankieOne integration, use the following information to migrate to OneSDK.

Migration types

There are currently two main types of migration expected, based on the customer's current Smart UI implementation.

These are summarised in the following table:

SmartUI implementationMigrationMigration path
SmartUI + OnfidoMigration options

-Keep the existing flow (form fill followed by Onfido biometrics)

- Biometrics first with Onfido

- Biometrics first with Incode
The migration will involve the following:

1. Adjust backend session token generation preset param in the body of the request.

2. Frontend introduction of OneSDK in place of the Smart UI initialization. This will include moving width and height sizing outside of initialization in an adjusted HTML element for mounting OneSDK, and code changes to respond to OneSDK events instead of Smart UI events. Use a OneSDK recipe with the form and biometrics components.

3. Ensure the default profile configured in FrankieOne matches what is being passed into SmartUI configuration.

4. Mount the required OneSDK components to deliver the desired experience.
SmartUI OnlyPreferred migration:

- Keep the same with the form component

- OneSDK with OCR autofill (recommended)

- Leverage the new react based modular screens (coming soon)
The migration will involve the following:

1. Adjust backend session token generation preset param in the body of the request.

2. Frontend introduction of OneSDK form component in place of the SmartUI initialization. The existing Smart UI configuration will be adjusted and provided to the form component.

3. Adjust code to respond to OneSDK events instead of SmartUI events

4. Mount the form OneSDK component

These migration types are further discussed in the following section.

Smart UI + Onfido

If you have been using Smart UI with Onfido, there are two ways to migrate to OneSDK:

  1. Using Biometrics-first flow
  2. Using Smart UI + IDV flow

1- Biometrics-first

We recommend using Biometrics-first flow to have a faster and better onboarding experience. In OneSDK, you can switch to either Onfido Motion or Incode to run OCR and Biometrics.

Please visit OneSDK Getting Started to learn more about OneSDK and how to work with it. Once you get started, to integrate with different IDV vendors, navigate to the following pages:

To have a full E2E experience and optimise your UX, OneSDK Modular Forms will also provide out-of-the-box screens which you can embed at any point of your onboarding. Learn more about Modular Forms - Biometrics/OCR flow.

2- Smart UI + IDV

If you want to keep the Smart UI part as-is, to have a smoother transition, you can use the available OneSDK Form module: the module accepts the same configuration as before, with some minor changes.

If you've been using SmartUI previously, you can conveniently migrate to the Form module in OneSDK using your previous configuration. Learn more about OneSDK Forms and how to run Smart UI in OneSDK.

The IDV component is handled by a separate module in OneSDK, so for this part of your flow, you need to use the OneSDK IDV module using Onfido Motion or Incode. Learn more about IDV module in the following pages:

πŸ“˜

Note on Onfido

Only Onfido Motion is available in OneSDK (with a fallback to Onfido Video/Selfie). Onfido Video/Selfie Variants are not used by default anymore.

In OneSDK, we aim to offer best of breed solutions to enhance your product and prevent fraud. Onfido Motion and Incode are more robust against AI generated attacks, and also faster.

If you have been using Onfido Video/Selfie previously, we strongly recommend to switch to Onfido Motion or Incode to enhance your product.

Config changes

If you want to use Smart UI within OneSDK, please consider the following changes to the configuration parameters:

ItemNote
ffTokenYou don't need to pass ffToken anymore as Smart UI is one of the OneSDK modules. You only need to initialise OneSDK with a session token. To learn more about how to initialise OneSDK, please visit OneSDK Getting Started.
applicantReferenceWhen generating a session token to initialise OneSDK, you can still use an existing reference. Learn more about pre-filling applicant data.
frankieBackendUrlNo longer applicable
idScanVerificationThis is no longer applicable. SmartUI within OneSDK is only the manual interface. The IDV component is handled by a separate module in OneSDK as described above.
enableDeviceCharacteristicsDevice fraud detection is no longer applicable since this will be handled by a separate OneSDK component.

πŸ“˜

Note on using phone and email

If you're passing on an email in this module, please contact us before doing the migration.

To learn more about how to configure Smart UI in OneSDK, navigate to Smart UI in OneSDK and Form configuration.

SmartUI with Onfido

The same process as shown above will be used if Onfido Biometrics is configured in Smart UI (idScanVerification parameter in Smart UI configuration). Many of the parameters used in Smart UI for Onfido configuration are no longer needed.

Migration of parameters used in IDScanVerificationConfigurationObject

Parameter in IDScanVerificationConfigurationObjectOneSDK Implementation
releaseVersionNo longer applicable
welcomeScreenNo longer relevant. Instead, you can use the new welcome screen at the start of the flow, and then put a link to the welcome screen specified here.
injectedCssComing soon, and will be part of the OneSDK configuration.
.useLivenessOneSDK only has Onfido Motion, but there is a config option to fallback to video or selfie.
languageComing soon, and will be part of the OneSDK configuration.
useMobileDeviceTBA

πŸ“˜

Note on using Onfido video

Current Smart UI customers are using Onfido video, which is a separate contract. Onfido motion is more reliable, cheaper and better at preventing attacks, but will need to be added to the contract.

Example IDScanVerificationConfigurationObject used in Smart UI configuration.

{
  releaseVersion: "latest",
  welcomeScreen: {
		title: 'Verify your identity',
		content: ["We need to collect some personal information to verify your identity before we can open your account."],
		ctaText: 'Start Identity Verification',
  },
  useMobileDevice: true,
  useLiveness: boolean,
  injectedCss: string,
  language: PhrasesDictionary
}

Below is an example Smart UI code migrated to its equivalent OneSDK code. This code maintains the same flow in OneSDK by mounting the biometrics component when the form component produces results.

const idScanVerificationOptions = {
  releaseVersion: "latest",
  welcomeScreen: {
    title: "Verify your identity",
    content: ["We need to collect some personal information to verify your identity before we can open your account."],
    ctaText: "Start Identity Verification",
  },
  useMobileDevice: true,
  useLiveness: true,
}

const initializationParameters = {
  ffToken: sessionToken,
  width: '500px',
  height: '900px',
  config: {
    frankieBackendUrl: "https://backend.kycaml.uat.frankiefinancial.io",
    checkProfile: "safe_harbour_fraud",
    successScreen: {
      ctaUrl: "https://mycompany.com/onboarding-success"
    },
    failureScreen: {
      ctaUrl: "https://mycompany.com/onboarding-failed"
    },
    documentTypes: ["DRIVERS_LICENCE", "PASSPORT", 'NATIONAL_HEALTH_ID'], // doesn't like , 'EMAIL_ADDRESS', 'MSISDN']
    acceptedCountries: ["AUS", "NZL"],
    ageRange: [18, 125],
    organisationName: "My Org",
    requestAddress: true,
    injectedCssTagID: 'smart-ui-styles',
    enableDeviceCharacteristics: true,
    idScanVerification: idScanVerificationOptions,
  }
};

frankieFinancial.initialiseOnboardingWidget(initializationParameters)

window.addEventListener("FF_CHECK_RESULT", ((e) => {
 // evaluate results
  console.log(e.checkSummary);
}));
const recipe = {
  recipe: {
    form: {
      provider: {
        name: 'legacy',
        version: 'v4'
      },
    }
  },
  biometrics: {
    provider: { name: "onfido" },
  },
}

const modeConfig = {"mode":"development"}
const sessionConfig = {session:{token:sessionToken}}
oneSdkConfig =  {...sessionConfig,...modeConfig,...recipe};

const oneSdk = await OneSdk(oneSdkConfig)
    
const ff_config_object = {
  checkProfile: "safe_harbour_fraud",
  documentTypes: ["DRIVERS_LICENCE", "PASSPORT", 'NATIONAL_HEALTH_ID'],
  "acceptedCountries": ["AUS","NZL"],
  ageRange: [18, 125],
  "organisationName": "My Org",
  injectedCssTagID: 'frankieone-ui-styles',
}

const form = oneSdk.component("form", ff_config_object);
form.mount("#onboarding-container");

const biometrics = oneSdk.component('biometrics');

form.on("results", (results) => {
  // continue with biometrics
  biometrics.mount("#onboarding-container")
});

biometrics.on('error', console.error);

biometrics.on('results', (result) => {
  // evaluate results
  console.log(`biometrics result: ${result}`);
});

Smart UI Only

If you have been using Smart UI only, without IDV, there are two ways to migrate to OneSDK:

  1. Smart UI in OneSDK
  2. New Manual Forms in OneSDK (coming soon)

Smart UI in OneSDK

Smart UI is already available in OneSDK Form module and it accepts the same configuration as before, with some minor changes. Learn more about OneSDK Forms and How to run Smart UI in OneSDK.

In client side code perform the following:

  1. Remove the Smart UI library import and initialization, replacing with OneSDK import and initialization
    1. Initialize OneSDK adding in mode to declare the environment and recipe with form declared as the legacy provider (this is the SmartUI brought into OneSDK).
    2. Move the width and height SmartUI initialization parameters to the HTML element you will mount OneSDK to, replacing the existing ff-onboarding-widget html element.
  2. Take the config in initialization passed to frankieFinancial.initialiseOnboardingWidget() and use it in OneSDK form component.
    1. Remove the frankieBackendUrl parameter.
    2. Use the configuration in the OneSDK form component and mount the component to a UI element to render the form.
  3. Setup event listeners to process form results and listen to other events to match your Smart UI implementation.
const initializationParameters = {
  ffToken: sessionToken,
  width: '500px',
  height: '900px',
  config: {
    frankieBackendUrl: "https://backend.kycaml.uat.frankiefinancial.io",
    checkProfile: "safe_harbour_fraud",
    documentTypes: ["DRIVERS_LICENCE", "PASSPORT", 'NATIONAL_HEALTH_ID'],
    acceptedCountries: ["AUS", "NZL"],
    ageRange: [18, 125],
    organisationName: "My Org",
    injectedCssTagID: 'frankieone-ui-styles',
  }
};
  
frankieFinancial.initialiseOnboardingWidget(initializationParameters)

window.addEventListener("FF_CHECK_RESULT", ((e) => {
    console.log(e.checkSummary);
}));
const recipe = {recipe: {
    form: {
        provider: {
            name: 'legacy',
            version: 'v4'
        },
    }
    },
}

const modeConfig = {"mode":"development"}
const sessionConfig = {session:{token:sessionToken}}
oneSdkConfig =  {...sessionConfig,...modeConfig,...recipe};

const oneSdk = await OneSdk(oneSdkConfig)
    
const ff_config_object = {
  checkProfile: "safe_harbour_fraud",
  documentTypes: ["DRIVERS_LICENCE", "PASSPORT", 'NATIONAL_HEALTH_ID'],
  "acceptedCountries": ["AUS","NZL"],
  ageRange: [18, 125],
  "organisationName": "My Org",
  injectedCssTagID: 'frankieone-ui-styles',
}

const form = oneSdk.component("form", ff_config_object);
// new htmle element added to replace ff-onboarding-widget
form.mount("#form-container");

form.on("results", (results) => {
  console.log(results.checkSummary);
});