App UI Customization
Integrations guide
Localization
The UI can be configured in the following languages:
Language | Locale | Formality |
---|---|---|
English (default) | en | informal |
Croatian | hr | informal |
Dutch | nl | informal |
French | fr | formal |
German | de | formal |
Greek | el | formal |
Italian | it | informal |
Polish | pl | informal |
Portuguese | pt | formal |
Romanian | ro | formal |
Spanish | es | informal |
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 theBaseLanguage
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);
});
Updated 7 months ago