Prepare

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

Full name: Sybrin.Document.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:

Prepare Component

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.

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 onCaptureResult event firing, and an error will result in the onCaptureError event firing. Cancelling will fire the onCaptureCancelled event. If a multi-sided document type is selected, a specialized multi file selection window will be presented:

Prepare Component - Mlti-SIded File Upload Selection

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

Initialization

The prepare component can be initialized using the following code:

HTML

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

JavaScript

var options = new Sybrin.Document.Options({});

// Option 1: Passing an id
var component = new Sybrin.Document.PrepareComponent({ 
    id: 'prepare',
    options: options,
    countryCode: countryCode,
    documentTypeId: documentTypeId,
    documentTypeName: documentTypeName
});

// Option 2: Passing a DOM element
var element = document.getElementById('prepare');
var component = new Sybrin.Document.PrepareComponent({ 
    element: element,
    options: options,
    countryCode: countryCode,
    documentTypeId: documentTypeId,
    documentTypeName: documentTypeName
});

component.initialize();

The countryCode parameter may be obtained using the Country Select component.

The documentTypeId and documentTypeName parameters may be obtained using the Document Select component.

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 provided 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.Document.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.

• countryCode: The country code of the document. Used during uploads, in conjunction with document type parameters, to determine page count. May be obtained by using the Country Select component.

• documentTypeName: The document type name of the document. Used during uploads, in conjunction with country code parameters, to determine page count. May be obtained by using the Document Select component.

• documentTypeId: The document type ID of the document. Used during uploads, in conjunction with country code parameters, to determine page count. May be obtained by using the Document Select component.

• options (Sybrin.Document.Options): Configuration options to instantiate Sybrin.Document.Api with. Not required if an instance of api is passed. This is the instance that will be used for invoking photo upload functionality.

Optional:

• readonlyMode (boolean): Disables all events if true. Default false.

• 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.

• imageUploadFormat (string: 'original' | 'jpeg'): Sets the format that images will be converted to for upload. Defaults to original.

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.

Events

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

The following options are available:

• onCaptureResult(result: DocumentCaptureResult)

• onCaptureError(error: string)

• onCaptureCancelled()

• onBeforeUpload()

• onTakePhoto()

• onViewPrivacyPolicy()

On Capture Result

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

component.onCaptureResult = function(result) {
    console.log(result);
}

The result parameter is of type Sybrin.Document.DocumentCaptureResult and includes the following properties:

• success (boolean): Whether or not image capture executed successfully.

• message (string): Additional information when applicable, for instance an error message if one occurred.

• facingMode (string): The camera facing mode used for capture.

• originalDocumentImage (string): Base64 string of the original photo of the document.

• croppedDocumentImage (string): Base64 string of the cropped document image. This field is populated by the Document Crop component.

• processedDocumentImage (string): Base64 string of the cropped document image after post-processing was applied. This field is populated by the Result component.

On Capture Error

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

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

The error parameter is of type string.

On Capture Cancelled

This function is called when image capture was started, but then cancelled before completion. To hook onto the event, you may use the following code:

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

No parameter is provided to this function call.

On Before Upload

This function is called before the file upload window appears. To hook onto the event, you may use the following code:

component.onBeforeUpload = function() {
    // Your code here
    // component.setCorrelationId('your-id-here');
}

No parameter is provided to this function call.

On Take Photo

This function is invoked when the "Take Photo" button is clicked. To hook onto the event, you may use the following code:

component.onTakePhoto = function() {
    console.log('Take Photo clicked!');
}

No parameter is provided to this function call.

On View Privacy Policy

This function is invoked when the "View Our Privacy Policy" button is clicked. To hook onto the event, you may use the following code:

component.onViewPrivacyPolicy = function() {
    console.log('Privacy Policy clicked!');
}

No parameter is provided to this function call.

Styling

The prepare component is structured a follows:

<div class="sybrin-document-container sybrin-sdk-container">
    <div class="sybrin-document-halves sybrin-document-prompts-section">
        <div class="sybrin-document-half">
            <div class="sybrin-document-block sybrin-sdk-block sybrin-document-privacy-block">
                <div class="sybrin-document-block-icon">
                </div>
                <div class="sybrin-document-block-prompt">
                    Please prepare your document for capture
                </div>
                <div class="sybrin-document-block-button sybrin-sdk-block-button sybrin-document-privacy-button">
                    View Our <b>Privacy Policy</b>
                </div>
            </div>
        </div>
        <div class="sybrin-document-half">
            <div class="sybrin-document-block sybrin-sdk-block sybrin-document-guidelines-block">
            </div>
        </div>
    </div>
    <div class="sybrin-document-button-section sybrin-sdk-button-section sybrin-document-buttons-main">
        <button class="sybrin-document-upload sybrin-document-flow-button sybrin-sdk-flow-button sybrin-secondary">Upload Photo</button>
        <button class="sybrin-document-next sybrin-document-flow-button sybrin-sdk-flow-button">Take Photo</button>
    </div>
</div>

The classes and elements specified above may be used to freely style the prepare component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.

Styling implementation example:

HTML

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>

CSS

styles.css

.sybrin-document-flow-button {
    background: #963296;
}

Before Styling

After Styling

Translations

Currently, no translations are available.