App Components

App Components are standalone functionality modules for iOS and Android mobile apps. They capture images and data for you to upload via the API, leveraging Fourthline's data extraction AI services, and provide real-time feedback to the client. If you build custom user journeys, with your own UI, business logic, and orchestration, components reduce development time and effort.

Fourthline provides the UI for the components, which you can customize in the same way as the App Drop-in.
You can dynamically adjust functionality during workflows, e.g. disable the tilted photo step.

App Drop-in vs App Components

Available components

How it works

SDKs

We offer the following SDKs:

• Android SDK and iOS SDK
• Cordova, Flutter, and React Native plugins

Supported solutions

You can use App Components for the following solutions:

• Identity Verification
• Client Authentication
• Document Authentication
• Document NFC
• Qualified Electronic Signature

Workflow

The workflow is as follows:

Components workflow

Configuration

Error handling

You need to handle the following error values:

Starting a workflow session with Orca.workflowSession … .start completes with WorkflowError. The Document, NFC, Biometrics, and QES components complete with WorkflowFailure instead (code + recovery).

For more information, see the WorkflowFailure accordion below and each component card for module-specific codes.

{
"errorCode": Integer,
"errorDescription": String
}

iOS configuration

To ensure the client has granted camera and location permissions, in the Info.plist file, add Privacy - Camera Usage Description and Privacy - Location When In Use Usage Description entries.

Real-time feedback

The components can send document/selfie photos to our backend as soon as they are captured, where we assess the image quality and provide the client feedback in the UI in real time. The component displays an additional screen where we perform further validations.

This ensures higher-quality photos are ultimately uploaded, reduces sendbacks, and improves the user experience.

Agree with your Fourthline delivery manager whether you want to enable real-time feedback for App Components.

UI customization

To customize each component's UI, create an OrcaFlavor object.

For more information, see App UI Customization.

Plugin helpers

Clear workflow session

To delete any workflow resources after a Document, Biometrics, or QES component finishes and clear the workflow session, use the clearWorkflowSession function.

Before launching the component, call startWorkflowSession.

Fourthline.clearWorkflowSession(
function(msg) {
...
});

await _fourthlinePlugin.clearWorkflowSession()

NativeModules.Fourthline.clearWorkflowSession((error, success) => {});

Workflow session availability

To confirm that the workflow session is available before launching a Document, Biometrics, or QES component, use the isWorkflowSessionAvailable function.

Before launching the component, call startWorkflowSession.

Fourthline.isWorkflowSessionAvailable(
function(msg) {
if (msg == "true") {
...
} else {
...
}
)

if (await _fourthlinePlugin.isWorkflowSessionAvailable() ?? false) {
...
}

NativeModules.Fourthline.isWorkflowSessionAvailable((error, isAvailable) => {});