Vendor Customizations

Overview

This page covers advanced vendor-specific customization options for styling, theming, and configuration that go beyond the basic provider options documented on each module’s page. For basic provider options such as sdkVersion, showExitButton, crossDevicePolicy, fallback, and biometricsVariant, refer to the individual module pages:

Content Security Policy (CSP) Settings

If your application enforces a Content Security Policy, you will need to allowlist domains for both OneSDK itself and the third-party vendor SDK it loads at runtime. Without the correct CSP rules, the browser will block scripts, API calls, or media resources and the verification flow will fail silently or show errors.

OneSDK Base Domains

All integrations require these FrankieOne domains regardless of which vendor you use:

script-src  https://assets.frankiefinancial.io;
style-src   https://*.frankiefinancial.io;
connect-src https://*.frankiefinancial.io https://*.frankieone.com;
img-src     https://*.frankiefinancial.io data:;
font-src    https://*.frankiefinancial.io data:;
frame-src   https://*.frankiefinancial.io https://*.frankie.one;

Vendor-Specific Domains

Add the rules below for the vendor(s) you are integrating with. These are in addition to the base domains above and your existing 'self' policy.

Onfido
Incode
Truuth
Sumsub
Daon

Onfido maintains their own CSP guide. Refer to Onfido CSP Guide for the latest required domains.

CSP requirements change between Onfido SDK versions. If you set a specific sdkVersion in your recipe, check the Onfido CSP guide for that version.

Additional CSP rules for Incode

script-src  'unsafe-inline' 'unsafe-eval'
            https://d3vv997wtl2myz.cloudfront.net
            https://*.incodesmile.com
            https://*.incode.com
            https://*.opentok.com;
style-src   'unsafe-inline' https://fonts.googleapis.com;
connect-src https://*.incodesmile.com
            https://*.i18nexus.com
            https://d3vv997wtl2myz.cloudfront.net
            https://featureassets.org
            https://prodregistryv2.org
            https://*.opentok.com
            https://*.ipify.org;
font-src    https://fonts.gstatic.com;
frame-src   https://incode.com
            https://*.incode.com
            https://*.incodesmile.com;
img-src     blob:;
worker-src  blob:;

Incode requires 'unsafe-inline' and 'unsafe-eval' in script-src. These are necessary for the Incode SDK to function but relax the default script execution policy. Ensure you understand the security implications for your application.

Additional CSP rules for Truuth

script-src  'unsafe-inline' 'unsafe-eval'
            https://cdn.truuth.id;
connect-src https://static.au.truuth.id
            https://portal.api.au.truuth.id;
img-src     https://static.au.truuth.id blob:;

The domains above use Truuth’s Australian region (au). If you are using a different Truuth region, replace au with your region identifier, or contact the support team for the correct domains.

Refer to the Sumsub CSP documentation for the latest required domains.At a minimum, Sumsub typically requires:

Additional CSP rules for Sumsub

script-src  https://static.sumsub.com;
connect-src https://*.sumsub.com;
frame-src   https://*.sumsub.com;
img-src     https://*.sumsub.com blob:;
style-src   https://static.sumsub.com;

Verify these domains against Sumsub’s official documentation, as they may change between SDK versions.

If you encounter CSP errors at runtime, check the browser console for the blocked URL and directive. Add the domain to the appropriate directive. See CSP Error Troubleshooting for details.

Onfido

SDK Version Selection

The sdkVersion property on the Onfido provider object controls which Onfido SDK version is loaded at runtime. By default, OneSdk uses Onfido v12 for backward compatibility. You can switch to a newer version by setting sdkVersion in the provider configuration for any module that uses Onfido (IDV, OCR, or Biometrics).

const sdk = await OneSdk({
  session: sessionObjectFromBackend,
  mode: 'production',
  recipe: {
    idv: {
      provider: {
        name: 'onfido',
        sdkVersion: '14'
      }
    },
    ocr: {
      provider: {
        name: 'onfido',
        sdkVersion: '14'
      }
    },
    biometrics: {
      provider: {
        name: 'onfido',
        sdkVersion: '14'
      }
    }
  }
});

Refer to the Onfido SDK changelog for the latest available version.

Custom UI Styling (`customUI`)

Onfido provides extensive styling capabilities to customize the verification UI to match your application’s design. Apply custom styling by setting the customUI property on the Onfido provider object for any module (IDV, OCR, or Biometrics).

All Available Properties

type OnfidoCustomUIProps = {
  // Borders & Shapes
  borderRadiusButton?: string;
  borderStyleSurfaceModal?: string;

  // Typography
  fontWeightBody?: number;
  fontSizeBody?: string;
  fontSizeSubtitle?: string;
  fontSizeTitle?: string;

  // Background Colors
  colorBackgroundSurfaceModal?: string;
  colorBackgroundIcon?: string;
  colorBackgroundDocTypeButton?: string;
  colorBackgroundDocTypeButtonHover?: string;
  colorBackgroundDocTypeButtonActive?: string;
  colorBackgroundSelector?: string;
  colorBackgroundInfoPill?: string;
  colorBackgroundInput?: string;

  // Button Colors - Primary
  colorBackgroundButtonPrimary?: string;
  colorBackgroundButtonPrimaryHover?: string;
  colorBackgroundButtonPrimaryActive?: string;
  colorContentButtonPrimaryText?: string;

  // Button Colors - Secondary
  colorBackgroundButtonSecondary?: string;
  colorBackgroundButtonSecondaryHover?: string;
  colorBackgroundButtonSecondaryActive?: string;
  colorContentButtonSecondaryText?: string;

  // Button Colors - Tertiary
  colorContentButtonTertiaryText?: string;

  // Content / Text Colors
  colorContentBody?: string;
  colorContentTitle?: string;
  colorContentSubtitle?: string;
  colorContentDocTypeButton?: string;
  colorContentInfoPill?: string;
  colorContentInput?: string;

  // Link Colors
  colorBorderLinkUnderline?: string;
  colorBackgroundLinkActive?: string;
  colorBackgroundLinkHover?: string;
  colorContentLinkTextHover?: string;

  // Border Colors
  colorBorderDocTypeButton?: string;
  colorBorderInput?: string;
  colorInputOutline?: string;

  // Icons
  colorIcon?: string;
}

Full Property Reference

Property	Type	Category	Description
`borderRadiusButton`	`string`	Borders	Border radius for buttons (e.g., `'8px'`)
`borderStyleSurfaceModal`	`string`	Borders	Border style for the modal surface (e.g., `'1px solid #E4E7EC'`)
`fontWeightBody`	`number`	Typography	Font weight for body text (e.g., `400`)
`fontSizeBody`	`string`	Typography	Font size for body text (e.g., `'16px'`)
`fontSizeSubtitle`	`string`	Typography	Font size for subtitles (e.g., `'18px'`)
`fontSizeTitle`	`string`	Typography	Font size for titles (e.g., `'24px'`)
`colorBackgroundSurfaceModal`	`string`	Background	Background color of the modal surface
`colorBackgroundIcon`	`string`	Background	Background color of icons
`colorBackgroundDocTypeButton`	`string`	Background	Background color of document type buttons
`colorBackgroundDocTypeButtonHover`	`string`	Background	Background color of document type buttons on hover
`colorBackgroundDocTypeButtonActive`	`string`	Background	Background color of document type buttons when active
`colorBackgroundSelector`	`string`	Background	Background color of selector elements
`colorBackgroundInfoPill`	`string`	Background	Background color of info pill elements
`colorBackgroundInput`	`string`	Background	Background color of input fields
`colorBackgroundButtonPrimary`	`string`	Buttons (Primary)	Background color of primary buttons
`colorBackgroundButtonPrimaryHover`	`string`	Buttons (Primary)	Background color of primary buttons on hover
`colorBackgroundButtonPrimaryActive`	`string`	Buttons (Primary)	Background color of primary buttons when active
`colorContentButtonPrimaryText`	`string`	Buttons (Primary)	Text color of primary buttons
`colorBackgroundButtonSecondary`	`string`	Buttons (Secondary)	Background color of secondary buttons
`colorBackgroundButtonSecondaryHover`	`string`	Buttons (Secondary)	Background color of secondary buttons on hover
`colorBackgroundButtonSecondaryActive`	`string`	Buttons (Secondary)	Background color of secondary buttons when active
`colorContentButtonSecondaryText`	`string`	Buttons (Secondary)	Text color of secondary buttons
`colorContentButtonTertiaryText`	`string`	Buttons (Tertiary)	Text color of tertiary buttons
`colorContentBody`	`string`	Content	Text color for body content
`colorContentTitle`	`string`	Content	Text color for titles
`colorContentSubtitle`	`string`	Content	Text color for subtitles
`colorContentDocTypeButton`	`string`	Content	Text color for document type buttons
`colorContentInfoPill`	`string`	Content	Text color for info pill elements
`colorContentInput`	`string`	Content	Text color for input fields
`colorBorderLinkUnderline`	`string`	Links	Border color for link underlines
`colorBackgroundLinkActive`	`string`	Links	Background color of active links
`colorBackgroundLinkHover`	`string`	Links	Background color of hovered links
`colorContentLinkTextHover`	`string`	Links	Text color of hovered links
`colorBorderDocTypeButton`	`string`	Borders	Border color of document type buttons
`colorBorderInput`	`string`	Borders	Border color of input fields
`colorInputOutline`	`string`	Borders	Outline color of focused input fields
`colorIcon`	`string`	Icons	Color of icons

Code Example

const sdk = await OneSdk({
  session: sessionObjectFromBackend,
  mode: 'production',
  recipe: {
    ocr: {
      provider: {
        name: 'onfido',
        sdkVersion: '14',
        theme: 'dark',
        customUI: {
          // Typography
          fontWeightBody: 400,
          fontSizeBody: '16px',
          fontSizeSubtitle: '18px',
          fontSizeTitle: '24px',

          // Background
          colorBackgroundSurfaceModal: '#1A1A2E',
          colorBackgroundButtonPrimary: '#E94560',
          colorBackgroundButtonPrimaryHover: '#D63B56',
          colorBackgroundButtonPrimaryActive: '#C3314C',

          // Text
          colorContentBody: '#EAEAEA',
          colorContentTitle: '#FFFFFF',
          colorContentSubtitle: '#CCCCCC',
          colorContentButtonPrimaryText: '#FFFFFF',

          // Borders
          borderRadiusButton: '8px',
          colorBorderInput: '#333366',
          colorInputOutline: '#E94560',
        }
      }
    },
    biometrics: {
      provider: {
        name: 'onfido',
        sdkVersion: '14',
        theme: 'dark',
        customUI: {
          colorBackgroundButtonPrimary: '#E94560',
          colorContentButtonPrimaryText: '#FFFFFF',
          borderRadiusButton: '8px',
        }
      }
    }
  }
});

Theme Option

Onfido v14 introduces a theme option that can be set on the provider object. The available values are 'light' (default) and 'dark'.

provider: {
  name: 'onfido',
  sdkVersion: '14',
  theme: 'dark'
}

The theme option provides a base light or dark appearance. You can further customize individual elements using customUI properties on top of the chosen theme.

Refer to Onfido’s customUI styling documentation for the full list of supported styling keys and visual examples.

Document and Country Configuration

You can configure which document types and countries are accepted during document capture by providing a documents array in the recipe configuration. This applies to both the IDV and OCR modules when using Onfido. By default, if no documents configuration is provided, the Onfido selection screen is shown with all supported document types and an empty country selection. Depending on the configuration:

The country selection screen will not be shown if only one country is specified or if only passports are allowed
The document selection screen will not be shown if only one document type is specified

Code Example
Type Definition

const sdk = await OneSdk({
  session: sessionObjectFromBackend,
  mode: 'production',
  recipe: {
    idv: {
      documents: [
        {
          type: 'PASSPORT',
          countries: ['NZL'],
        },
        {
          type: 'DRIVERS_LICENCE',
          countries: ['NZL'],
        },
      ],
      provider: {
        name: 'onfido'
      }
    }
  }
});

const idv = sdk.flow('idv');
idv.mount('#idv-container');

type DocumentConfig = {
  documents?: Array<{
    type: DocumentType;
    countries?: Array<string>;  // ISO 3166-1 alpha-3 country codes
  }>;
  provider: {
    name: 'onfido';
  }
}

enum DocumentType {
  PASSPORT = 'PASSPORT',
  NATIONAL_HEALTH_ID = 'NATIONAL_HEALTH_ID',
  NATIONAL_ID = 'NATIONAL_ID',
  DRIVERS_LICENCE = 'DRIVERS_LICENCE'
}

If you specify different countries for different document types (for example, 'NZL' for passports and 'SGP' for driver’s licences), Onfido will fall back to displaying the full selection screen with all supported documents. Ensure all document types share the same country list to control the selection screens as expected.

Exit Button and User Exit Handling

The showExitButton property (defaults to false) displays an exit button in the Onfido verification UI. When the user clicks the exit button, a vendor_event event is emitted with the event name OCR:ONFIDO:ON_USER_EXIT.

const idv = sdk.flow('idv', {
  provider: {
    name: 'onfido',
    showExitButton: true
  }
});

// Listen for exit events
idv.on('vendor_event', (obj) => {
  if (obj.eventName === 'OCR:ONFIDO:ON_USER_EXIT') {
    console.log('User clicked exit button');
    // Handle exit (e.g., save progress, show confirmation)
  }
});

idv.mount('#idv-container');

Error Codes

OneSdk surfaces Onfido-specific errors through the onError callback. The following table lists Onfido error codes, their meaning, and recommended recovery actions.

Error Code	Description	Recommended Recovery
`invalid_token`	The Onfido IDV token is invalid.	Re-generate the IDV token by remounting the component.
`expired_token`	The Onfido IDV token has expired.	Re-generate the IDV token by remounting the component.
`expired_trial`	The Onfido trial period has expired.	This is an unexpected error. Contact support if you encounter this.
`geoblocked_request`	The request is not allowed from this geographic location.	The end user may be in a restricted region. Disable any active VPN and retry, or contact support for details.
`permissions_unavailable`	Unable to retrieve or access required user permissions.	This may occur when the SDK is loaded in a WebView or custom browser. Try using a standard browser.
`unsupported`	A module is not supported in the current environment.	Check the documentation for supported environments and features, or contact support.
`unsupported_feature`	The requested feature is no longer supported.	Check the documentation for current supported features, or contact support.
`invalid_sdk_parameter`	The SDK was initialized with invalid parameters.	Review the initialization parameters for correctness.
`unsupported_sdk_version`	The workflow is not supported by the current SDK version.	Update the `sdkVersion` parameter to a supported version.
`no_camera`	No camera is available and no other capture method is available.	The user has not granted camera access or their device does not have a camera. Prompt the user to grant camera permissions.
`user_consent_denied`	The user declined consent.	The user must provide consent to proceed. Display a message explaining why consent is required and allow them to retry.

Incode

Style Customization

OneSdk uses Incode’s low-code approach for rendering the verification UI. To customize the appearance of the Incode integration, define custom CSS and work with the support team to apply it through the Incode portal.

Refer to Incode’s theming documentation for details on customizing the appearance.

SDK Version

The Incode SDK version can be set via the sdkVersion property on the provider object.

provider: {
  name: 'incode',
  sdkVersion: '1.0.0'
}

Check with Incode or the support team for the latest available SDK version.

Daon

Daon provides extensive visual customization options that are configured through the support team. Below are the customizable areas available.

Custom Colors

Area	Description
General	Overarching theme colors that set the primary look and feel.
Buttons	Colors for all button elements in the verification flow.
Text	Colors for all text displayed on the pages.
Input	Colors for interactive input elements such as search boxes.
Country Selection	Color scheme for the country selection screen.
Document Selection	Color scheme for the document selection screen.
Document Capture	Color scheme for the document capture screen.
Face Capture	Color scheme for the face capture screen.
Header	Color scheme for page headers.
Stepper	Color scheme for the left-side step list displayed on desktop.
Progress Bar	Color of the progress bar.
Other	Color of icons on the intro screen and preview borders.

Icons

Icon	Description
Logo	The main logo displayed at the top of the app page.
Mobile Switch Icon	The icon shown on the “Switch to your phone” step.
Consent Icon	The icon shown on the “Consent” step.
Face Capture Icon	The icon shown on the “Selfie” step.
Document Capture Icon	The icon shown on the document capture screen.
Additional Documents Icon	The icon shown on the additional document capture screen.
Custom Form Icon	The icon shown on the custom form screen.

Fonts

Font Style	Description
Regular Font	Used for general body text displayed to the end user.
Medium Font	Used for medium-weight text such as sub-titles.
Bold Font	Used for bold text such as headings.

Media

Daon themes support uploading custom images for capture instruction and processing screens. Supported file types: .jpg, .png, .jpeg, .svg, .gif, .mp4, .webm. Maximum file size is 5MB per asset.

Media Asset	Description
Document Capture Instructions Front	Image shown on the front document capture instructions screen.
Document Capture Instructions Back	Image shown on the back document capture instructions screen.
Face Capture Instructions	Image shown on the face capture instructions screen.
Manual Capture Instructions Front	Image shown on the front manual capture instructions screen.
Manual Capture Instructions Back	Image shown on the back manual capture instructions screen.
Switch To Mobile Waiting	Image shown on the desktop while the user completes the flow on mobile.
Processing Screen Image Front	Image shown during the front-facing processing capture screen.
Processing Screen Image Back	Image shown during the back-facing processing capture screen.

To apply Daon visual customizations, contact the support team with your desired assets, colors, fonts, and icons.

Sumsub

Sumsub provides customization options through its SDK configuration, including theme selection ('light' or 'dark'), language settings, and iframe behavior options. These basic options are documented on the IDV Module, OCR Module, and Biometrics Module pages. For advanced visual customization (colors, fonts, branding), refer to the Sumsub Web SDK customization documentation.

Truuth

Truuth provides customization options through its provider configuration. For details on available customization options such as theming and branding, refer to the Truuth documentation or contact the support team.

​Overview

​Content Security Policy (CSP) Settings

​OneSDK Base Domains

​Vendor-Specific Domains

​Onfido

​SDK Version Selection

​Custom UI Styling (customUI)

​All Available Properties

​Full Property Reference

​Code Example

​Theme Option

​Document and Country Configuration

​Exit Button and User Exit Handling

​Error Codes

​Incode

​Style Customization

​SDK Version

​Daon

​Custom Colors

​Icons

​Fonts

​Media

​Sumsub

​Truuth

​Related

Overview

Content Security Policy (CSP) Settings

OneSDK Base Domains

Vendor-Specific Domains

Onfido

SDK Version Selection

Custom UI Styling (`customUI`)

All Available Properties

Full Property Reference

Code Example

Theme Option

Document and Country Configuration

Exit Button and User Exit Handling

Error Codes

Incode

Style Customization

SDK Version

Daon

Custom Colors

Icons

Fonts

Media

Sumsub

Truuth

Related