---
updatedAt: 2026-03-13T10:53:07.000Z
agentTools:
  projectIndex: https://docs.developer.rabobank.com/identity-risk/llms.txt
---

# Mobile SDK Customizations

## Setup

This page sets out how to customize your App Drop-in UI  to match the look and feel of your brand by creating an `OrcaFlavor` object:

* Specify the colors
* Set the fonts
* Localize the text
* Style the layout

The following is a complete example for Android and iOS:

```kotlin Android
import com.fourthline.networking.NetworkEnvironment.Sandbox
import com.fourthline.orca.core.flavor.OrcaFlavor
import com.fourthline.orca.core.flavor.OrcaFonts
import com.fourthline.orca.Orca
import com.fourthline.orca.workflow.WorkflowConfig
import com.fourthline.orca.workflow.WorkflowCustomizationConfig
import com.fourthline.orca.workflow.workflow
import java.io.File

// Generated by POST https://{{baseUrl}}/v1/workflows/{{workflowId}}/validationcode
val validationCode: String

// Choose `Mock` to test locally or `Sandbox`/`Production` for networking
val config = WorkflowConfig(networkEnvironment = Sandbox)

val customFlavor = OrcaFlavor(
    fonts = OrcaFonts(
        screenHeader = OrcaFonts.Font.FromFontRes(fontRes = R.font.roboto_medium, size = 20),
        primaryButton = OrcaFonts.Font.FromFile(file = File("..."), size = 18)
    )
)

val customizationConfig = WorkflowCustomizationConfig(flavor = customFlavor)

Orca.workflow(context, validationCode)
    .configure(config)
    .customize(customizationConfig)
    .present { result -> }
```

```swift iOS
import FourthlineSDK
import UIKit

override func viewDidLoad() {
    super.viewDidLoad()

    var flavor = OrcaFlavor()

    var palette = OrcaPalette()
    palette.primary = UIColor(red: 82.0/255.0, green: 30.0/255.0, blue: 135.0/255.0, alpha: 1)

    var colors = OrcaColors(colorPalette: palette)
    colors.hint.backgroundColor = UIColor(red: 221.0/255.0, green: 210.0/255.0, blue: 232.0/255.0, alpha: 0.5)
    colors.box.borderColor = .gray
    colors.screen.tableCells.cellStyle2.iconColor = UIColor(red: 221.0/255.0, green: 210.0/255.0, blue: 3.0/255.0, alpha: 1)
    flavor.colors = colors

    let customization = WorkflowCustomizationConfig(flavor: flavor)
    let configuration = WorkflowConfig(networkEnvironment: .mock)

    // Generated by POST https://{{baseUrl}}/v1/workflows/{{workflowId}}/validationcode
    let validationCode = "xxxxxxxx"

    Orca.workflow(validationCode: validationCode)
        .configure(with: configuration)
        .customize(with: customization)
        .present { [weak self] result in
            switch result {
            case let .failure(error): self?.handleError(error)
            case .success: break
            }
        }
}
```

## Colors

Set the colors in the UI:

<Image align="center" caption="Colors" src="https://files.readme.io/ff72fcb-Custom_6.gif" />

You can define colors as follows:

| Property          | Description                                                                                                                                                                                                                                                                                                                                                                        |
| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Color palette** |                                                                                                                                                                                                                                                                                                                                                                                    |
| `primary`         | The color for illustrations and elements that require focus, e.g. buttons and inputs. <br />This is the main color used in the app for e.g. animations, icons, primary button background, secondary button text, second option text primary button, scanner progress, table selectors, scanner checks, links. <br />Light mode default: # 0091FF <br />Dark mode default: # 7FB3FC |
| `accent`          | The color for UI elements that offer clients a choice. <br />Light & dark mode default: # 00E062                                                                                                                                                                                                                                                                                   |
| `dark`            | The very dark color palette, mainly used for the default heading color. <br />Light mode default: # 333333 <br />Dark mode default: # FFFFFF                                                                                                                                                                                                                                       |
| `darkLight`       | The mid-dark color palette, mainly used for the default text color. <br />Light mode default: # 585858 <br />Dark mode default: # C3CDD8                                                                                                                                                                                                                                           |
| `darkLighter`     | The lightest-dark color palette, mainly used for the default alternative and less emphasis text color. <br />Light mode default: # 878787 <br />Dark mode default: # 3D5671                                                                                                                                                                                                        |
| `darkSoft`        | The soft dark color palette. <br />Light mode default: # D6D6D6 <br />Dark mode default: # 263444                                                                                                                                                                                                                                                                                  |
| `light`           | The light color palette, mainly used for the default `backgroundColor`. <br />Light mode default: # FFFFFF <br />Dark mode default: # 172637                                                                                                                                                                                                                                       |
| `gray`            | The grey color palette. <br />Light mode default: # B3B3B3 <br />Dark mode default: # 607B93                                                                                                                                                                                                                                                                                       |

| Property          | Description                                                                                    |
| :---------------- | :--------------------------------------------------------------------------------------------- |
| **OrcaScreen**    |                                                                                                |
| `backgroundColor` | The default `backgroundColor` for the drop-in screen. <br />Light & dark mode default: `light` |
| `headerColor`     | The color for the screen header. <br />Light & dark mode default: `dark`                       |
| `titleColor`      | The color for the screen title. <br />Light & dark mode default: `dark`                        |
| `messageColor`    | The color for the screen message. <br />Light & dark mode default: `darkLight`                 |
| `dividerColor`    | The color for the dividers. <br />Light & dark mode default: `darkLight`                       |
| `tableCells`      | The color inside table cells.<br />See **OrcaCell 1 & 2**.                                     |

| Property          | Description                                                                                                  |
| :---------------- | :----------------------------------------------------------------------------------------------------------- |
| **OrcaCell 1**    |                                                                                                              |
| `cellStyle1`      | The cell style for the document type screen document option.                                                 |
| `backgroundColor` | The color for the background of cells. <br />Light mode default: white <br />Dark mode default: # 263444     |
| `textColor`       | The color for text in cells. <br />Light mode default: # 333333 <br />Dark mode default: white               |
| `iconColor`       | The color for icons in cells. <br />Light & dark mode default: `primary`                                     |
| `borderColor`     | The color for the borders of cells. <br />Light & dark mode default: clear                                   |
| `dividerColor`    | The color for dividers between cells. <br />Light & dark mode default: clear                                 |
| **OrcaCell 2**    |                                                                                                              |
| `cellStyle2`      | The cell style for the documents to sign on the **Document approval** screen.                                |
| `backgroundColor` | The color for the background of cells. <br />Light mode default: white <br />Dark mode default: # 263444     |
| `textColor`       | The color for the text in cells. <br />Light & dark mode default: `primary`                                  |
| `iconColor`       | The color for the icon of cells. <br />Light & dark mode default: `primary`                                  |
| `borderColor`     | The color for the borders of cells. <br />Light mode default: black 10% <br />Dark mode default: white 10%   |
| `dividerColor`    | The color for dividers between cells. <br />Light mode default: black 10% <br />Dark mode default: white 30% |

| Property                                   | Description                                                                                                                                                                             |
| :----------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Buttons**                                |                                                                                                                                                                                         |
| `primary.`<br />`textColor`                | The primary button text color. <br />Light & dark mode default: `light`                                                                                                                 |
| `primary.`<br />`backgroundColor`          | The primary button background color. <br />Light & dark mode default: `primary`                                                                                                         |
| `primary.`<br />`borderColor`              | The primary button border color. <br />Light & dark mode default: black 10%                                                                                                             |
| `secondary.`<br />`textColor`              | The secondary button text color. <br />Light & dark mode default: `primary`                                                                                                             |
| `secondary.`<br />`backgroundColor`        | The secondary button background color. <br />Light & dark mode default: `backgroundColor`                                                                                               |
| `secondary.`<br />`borderColor`            | The secondary button border color. <br />Light & dark mode default: black 10%                                                                                                           |
| `backButtonColor`                          | The **Back** button text color. <br />Light & dark mode default: `primary`                                                                                                              |
| `scannerPrimary.`<br />`textColor`         | The primary scanner button text color. <br />Light & dark mode default: `light`                                                                                                         |
| `scannerPrimary.`<br />`backgroundColor`   | The primary scanner button background color. <br />Light & dark mode default: `primary`                                                                                                 |
| `scannerPrimary.`<br />`borderColor`       | The primary scanner button border color. <br />Light & dark mode default: black 10%                                                                                                     |
| `scannerSecondary.`<br />`textColor`       | The secondary scanner button text color used in the **Scanner confirmation** screen for the **No** button. <br />Light mode default: `primary` <br />Dark mode default: white           |
| `scannerSecondary.`<br />`backgroundColor` | The secondary scanner button background color used in the **Scanner confirmation** screen for the **No** button. <br />Light mode default: white <br />Dark mode default: `darkLighter` |
| `scannerSecondary.`<br />`borderColor`     | The secondary scanner button border color. <br />Light & dark mode default: black 10%                                                                                                   |
| `linkButtonColor`                          | The color for links. <br />Light & dark mode default: `primary`                                                                                                                         |
| `checkbox`                                 | The color for checkboxes.<br />See **OrcaCheckbox**.                                                                                                                                    |

| Property                  | Description                                                                                                                    |
| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------- |
| **OrcaInputField**        |                                                                                                                                |
| `textColor`               | The color for input field text. <br />Light & dark mode default: `dark`                                                        |
| `disabledTextColor`       | The color for input field text in disabled state. <br />Light mode default: black 20% <br />Dark mode default: white 20%       |
| `placeholderColor`        | The color for input field placeholders. <br />Light & dark mode default: `dark` 60%                                            |
| `titleColor`              | The color for input field titles at the top and next to the field border. <br />Light & dark mode default: `darkLight`         |
| `statusColor`             | The color for hint messages below input fields. <br />Light & dark mode default: `darkLighter`                                 |
| `errorColor`              | The color for error messages below input fields. <br />Light & dark mode default: `danger`                                     |
| `backgroundColor`         | The background color for input fields. <br />Light & dark mode default: `backgroundColor`                                      |
| `disabledBackgroundColor` | The background color for input fields in disabled state. <br />Light mode default: dark 10% <br />Dark mode default: white 40% |
| `borderColor`             | The unfocused border color for input fields. <br />Light mode default: `gray` <br />Dark mode default: `darkLighter`           |
| `disabledBorderColor`     | The color for input field borders in disabled state. <br />Light mode default: # B3B3B3 <br />Dark mode default: `darkLighter` |

| Property                    | Description                                                                                                                     |
| :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------ |
| **OrcaScanner**             |                                                                                                                                 |
| `confirmation`              | The colors for elements on the **Scanner confirmation** screen.<br />See **OrcaScannerConfirmation**.                           |
| `spinnerColor`              | The color for loading animations in selfie and liveness scanner screens. <br />Light & dark mode default: `primary`             |
| `progressColor`             | The color for progress indicators in the document scanner screen. <br />Light & dark mode default: `primary`                    |
| **OrcaScannerConfirmation** |                                                                                                                                 |
| `textColor`                 | The color for scanner confirmation text. <br />Light & dark mode default: white                                                 |
| `backgroundColor`           | The background color for **Scanner confirmation** screens. <br />Light mode default: # 333333 <br />Dark mode default: # 172230 |
| `bulletList`                | The color for bullet lists. <br />Light & dark mode default: `primary`                                                          |

| Property          | Description                                                                                                             |
| :---------------- | :---------------------------------------------------------------------------------------------------------------------- |
| **OrcaBox**       |                                                                                                                         |
| `backgroundColor` | The default background color for boxes. <br />Light mode default: # F7F7F7 <br />Dark mode default: # 121C28            |
| `borderColor`     | The border color for boxes. <br />Light mode default: black 10% <br />Dark mode default: white 10%                      |
| `titleColor`      | The title color for boxes. <br />Light & dark mode default: `darkLight`                                                 |
| **OrcaCheckbox**  |                                                                                                                         |
| `tintColor`       | The primary checkbox color. <br />Light & dark mode default: `primary`                                                  |
| `iconColor`       | The color for the checkmark icon. <br />Light & dark mode default: `light`                                              |
| **OrcaGraphic**   |                                                                                                                         |
| `backgroundColor` | The background color for introduction animations. <br />Light mode default: # F3F3F3 <br />Dark mode default: white 10% |
| `primaryColor`    | The color for animations in introduction screens. <br />Light & dark mode default: `primary`                            |
| **OrcaHint**      |                                                                                                                         |
| `textColor`       | The color for hint text. <br />Light & dark mode default: `dark`                                                        |
| `backgroundColor` | The color for hint backgrounds. <br />Light mode default: # F3F9FF <br />Dark mode default: # 3E586F                    |
| `borderColor`     | The color for hint component borders. <br />Light & dark mode default: black 10%                                        |
| **OrcaPopup**     |                                                                                                                         |
| `backgroundColor` | The background color for popups. <br />Light & dark mode default: `backgroundColor`                                     |
| `titleColor`      | The title color for popups. <br />Light & dark mode default: `dark`                                                     |
| `messageColor`    | The color for messages in popups. <br />Light & dark mode default: `darkLight`                                          |

***

### Android & iOS examples

Example code:

```javascript Android
import com.fourthline.orca.core.flavor.OrcaColors
import com.fourthline.orca.core.flavor.OrcaColors.OrcaColor
import com.fourthline.orca.core.flavor.OrcaFlavor

val customFlavor = OrcaFlavor(
    colorsDark = OrcaColors.defaultDarkColors().apply {
      buttons.primary.backgroundColor = OrcaColor.FromRes(R.color.colorPrimary)
      popup.backgroundColor = OrcaColor.FromInt(0xEEEEEE)
    }
)

// Usage
import com.fourthline.orca.Orca
import com.fourthline.orca.[product].[Product]CustomizationConfig
import com.fourthline.orca.[product].[product]

val customizationConfig = [Product]CustomizationConfig(flavor = customFlavor)

Orca.[product](context)
  ...
  .customize(config = customizationConfig)
  ...
```

```swift iOS
var flavor = OrcaFlavor()
  
var colorPalette = OrcaPalette()
colorPalette.primary = .black

flavor.colors = OrcaColors(colorPalette: colorPalette)

// Update the colors of the primary button
flavor.colors.buttons.primary.backgroundColor = .yellow
flavor.colors.buttons.primary.textColor = .black
flavor.colors.buttons.primary.borderColor = .lightGray

// Update the colors of the popup
flavor.colors.popup.backgroundColor = .blue
flavor.colors.popup.titleColor = .white
flavor.colors.popup.messageColor = .white

// Add to the Orca Kyc builder
let configuration = KycConfig(supportedCountries: localDataSource.supportedCountries)
let customization = KycCustomizationConfig(flavor: flavor)
Orca.kyc
.configure(with: configuration)
.customize(with: customization)
.present { result in
   switch result {
   case .success(let kycInfo):
     print("Finished Orca with kyc info: \(kycInfo)")
   case let .failure(kycError):
     print("Finished Orca with error: \(kycError)")
 }
```

### iOS dark mode support

iOS 13 supports dark mode. You can optimize colors for dark mode:

**Either** programmatically:

```Text
init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)
```

**Or** using iOS Assets:

1. Create a new color set from Assets.
2. In the inspector panel, change **Appearance** to **Dark mode**.
3. You can set **2** colors.

If initializing the drop-in with dynamic colors, dark mode is automatically supported.

***

### Plugin examples

Example configuration JSON:

```json
{
  "fonts": Orca Fonts Json,
  "colors": Orca Colors Json,
  "localization": Orca Localization Json,
  "layouts": Orca Layouts Json
}
```

* All colors are optional and if not set, the default is used.
* Specify colors in hex format.
* Start hex strings with the hash symbol followed by 6 digits: #FFFFFF
* To add color transparency, change the hex code format from #RRGGBB to #AARRGGBB where alpha is `AA`: #800080FF is blue with alpha value set to 80.
* You can only use 3-digit hex codes if the RR, GG, and BB values are the same for each component. Write #FF00CC as #F0C.

#### Color format

```json
{
  "colorsLight": ColorConfiguration,
  "colorsDark": ColorConfiguration
}
```

* `colorsDark` is optional.
* iOS 13 and Android 11.0 support dark mode. To customize colors for dark mode, set values for `colorsDark`.

### Color configuration

```json
{
  "screen": {
    "backgroundColor": String,
    "headerColor": String,
    "titleColor": String,
    "messageColor": String,
    "dividerColor": String,
    "tableCells":{
      "cellStyle1":{
        "backgroundColor": String,
        "textColor": String,
        "iconColor": String,
        "borderColor": String,
        "dividerColor": String
      },
      "cellStyle2":{
        "backgroundColor": String,
        "textColor": String,
        "iconColor": String,
        "borderColor": String,
        "dividerColor": String
      }
    }
  },
  "buttons": {
    "primary": {
      "textColor": String,
      "backgroundColor": String,
      "borderColor": String
    },
    "secondary": {
      "textColor": String,
      "backgroundColor": String,
      "borderColor": String
    },
    "scannerPrimary": {
      "textColor": String,
      "backgroundColor": String,
      "borderColor": String
    },
    "scannerSecondary": {
      "textColor": String,
      "backgroundColor": String,
      "borderColor": String
    },
    "checkbox": {
      "tintColor": String,
      "iconColor": String
    },
    "backButtonColor": String,
    "linkButtonColor": String
  },
  "inputField": {
    "textColor": String,
    "placeholderColor": String,
    "titleColor": String,
    "statusColor": String,
    "errorColor": String,
    "backgroundColor": String,
    "disabledBorderColor": String,
    "disabledTextColor": String,
    "disabledBackgroundColor": String,
    "borderColor": String
  },
  "palette": {
    "dark": String,
    "gray": String,
    "light": String,
    "darkSoft": String,
    "darkLighter": String,
    "accent": String,
    "primary": String,
    "darkLight": String
  },
  "hint": {
    "textColor": String,
    "backgroundColor": String,
    "borderColor": String
  },
  "popup": {
    "titleColor": String,
    "messageColor": String,
    "backgroundColor": String
  },
  "scanner": {
    "spinnerColor": String,
    "progressColor": String,
    "confirmation": {
      "textColor": String
      "backgroundColor": String,
      "bulletListColor": String
    }
  },
  "graphic": {
    "primaryColor": String,
    "backgroundColor": String
  },
  "box": {
    "titleColor": String,
    "backgroundColor": String,
    "borderColor": String
  }
}
```

Example code:

```javascript Cordova
var colors = `{
  "colorsLight": {
    "screen": {
      "headerColor": "#333333",
      "titleColor": "#333333",
      "messageColor": "#585858",
      "backgroundColor": "#FFFFFF",
      "dividerColor": "#000000",
      "tableCells":{
        "cellStyle1":{
            "backgroundColor":"#FFFFFF",
            "textColor":"#333333",
            "iconColor":"#04A1BD",
            "borderColor":"#FFFFFF",
            "dividerColor":"#FFFFFF"
          }
        }
    }
  }
}`

var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "colors": ${colors}
    }
  }
}`

Fourthline.startKyc(
    config,
    function(kycJson) {
      // Extract and process information from the result String received in JSON format
      var jsonResult = JSON.parse(kycJson);
    },
    function(error) {
      // Extract and process information from the error String received in JSON format
      var jsonError = JSON.parse(error);
    }
);
```

```javascript Flutter
String colors = """
{
  "colorsLight": {
    "screen": {
      "headerColor": "#333333",
      "titleColor": "#333333",
      "messageColor": "#585858",
      "backgroundColor": "#FFFFFF",
      "dividerColor": "#000000",
      "tableCells":{
        "cellStyle1":{
            "backgroundColor":"#FFFFFF",
            "textColor":"#333333",
            "iconColor":"#04A1BD",
            "borderColor":"#FFFFFF",
            "dividerColor":"#FFFFFF"
          }
        }
    }
  }
}
"""

String config = """
{
  "flowType": "customFlow",
  "configuration": {
    "flowSteps": ["selfieFlow", "addressFlow"],
    "flavor": {
      "colors": $colors
    }
  }
}
"""

try {
  String result = await _fourthlinePlugin.startKyc(config) ?? "Could not start Kyc";
  // Extract and process information from the result String received in JSON format
  print('The success response is: $result');
} on PlatformException catch (e) {
  // Extract and process information from the error
  String error = e.toString();
};

// Instance variable defined in your Dart class.
final _fourthlinePlugin = Fourthline();
```

```javascript React Native
import { NativeModules } from 'react-native'
var colors = `{
  "colorsLight": {
    "screen": {
      "headerColor": "#333333",
      "titleColor": "#333333",
      "messageColor": "#585858",
      "backgroundColor": "#FFFFFF",
      "dividerColor": "#000000",
      "tableCells":{
        "cellStyle1":{
            "backgroundColor":"#FFFFFF",
            "textColor":"#333333",
            "iconColor":"#04A1BD",
            "borderColor":"#FFFFFF",
            "dividerColor":"#FFFFFF"
          }
        }
    }
  }
}`
var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "colors": ${colors}
    }
  }
}`;
NativeModules.Fourthline.startKyc(config)
    .then((kycJson) => {
        // Extract and process information from the result String received in JSON format
        var jsonResult = JSON.parse(kycJson);
    })
    .catch((error) => {
        // Extract and process information from the error String received in JSON format
        var jsonError = JSON.parse(error.message);
    });
```

<br />

## Fonts

Set the fonts in the UI:

<Image align="center" alt="Fonts" caption="Fonts" src="https://files.readme.io/15e2ec7-Custom_2.gif" />

You can define fonts as follows:

| Property                        | Description                                                                     |
| :------------------------------ | :------------------------------------------------------------------------------ |
| `screenHeader`                  | The main heading on screens. <br />Default: Roboto-Medium 24                    |
| `screenTitle`                   | The subtitle on screens. <br />Default: Roboto-Medium 18                        |
| `screenMessage`                 | The description of the screen. <br />Default: Roboto-Regular 16                 |
| `primaryButton`                 | The font for the primary button. <br />Default: Roboto-Medium 18                |
| `secondaryButton`               | The font for the secondary button. <br />Default: Roboto-Medium 14              |
| `inputField`                    | The font for input fields. <br />Default: Roboto-Medium 18                      |
| `inputFieldPlaceholder`         | The font for input field placeholders. <br />Default: Roboto-Medium 18          |
| `inputFieldTitle`               | The font for input field headings and titles. <br />Default: Roboto-Medium 14   |
| `inputFieldStatus`              | The font for input field errors and hints. <br />Default: Roboto-Medium 12      |
| `scannerInstructionText`        | The font for scanner instructions. <br />Default: Roboto-Medium 20              |
| `confirmationScreenTitle`       | The font for the title of confirmation screens. <br />Default: Roboto-Medium 20 |
| `confirmationScreenCheckpoints` | The font for checkpoints on confirmation screens. <br />Default: Roboto 16      |
| `tableElementTitle`             | The font for titles of table view elements. <br />Default: Roboto-Medium 16     |
| `tableElementDescription`       | The font for descriptions of table view elements. <br />Default: Roboto 14      |
| `instructionsLink`              | The font for linked instructions buttons. <br />Default: Roboto-Medium 14       |
| `hintText`                      | The font for hint text beneath input fields. <br />Default: Roboto-Regular 14   |
| `popupHeader`                   | The font for headings on popup screens. <br />Default: Roboto-Medium 24         |
| `popupMessage`                  | The font for message text on popup screens. <br />Default: Roboto 16            |
| `popupTitle`                    | The font for error text on popup screens. <br />Default: Roboto-Medium 18       |

***

### Android & iOS examples

Example code:

```javascript Android
import com.fourthline.orca.core.flavor.OrcaFlavor
import com.fourthline.orca.core.flavor.OrcaFonts

val customFlavor = OrcaFlavor(
    fonts = OrcaFonts(
        screenHeader = OrcaFonts.Font.FromFontRes(fontRes = R.font.roboto_medium, size = 20),
        primaryButton = OrcaFonts.Font.FromFile(file = File(...), size = 18),
    )
)

val customizationConfig = [Product]CustomizationConfig(flavor = customFlavor)

Orca.[product](context)
  ...
  .customize(config = customizationConfig)
  ...
```

```swift iOS
var flavor = OrcaFlavor()
flavor.fonts.screenHeader = UIFont(name: "Roboto-Medium", size: 22)!
flavor.fonts.primaryButton = UIFont(name: "Roboto-Regular", size: 20)!

// Add to the Orca Kyc builder
let configuration = KycConfig(supportedCountries: localDataSource.supportedCountries)
let customization = KycCustomizationConfig(flavor: flavor)
Orca.kyc
.configure(with: configuration)
.customize(with: customization)
.present { result in
   switch result {
   case .success(let kycInfo):
     print("Finished Orca with kyc info: \(kycInfo)")
   case let .failure(kycError):
     print("Finished Orca with error: \(kycError)")
 }
```

***

### Plugin examples

Example configuration JSON:

```json
{
  "fonts": Orca Fonts Json,
  "colors": Orca Colors Json,
  "localization": Orca Localization Json,
  "layouts": Orca Layouts Json
}
```

* The font name you set in `OrcaFlavor` must match the one defined in the font file metadata (**without** the file extension).
* **Android**: Add the otf/ttf font files to the Android project asset folder.
* **iOS**: Add the custom font files to both the iOS project folder and the application's `Info.plist` file.
* All drop-in elements are optional and if not set, the default is used.

```json
{
  "orcaElementName": {
    "fontName": String,
    "fontSize": Int
  }
}
```

<br />

Example code:

```javascript Cordova
var orcaFonts = `{
  "screenHeader": {
    "fontName": "Avenir-Medium",
    "fontSize": 24
  },
  "screenTitle": {
    "fontName": "Poppins-Regular",
    "fontSize": 18
  },
  "screenMessage": {
    "fontName": "Poppins-Regular",
    "fontSize": 16
  },
  "primaryButton": {
    "fontName": "Avenir-Medium",
    "fontSize": 16
  },
  "secondaryButton": {
    "fontName": "Poppins-Regular",
    "fontSize": 16
  },
  "instructionsLink": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "hintText": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "inputField": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "inputFieldPlaceholder": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "inputFieldTitle": {
    "fontName": "Avenir-Medium",
    "fontSize": 14
  },
  "inputFieldStatus": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "scannerInstructionText": {
    "fontName": "Avenir-Medium",
    "fontSize": 20
  },
  "confirmationScreenTitle": {
    "fontName": "Avenir-Medium",
    "fontSize": 20
  },
  "confirmationScreenCheckpoints": {
    "fontName": "Avenir-Medium",
    "fontSize": 16
  },
  "tableElementTitle": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "tableElementDescription": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "popupHeader": {
    "fontName": "Avenir-Medium",
    "fontSize": 18
  },
  "popupTitle": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "popupMessage": {
    "fontName": "Avenir-Light",
    "fontSize": 16
  }
}
`

var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "fonts": ${orcaFonts}
    }
  }
}`;

Fourthline.startKyc(
    config,
    function(kycJson) {
      // Extract and process information from the result String received in JSON format
      var jsonResult = JSON.parse(kycJson);
    },
    function(error) {
      // Extract and process information from the error String received in JSON format
      var jsonError = JSON.parse(error);
    }
);

```

```javascript Flutter
String orcaFonts = """
{
  "screenHeader": {
    "fontName": "Avenir-Medium",
    "fontSize": 24
  },
  "screenTitle": {
    "fontName": "Poppins-Regular",
    "fontSize": 18
  },
  "screenMessage": {
    "fontName": "Poppins-Regular",
    "fontSize": 16
  },
  "primaryButton": {
    "fontName": "Avenir-Medium",
    "fontSize": 16
  },
  "secondaryButton": {
    "fontName": "Poppins-Regular",
    "fontSize": 16
  },
  "instructionsLink": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "hintText": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "inputField": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "inputFieldPlaceholder": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "inputFieldTitle": {
    "fontName": "Avenir-Medium",
    "fontSize": 14
  },
  "inputFieldStatus": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "scannerInstructionText": {
    "fontName": "Avenir-Medium",
    "fontSize": 20
  },
  "confirmationScreenTitle": {
    "fontName": "Avenir-Medium",
    "fontSize": 20
  },
  "confirmationScreenCheckpoints": {
    "fontName": "Avenir-Medium",
    "fontSize": 16
  },
  "tableElementTitle": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "tableElementDescription": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "popupHeader": {
    "fontName": "Avenir-Medium",
    "fontSize": 18
  },
  "popupTitle": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "popupMessage": {
    "fontName": "Avenir-Light",
    "fontSize": 16
  }
}
""";

String config = """
{
  "flowType": "customFlow",
  "configuration": {
    "flowSteps": ["selfieFlow", "addressFlow"],
    "flavor": {
      "fonts": $orcaFonts
    }
  }
}
""";

try {
  String result = await _fourthlinePlugin.startKyc(config) ?? "Could not start Kyc";
  // Extract and process information from the result String received in JSON format
  print('The success response is: $result');
} on PlatformException catch (e) {
  // Extract and process information from the error
  String error = e.toString();
};

// Instance variable defined in your Dart class.
final _fourthlinePlugin = Fourthline();
```

```javascript React Native
import { NativeModules } from 'react-native'

var orcaFonts = `{
  "screenHeader": {
    "fontName": "Avenir-Medium",
    "fontSize": 24
  },
  "screenTitle": {
    "fontName": "Poppins-Regular",
    "fontSize": 18
  },
  "screenMessage": {
    "fontName": "Poppins-Regular",
    "fontSize": 16
  },
  "primaryButton": {
    "fontName": "Avenir-Medium",
    "fontSize": 16
  },
  "secondaryButton": {
    "fontName": "Poppins-Regular",
    "fontSize": 16
  },
  "instructionsLink": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "hintText": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "inputField": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "inputFieldPlaceholder": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "inputFieldTitle": {
    "fontName": "Avenir-Medium",
    "fontSize": 14
  },
  "inputFieldStatus": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "scannerInstructionText": {
    "fontName": "Avenir-Medium",
    "fontSize": 20
  },
  "confirmationScreenTitle": {
    "fontName": "Avenir-Medium",
    "fontSize": 20
  },
  "confirmationScreenCheckpoints": {
    "fontName": "Avenir-Medium",
    "fontSize": 16
  },
  "tableElementTitle": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "tableElementDescription": {
    "fontName": "Avenir-Light",
    "fontSize": 14
  },
  "popupHeader": {
    "fontName": "Avenir-Medium",
    "fontSize": 18
  },
  "popupTitle": {
    "fontName": "Avenir-Light",
    "fontSize": 18
  },
  "popupMessage": {
    "fontName": "Avenir-Light",
    "fontSize": 16
  }
}
`;

var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "fonts": ${orcaFonts}
    }
  }
}`;

NativeModules.Fourthline.startKyc(config)
	.then((kycJson) => {
		// Extract and process information from the result String received in JSON format
		var jsonResult = JSON.parse(kycJson);
	})
	.catch((error) => {
		// Extract and process information from the error String received in JSON format
		var jsonError = JSON.parse(error.message);
	});
```

<br />

## Localization

The UI can be configured in the following languages:

| Language           | Locale | Formality            |
| :----------------- | :----- | :------------------- |
| English (default)  | `en`   | `informal`           |
| Bulgarian          | `bg`   | `formal`             |
| Croatian           | `hr`   | `informal`           |
| Czech              | `cs`   | `informal`           |
| Danish             | `da`   | `formal`             |
| Dutch              | `nl`   | `formal`, `informal` |
| Estonian           | `et`   | `formal`             |
| Finnish            | `fi`   | `informal`           |
| Flemish            | `vl`   | `informal`           |
| French             | `fr`   | `formal`             |
| German             | `de`   | `formal`             |
| Greek              | `el`   | `formal`             |
| Italian            | `it`   | `informal`           |
| Polish             | `pl`   | `informal`           |
| Portuguese         | `pt`   | `formal`             |
| Maltese            | `mt`   | `formal`             |
| Norwegian (Bokmål) | `nb`   | `formal`             |
| Romanian           | `ro`   | `formal`             |
| Slovak             | `sk`   | `informal`           |
| Spanish            | `es`   | `informal`           |
| Turkish            | `tr`   | `formal`             |

If the client's device language:

* Is supported: It is used automatically **or** you can override it with `flavor.localization.fixedLanguage`.
* Is **not** supported: Specify a fallback with `flavor.localization.baseLanguage`.

<Callout icon="📘" theme="info">
  You <strong>can't</strong> configure the level of language formality for the iOS & Android SDK's
</Callout>

***

### Android & iOS (quick reference)

<details>
  <summary><strong>Android</strong> quick reference</summary>

| Topic                   | API / Path                                                                                     | Example / Notes                                                                  |
| ----------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Set fallback language   | `OrcaFlavor(localization = OrcaLocalization(baseLanguage = OrcaLocalization.LanguageType.NL))` | Dutch (NL) fallback when device language isn’t supported.                        |
| Force specific language | `OrcaLocalization(fixedLanguage = OrcaLocalization.LanguageType.ES)`                           | Always Spanish (ES).                                                             |
| Apply flavor to product | `[Product]CustomizationConfig(flavor = customFlavor)`                                          | Replace `[Product]/[product]` with your module (e.g., `KycCustomizationConfig`). |
| Usage (builder)         | `Orca.[product](context).customize(config = customizationConfig)`                              | Add `.customize(...)` in your builder chain.                                     |

</details>

<details>
  <summary><strong>iOS</strong> quick reference</summary>

| Topic                   | API / Path                                                               | Example / Notes                                           |
| ----------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------- |
| Force specific language | `flavor.localization.fixedLanguage = .es`                                | Always Spanish (ES).                                      |
| Set fallback language   | `flavor.localization.baseLanguage = .nl`                                 | Uses Dutch (NL) when device language isn’t supported.     |
| Apply flavor to product | `let customization = KycCustomizationConfig(flavor: flavor)`             | Use the corresponding customization config for your flow. |
| Usage (builder)         | `Orca.kyc.configure(...).customize(with: customization).present { ... }` | Add `.customize(with:)` in your builder chain.            |

</details>

<details>
  <summary><strong>Plugins</strong> quick reference</summary>

| SDK          | JSON key path                               | Example JSON                                      |
| ------------ | ------------------------------------------- | ------------------------------------------------- |
| Shared       | `flavor.localization`                       | `{ "baseLanguage": "fr", "fixedLanguage": "en" }` |
| Cordova      | `Fourthline.startKyc(config)`               | See code tabs below.                              |
| Flutter      | `_fourthlinePlugin.startKyc(config)`        | See code tabs below.                              |
| React Native | `NativeModules.Fourthline.startKyc(config)` | See code tabs below.                              |

</details>

***

## Copyable code (Android / iOS tabs)

```kotlin Android
import com.fourthline.orca.core.flavor.OrcaFlavor
import com.fourthline.orca.core.flavor.OrcaLocalization
// Optional: import com.fourthline.orca.Orca
// Optional: import com.fourthline.orca.[product].[Product]CustomizationConfig

val customFlavor = OrcaFlavor(
    localization = OrcaLocalization(
        baseLanguage = OrcaLocalization.LanguageType.NL
        // fixedLanguage = OrcaLocalization.LanguageType.ES
    )
)

// Usage (replace [product]/[Product] with your integration)
val customizationConfig = [Product]CustomizationConfig(flavor = customFlavor)

Orca.[product](context)
  // ...
  .customize(config = customizationConfig)
  // ...
```

```swift iOS
var flavor = OrcaFlavor()

// Force a specific language:
flavor.localization.fixedLanguage = .es
// Or only set a fallback:
// flavor.localization.baseLanguage = .nl

let configuration = KycConfig(supportedCountries: localDataSource.supportedCountries)
let customization = KycCustomizationConfig(flavor: flavor)

Orca.kyc
  .configure(with: configuration)
  .customize(with: customization)
  .present { result in
    switch result {
    case .success(let kycInfo):
      print("Finished Orca with kyc info: \(kycInfo)")
    case let .failure(kycError):
      print("Finished Orca with error: \(kycError)")
    }
  }
```

***

### Plugin code

```javascript Cordova
const orcaLocalization = `{
  "baseLanguage": "fr",
  "fixedLanguage": "en"
}`;

const config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "localization": ${orcaLocalization}
    }
  }
}`;

Fourthline.startKyc(
  config,
  function (kycJson) {
    const jsonResult = JSON.parse(kycJson);
  },
  function (error) {
    const jsonError = JSON.parse(error);
  }
);
```

```dart Flutter
import 'package:flutter/services.dart';

final Fourthline _fourthlinePlugin = Fourthline();

final String orcaLocalization = '{"baseLanguage": "fr", "fixedLanguage": "en"}';
final String config = """
{
  "flowType": "customFlow",
  "configuration": {
    "flowSteps": ["selfieFlow", "addressFlow"],
    "flavor": {
      "localization": $orcaLocalization
    }
  }
}
""";

try {
  final String result =
      await _fourthlinePlugin.startKyc(config) ?? "Could not start KYC";
  print('The success response is: $result');
} on PlatformException catch (e) {
  final String error = e.toString();
}
```

```javascript React Native
import { NativeModules } from 'react-native';

const orcaLocalization = `{
  "baseLanguage": "fr",
  "fixedLanguage": "en"
}`;
const config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "localization": ${orcaLocalization}
    }
  }
}`;

NativeModules.Fourthline.startKyc(config)
  .then((kycJson) => {
    const jsonResult = JSON.parse(kycJson);
  })
  .catch((error) => {
    const jsonError = JSON.parse(error.message);
  });
```

<br />

## Layout

Set the corner radius for primary buttons:

<Image align="center" src="https://files.readme.io/489df8b-Colours_3.gif" />

<br />

You can set the corner radius as follows:

| Property                    | Description                                |
| :-------------------------- | :----------------------------------------- |
| `primaryButtonCornerRadius` | The **corner** radius for primary buttons. |

***

### Android & iOS examples

Example code:

```kotlin Android
import com.fourthline.orca.core.flavor.OrcaFlavor
import com.fourthline.orca.core.flavor.OrcaLayouts

val customFlavor = OrcaFlavor(
    layouts = OrcaLayouts(primaryButtonCornerRadius = 0) // Rectangular buttons
    // layouts = OrcaLayouts(primaryButtonCornerRadius = 8) // Corner radius = 8 dp
    // layouts = OrcaLayouts(primaryButtonCornerRadius = OrcaLayouts.Round) // Fully rounded
)

// Usage
import com.fourthline.orca.Orca
import com.fourthline.orca.[product].[Product]CustomizationConfig
import com.fourthline.orca.[product].[product]

val customizationConfig = [Product]CustomizationConfig(flavor = customFlavor)

Orca.[product](context)
  // ...
  .customize(config = customizationConfig)
  // ...
```

```swift iOS
var flavor = OrcaFlavor()
flavor.layouts.primaryButtonCornerRadius = .zero // Rectangular buttons
// flavor.layouts.primaryButtonCornerRadius = 8 // Corner radius = 8
// flavor.layouts.primaryButtonCornerRadius = OrcaLayout.CornerRadius.round // Fully rounded

// Add to the Orca KYC builder
Orca
  .builder
  .withDefaultFlow()
  .addDataSource(localDataSource)
  .addFlavor(flavor)
  .present { completionReason in
    switch completionReason {
    case .completed(let kycInfo):
      print("Finished Orca with kyc info: \(kycInfo)")
    default:
      break
    }
  }
```

***

### Plugin examples

Example configuration JSON:

```json
{
  "primaryButtonCornerRadius": 0
}
```

`primaryButtonCornerRadius` can have the following values:

* **-1**: Fully rounded button
* **≥ 0**: Corner radius equal to the value

Example code:

```javascript Cordova
var orcaLayout = `{
  "primaryButtonCornerRadius": 8
}`;
var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "layouts": ${orcaLayout}
    }
  }
}`;
Fourthline.startKyc(
  config,
  function (kycJson) {
    var jsonResult = JSON.parse(kycJson);
  },
  function (error) {
    var jsonError = JSON.parse(error);
  }
);
```

```dart Flutter
String orcaLayout = '{"primaryButtonCornerRadius": 8}';
String config = """
{
  "flowType": "customFlow",
  "configuration": {
    "flowSteps": ["selfieFlow", "addressFlow"],
    "flavor": {
      "layouts": $orcaLayout
    }
  }
}
""";
try {
  String result = await _fourthlinePlugin.startKyc(config) ?? "Could not start Orca";
  print('The success response is: $result');
} on PlatformException catch (e) {
  String error = e.toString();
}
// Instance variable defined in your Dart class
final _fourthlinePlugin = Fourthline();
```

```javascript React Native
import { NativeModules } from 'react-native';

var orcaLayout = `{
  "primaryButtonCornerRadius": 8
}`;
var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "layouts": ${orcaLayout}
    }
  }
}`;
NativeModules.Fourthline.startKyc(config)
  .then((kycJson) => {
    var jsonResult = JSON.parse(kycJson);
  })
  .catch((error) => {
    var jsonError = JSON.parse(error.message);
  });
```