Document Select

This component can be found under the Sybrin.Identity namespace and is called DocumentSelectComponent.

Full name: Sybrin.Identity.DocumentSelectComponent.

It is a component that provides basic document selection functionality in the form of a simple UI. The Web SDK requires a document type for data extraction and it's recommended that you use this component to obtain said document type.

With default styling, the document select component appears as follows:

Document Select Component

The "Next" button will remain disabled until a document has been selected. Selection is confirmed upon clicking the "Next" button and then the onDocumentSelected event will fire.

Initialization

The document select component can be initialized using the following code:

HTML

<div id='document-select'></div>

JavaScript

// Option 1: Passing an id
var component = new Sybrin.Identity.DocumentSelectComponent({ 
    id: 'document-select'
});

// Option 2: Passing a DOM element
var element = document.getElementById('document-select');
var component = new Sybrin.identity.DocumentSelectComponent({ 
    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 'document-select' 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 document select 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.

Optional:

• countryCode (string): The Alpha-3 standard country code to filter document selection by. If a country code is passed down, only documents supported by the specified country will be shown. Please see country overrides & filtering for a list of accepted values.

• defaultDocumentType (string): The type of document that must be selected by default.

• documentTypes (Sybrin.Identity.DocumentType[]): Explicit document type filter. Please see document type overrides & filtering for details.

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

Document Type Overrides & Filtering

When creating an instance of the document select component, the SDK allows for an Alpha-3 standard countryCodeparameter, which will be used to filter document types based on the country. Additionally, the SDK allows for a documentTypes parameter which can be used for more specific override options. The parameter is a collection of objects where each instance has the properties frontThreshold, backThreshold and enabled.

• id (string): The unique identifier (document type ID) used to target a document type to override.

• enabled (boolean): Can be used to filter out the targeted document type (if set to false)

• frontThreshold (number): The confidence threshold value to use when running document detection on the front image. A lower value modifies detection to be more sensitive. A higher level makes it less sensitive, up to a maximum of 100.

• backThreshold (number): The confidence threshold value to use when running document detection on the back image if applicable. A lower value modifies detection to be more sensitive. A higher level makes it less sensitive, up to a maximum of 100.

Supported document type IDs are:

• Ghana

  • Passport: 'ghapassport' (Document type name = 'passport')

• Kenya

  • Passport: 'kenpassport' (Document type name = 'passport')

  • ID Card: 'kenidcard' (Document type name = 'idcard')

• Malawi

  • Passport: 'mwipassport' (Document type name = 'passport')

• Mozambique

  • Passport: 'mozpassport' (Document type name = 'passport')

  • ID Card: 'mozidcard' (Document type name = 'idcard')

• South Africa

  • Passport: 'zafpassport' (Document type name = 'passport')

  • ID Card: 'zafidcard' (Document type name = 'idcard')

  • Green Book: 'zafgreenbook' (Document type name = 'greenbook')

• Uganda

  • Passport: 'ugapassport' (Document type name = 'passport')

  • ID Card: 'ugaidcard' (Document type name = 'idcard')

• Zimbabwe

  • Passport: 'zwepassport' (Document type name = 'passport')

• Philippines

  • Passport: 'phlpassport' (Document type name = 'passport')

  • ID Card: 'phlidcard' (Document type name = 'idcard')

  • Divers License: 'phldriverslicense' (Document type name = 'driverslicense')

  • Seaman's Book: 'phlseamansbook' (Document type name = 'seamansbook')

  • Seaman's ID: 'phlsid' (Document type name = 'sid')

  • Postal ID: 'phlpostalid' (Document type name = 'postalid')

  • Social Security: 'phlsocialsecurity' (Document type name = 'socialsecurity')

  • Unified Multi Purpose: 'phlunifiedmultipurpose' (Document type name = 'unifiedmultipurpose')

  • Firearms License: 'phlfirearmslicense' (Document type name = 'firearmslicense')

  • Old PRC ID (Before September 2019): 'phlprofessionalregulationsblue' (Document type name = 'professionalregulations')

  • PRC ID (After September 2019): 'phlprofessionalregulations' (Document type name = 'professionalregulations')

  • Integrated Bar: 'phlintegratedbar' (Document type name = 'integratedbar')

  • Insurance Card: 'phlinsurancecard' (Document type name = 'insurancecard')

  • Health Insurance Card: 'phlhealthinsurancecard' (Document type name = 'healthinsurancecard')

• Other

  • Passport

The generic document type IDs that would apply globally correspond to the document type names. They are:

• Passport: 'passport'

• ID Card: 'idcard'

• Green Book: 'greenbook'

• Driver's License: 'driverslicense'

• Seaman's Book: 'seamansbook'

• Seaman's ID: 'sid'

• Postal ID: 'postalid'

• Social Security: 'socialsecurity'

• Unified Multi Purpose ID: 'unifiedmultipurpose'

• Firearms License: 'firearmslicense'

• Professional Regulations Commission ID: 'professionalregulations'

• Integrated Bar of the Philippines ID: 'integratedbar'

• Insurance Card: 'insurancecard'

• Health Insurance Card: 'healthinsurancecard'

Advanced filtering and override example:

JavaScript

var component = new Sybrin.Identity.DocumentSelectComponent({
    id: 'viewport',
    countryCode: 'ZAF',
    documentTypes: [
        new Sybrin.Identity.DocumentType({ id: 'zafgreenbook', enabled: false })
    ]
});

By specifying countryCode as 'ZAF', it will only show document types that are supported by South Africa. The document type instance filters 'zafgreenbook' (South African Green Book) out so that it doesn't appear as part of the list even though it is a supported South African document.

Destruction

The document select 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 document select component offers one event for reacting to document selection. To hook onto the event, simply assign a function to it.

The following option is available:

• onDocumentSelected(documentTypeName: string, documentTypeId: string)

On Document Selected

This function is called when a document is selected and provides the selected document's type name and, if applicable, document type ID as arguments. The ID will only be passed as an argument if the country code is known to the component at the time of selection. To hook onto the event, you may use the following code:

component.onDocumentSelected = function(documentTypeName, documentTypeId) {
    console.log('The selected document type name and ID are: ', documentTypeName, documentTypeId);
}

The documentTypeName parameter is of type string.

The documentTypeId parameter is of type string.

Styling

The document select component is structured a follows:

<div class="sybrin-identity-container sybrin-sdk-container">
    <div class="sybrin-identity-component-section sybrin-sdk-component-section">
        <div class="sybrin-identity-list sybrin-sdk-list sybrin-custom-scrollbar">
            <div class="sybrin-identity-card sybrin-document-phldriverslicense sybrin-identity-selected">
                <div class="sybrin-identity-icon">
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="car" class="svg-inline--fa fa-car fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path fill="currentColor" d=""></path>
                    </svg>
                </div>
                <div class="sybrin-identity-text">
                    <p class="sybrin-identity-card-title sy-i-translation-4">
                        Driver's License
                    </p>
                    <p class="sybrin-identity-card-subtitle sy-i-translation-18">
                        Front
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="sybrin-identity-button-section sybrin-sdk-button-section">
        <button disabled="disabled" class="sybrin-identity-next sybrin-identity-flow-button sybrin-sdk-flow-button sy-i-translation-30">Next</button>
    </div>
</div>

The classes and elements specified above may be used to freely style the document select 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.

The element with the sybrin-identity-card class repeats for every document type option. The above example only uses Driver's License as an example, however the same element would repeat for each document type option in the list, using the relevant document type ID for the CSS class and the relevant document name and description in the display text.

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-identity-flow-button {
    background: #963296;
    border: 2px solid #963296;
}

.sybrin-identity-selected {
    background-color: #963296;
    box-shadow: none;
}

Before Styling

After Styling

Translations

This component is affected by the following translation keys:

Translation Key	Description	Default/Source
sy-i-translation-1	Display name for passport	Passport
sy-i-translation-2	Display name for identity card	Identity Card
sy-i-translation-3	Display name for green book	Green Book
sy-i-translation-4	Display name for driver's license	Driver's License
sy-i-translation-5	Display name for seaman's book	Seaman's Book
sy-i-translation-6	Display name for seaman's identity	Seaman's Identity
sy-i-translation-7	Display name for postal ID	Postal ID
sy-i-translation-8	Display name for social security	Social Security
sy-i-translation-9	Display name for unified multi purpose ID	Unified Multi Purpose
sy-i-translation-10	Display name for firearms license	Firearms License
sy-i-translation-11	Display name for old professional regulations ID	PRC ID (Old)
sy-i-translation-12	Display name for new professional regulations ID	New PRC ID
sy-i-translation-13	Display name for integrated bar ID	Integrated Bar
sy-i-translation-14	Display name for insurance card	Insurance Card
sy-i-translation-15	Display name for health insurance card	Health Insurance Card
sy-i-translation-16	Subtitle prompt for documents that require the face photo page to be scanned	Face photo page
sy-i-translation-17	Subtitle prompt for documents that require front and back to be scanned	Front and back
sy-i-translation-18	Subtitle prompt for documents that require only the front to be scanned	Front
sy-i-translation-30	Caption of the button that proceeds to the next step	Next
sy-i-translation-82	Display name for military ID card	Military ID Card