> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frankieone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vendor Customizations

> Advanced vendor-specific customization options for styling, theming, and configuration across identity verification providers

## 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:

* [IDV Module](/docs/sdk-reference/idv-module#provider-specific-options)
* [OCR Module](/docs/sdk-reference/ocr-module#provider-specific-options)
* [Biometrics Module](/docs/sdk-reference/biometrics-module#provider-specific-options)

***

## 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.

<Tabs>
  <Tab title="Onfido">
    Onfido maintains their own CSP guide. Refer to [Onfido CSP Guide](https://documentation.onfido.com/sdk/sdk-csp-guide/#content-security-policy) for the latest required domains.

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

  <Tab title="Incode">
    ```plaintext title="Additional CSP rules for Incode" theme={null}
    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:;
    ```

    <Note>
      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.
    </Note>
  </Tab>

  <Tab title="Truuth">
    ```plaintext title="Additional CSP rules for Truuth" theme={null}
    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:;
    ```

    <Note>
      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.
    </Note>
  </Tab>

  <Tab title="Sumsub">
    Refer to the [Sumsub CSP documentation](https://docs.sumsub.com/docs/csp) for the latest required domains.

    At a minimum, Sumsub typically requires:

    ```plaintext title="Additional CSP rules for Sumsub" theme={null}
    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;
    ```

    <Warning>
      Verify these domains against Sumsub's official documentation, as they may change between SDK versions.
    </Warning>
  </Tab>

  <Tab title="Daon">
    Contact the support team for Daon-specific CSP domains, as they vary depending on the Daon deployment configured for your account.
  </Tab>
</Tabs>

<Info>
  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](/docs/sdk-reference/error-scenarios#csp-content-security-policy-errors) for details.
</Info>

***

## 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).

```javascript theme={null}
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'
      }
    }
  }
});
```

<Note>
  Refer to the [Onfido SDK changelog](https://documentation.onfido.com/sdk/changelog/) for the latest available version.
</Note>

***

### 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

```typescript theme={null}
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

```javascript theme={null}
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'`.

```javascript theme={null}
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.

<Info>
  Refer to [Onfido's customUI styling documentation](https://documentation.onfido.com/sdk/web/#styling-customization) for the full list of supported styling keys and visual examples.
</Info>

***

### 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

<Tabs>
  <Tab title="Code Example">
    ```javascript theme={null}
    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');
    ```
  </Tab>

  <Tab title="Type Definition">
    ```typescript theme={null}
    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'
    }
    ```
  </Tab>
</Tabs>

<Warning>
  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.
</Warning>

***

### 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`.

```javascript theme={null}
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.

<Info>
  Refer to [Incode's theming documentation](https://developer.incode.com/docs/styling) for details on customizing the appearance.
</Info>

### SDK Version

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

```javascript theme={null}
provider: {
  name: 'incode',
  sdkVersion: '1.0.0'
}
```

<Note>
  Check with Incode or the support team for the latest available SDK version.
</Note>

***

## 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.           |

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

***

## 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](/docs/sdk-reference/idv-module#sumsub-provider), [OCR Module](/docs/sdk-reference/ocr-module#sumsub-provider), and [Biometrics Module](/docs/sdk-reference/biometrics-module#sumsub-provider) pages.

For advanced visual customization (colors, fonts, branding), refer to the [Sumsub Web SDK customization documentation](https://docs.sumsub.com/docs/web-sdk-customization).

***

## 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](https://truuth.id/docs) or contact the support team.

***

## Related

* [IDV Module](/docs/sdk-reference/idv-module)
* [OCR Module](/docs/sdk-reference/ocr-module)
* [Biometrics Module](/docs/sdk-reference/biometrics-module)
* [SDK Initialization](/docs/sdk-reference/sdk-initialization)