Prepare

The prepare component can be found under the Sybrin.Identity namespace and is called PrepareComponent.

Full name: Sybrin.Identity.PrepareComponent.

It provides an interface for selecting a desired capture method, as well as an easy way to view a customizable privacy policy and usage guidelines.

With default styling, the prepare component appears as follows:

Upon clicking "View Our Privacy Policy", the onViewPrivacyPolicy event will fire. Hooking onto this event allows you to react to the button click and show your privacy policy.

Upon clicking "View Guidelines", the component will automatically open a new window and display guidelines for taking an identity document photo. The onViewGuidelines event will also fire, allowing you to run additional code if needed.

Clicking "Upload Photo" will fire the onBeforeUpload event and then invoke the uploadDocument function of the JavaScript API, resulting in a file picker popping up and allowing the user to complete data extraction using a file upload. Completion will result in the onScanResult event firing, and an error will result in the onScanError event firing. Cancelling will fire the onScanCancelled event.

Clicking "Take Photo" will result in the onTakePhoto event firing, which can then be used as a signal to initialize the document scan component, or the device select component first should the user system possess multiple viable video input devices.

If the component is configured to allow for mobile capture and the flow is being executed on a desktop web browser, the "Mobile Capture" button will be available. Clicking on "Mobile Capture" will cause the onMobileCaptureStart event to fire. This can then be used as a trigger to generate a mobile ID and signal for the prepare component to present a scannable QR code and a URL by invoking the initializeMobileCaptureWithId function. This will result in the following:

On this screen, clicking "Cancel" will revert the prepare component back to the previous state. Clicking "Copy Link" will copy the unique URL to the user's clipboard.

Initialization

The prepare component can be initialized using the following code:

<div id='prepare'></div>

// Option 1: Passing an id
var component = new Sybrin.Identity.PrepareComponent({ 
    id: 'prepare',
});

// Option 2: Passing a DOM element
var element = document.getElementById('prepare');
var component = new Sybrin.Identity.PrepareComponent({ 
    element: element
});

component.initialize();

The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.

Please note that 'prepare' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.

During initialization, the prepare component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:

Required:

id (string): ID of the element you wish to use for component initialization. Not required if element is passed.
element (HTMLElement): Element you wish to use for component initialization. Not required if id is passed.
api (Sybrin.Identity.Api): Instance of a JavaScript API that may be pre-configured as desired. Not required if an instance of options is passed. This is the instance that will be used for invoking photo upload functionality.
options (Sybrin.Identity.Options): Configuration options to instantiate Sybrin.Identity.Api with. Not required if an instance of api is passed. This is the instance that will be used for invoking photo upload functionality.
documentTypeId (string): An ID that points to a unique document type for a specific country. Not required if countryCode and documentTypeName are specified.
countryCode (string): The Alpha-3 standard country code of the document to be uploaded. Not required if documentTypeId is passed.
documentTypeName (string): The document type to be uploaded. Please see document type overrides and filtering for a list of supported document type names. Not required if documentTypeId is passed.

Optional:

correlationId (string): Unique identifier for the case that will be passed down to the back-end if set.
enableMobileCapture (boolean): A flag that sets whether or not mobile capture should be enabled. If it is set to true and the flow is being executed on a desktop browser, the "Mobile Capture" button will be visible.
flowDirection (number): This property is used to control the flow direction of the guidelines window. 0 is left to right. 1 is right to left. Default 0
translations ({ [key: string]: string }): An object literal representing a dictionary lookup that will be used for translating the component. Please see the translations section on this page for a list of all translatable text, as well as the localization page for a detailed description on how to implement localization.

Warning: Initialization will fail if the intended host element does not exist yet.

Always ensure that the initialize function is only called after the DOM is loaded.

Destruction

The prepare component may be removed from the UI by calling the destroy() function on it.

Example:

component.destroy();

Functions

Initialize

initialize(): void

Initializes the component's DOM and events.

Destroy

destroy(): void

Destroys the component's DOM and events.

Set Translations

setTranslations(translations?: { [key: string]: string; }): void

Changes the component's translations to the provided values and updates the DOM accordingly.

Set Flow Direction

setFlowDirection(flowDirection: FlowDirection): void

Changes the component's flow direction.

Initialize Mobile Capture With ID

initializeMobileCaptureWithId(mobileId: string, baseUrl?: string, fullUrl?: string): void

Switches the component to mobile mode with a generated URL using the provided ID. Optionally, a base URL or a full URL may be provided to override default behavior. A base URL will continue to use the mobile ID, but replace the base URL with the provided value. A full URL will replace the entire generated URL with the value that was provided.

Events

The prepare component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

onScanResult(result: DocumentScanResult)
onScanError(error: string)
onScanCancelled()
onBeforeUpload()
onMobileCaptureStart()
onMobileCaptureCancel()
onTakePhoto()
onViewPrivacyPolicy()
onViewGuidelines()

On Scan Result

This function is called after data extraction runs without error once the "Upload Photo" button is clicked. To hook onto the event, you may use the following code:

component.onScanResult = function(result) {
    console.log('Success: ', result.success);
    for (const property in result.data) {
        console.log('Value of ' + property + ' is ' + result.data[property]);
    }
}

The result parameter is of type Sybrin.Identity.DocumentScanResult and includes the following properties:

success (boolean): Whether or not data could be extracted.
message (string): Additional information when applicable, for instance an error message if one occurred.
data (object): An object with all data fields that were successfully extracted.
images (object): An object with images. These include
- documentImage (string): Base64 string of the front photo of the document.
- documentBackImage (string): Base64 string of the back photo of the document (if supplied).
- portraitImage (string): Base64 string of the extracted face portrait image pulled from the document.

On Scan Error

This function is called when something goes wrong and an error occurs during data extraction. To hook onto the event, you may use the following code:

component.onScanError = function(error) {
    console.log('An error occurred: ', error);
}

The error parameter is of type string.

On Scan Cancelled

This function is called when a document scan for data extraction was started, but then cancelled before completion. To hook onto the event, you may use the following code:

component.onScanCancelled = function() {
    // Your code here
}