App UI Customization

Setup

Colors

Fonts

Layout

Localization

The UI can be configured in the following languages:

Language	Locale	Formality
English (default)	`en`	`informal`
Bulgarian	`bg`	`formal`
Croatian	`hr`	`informal`
Danish	`da`	`formal`
Dutch	`nl`	`informal`
Estonian	`et`	`formal`
Finnish	`fi`	`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`
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.

Android & iOS (quick reference)

Android quick reference

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.

iOS quick reference

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.

Plugins quick reference

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.

Copyable code (Android / iOS tabs)

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

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

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);
  }
);

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();
}

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);
  });