Country Select | Identity Web SDK

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

Full name: Sybrin.Identity.CountrySelectComponent.

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

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

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

Initialization

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

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

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

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

defaultCountry (string): The country code of the country that must be selected by default.
documentTypeName (string): The document type name to filter country selection by. If a document type name is passed down, only countries that support the specified document type will be shown. Please see document type overrides & filtering for a list of accepted values.
countries (Sybrin.Identity.Country[]): Explicit country filter. Please see country overrides & filtering for details.
priorityCountryCodes (string[]): An array of strings containing ISO-3 standard country codes. These codes are used to designate priority countries, which will be prominently displayed at the top of the list in the order they appear in this array.
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.

Country Overrides & Filtering

When creating an instance of the country select component, the SDK allows for a documentTypeNamestring parameter, which will be used to filter countries based on the document type. Additionally, the SDK allows for a countries parameter which can be used for more specific override options. The countries parameter is a collection of Sybrin.Identity.Country where each instance has the properties code, name and enabled.

code (string): The unique identifier (Alpha-3 standard country code) used to target a country to override.
name (string): Can be used to override the display name of the targeted country.
enabled (boolean): Can be used to filter out the targeted country (if set to false)

Advanced filtering and override example:

var component = new Sybrin.Identity.CountrySelectComponent({
    id: 'viewport',
    documentTypeName: 'idcard',
    countries: [
        new Sybrin.Identity.Country({ code: 'ZAF', name: 'Southern Africa' }),
        new Sybrin.Identity.Country({ code: 'UGA', enabled: false })
    ]
});

By specifying documentTypeName as 'idcard', it will only show countries that support the ID Card document type. The first country instance in the countries collection overrides 'ZAF', which is South Africa, to display as Southern Africa instead. The second instance filters 'UGA', which is Uganda, out so that it doesn't appear as part of the list even though the Ugandan ID Card document type is supported.

Destruction

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

The following option is available:

onCountrySelected(alpha3Code: string, alpha2Code: string, numericCode: string)

On Country Selected

This function is called when a country is selected. To hook onto the event, you may use the following code:

component.onCountrySelected = function(alpha3Code, alpha2Code, numericCode) {
    console.log('The selected country Alpha-3 code is: ', alpha3Code);
    console.log('The selected country Alpha-2 code is: ', alpha2Code);
    console.log('The selected country numeric code is: ', numericCode);
}

The alpha3Code, alpha2Code and numericCode parameters are all of type string.

Styling

The country select component is structured a follows:

<div class="sybrin-identity-container sybrin-sdk-container sybrin-identity-country-select">
    <div class="sybrin-identity-component-section sybrin-sdk-component-section">
        <input id="sybrin-identity-searchbox" type="text" class="sybrin-identity-searchbox sybrin-sdk-searchbox" placeholder=""/>
        <div class="sybrin-identity-list sybrin-sdk-list sybrin-custom-scrollbar">
            <div class="sybrin-identity-card sybrin-sdk-card sybrin-country-KEN">
                <div class="sybrin-identity-card-image">
                    <img src="data:image/png;charset=utf-8;base64,">
                </div>
                <div class="sybrin-identity-text sy-i-translation-20">
                    Kenya
                </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-28">Next</button>
    </div>
</div>

The classes and elements specified above may be used to freely style the country 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 country option. The above example only uses Kenya as an example, however the same element would repeat for each country option in the list, using the relevant country code for the CSS class and the relevant country name in the display text.

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;
}

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

Translations

This component is affected by the following translation keys:

Translation Key

Description

Default/Source

sy-i-translation-19

Display name for Ghana

Ghana

sy-i-translation-20

Display name for Kenya

Kenya

sy-i-translation-21

Display name for Malawi

Malawi

sy-i-translation-22

Display name for Mozambique

Mozambique

sy-i-translation-23

Display name for Philippines

Philippines

sy-i-translation-24

Display name for South Africa

South Africa

sy-i-translation-25

Display name for Uganda

Uganda

sy-i-translation-26

Display name for Zimbabwe

Zimbabwe

sy-i-translation-28

Caption of the button that proceeds to the next step

sy-i-translation-86

Display name for United States of America

United States of America

sy-i-translation-90

Display name for Afghanistan

Afghanistan

sy-i-translation-91

Display name for Albania

Albania

sy-i-translation-92

Display name for Algeria

Algeria

sy-i-translation-93

Display name for Samoa

Samoa

sy-i-translation-94

Display name for Andorra

Andorra

sy-i-translation-95

Display name for Angola

Angola

sy-i-translation-96

Display name for Anguilla

Anguilla

sy-i-translation-97

Display name for Antarctica

Antarctica

sy-i-translation-98

Display name for Antigua and Barbuda

Antigua and Barbuda

sy-i-translation-99

Display name for Argentina

Argentina

sy-i-translation-100

Display name for Armenia

Armenia

sy-i-translation-101

Display name for Aruba

Aruba

sy-i-translation-102

Display name for Australia

Australia

sy-i-translation-103

Display name for Austria

Austria

sy-i-translation-104

Display name for Azerbaijan

Azerbaijan

sy-i-translation-105

Display name for Bahamas

Bahamas

sy-i-translation-106

Display name for Bahrain

Bahrain

sy-i-translation-107

Display name for Bangladesh

Bangladesh

sy-i-translation-108

Display name for Barbados

Barbados

sy-i-translation-109

Display name for Belarus

Belarus

sy-i-translation-110

Display name for Belgium

Belgium

sy-i-translation-111

Display name for Belize

Belize

sy-i-translation-112

Display name for Benin

Benin

sy-i-translation-113

Display name for Bermuda

Bermuda

sy-i-translation-114

Display name for Bhutan

Bhutan

sy-i-translation-115

Display name for Plurinational State of Bolivia

Plurinational State of Bolivia

sy-i-translation-116

Display name for Bonaire, Sint Eustatius and Saba

Bonaire, Sint Eustatius and Saba

sy-i-translation-117

Display name for Bosnia and Herzegovina

Bosnia and Herzegovina

sy-i-translation-118

Display name for Botswana

Botswana

sy-i-translation-119

Display name for Bouvet Island

Bouvet Island

sy-i-translation-120

Display name for Brazil

Brazil

sy-i-translation-121

Display name for British Indian Ocean Territory

British Indian Ocean Territory

sy-i-translation-122

Display name for Brunei Darussalam

Brunei Darussalam

sy-i-translation-123

Display name for Bulgaria

Bulgaria

sy-i-translation-124

Display name for Burkina Faso

Burkina Faso

sy-i-translation-125

Display name for Burundi

Burundi

sy-i-translation-126

Display name for Cabo Verde

Cabo Verde

sy-i-translation-127

Display name for Cambodia

Cambodia

sy-i-translation-128

Display name for Cameroon

Cameroon

sy-i-translation-129

Display name for Canada

Canada

sy-i-translation-130

Display name for Cayman Islands

Cayman Islands

sy-i-translation-131

Display name for Central African Republic

Central African Republic

sy-i-translation-132

Display name for Chad

Chad

sy-i-translation-133

Display name for Chile

Chile

sy-i-translation-134

Display name for China

China

sy-i-translation-135

Display name for Christmas Island

Christmas Island

sy-i-translation-136

Display name for Cocos (Keeling) Islands

Cocos (Keeling) Islands

sy-i-translation-137

Display name for Colombia

Colombia

sy-i-translation-138

Display name for Comoros

Comoros

sy-i-translation-139

Display name for Democratic Republic of the Congo

Democratic Republic of the Congo

sy-i-translation-140

Display name for Congo (Congo-Brazzaville)

Congo (Congo-Brazzaville)

sy-i-translation-141

Display name for Cook Islands

Cook Islands

sy-i-translation-142

Display name for Costa Rica

Costa Rica

sy-i-translation-143

Display name for Croatia

Croatia

sy-i-translation-144

Display name for Cuba

Cuba

sy-i-translation-145

Display name for Curaçao

Curaçao

sy-i-translation-146

Display name for Cyprus

Cyprus

sy-i-translation-147

Display name for Czechia (Czech Republic)

Czechia (Czech Republic)

sy-i-translation-148

Display name for Côte d'Ivoire

Côte d'Ivoire

sy-i-translation-149

Display name for Denmark

Denmark

sy-i-translation-150

Display name for Djibouti

Djibouti

sy-i-translation-151

Display name for Dominica

Dominica

sy-i-translation-152

Display name for Dominican Republic

Dominican Republic

sy-i-translation-153

Display name for Ecuador

Ecuador

sy-i-translation-154

Display name for Egypt

Egypt

sy-i-translation-155

Display name for El Salvador

El Salvador

sy-i-translation-156

Display name for Equatorial Guinea

Equatorial Guinea

sy-i-translation-157

Display name for Eritrea

Eritrea

sy-i-translation-158

Display name for Estonia

Estonia

sy-i-translation-159

Display name for Eswatini

Eswatini

sy-i-translation-160

Display name for Ethiopia

Ethiopia

sy-i-translation-161

Display name for Falkland Islands (Islas Malvinas)

Falkland Islands (Islas Malvinas)

sy-i-translation-162

Display name for Faroe Islands

Faroe Islands

sy-i-translation-163

Display name for Fiji

Fiji

sy-i-translation-164

Display name for Finland

Finland

sy-i-translation-165

Display name for France

France

sy-i-translation-166

Display name for French Guiana

French Guiana

sy-i-translation-167

Display name for French Polynesia

French Polynesia

sy-i-translation-168

Display name for French Southern and Antarctic Lands

French Southern and Antarctic Lands

sy-i-translation-169

Display name for Gabon

Gabon

sy-i-translation-170

Display name for Gambia

Gambia

sy-i-translation-171

Display name for Georgia

Georgia

sy-i-translation-172

Display name for Germany

Germany

sy-i-translation-173

Display name for Gibraltar

Gibraltar

sy-i-translation-174

Display name for Greece

Greece

sy-i-translation-175

Display name for Greenland

Greenland

sy-i-translation-176

Display name for Grenada

Grenada

sy-i-translation-177

Display name for Guadeloupe

Guadeloupe

sy-i-translation-178

Display name for Guam

Guam

sy-i-translation-179

Display name for Guatemala

Guatemala

sy-i-translation-180

Display name for Guernsey

Guernsey

sy-i-translation-181

Display name for Guinea

Guinea

sy-i-translation-182

Display name for Guinea-Bissau

Guinea-Bissau

sy-i-translation-183

Display name for Guyana

Guyana

sy-i-translation-184

Display name for Haiti

Haiti

sy-i-translation-185

Display name for Heard Island and McDonald Islands

Heard Island and McDonald Islands

sy-i-translation-186

Display name for Holy See

Holy See

sy-i-translation-187

Display name for Honduras

Honduras

sy-i-translation-188

Display name for Hong Kong

Hong Kong

sy-i-translation-189

Display name for Hungary

Hungary

sy-i-translation-190

Display name for Iceland

Iceland

sy-i-translation-191

Display name for India

India

sy-i-translation-192

Display name for Indonesia

Indonesia

sy-i-translation-193

Display name for Iran

Iran

sy-i-translation-194

Display name for Iraq

Iraq

sy-i-translation-195

Display name for Ireland

Ireland

sy-i-translation-196

Display name for Isle of Man

Isle of Man

sy-i-translation-197

Display name for Israel

Israel

sy-i-translation-198

Display name for Italy

Italy

sy-i-translation-199

Display name for Jamaica

Jamaica

sy-i-translation-200

Display name for Japan

Japan

sy-i-translation-201

Display name for Jersey

Jersey

sy-i-translation-202

Display name for Jordan

Jordan

sy-i-translation-203

Display name for Kazakhstan

Kazakhstan

sy-i-translation-204

Display name for Kiribati

Kiribati

sy-i-translation-205

Display name for North Korea

North Korea

sy-i-translation-206

Display name for South Korea

South Korea

sy-i-translation-207

Display name for Kuwait

Kuwait

sy-i-translation-208

Display name for Kyrgyzstan

Kyrgyzstan

sy-i-translation-209

Display name for Lao People's Democratic Republic

Lao People's Democratic Republic

sy-i-translation-210

Display name for Latvia

Latvia

sy-i-translation-211

Display name for Lebanon

Lebanon

sy-i-translation-212

Display name for Lesotho

Lesotho

sy-i-translation-213

Display name for Liberia

Liberia

sy-i-translation-214

Display name for Libya

Libya

sy-i-translation-215

Display name for Liechtenstein

Liechtenstein

sy-i-translation-216

Display name for Lithuania

Lithuania

sy-i-translation-217

Display name for Luxembourg

Luxembourg

sy-i-translation-218

Display name for Macao

Macao

sy-i-translation-219

Display name for Madagascar

Madagascar

sy-i-translation-220

Display name for Malaysia

Malaysia

sy-i-translation-221

Display name for Maldives

Maldives

sy-i-translation-222

Display name for Mali

Mali

sy-i-translation-223

Display name for Malta

Malta

sy-i-translation-224

Display name for Marshall Islands

Marshall Islands

sy-i-translation-225

Display name for Martinique

Martinique

sy-i-translation-226

Display name for Mauritania

Mauritania

sy-i-translation-227

Display name for Mauritius

Mauritius

sy-i-translation-228

Display name for Mayotte

Mayotte

sy-i-translation-229

Display name for Mexico

Mexico

sy-i-translation-230

Display name for Micronesia

Micronesia

sy-i-translation-231

Display name for Moldova

Moldova

sy-i-translation-232

Display name for Monaco

Monaco

sy-i-translation-233

Display name for Mongolia

Mongolia

sy-i-translation-234

Display name for Montenegro

Montenegro

sy-i-translation-235

Display name for Montserrat

Montserrat

sy-i-translation-236

Display name for Morocco

Morocco

sy-i-translation-237

Display name for Myanmar

Myanmar

sy-i-translation-238

Display name for Namibia

Namibia

sy-i-translation-239

Display name for Nauru

Nauru

sy-i-translation-240

Display name for Nepal

Nepal

sy-i-translation-241

Display name for Netherlands

Netherlands

sy-i-translation-242

Display name for New Caledonia

New Caledonia

sy-i-translation-243

Display name for New Zealand

New Zealand

sy-i-translation-244

Display name for Nicaragua

Nicaragua

sy-i-translation-245

Display name for Niger

Niger

sy-i-translation-246

Display name for Nigeria

Nigeria

sy-i-translation-247

Display name for Niue

Niue

sy-i-translation-248

Display name for Norfolk Island

Norfolk Island

sy-i-translation-249

Display name for Northern Mariana Islands

Northern Mariana Islands

sy-i-translation-250

Display name for Norway

Norway

sy-i-translation-251

Display name for Oman

Oman

sy-i-translation-252

Display name for Pakistan

Pakistan

sy-i-translation-253

Display name for Palau

Palau

sy-i-translation-254

Display name for Palestine

Palestine

sy-i-translation-255

Display name for Panama

Panama

sy-i-translation-256

Display name for Papua New Guinea

Papua New Guinea

sy-i-translation-257

Display name for Paraguay

Paraguay

sy-i-translation-258

Display name for Peru

Peru

sy-i-translation-259

Display name for Pitcairn

Pitcairn

sy-i-translation-260

Display name for Poland

Poland

sy-i-translation-261

Display name for Portugal

Portugal

sy-i-translation-262

Display name for Puerto Rico

Puerto Rico

sy-i-translation-263

Display name for Qatar

Qatar

sy-i-translation-264

Display name for Republic of North Macedonia

Republic of North Macedonia

sy-i-translation-265

Display name for Romania

Romania

sy-i-translation-266

Display name for Russian Federation

Russian Federation

sy-i-translation-267

Display name for Rwanda

Rwanda

sy-i-translation-268

Display name for Réunion

Réunion

sy-i-translation-269

Display name for Saint Barthélemy

Saint Barthélemy

sy-i-translation-270

Display name for Saint Helena, Ascension and Tristan da Cunha

Saint Helena, Ascension and Tristan da Cunha

sy-i-translation-271

Display name for Saint Kitts and Nevis

Saint Kitts and Nevis

sy-i-translation-272

Display name for Saint Lucia

Saint Lucia

sy-i-translation-273

Display name for Saint Martin

Saint Martin

sy-i-translation-274

Display name for Saint Pierre and Miquelon

Saint Pierre and Miquelon

sy-i-translation-275

Display name for Saint Vincent and the Grenadines

Saint Vincent and the Grenadines

sy-i-translation-276

Display name for Samoa

Samoa

sy-i-translation-277

Display name for San Marino

San Marino

sy-i-translation-278

Display name for São Tomé and Príncipe

São Tomé and Príncipe

sy-i-translation-279

Display name for Saudi Arabia

Saudi Arabia

sy-i-translation-280

Display name for Senegal

Senegal

sy-i-translation-281

Display name for Serbia

Serbia

sy-i-translation-282

Display name for Seychelles

Seychelles

sy-i-translation-283

Display name for Sierra Leone

Sierra Leone

sy-i-translation-284

Display name for Singapore

Singapore

sy-i-translation-285

Display name for Sint Maarten

Sint Maarten

sy-i-translation-286

Display name for Slovakia

Slovakia

sy-i-translation-287

Display name for Slovenia

Slovenia

sy-i-translation-288

Display name for Solomon Islands

Solomon Islands

sy-i-translation-289

Display name for Somalia

Somalia

sy-i-translation-290

Display name for South Georgia and the South Sandwich Islands

South Georgia and the South Sandwich Islands

sy-i-translation-291

Display name for South Sudan

South Sudan

sy-i-translation-292

Display name for Spain

Spain

sy-i-translation-293

Display name for Sri Lanka

Sri Lanka

sy-i-translation-294

Display name for Sudan

Sudan

sy-i-translation-295

Display name for Suriname

Suriname

sy-i-translation-296

Display name for Svalbard and Jan Mayen

Svalbard and Jan Mayen

sy-i-translation-297

Display name for Sweden

Sweden

sy-i-translation-298

Display name for Switzerland

Switzerland

sy-i-translation-299

Display name for Syria

Syria

sy-i-translation-300

Display name for Taiwan

Taiwan

sy-i-translation-301

Display name for Tajikistan

Tajikistan

sy-i-translation-302

Display name for Tanzania

Tanzania

sy-i-translation-303

Display name for Thailand

Thailand

sy-i-translation-304

Display name for Timor-Leste

Timor-Leste

sy-i-translation-305

Display name for Togo

Togo

sy-i-translation-306

Display name for Tokelau

Tokelau

sy-i-translation-307

Display name for Tonga

Tonga

sy-i-translation-308

Display name for Trinidad and Tobago

Trinidad and Tobago

sy-i-translation-309

Display name for Tunisia

Tunisia

sy-i-translation-310

Display name for Turkey

Turkey

sy-i-translation-311

Display name for Turkmenistan

Turkmenistan

sy-i-translation-312

Display name for Turks and Caicos Islands

Turks and Caicos Islands

sy-i-translation-313

Display name for Tuvalu

Tuvalu

sy-i-translation-314

Display name for Ukraine

Ukraine

sy-i-translation-315

Display name for United Arab Emirates

United Arab Emirates

sy-i-translation-316

Display name for United Kingdom

United Kingdom

sy-i-translation-317

Display name for United States Minor Outlying Islands

United States Minor Outlying Islands

sy-i-translation-318

Display name for Uruguay

Uruguay

sy-i-translation-319

Display name for Uzbekistan

Uzbekistan

sy-i-translation-320

Display name for Vanuatu

Vanuatu

sy-i-translation-321

Display name for Venezuela

Venezuela

sy-i-translation-322

Display name for Vietnam

Vietnam

sy-i-translation-323

Display name for British Virgin Islands

British Virgin Islands

sy-i-translation-324

Display name for U.S. Virgin Islands

U.S. Virgin Islands

sy-i-translation-325

Display name for Wallis and Futuna

Wallis and Futuna

sy-i-translation-326

Display name for Western Sahara

Western Sahara

sy-i-translation-327

Display name for Yemen

Yemen

sy-i-translation-328

Display name for Zambia

Zambia

sy-i-translation-329

Display name for Åland Islands

Åland Islands

sy-i-translation-330

Search prompt text

Search...

sy-i-translation-331

Feedback to display when search returns no items

Search returned no results