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.

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. If a multi-sided document type is selected, a specialized multi file selection window will be presented:

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:

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

Optional:

allowCameraCapture (boolean): Sets whether or not the component should allow camera capture. If set to false, the Take Photo button will not be present. The default is true.
allowUpload (boolean): Sets whether or not the component should allow file uploads. If set to false, the Upload button will not be present. The default value is true.
correlationId (string): Unique identifier for the case that will be provided 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.
enableSendSms (boolean): Sets whether or not the "Send SMS" button should be visible when a mobile capture instance is active. Default false
readonlyMode (boolean): A flag that sets whether or not the component should be in read only mode. If set to true, button events will be disabled. 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.

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.

Initialize Mobile Capture With URL

initializeMobileCaptureWithUrl(url: string): void

Switches the component to mobile mode with a generated QR code using the provided URL.

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()
onSendSms(url: string)
onTakePhoto()
onViewPrivacyPolicy()

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
}

No parameter is passed to this function call.

On Before Upload

This function is called before the file upload window appears. It is recommended to use this function to set the correlationId of the component by calling setCorrelationId(). 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 passed to this function call.

On Mobile Capture Start

This function is called when the "Mobile Capture" button is clicked. To hook onto the event, you may use the following code:

component.onMobileCaptureStart = function() {
    console.log('Mobile Capture clicked!');
}

No parameter is passed to this function call.

On Mobile Capture Cancel

This function is called when the "Cancel" button is clicked while the component is in the mobile capture state. To hook onto the event, you may use the following code:

component.onMobileCaptureCancel = function() {
    console.log('Cancel clicked!');
}

No parameter is passed to this function call.

On Send SMS

This function is invoked when the "Send SMS" button is clicked during a mobile capture session. To hook onto the event, you may use the following code:

component.onSendSms = function(url) {
    console.log('Send SMS clicked! The URL is: ' + url);
    // Do your logic to trigger an API and send the URL to the user here
}

The url parameter is of type string and contains the unique link that the user must follow to continue with mobile capture.

On Take Photo

This function is called 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 passed to this function call.

On View Privacy Policy

This function is called 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 passed to this function call.

Styling

The prepare component is structured a follows:

<div class="sybrin-identity-container sybrin-sdk-container">
    <div class="sybrin-identity-halves sybrin-identity-prompts-section">
        <div class="sybrin-identity-half">
            <div class="sybrin-identity-block sybrin-sdk-block sybrin-identity-privacy-block">
                <div class="sybrin-identity-block-icon">
                </div>
                <div class="sybrin-identity-block-prompt sy-i-translation-31">
                    Your ID document photo <b>will be encrypted</b> and stored in our digital vault.
                </div>
                <div class="sybrin-identity-block-button sybrin-sdk-block-button sybrin-identity-privacy-button sy-i-translation-32">
                    View Our <b>Privacy Policy</b> 
                </div>
            </div>
        </div>
        <div class="sybrin-identity-half">
            <div class="sybrin-identity-block sybrin-sdk-block sybrin-identity-guidelines-block">
                <div class="sybrin-identity-block-icon">
                </div>
                <div class="sybrin-identity-block-prompt sy-i-translation-33">
                    Take a good <b>ID Document photo</b>.
                </div>
                <div class="sybrin-identity-block-button sybrin-sdk-block-button sybrin-identity-guidelines-button sy-i-translation-34">
                    View <b>Guidelines</b> 
                </div>
            </div>
        </div>
    </div>
    <div class="sybrin-identity-container sybrin-sdk-container sybrin-identity-qr-section sybrin-hidden">
        <div class="sybrin-identity-block sybrin-sdk-block">
            <canvas class="sybrin-qr-canvas"></canvas>
            <div class="sybrin-identity-block-prompt">
                <p class="sy-i-translation-35">Using your mobile device, please scan the above QR code or manually navigate to the following URL in your mobile browser:</p>
                <p class="sybrin-mobile-capture-url"></p>
                <p class="sy-i-translation-36">The flow will continue after running identity capture and clicking the "Complete Step" button on your mobile device</p>
            </div>
            <div class="sybrin-identity-button-section sybrin-sdk-button-section">
                <button class="sybrin-identity-cancel-qr sybrin-identity-flow-button sybrin-sdk-flow-button sybrin-secondary sy-i-translation-37">Cancel</button>
                <button class="sybrin-identity-copy sybrin-identity-flow-button sybrin-sdk-flow-button sybrin-secondary sy-i-translation-38">Copy Link</button>
                <button class="sybrin-identity-send-sms sybrin-hidden sybrin-identity-flow-button sybrin-sdk-flow-button sybrin-secondary sy-b-translation-46">Send SMS</button>
            </div>
        </div>
    </div>
    <div class="sybrin-identity-button-section sybrin-sdk-button-section sybrin-identity-buttons-main">
    </div>
</div>

When the component switches to mobile capture mode, the sybrin-identity-qr-section element is shown and the sybrin-identity-prompts-section element is hidden. By default and when cancelling mobile, the reverse is true.

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:

index.html

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

styles.css

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

Translations

This component is affected by the following translation keys:

Translation Key	Description	Default/Source
sy-i-translation-31	Prompt text with explanation regarding ID document photo	Your ID document photo will be encrypted and stored in our digital vault.
sy-i-translation-32	Caption of the button that triggers the event to view privacy policy	View Our Privacy Policy
sy-i-translation-35	Scan QR instruction that is displayed when the component is in mobile capture mode	Using your mobile device, please scan the above QR code or manually navigate to the following URL in your mobile browser:
sy-i-translation-36	Additional instruction when the component is in mobile capture mode	The flow will continue after running identity capture and clicking the "Complete Step" button on your mobile device
sy-i-translation-37	Caption of the button that cancels mobile capture	Cancel
sy-i-translation-38	Caption of the button that copies the mobile link to clipboard	Copy Link
sy-i-translation-39	Text to temporarily change the copy button caption to once a link is copied	Copied!
sy-i-translation-40	Text to temporarily change the copy button caption to once a link fails to copy	Failed to copy...
sy-i-translation-50	Caption of the button that launches the file picker for document photo upload	Upload Photo
sy-i-translation-51	Caption of the button that starts mobile capture mode	Mobile Capture
sy-i-translation-52	Caption of the button that proceeds to the document scan page	Take Photo
sy-i-translation-54	Title displayed within the guidelines block	Document Guidelines
sy-i-translation-56	Lighting conditions guideline	Ensure well-balanced lighting
sy-i-translation-57	Alignment guideline	Ensure correct document alignment
sy-i-translation-58	Background guideline	Try to avoid white surface background
sy-i-translation-73	Prompt to display if no front file has been selected	No front file selected
sy-i-translation-74	Prompt to display if no back file has been selected	No back file selected
sy-i-translation-75	Caption of the button that cancels multi-sided file upload	Cancel
sy-i-translation-76	Caption of button to complete and upload when using multi-sided file upload	Upload
sy-i-translation-77	Caption of button to select front ID image for upload	Select Front
sy-i-translation-78	Caption of button to select back ID image for upload	Select Back
sy-i-translation-79	Caption of button to change the front ID image for upload	Change Front
sy-i-translation-80	Caption of button to change the back ID image for upload	Change Back
sy-i-translation-81	Upload file type guideline	For uploads, use PNG, JPG, JPEG or PDF
sy-i-translation-337	Caption of the button that sends the mobile capture link via SMS	Send SMS

Translation Key

Description

Default/Source

sy-i-translation-31

Prompt text with explanation regarding ID document photo

Your ID document photo will be encrypted and stored in our digital vault.

sy-i-translation-32

Caption of the button that triggers the event to view privacy policy

View Our Privacy Policy

sy-i-translation-35

Scan QR instruction that is displayed when the component is in mobile capture mode

Using your mobile device, please scan the above QR code or manually navigate to the following URL in your mobile browser:

sy-i-translation-36

Additional instruction when the component is in mobile capture mode

The flow will continue after running identity capture and clicking the "Complete Step" button on your mobile device

sy-i-translation-37

Caption of the button that cancels mobile capture

Cancel

sy-i-translation-38

Caption of the button that copies the mobile link to clipboard

Copy Link

sy-i-translation-39

Text to temporarily change the copy button caption to once a link is copied

Copied!

sy-i-translation-40

Text to temporarily change the copy button caption to once a link fails to copy

Failed to copy...

sy-i-translation-50

Caption of the button that launches the file picker for document photo upload

Upload Photo

sy-i-translation-51

Caption of the button that starts mobile capture mode

Mobile Capture

sy-i-translation-52

Caption of the button that proceeds to the document scan page

Take Photo

sy-i-translation-54

Title displayed within the guidelines block

Document Guidelines

sy-i-translation-56

Lighting conditions guideline

Ensure well-balanced lighting

sy-i-translation-57

Alignment guideline

Ensure correct document alignment

sy-i-translation-58

Background guideline

Try to avoid white surface background

sy-i-translation-73

Prompt to display if no front file has been selected

No front file selected

sy-i-translation-74

Prompt to display if no back file has been selected

No back file selected

sy-i-translation-75

Caption of the button that cancels multi-sided file upload

Cancel

sy-i-translation-76

Caption of button to complete and upload when using multi-sided file upload

Upload

sy-i-translation-77

Caption of button to select front ID image for upload

Select Front

sy-i-translation-78

Caption of button to select back ID image for upload

Select Back

sy-i-translation-79

Caption of button to change the front ID image for upload

Change Front

sy-i-translation-80

Caption of button to change the back ID image for upload

Change Back

sy-i-translation-81

Upload file type guideline

For uploads, use PNG, JPG, JPEG or PDF

sy-i-translation-337

Caption of the button that sends the mobile capture link via SMS

Send SMS

Last updated 5 months ago