App Drop-in UI Customization

Integrations guide

Localization

The UI can be configured in the following languages:

LanguageValue
Croatian (informal)hr
Dutch (informal)nl
English (informal, default)en
French (formal)fr
German (formal)de
Greek (formal)el
Italian (informal)it
Polish (informal)pl
Portuguese (formal)pt
Romanian (formal)ro
Spanish (informal)es

If the client's device language:

  • Is supported: It is used automatically or you can override it and specify the language using the flavor.localization.fixedLanguage property.
  • Is not supported or defined in LanguageType: You can specify the backup language using the BaseLanguage property.

Note
You can't configure the level of language formality for the App Drop-in.


Android & iOS examples

Example code:

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(
    localization = OrcaLocalization(baseLanguage = OrcaLocalization.LanguageType.NL)
)

// 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)
  ...
var flavor = OrcaFlavor()
flavor.localization.fixedLanguage = .es

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

{
  "baseLanguage": String,
  "fixedLanguage": String
}

Example code:

var orcaLocalization = `{
  "baseLanguage": "fr",
  "fixedLanguage": "en"
}`

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

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);
    }
);
String orcaLocalization = '{"baseLanguage": "fr","fixedLanguage": "en"}';
String config = """
{
  "flowType": "customFlow",
  "configuration": {
    "flowSteps": ["selfieFlow", "addressFlow"],
    "flavor": {
      "localization": $orcaLocalization
    }
  }
}
""";

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();
import { NativeModules } from 'react-native'
var orcaLocalization = `{
  "baseLanguage": "fr",
  "fixedLanguage": "en"
}`
var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "localization": ${orcaLocalization}
    }
  }
}`;
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);
    });

Top of page