App UI Customization

Integrations guide

Fonts

Set the fonts in the UI:

Fonts

Fonts

You can define fonts as follows:

PropertyDescription
screenHeaderThe main heading on screens.
Default: Roboto-Medium 24
screenTitleThe subtitle on screens.
Default: Roboto-Medium 18
screenMessageThe description of the screen.
Default: Roboto-Regular 16
primaryButtonThe font for the primary button.
Default: Roboto-Medium 18
secondaryButtonThe font for the secondary button.
Default: Roboto-Medium 14
inputFieldThe font for input fields.
Default: Roboto-Medium 18
inputFieldPlaceholderThe font for input field placeholders.
Default: Roboto-Medium 18
inputFieldTitleThe font for input field headings and titles.
Default: Roboto-Medium 14
inputFieldStatusThe font for input field errors and hints.
Default: Roboto-Medium 12
scannerInstructionTextThe font for scanner instructions.
Default: Roboto-Medium 20
confirmationScreenTitleThe font for the title of confirmation screens.
Default: Roboto-Medium 20
confirmationScreenCheckpointsThe font for checkpoints on confirmation screens.
Default: Roboto 16
tableElementTitleThe font for titles of table view elements.
Default: Roboto-Medium 16
tableElementDescriptionThe font for descriptions of table view elements.
Default: Roboto 14
instructionsLinkThe font for linked instructions buttons.
Default: Roboto-Medium 14
hintTextThe font for hint text beneath input fields.
Default: Roboto-Regular 14
popupHeaderThe font for headings on popup screens.
Default: Roboto-Medium 24
popupMessageThe font for message text on popup screens.
Default: Roboto 16
popupTitleThe font for error text on popup screens.
Default: Roboto-Medium 18


Android & iOS examples

Example code:

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

{
  "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.
{
  "orcaElementName": {
    "fontName": String,
    "fontSize": Int
  }
}

Example code:

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

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

Top of page