2.3.0

Web UI

Deployment

Please ignore the deployment section if you're using the API host structure (documented under the Get Started section).

If you're using the separate UI hosting structure, please proceed.

It is recommended that the web UI is set up after configuring and hosting the backend API as it is essential for the UI portion to function correctly.

The web UI is part of an onboarding module which can be referenced and consumed by any host site. Whether you make use of a provided demo application or use your own implementation, you will need to set your client ID and configure the endpoint in order to connect to your instance of the backend API.

The onboarding module is contained within the sybrin.onboarding.js file.

Please configure the following in your UI appsettings.json file (which can be found under the assets directory):

{
    "clientId": "your-client-id-here",
    "integrationApiBaseUrl": "https://path-to-your-onboarding-api/api"
}

  • Client ID: The client ID must be configured to match the client ID set in the config.json file of the tenant that corresponds to the UI. This is typically a GUID. No default value.

  • Integration API Base URL: The base URL of the onboarding backend instance that the UI should point to.

Once initialized, the web UI will query the backend API for step configuration and run through the configured flow while using the backend API for state management.

The following steps are available as part of the onboarding flow:

  • Terms Acceptance

  • Submit Mobile Number

  • Mobile Verification

  • Passive Liveness

  • Liveness Result Acceptance

  • Country Select

  • Document Select

  • Document Scan

  • Data Extraction Acceptance

  • Finalize

  • Dynamic

Query Parameters

The onboarding product will recognize and make use of the following URL query parameters if provided:

  • Correlation ID: Can be provided using the correlationId query parameter. Sets the correlation ID that must be used for the onboarding case.

  • Country: Can be provided using the country query parameter. Sets the country that must be used for the onboarding case. This may be provided in Alpha-2, Alpha3, or Numeric-3 ISO 3166 standard format.

  • Document Type: Can be provided using the documenttype query parameter. Sets the document type that must be used for the onboarding case, specifically pertaining to the document scan and data extraction step.

Emitted Window Events

The onboarding product emits the following window events:

  • On Completion: An event emitted once an onboarding instance completes fully. It is emitted with the following parameter: { type: 'sybrinonboardingcomplete' }

  • On Step Change: An event emitted on every step change (including initial screen entry). It is emitted with the following parameter: { type: 'sybrinonboardingstepchange', oldStep: 'the-old-step', newStep: 'the-new-step' }

  • On Error: An event emitted when an error occurs. It is emitted with a parameter containing the following properties:

    • type: Will always be a string with value sybrinonboardingerror.

    • error: Will be a string containing the error message.

    • outcomeCode: A code that corresponds to how the error is handled:

      • 0: Retry. The user can try again.

      • 1: Restart. The user must restart the flow.

      • 2: Stop. The flow cannot continue and the user must stop.

      • 3: Skip. The user may skip the current step.

    • errorCode: A code corresponding to the type of error that occurred.

{
  "type": "sybrinonboardingerror",
  "error": "some-error-message",
  "outcomeCode": 0,
  "errorCode": 1
}

Listened Window Events

The onboarding product subscribes to some window events that may be used to trigger specific actions:

  • Go Back: The onboarding flow will attempt to navigate one step back if a window event containing the following parameter is emitted by a containing site: { type: 'sybrinonboardinggoback' }

Step Values

The following string values represent the onboarding steps that may be included in the On Step Change window event:

  • terms

  • submitMobile

  • mobileOtp

  • selectDocument

  • selectCountry

  • captureDocument

  • captureResult

  • liveness

  • livenessResult

  • address

  • addressResult

  • completed

  • dynamic

  • partialCompleted

Last updated