Frankie Financial

The Frankie Financial Developer Hub

Welcome to the Frankie Financial developer hub. You'll find comprehensive guides and documentation to help you start working with Frankie Financial as quickly as possible, as well as support if you get stuck.

We recommend you start with our guide to the API Basics.

When you're ready, contact sales ([email protected]) and we can set you up with access to the sandbox.

API Reference    Usage Guides

Migrating v2 to v3

Smart UI v3 introduces two breaking changes in relation to v2: Scoped styles and Id Scan Validation opt in . This guide will show you how to migrate an existing project using v2 to v3.

Id Scan Validation opt in

  • This breaking change only affects users of the Smart UI with Id scan verification.

Currently in v2, if you use Onfido to verify document scans, there are three ways to configure it:

  1. you may omit the configuration idScanVerification;
  2. you may also include it with the value true;
  3. you may include it by passing an object with extra configurations. (See Smart UI Configuraton for more details)

To migrate to v3 you only need to make changes if you omit the configuration (option 1). In that case, explicitly give it the value true and everything will behave the same.

Scoped styles

  • This breaking change only affects users of the Smart UI with custom styles
  • Also note: you may have been customizing the Smart UI without even realising it. Your website's styles might have unintentionally leaked and affected the Smart UI (which this new release prevents from happening). If that happened in a way that doesn't disrupt your UI, you probably never worried about it as an issue. With this upgrade, the UI will than change to the default as we planned it. Please review the Appearence of the Smart UI after upgrading.

To prevent unexpected styles from leaking from the website to the Smart UI, custom styles are now completely encapsulated with a Shadow DOM wrapper. For that reason any custom CSS needs to be passed as a string (ES6 Template Literal) to the new configuration field injectedCss.

  • In case your styles are inserted as embedded style tags in the head of the document, which would make it difficult to pass styles as a string to the configuration, you may instead assign an id to that style tag and pass the id to another configuration field, called injectedCssTagID.
  • If even embedded styles in . The widget will understand it's a link to an external file and use its contents.

WHEN USING EMBEDDED STYLESHEETS

On v2, it's possible to style the Smart UI by using embedded styles, with a

On v3, the same setup would only affect the host website, but not the Smart UI.

To get the same behaviour as on v2, you can simply assign an ID to the style tag and pass that ID to the new configuration field injectedCssTagID. The initialiser will take care of injecting that css.

Optional: Note that to prevent that stylesheet from affecting the rest of the website, you need to constrain the style tag with media="max-width:1px"

On v2 it's possible to style the Smart UI with external stylesheets included with a tag. Styles included this way are available throughout the whole website. This behaves the same as when using embedded styles and affects both Smart UI and the host website.

On v3, the same setup would only affect the host website, but not the Smart UI.

To get the same behaviour as on v2, you can simply assign an ID to the link tag and pass that ID to the new configuration field injectedCssTagID. The initialiser will take care of injecting that css.

Optional: Note that to prevent that stylesheet from affecting the rest of the website, you need to constrain it with media="max-width:1px"

Manual CSS

Depending on your setup, the most straightforward way to migrate global styles to scoped styles might be to simply move them from the embedded style tag or external css file to the new configuration field injectedCss.
Assuming you isolated those styles from the rest of the host website by prefixing each selector with #ff-onboarding-widget, you may simply move them with no impact on the external website. Otherwise, in case styles are shared, it's recommended to use one of the options above. Note your string will need to use ES6's Template Literals (`).

Manually moving the same styles to configuration object on v3

Updated 9 days ago


Migrating v2 to v3


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.