Vendor Customizations

Onfido

Selecting Onfido SDK Version

By default OneSDK uses Onfido v12 to ensure backward compatibility and seamless integration for existing users. This means no changes are required for customers currently using Onfido v12—your implementation will continue to work as expected.

For those who wish to take advantage of the new features and improvements in Onfido v14, switching is easy. You can configure the desired SDK version programmatically through a simple code setting. This added flexibility allows your application to adapt to evolving needs while maintaining a consistent integration experience. Refer to our documentation for details on how to enable Onfido v14 support in your project.

1
  const oneSdk = await OneSdk({
2
    // Session object containing authentication details
3
    session: sessionObjectFromBackend,
4
    // Set environment mode
5
    mode: "production",
6
    recipe: {
7
      idv: {
8
        // Configure accepted document types and countries
9
        documents: [
10
          {
11
            type: 'PASSPORT',
12
            countries: ['NZL'], // New Zealand passports only
13
          },
14
          {
15
            type: 'DRIVERS_LICENCE',
16
            countries: ['NZL'], // New Zealand driver's licenses only
17
          },
18
        ],
19
        // Specify Onfido as the IDV provider
20
        provider: {
21
          name: "onfido",
22
          sdkVersion: "14",
23
        },
24
      }
25
      ocr: {
26
        provider: {
27
          name: 'onfido',
28
          sdkVersion: '14'
29
        },
30
      },
31
      biometrics: {
32
        provider: {
33
          name: 'onfido',
34
          sdkVersion: '14'
35
        },
36
      },
37
    }
38
  });

Configuring Accepted Documents and Countries

Using Onfido, we can set document and country selection on document capture part of IDV. The customization options available all relate to the country and document type selection screen. By default, the selection screen is shown with the country selection being empty.

Depending on the customization options defined in this step, either the country or document type selection screens might not be shown:

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

1
const oneSdk = await OneSdk({
2
  // Session object containing authentication details
3
  session: sessionObjectFromBackend,
4
  // Set environment mode
5
  mode: "production",
6
  recipe: {
7
    idv: {
8
      // Configure accepted document types and countries
9
      documents: [
10
        {
11
          type: 'PASSPORT',
12
          countries: ['NZL'], // New Zealand passports only
13
        },
14
        {
15
          type: 'DRIVERS_LICENCE',
16
          countries: ['NZL'], // New Zealand driver's licenses only
17
        },
18
      ],
19
      // Specify Onfido as the IDV provider
20
      provider: {
21
        name: "onfido"
22
      }
23
    }
24
  }
25
});
26
27
// Initialize the IDV flow
28
const idv = oneSdk.flow("idv");
29
// Mount the IDV component to specified HTML element
30
idv.mount("#html-element");

1
  // Type definition for OCR configuration options
2
  type OCRRecipeOptions = {
3
    // Optional array of accepted document types and countries
4
    documents?: Array<{
5
      type: DocumentType;     // Document type enum value
6
      countries?: Array<string>; // ISO country codes
7
    }>;
8
    // Provider configuration
9
    provider: {
10
      name: 'onfido',  // Currently only supports Onfido
11
    }
12
  }
13
14
  // Supported document type options
15
  enum DocumentType = {
16
    PASSPORT = 'PASSPORT'           // Standard passports
17
    NATIONAL_HEALTH_ID = 'NATIONAL_HEALTH_ID'  // Health ID cards
18
    NATIONAL_ID = 'NATIONAL_ID'     // National ID cards
19
    DRIVERS_LICENCE = 'DRIVERS_LICENCE' // Driver's licenses
20
  }

1
      documents: [
2
        {
3
          type: 'PASSPORT',
4
          countries: ['NZL'], // New Zealand passports
5
        },
6
        {
7
          type: 'DRIVERS_LICENCE',
8
          countries: ['SGP'], // Singapore driver's licenses - this will cause fallback
9
        },
10
      ],

Style Customization

Onfido provides styling capabilities to customize the UI to be more suitable for your application. To apply custom styling, you can put the following style config to customUI in the provider object.:

1
type OnfidoCustomUIProps = {
2
  borderRadiusButton?: string;
3
  borderStyleSurfaceModal?: string;
4
  fontWeightBody?: number;
5
  fontSizeBody?: string;
6
  fontSizeSubtitle?: string;
7
  fontSizeTitle?: string;
8
  colorBackgroundSurfaceModal?: string;
9
  colorBackgroundIcon?: string;
10
  colorBorderLinkUnderline?: string;
11
  colorBackgroundLinkActive?: string;
12
  colorBackgroundLinkHover?: string;
13
  colorBackgroundDocTypeButton?: string;
14
  colorContentBody?: string;
15
  colorContentTitle?: string;
16
  colorContentSubtitle?: string;
17
  colorContentButtonPrimaryText?: string;
18
  colorBackgroundButtonPrimary?: string;
19
  colorBackgroundButtonPrimaryHover?: string;
20
  colorBackgroundButtonPrimaryActive?: string;
21
  colorContentButtonSecondaryText?: string;
22
  colorBackgroundButtonSecondary?: string;
23
  colorBackgroundButtonSecondaryHover?: string;
24
  colorBackgroundButtonSecondaryActive?: string;
25
  colorContentLinkTextHover?: string;
26
  colorBorderDocTypeButton?: string;
27
  colorBackgroundDocTypeButtonHover?: string;
28
  colorBackgroundDocTypeButtonActive?: string;
29
  colorContentDocTypeButton?: string;
30
  colorIcon?: string;
31
  colorContentInfoPill?: string;
32
  colorBackgroundInfoPill?: string;
33
  colorBackgroundSelector?: string;
34
  colorInputOutline?: string;
35
  colorContentButtonTertiaryText?: string;
36
  colorContentInput?: string;
37
  colorBackgroundInput?: string;
38
  colorBorderInput?: string;
39
}

For Onfido 14, there is a new theme options to be set in the provider object. The options are light and dark. The default value is light.

Here is an example of how to apply custom styling:

1
  const oneSdk = await OneSdk({
2
    // Session object containing authentication details
3
    session: sessionObjectFromBackend,
4
    // Set environment mode
5
    mode: "production",
6
    recipe: {
7
      idv: {
8
        // Configure accepted document types and countries
9
        documents: [
10
          {
11
            type: 'PASSPORT',
12
            countries: ['NZL'], // New Zealand passports only
13
          },
14
          {
15
            type: 'DRIVERS_LICENCE',
16
            countries: ['NZL'], // New Zealand driver's licenses only
17
          },
18
        ],
19
        // Specify Onfido as the IDV provider
20
        provider: {
21
          name: "onfido",
22
          sdkVersion: "14",
23
        }
24
      },
25
      ocr: {
26
        provider: {
27
          name: 'onfido',
28
          sdkVersion: '12',
29
          customUI: {
30
            colorBorderInput: "#FF0000", // you can use hex or rgb
31
            // any other style config here
32
          },
33
        },
34
      },
35
      biometrics: {
36
        provider: {
37
          name: 'onfido',
38
          sdkVersion: '14',
39
          theme: 'dark', // or 'light' (default is 'light')
40
          customUI: {
41
            colorBorderInput: "rgb(255, 0, 0)", // you can use hex or rgb
42
            // any other style config here
43
          },
44
        },
45
      },
46
    }
47
  });

Incode

Style Customization

OneSDK use Incode low code approach. to customize the appearance of the Incode you have to define a custom CSS and our support team can help you to apply the CSS in Incode portal.

Daon

Style Customization

To customize the appearance of the Daon, you have to contact our support team. here are customizable options that Daon provides:

Custom Colors

• General - Is the overarching theme.
• Buttons - Reflect the buttons that appear.
• Text - The text on the page.
• Input - Will affect elements such as the search boxes where an end-user can enter values.
• Country Selection - Enables users to configure the color scheme for the country selection screen.
• Document Selection - Enables users to configure the color scheme for the document selection screen.
• Document Capture - Enables users to configure the color scheme for the document capture screen.
• Face Capture - Enables users to configure the color scheme for the face capture screen.
• Header - Sets the color scheme for pager headers.
• Stepper - Sets the color scheme of the left-side list of steps that appears when completing the process via desktop.
• Progress Bar - Represents the color of the progress bar.
• Other - Sets the color of the icons that appear on the intro screen and preview borders.

Icons

• Logo - The main logo that will be displayed at the top of the app page.
• Mobile Switch Icon - The icon that will appear on the ‘Switch to your phone’ step.
• Consent Icon - The icon that will appear on the ‘Consent’ step.
• Face Capture Icon - The icon that will appear on the ‘Selfie’ step.
• Document Capture Icon - The icon that will appear on the document capture screen.
• Additional Documents Icon - The icon that will appear on the additional document capture screen.
• Custom Form Icon - The icon that will appear on the custom form screen.

Fonts

• Regular Font - The font style used for general text that is displayed to the end user.
• Medium Font - The font style used for medium font such as sub-titles.
• Bold Font - The font style used for bold font such as headings.

Media

Themes enable users to upload custom images that will appear on the various capture instructions screens. Supported file types include: .jpg, .png, .jpeg, .svg, .gif, .mp4, and .webm. All files have a maximum size of 5MB.

• Document Capture Instructions Front - Sets the image that will appear on the front document capture instructions screen.
• Document Capture Instructions Back - Sets the image that will appear on the back document capture instructions screen.
• Face Capture Instructions - Sets the image that will appear on the face capture instructions screen screen.
• Manual Capture Instructions Front - Sets the image that will appear on the front manual capture instructions screen.
• Manual Capture Instructions Back - Sets the image that will appear on the back manual capture instructions screen.
• Switch To Mobile Waiting - Configure the image that appears on the desktop application while the end-user is directed to complete the flow on mobile.
• Processing Screen Image Front - Sets the image that will appear during the front facing processing capture screen.
• Processing Screen Image Back - Sets the image that will appear during the back facing processing capture screen.