UNPKG

@bynn-intelligence/websdk

Version:

JavaScript SDK for Bynn.com ID verification service

1,948 lines (1,926 loc) 53.4 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.createBynn = {})); })(this, (function (exports) { 'use strict'; const DEFAULT_HOST = 'https://api.bynn.com'; const STYLES = { form: 'bynn-form', input: 'bynn-input', inputWrapper: 'bynn-input-wrapper', label: 'bynn-label', submit: 'bynn-submit', description: 'bynn-description' }; async function createSession(host, kycLevel, apiKey, params, i18n) { var _a, _b, _c, _d, _e, _f, _g, _h, _j; try { if (!params || !params.person) { throw new Error('Invalid params: person data is required'); } const response = await fetch(`${host}/v1/sessions`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}`, 'x-origin': 'js-sdk' }, body: JSON.stringify({ kyc_level: kycLevel, first_name: ((_a = params.person) === null || _a === void 0 ? void 0 : _a.first_name) || ((_b = params.person) === null || _b === void 0 ? void 0 : _b.givenName) || '', last_name: ((_c = params.person) === null || _c === void 0 ? void 0 : _c.last_name) || ((_d = params.person) === null || _d === void 0 ? void 0 : _d.lastName) || '', unique_id: ((_e = params.person) === null || _e === void 0 ? void 0 : _e.unique_id) || '', phone_number: ((_f = params.person) === null || _f === void 0 ? void 0 : _f.phone_number) || '', phone_country: ((_g = params.person) === null || _g === void 0 ? void 0 : _g.phone_country) || '', email_address: ((_h = params.person) === null || _h === void 0 ? void 0 : _h.email_address) || '', i18n: i18n || undefined, vendor_data: params.vendorData || '' }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(((_j = errorData.error) === null || _j === void 0 ? void 0 : _j.message) || 'Session creation failed'); } const data = await response.json(); console.log('Session response:', data); return { url: data.url, sessionId: data.session_id }; } catch (error) { console.error('Session creation error:', error); throw error; } } function createElement(tag, className, attributes = {}) { const element = document.createElement(tag); if (className) { element.className = className; } Object.assign(element, attributes); return element; } function getContainer(containerId) { const container = document.getElementById(containerId); if (!container) { throw new Error(`Element ${containerId} does not exist`); } return container; } var countriesData = [ { name: "Afghanistan", dial_code: "+93", emoji: "🇦🇫", code: "AF" }, { name: "Aland Islands", dial_code: "+358", emoji: "🇦🇽", code: "AX" }, { name: "Albania", dial_code: "+355", emoji: "🇦🇱", code: "AL" }, { name: "Algeria", dial_code: "+213", emoji: "🇩🇿", code: "DZ" }, { name: "AmericanSamoa", dial_code: "+1684", emoji: "🇦🇸", code: "AS" }, { name: "Andorra", dial_code: "+376", emoji: "🇦🇩", code: "AD" }, { name: "Angola", dial_code: "+244", emoji: "🇦🇴", code: "AO" }, { name: "Anguilla", dial_code: "+1264", emoji: "🇦🇮", code: "AI" }, { name: "Antarctica", dial_code: "+672", emoji: "🇦🇶", code: "AQ" }, { name: "Antigua and Barbuda", dial_code: "+1268", emoji: "🇦🇬", code: "AG" }, { name: "Argentina", dial_code: "+54", emoji: "🇦🇷", code: "AR" }, { name: "Armenia", dial_code: "+374", emoji: "🇦🇲", code: "AM" }, { name: "Aruba", dial_code: "+297", emoji: "🇦🇼", code: "AW" }, { name: "Australia", dial_code: "+61", emoji: "🇦🇺", code: "AU" }, { name: "Austria", dial_code: "+43", emoji: "🇦🇹", code: "AT" }, { name: "Azerbaijan", dial_code: "+994", emoji: "🇦🇿", code: "AZ" }, { name: "Bahamas", dial_code: "+1242", emoji: "🇧🇸", code: "BS" }, { name: "Bahrain", dial_code: "+973", emoji: "🇧🇭", code: "BH" }, { name: "Bangladesh", dial_code: "+880", emoji: "🇧🇩", code: "BD" }, { name: "Barbados", dial_code: "+1246", emoji: "🇧🇧", code: "BB" }, { name: "Belarus", dial_code: "+375", emoji: "🇧🇾", code: "BY" }, { name: "Belgium", dial_code: "+32", emoji: "🇧🇪", code: "BE" }, { name: "Belize", dial_code: "+501", emoji: "🇧🇿", code: "BZ" }, { name: "Benin", dial_code: "+229", emoji: "🇧🇯", code: "BJ" }, { name: "Bermuda", dial_code: "+1441", emoji: "🇧🇲", code: "BM" }, { name: "Bhutan", dial_code: "+975", emoji: "🇧🇹", code: "BT" }, { name: "Bolivia, Plurinational State of", dial_code: "+591", emoji: "🇧🇴", code: "BO" }, { name: "Bosnia and Herzegovina", dial_code: "+387", emoji: "🇧🇦", code: "BA" }, { name: "Botswana", dial_code: "+267", emoji: "🇧🇼", code: "BW" }, { name: "Brazil", dial_code: "+55", emoji: "🇧🇷", code: "BR" }, { name: "British Indian Ocean Territory", dial_code: "+246", emoji: "🇮🇴", code: "IO" }, { name: "Brunei Darussalam", dial_code: "+673", emoji: "🇧🇳", code: "BN" }, { name: "Bulgaria", dial_code: "+359", emoji: "🇧🇬", code: "BG" }, { name: "Burkina Faso", dial_code: "+226", emoji: "🇧🇫", code: "BF" }, { name: "Burundi", dial_code: "+257", emoji: "🇧🇮", code: "BI" }, { name: "Cambodia", dial_code: "+855", emoji: "🇰🇭", code: "KH" }, { name: "Cameroon", dial_code: "+237", emoji: "🇨🇲", code: "CM" }, { name: "Canada", dial_code: "+1", emoji: "🇨🇦", code: "CA" }, { name: "Cape Verde", dial_code: "+238", emoji: "🇨🇻", code: "CV" }, { name: "Cayman Islands", dial_code: "+345", emoji: "🇰🇾", code: "KY" }, { name: "Central African Republic", dial_code: "+236", emoji: "🇨🇫", code: "CF" }, { name: "Chad", dial_code: "+235", emoji: "🇹🇩", code: "TD" }, { name: "Chile", dial_code: "+56", emoji: "🇨🇱", code: "CL" }, { name: "China", dial_code: "+86", emoji: "🇨🇳", code: "CN" }, { name: "Christmas Island", dial_code: "+61", emoji: "🇨🇽", code: "CX" }, { name: "Cocos (Keeling) Islands", dial_code: "+61", emoji: "🇨🇨", code: "CC" }, { name: "Colombia", dial_code: "+57", emoji: "🇨🇴", code: "CO" }, { name: "Comoros", dial_code: "+269", emoji: "🇰🇲", code: "KM" }, { name: "Congo", dial_code: "+242", emoji: "🇨🇬", code: "CG" }, { name: "Congo, The Democratic Republic of the Congo", dial_code: "+243", emoji: "🇨🇩", code: "CD" }, { name: "Cook Islands", dial_code: "+682", emoji: "🇨🇰", code: "CK" }, { name: "Costa Rica", dial_code: "+506", emoji: "🇨🇷", code: "CR" }, { name: "Cote d'Ivoire", dial_code: "+225", emoji: "🇨🇮", code: "CI" }, { name: "Croatia", dial_code: "+385", emoji: "🇭🇷", code: "HR" }, { name: "Cuba", dial_code: "+53", emoji: "🇨🇺", code: "CU" }, { name: "Cyprus", dial_code: "+357", emoji: "🇨🇾", code: "CY" }, { name: "Czech Republic", dial_code: "+420", emoji: "🇨🇿", code: "CZ" }, { name: "Denmark", dial_code: "+45", emoji: "🇩🇰", code: "DK" }, { name: "Djibouti", dial_code: "+253", emoji: "🇩🇯", code: "DJ" }, { name: "Dominica", dial_code: "+1767", emoji: "🇩🇲", code: "DM" }, { name: "Dominican Republic", dial_code: "+1849", emoji: "🇩🇴", code: "DO" }, { name: "Ecuador", dial_code: "+593", emoji: "🇪🇨", code: "EC" }, { name: "Egypt", dial_code: "+20", emoji: "🇪🇬", code: "EG" }, { name: "El Salvador", dial_code: "+503", emoji: "🇸🇻", code: "SV" }, { name: "Equatorial Guinea", dial_code: "+240", emoji: "🇬🇶", code: "GQ" }, { name: "Eritrea", dial_code: "+291", emoji: "🇪🇷", code: "ER" }, { name: "Estonia", dial_code: "+372", emoji: "🇪🇪", code: "EE" }, { name: "Ethiopia", dial_code: "+251", emoji: "🇪🇹", code: "ET" }, { name: "Falkland Islands (Malvinas)", dial_code: "+500", emoji: "🇫🇰", code: "FK" }, { name: "Faroe Islands", dial_code: "+298", emoji: "🇫🇴", code: "FO" }, { name: "Fiji", dial_code: "+679", emoji: "🇫🇯", code: "FJ" }, { name: "Finland", dial_code: "+358", emoji: "🇫🇮", code: "FI" }, { name: "France", dial_code: "+33", emoji: "🇫🇷", code: "FR" }, { name: "French Guiana", dial_code: "+594", emoji: "🇬🇫", code: "GF" }, { name: "French Polynesia", dial_code: "+689", emoji: "🇵🇫", code: "PF" }, { name: "Gabon", dial_code: "+241", emoji: "🇬🇦", code: "GA" }, { name: "Gambia", dial_code: "+220", emoji: "🇬🇲", code: "GM" }, { name: "Georgia", dial_code: "+995", emoji: "🇬🇪", code: "GE" }, { name: "Germany", dial_code: "+49", emoji: "🇩🇪", code: "DE" }, { name: "Ghana", dial_code: "+233", emoji: "🇬🇭", code: "GH" }, { name: "Gibraltar", dial_code: "+350", emoji: "🇬🇮", code: "GI" }, { name: "Greece", dial_code: "+30", emoji: "🇬🇷", code: "GR" }, { name: "Greenland", dial_code: "+299", emoji: "🇬🇱", code: "GL" }, { name: "Grenada", dial_code: "+1473", emoji: "🇬🇩", code: "GD" }, { name: "Guadeloupe", dial_code: "+590", emoji: "🇬🇵", code: "GP" }, { name: "Guam", dial_code: "+1671", emoji: "🇬🇺", code: "GU" }, { name: "Guatemala", dial_code: "+502", emoji: "🇬🇹", code: "GT" }, { name: "Guernsey", dial_code: "+44", emoji: "🇬🇬", code: "GG" }, { name: "Guinea", dial_code: "+224", emoji: "🇬🇳", code: "GN" }, { name: "Guinea-Bissau", dial_code: "+245", emoji: "🇬🇼", code: "GW" }, { name: "Guyana", dial_code: "+595", emoji: "🇬🇾", code: "GY" }, { name: "Haiti", dial_code: "+509", emoji: "🇭🇹", code: "HT" }, { name: "Holy See (Vatican City State)", dial_code: "+379", emoji: "🇻🇦", code: "VA" }, { name: "Honduras", dial_code: "+504", emoji: "🇭🇳", code: "HN" }, { name: "Hong Kong", dial_code: "+852", emoji: "🇭🇰", code: "HK" }, { name: "Hungary", dial_code: "+36", emoji: "🇭🇺", code: "HU" }, { name: "Iceland", dial_code: "+354", emoji: "🇮🇸", code: "IS" }, { name: "India", dial_code: "+91", emoji: "🇮🇳", code: "IN" }, { name: "Indonesia", dial_code: "+62", emoji: "🇮🇩", code: "ID" }, { name: "Iran, Islamic Republic of Persian Gulf", dial_code: "+98", emoji: "🇮🇷", code: "IR" }, { name: "Iraq", dial_code: "+964", emoji: "🇮🇷", code: "IQ" }, { name: "Ireland", dial_code: "+353", emoji: "🇮🇪", code: "IE" }, { name: "Isle of Man", dial_code: "+44", emoji: "🇮🇲", code: "IM" }, { name: "Israel", dial_code: "+972", emoji: "🇮🇱", code: "IL" }, { name: "Italy", dial_code: "+39", emoji: "🇮🇹", code: "IT" }, { name: "Jamaica", dial_code: "+1876", emoji: "🇯🇲", code: "JM" }, { name: "Japan", dial_code: "+81", emoji: "🇯🇵", code: "JP" }, { name: "Jersey", dial_code: "+44", emoji: "🇯🇪", code: "JE" }, { name: "Jordan", dial_code: "+962", emoji: "🇯🇴", code: "JO" }, { name: "Kazakhstan", dial_code: "+77", emoji: "🇰🇿", code: "KZ" }, { name: "Kenya", dial_code: "+254", emoji: "🇰🇪", code: "KE" }, { name: "Kiribati", dial_code: "+686", emoji: "🇰🇮", code: "KI" }, { name: "Korea, Democratic People's Republic of Korea", dial_code: "+850", emoji: "🇰🇵", code: "KP" }, { name: "Korea, Republic of South Korea", dial_code: "+82", emoji: "🇰🇷", code: "KR" }, { name: "Kuwait", dial_code: "+965", emoji: "🇰🇼", code: "KW" }, { name: "Kyrgyzstan", dial_code: "+996", emoji: "🇰🇬", code: "KG" }, { name: "Laos", dial_code: "+856", emoji: "🇱🇦", code: "LA" }, { name: "Latvia", dial_code: "+371", emoji: "🇱🇻", code: "LV" }, { name: "Lebanon", dial_code: "+961", emoji: "🇱🇧", code: "LB" }, { name: "Lesotho", dial_code: "+266", emoji: "🇱🇸", code: "LS" }, { name: "Liberia", dial_code: "+231", emoji: "🇱🇷", code: "LR" }, { name: "Libyan Arab Jamahiriya", dial_code: "+218", emoji: "🇱🇾", code: "LY" }, { name: "Liechtenstein", dial_code: "+423", emoji: "🇱🇮", code: "LI" }, { name: "Lithuania", dial_code: "+370", emoji: "🇱🇹", code: "LT" }, { name: "Luxembourg", dial_code: "+352", emoji: "🇱🇺", code: "LU" }, { name: "Macao", dial_code: "+853", emoji: "🇲🇴", code: "MO" }, { name: "Macedonia", dial_code: "+389", emoji: "🇲🇰", code: "MK" }, { name: "Madagascar", dial_code: "+261", emoji: "🇲🇬", code: "MG" }, { name: "Malawi", dial_code: "+265", emoji: "🇲🇼", code: "MW" }, { name: "Malaysia", dial_code: "+60", emoji: "🇲🇾", code: "MY" }, { name: "Maldives", dial_code: "+960", emoji: "🇲🇻", code: "MV" }, { name: "Mali", dial_code: "+223", emoji: "🇲🇱", code: "ML" }, { name: "Malta", dial_code: "+356", emoji: "🇲🇹", code: "MT" }, { name: "Marshall Islands", dial_code: "+692", emoji: "🇲🇭", code: "MH" }, { name: "Martinique", dial_code: "+596", emoji: "🇲🇶", code: "MQ" }, { name: "Mauritania", dial_code: "+222", emoji: "🇲🇷", code: "MR" }, { name: "Mauritius", dial_code: "+230", emoji: "🇲🇺", code: "MU" }, { name: "Mayotte", dial_code: "+262", emoji: "🇾🇹", code: "YT" }, { name: "Mexico", dial_code: "+52", emoji: "🇲🇽", code: "MX" }, { name: "Micronesia, Federated States of Micronesia", dial_code: "+691", emoji: "🇫🇲", code: "FM" }, { name: "Moldova", dial_code: "+373", emoji: "🇲🇩", code: "MD" }, { name: "Monaco", dial_code: "+377", emoji: "🇲🇨", code: "MC" }, { name: "Mongolia", dial_code: "+976", emoji: "🇲🇳", code: "MN" }, { name: "Montenegro", dial_code: "+382", emoji: "🇲🇪", code: "ME" }, { name: "Montserrat", dial_code: "+1664", emoji: "🇲🇸", code: "MS" }, { name: "Morocco", dial_code: "+212", emoji: "🇲🇦", code: "MA" }, { name: "Mozambique", dial_code: "+258", emoji: "🇲🇿", code: "MZ" }, { name: "Myanmar", dial_code: "+95", emoji: "🇲🇲", code: "MM" }, { name: "Namibia", emoji: "🇳🇦", dial_code: "+264", code: "NA" }, { name: "Nauru", dial_code: "+674", emoji: "🇳🇷", code: "NR" }, { name: "Nepal", dial_code: "+977", emoji: "🇳🇵", code: "NP" }, { name: "Netherlands", dial_code: "+31", emoji: "🇳🇱", code: "NL" }, { name: "Netherlands Antilles", dial_code: "+599", emoji: "🇧🇶", code: "AN" }, { name: "New Caledonia", dial_code: "+687", emoji: "🇳🇨", code: "NC" }, { name: "New Zealand", dial_code: "+64", emoji: "🇳🇿", code: "NZ" }, { name: "Nicaragua", dial_code: "+505", emoji: "🇳🇮", code: "NI" }, { name: "Niger", dial_code: "+227", emoji: "🇳🇪", code: "NE" }, { name: "Nigeria", dial_code: "+234", emoji: "🇳🇬", code: "NG" }, { name: "Niue", dial_code: "+683", emoji: "🇳🇺", code: "NU" }, { name: "Norfolk Island", dial_code: "+672", emoji: "🇳🇫", code: "NF" }, { name: "Northern Mariana Islands", dial_code: "+1670", emoji: "🇲🇵", code: "MP" }, { name: "Norway", dial_code: "+47", emoji: "🇳🇴", code: "NO" }, { name: "Oman", dial_code: "+968", emoji: "🇴🇲", code: "OM" }, { name: "Pakistan", dial_code: "+92", emoji: "🇵🇰", code: "PK" }, { name: "Palau", dial_code: "+680", emoji: "🇵🇼", code: "PW" }, { name: "Palestinian Territory, Occupied", dial_code: "+970", emoji: "🇵🇸", code: "PS" }, { name: "Panama", dial_code: "+507", emoji: "🇵🇦", code: "PA" }, { name: "Papua New Guinea", dial_code: "+675", emoji: "🇵🇬", code: "PG" }, { name: "Paraguay", dial_code: "+595", emoji: "🇵🇾", code: "PY" }, { name: "Peru", dial_code: "+51", emoji: "🇵🇪", code: "PE" }, { name: "Philippines", dial_code: "+63", emoji: "🇵🇭", code: "PH" }, { name: "Pitcairn", dial_code: "+872", emoji: "🇵🇳", code: "PN" }, { name: "Poland", dial_code: "+48", emoji: "🇵🇱", code: "PL" }, { name: "Portugal", dial_code: "+351", emoji: "🇵🇹", code: "PT" }, { name: "Puerto Rico", dial_code: "+1939", emoji: "🇵🇷", code: "PR" }, { name: "Qatar", dial_code: "+974", emoji: "🇶🇦", code: "QA" }, { name: "Romania", dial_code: "+40", emoji: "🇷🇴", code: "RO" }, { name: "Russia", dial_code: "+7", emoji: "🇷🇺", code: "RU" }, { name: "Rwanda", dial_code: "+250", emoji: "🇷🇼", code: "RW" }, { name: "Reunion", dial_code: "+262", emoji: "🇷🇪", code: "RE" }, { name: "Saint Barthelemy", dial_code: "+590", emoji: "🇧🇱", code: "BL" }, { name: "Saint Helena, Ascension and Tristan Da Cunha", dial_code: "+290", emoji: "🇸🇭", code: "SH" }, { name: "Saint Kitts and Nevis", dial_code: "+1869", emoji: "🇰🇳", code: "KN" }, { name: "Saint Lucia", dial_code: "+1758", emoji: "🇱🇨", code: "LC" }, { name: "Saint Martin", dial_code: "+590", emoji: "🇲🇫", code: "MF" }, { name: "Saint Pierre and Miquelon", dial_code: "+508", emoji: "🇵🇲", code: "PM" }, { name: "Saint Vincent and the Grenadines", dial_code: "+1784", emoji: "🇻🇨", code: "VC" }, { name: "Samoa", dial_code: "+685", emoji: "🇼🇸", code: "WS" }, { name: "San Marino", dial_code: "+378", emoji: "🇸🇲", code: "SM" }, { name: "Sao Tome and Principe", dial_code: "+239", emoji: "🇸🇹", code: "ST" }, { name: "Saudi Arabia", dial_code: "+966", emoji: "🇸🇦", code: "SA" }, { name: "Senegal", dial_code: "+221", emoji: "🇸🇳", code: "SN" }, { name: "Serbia", dial_code: "+381", emoji: "🇷🇸", code: "RS" }, { name: "Seychelles", dial_code: "+248", emoji: "🇸🇨", code: "SC" }, { name: "Sierra Leone", dial_code: "+232", emoji: "🇸🇱", code: "SL" }, { name: "Singapore", dial_code: "+65", emoji: "🇸🇬", code: "SG" }, { name: "Slovakia", dial_code: "+421", emoji: "🇸🇰", code: "SK" }, { name: "Slovenia", dial_code: "+386", emoji: "🇸🇮", code: "SI" }, { name: "Solomon Islands", dial_code: "+677", emoji: "🇸🇧", code: "SB" }, { name: "Somalia", dial_code: "+252", emoji: "🇸🇴", code: "SO" }, { name: "South Africa", dial_code: "+27", emoji: "🇿🇦", code: "ZA" }, { name: "South Sudan", dial_code: "+211", emoji: "🇸🇸", code: "SS" }, { name: "South Georgia and the South Sandwich Islands", dial_code: "+500", emoji: "🇬🇸", code: "GS" }, { name: "Spain", dial_code: "+34", emoji: "🇪🇸", code: "ES" }, { name: "Sri Lanka", dial_code: "+94", emoji: "🇱🇰", code: "LK" }, { name: "Sudan", dial_code: "+249", emoji: "🇸🇩", code: "SD" }, { name: "Suriname", dial_code: "+597", emoji: "🇸🇷", code: "SR" }, { name: "Svalbard and Jan Mayen", dial_code: "+47", emoji: "🇸🇯", code: "SJ" }, { name: "Swaziland", dial_code: "+268", emoji: "🇸🇿", code: "SZ" }, { name: "Sweden", dial_code: "+46", emoji: "🇸🇪", code: "SE" }, { name: "Switzerland", dial_code: "+41", emoji: "🇨🇭", code: "CH" }, { name: "Syrian Arab Republic", dial_code: "+963", emoji: "🇸🇾", code: "SY" }, { name: "Taiwan", dial_code: "+886", emoji: "🇹🇼", code: "TW" }, { name: "Tajikistan", dial_code: "+992", emoji: "🇹🇯", code: "TJ" }, { name: "Tanzania, United Republic of Tanzania", dial_code: "+255", emoji: "🇹🇿", code: "TZ" }, { name: "Thailand", dial_code: "+66", emoji: "🇹🇭", code: "TH" }, { name: "Timor-Leste", dial_code: "+670", emoji: "🇹🇱", code: "TL" }, { name: "Togo", dial_code: "+228", emoji: "🇹🇬", code: "TG" }, { name: "Tokelau", dial_code: "+690", emoji: "🇹🇰", code: "TK" }, { name: "Tonga", dial_code: "+676", emoji: "🇹🇴", code: "TO" }, { name: "Trinidad and Tobago", dial_code: "+1868", emoji: "🇹🇹", code: "TT" }, { name: "Tunisia", dial_code: "+216", emoji: "🇹🇳", code: "TN" }, { name: "Turkey", dial_code: "+90", emoji: "🇹🇷", code: "TR" }, { name: "Turkmenistan", dial_code: "+993", emoji: "🇹🇲", code: "TM" }, { name: "Turks and Caicos Islands", dial_code: "+1649", emoji: "🇹🇨", code: "TC" }, { name: "Tuvalu", dial_code: "+688", emoji: "🇹🇻", code: "TV" }, { name: "Uganda", dial_code: "+256", emoji: "🇺🇬", code: "UG" }, { name: "Ukraine", dial_code: "+380", emoji: "🇺🇦", code: "UA" }, { name: "United Arab Emirates", dial_code: "+971", emoji: "🇦🇪", code: "AE" }, { name: "United Kingdom", dial_code: "+44", emoji: "🇬🇧", code: "GB" }, { name: "United States", dial_code: "+1", emoji: "🇺🇸", code: "US" }, { name: "Uruguay", dial_code: "+598", emoji: "🇺🇾", code: "UY" }, { name: "Uzbekistan", dial_code: "+998", emoji: "🇺🇿", code: "UZ" }, { name: "Vanuatu", dial_code: "+678", emoji: "🇻🇺", code: "VU" }, { name: "Venezuela, Bolivarian Republic of Venezuela", dial_code: "+58", emoji: "🇻🇪", code: "VE" }, { name: "Vietnam", dial_code: "+84", emoji: "🇻🇳", code: "VN" }, { name: "Virgin Islands, British", dial_code: "+1284", emoji: "🇻🇬", code: "VG" }, { name: "Virgin Islands, U.S.", dial_code: "+1340", emoji: "🇻🇮", code: "VI" }, { name: "Wallis and Futuna", dial_code: "+681", emoji: "🇼🇫", code: "WF" }, { name: "Yemen", dial_code: "+967", emoji: "🇾🇪", code: "YE" }, { name: "Zambia", dial_code: "+260", emoji: "🇿🇲", code: "ZM" }, { name: "Zimbabwe", dial_code: "+263", emoji: "🇿🇼", code: "ZW" } ]; const countries = countriesData; async function createPhoneInput(form, name, placeholder) { const wrapper = createElement('div', STYLES.inputWrapper); wrapper.setAttribute('style', 'display: flex; gap: 0.5rem;'); // Country code select const select = createElement('select', STYLES.input); select.setAttribute('style', 'width: 180px; flex-shrink: 0;'); select.name = `${name}_country`; select.required = true; let defaultCountry; try { const response = await fetch('https://api.bynn.com/v1/echo'); if (response.ok) { const data = await response.json(); const countryCode = data.your_country; defaultCountry = countries.find(country => country.code === countryCode); } } catch (error) { console.error('Error fetching IP information:', error); } // Add countries to select countries.forEach(country => { const option = createElement('option', '', { value: country.dial_code, textContent: `${country.name} (${country.dial_code})` }); // Set default country if (defaultCountry && country.code === defaultCountry.code) { option.selected = true; } select.appendChild(option); }); // Phone number input const input = createElement('input', STYLES.input); input.setAttribute('style', 'flex: 1;'); input.type = 'tel'; input.name = name; input.required = true; input.placeholder = placeholder; input.pattern = '[0-9]{6,14}'; input.title = 'Please enter a valid phone number'; wrapper.append(select, input); form.appendChild(wrapper); } async function addInputField(form, name, placeholder, required = false) { if (name === 'phone_number') { await createPhoneInput(form, name, placeholder); return; } const wrapper = createElement('div', STYLES.inputWrapper); const input = createElement('input', STYLES.input, { type: 'text', id: `bynn-${name}`, name, required, placeholder }); wrapper.appendChild(input); form.appendChild(wrapper); } function createSubmitButton(text) { return createElement('button', STYLES.submit, { type: 'submit', textContent: text }); } function createPoweredByText() { const paragraph = createElement('p', STYLES.description); const bynnLink = createElement('a', '', { href: 'https://bynn.com', target: '_blank', rel: 'noopener noreferrer', textContent: 'Bynn' }); const postText = document.createTextNode(' provides identity verification solutions that enable businesses to seamlessly authenticate their users.'); paragraph.append(bynnLink, postText); return paragraph; } async function createVerificationForm(containerId, options, fields) { const container = getContainer(containerId); container.classList.add('data-bynn-sdk'); container.innerHTML = ''; const form = createElement('form', STYLES.form); // Add fields based on configuration for (const field of fields) { if (field.visible !== false) { // Only add visible fields to the form await addInputField(form, field.name, field.label || formatFieldLabel(field.name), true); } else { // Add hidden fields with values const hiddenInput = createElement('input', '', { type: 'hidden', name: field.name, value: field.value || '' }); form.appendChild(hiddenInput); } } const submitBtn = createSubmitButton(options.submitBtnText || 'Start Verification'); const poweredBy = createPoweredByText(); form.append(submitBtn, poweredBy); container.appendChild(form); return form; } function formatFieldLabel(fieldName) { return fieldName .split('_') .map(word => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); } function styleInject(css, ref) { if ( ref === void 0 ) ref = {}; var insertAt = ref.insertAt; if (!css || typeof document === 'undefined') { return; } var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; if (insertAt === 'top') { if (head.firstChild) { head.insertBefore(style, head.firstChild); } else { head.appendChild(style); } } else { head.appendChild(style); } if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } var css_248z$2 = ".data-bynn-sdk .bynn-modal-overlay{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(0,0,0,.4);bottom:0;cursor:pointer;display:flex;justify-content:center;left:0;padding:2rem;position:fixed;right:0;top:0;z-index:999999}.data-bynn-sdk .bynn-modal-container{background:var(--bynn-bg-white);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);display:flex;flex-direction:column;max-height:90vh;max-width:960px;min-height:90%;position:relative;transform:translateX(0);transition:width .2s ease-in-out,height .2s ease-in-out;width:95%}.data-bynn-sdk .bynn-modal-content{align-items:center;display:flex;flex:1;flex-direction:column;height:100%;overflow:auto;width:100%}.data-bynn-sdk .bynn-iframe-container{-webkit-overflow-scrolling:touch;border-radius:8px;display:flex;flex:1;justify-content:center;overflow:auto}.data-bynn-sdk .bynn-iframe-wrapper{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;width:100%}.data-bynn-sdk .bynn-iframe{border:none;border-radius:8px;height:100%;margin:0 auto;width:100%}@keyframes modalEnter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media (max-width:640px){.data-bynn-sdk .bynn-modal-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;padding:0}.data-bynn-sdk .bynn-modal-container{border-radius:0;box-shadow:none;height:100%!important;margin:0;max-height:none!important;max-width:none!important;width:100%!important}.data-bynn-sdk .bynn-modal-content{height:100vh;padding:0}.data-bynn-sdk .bynn-iframe,.data-bynn-sdk .bynn-iframe-wrapper{height:100%!important;width:100%!important}.data-bynn-sdk .bynn-iframe{border-radius:0}}"; styleInject(css_248z$2); function createModal() { const wrapper = createElement('div', 'data-bynn-sdk'); // Create overlay const overlay = createElement('div', 'bynn-modal-overlay'); // Create modal container const container = createElement('div', 'bynn-modal-container'); // Create content wrapper const content = createElement('div', 'bynn-modal-content'); // Prevent body scroll when modal is open document.body.style.overflow = 'hidden'; container.append(content); overlay.appendChild(container); wrapper.appendChild(overlay); let clickHandler = null; const closeModal = () => { if (clickHandler) { overlay.removeEventListener('click', clickHandler); clickHandler = null; } overlay.remove(); document.body.style.overflow = ''; }; clickHandler = (event) => { if (event.target === overlay) { closeModal(); } }; overlay.addEventListener('click', clickHandler); return { modalElement: wrapper, closeModal }; } function applyStyles(element, styles) { Object.entries(styles).forEach(([property, value]) => { if (value !== undefined && value !== null) { element.style.setProperty(property.replace(/([A-Z])/g, '-$1').toLowerCase(), value); } }); } const DEFAULT_TIMEOUT = 10; function showVerificationModal(url, sessionId, config) { const { modalElement, closeModal } = createModal(); const content = modalElement.querySelector('.bynn-modal-content'); const timeoutDuration = config.startTimeoutSeconds || DEFAULT_TIMEOUT; let hasStarted = false; let startTimeoutId = window.setTimeout(() => { console.error(`Verification didn't start within ${timeoutDuration} seconds`); if (config.onError) { config.onError(sessionId, `Verification process did not start within ${timeoutDuration} seconds`); } closeModal(); }, timeoutDuration * 1000); if (content && content instanceof HTMLElement) { applyStyles(content, { overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '90vh', position: 'relative' }); // Create iframe wrapper for better control const wrapper = createElement('div', 'bynn-iframe-wrapper'); // Message handler for both resize and verification status const handleMessage = (event) => { try { console.log('Received message:', event.data, 'from origin:', event.origin); // Verify origin matches the iframe URL origin for security const iframeOrigin = new URL(url).origin; if (event.origin !== iframeOrigin) { console.log('Origin mismatch. Expected:', iframeOrigin, 'Received:', event.origin); return; } if (!event.data || typeof event.data !== 'object') return; if (event.data.type === 'close') { if (config.onClose) { config.onClose(); } closeModal(); return; } // Check if we're on mobile const isMobile = window.innerWidth <= 640; // Handle resize message (only for non-mobile) if (event.data.type === 'resize' && !isMobile) { const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; // Handle width resize if (typeof event.data.width === 'number') { const maxWidth = Math.min(960, Math.floor(viewportWidth * 0.95)); const finalWidth = Math.min(event.data.width, maxWidth); iframe.style.width = `${finalWidth}px`; iframe.style.transition = 'width 200ms ease'; // Update modal container width const modalContainer = document.querySelector('.bynn-modal-container'); if (modalContainer instanceof HTMLElement) { modalContainer.style.width = `${finalWidth}px`; modalContainer.style.transition = 'width 200ms ease'; } } // Handle height resize if (typeof event.data.height === 'number') { const maxHeight = Math.floor(viewportHeight * 0.9); const finalHeight = Math.min(event.data.height, maxHeight); iframe.style.height = `${finalHeight}px`; iframe.style.transition = 'height 200ms ease'; // Update modal container height const modalContainer = document.querySelector('.bynn-modal-container'); if (modalContainer instanceof HTMLElement) { modalContainer.style.height = `${finalHeight}px`; modalContainer.style.transition = 'height 200ms ease'; } } } // Handle verification status message if (event.data.type === 'bynn-verification') { console.log('Received verification message:', event.data); const data = event.data; console.log('Processing verification status:', data.status); switch (data.status) { case 'cancel': if (config.onCancel) { config.onCancel(sessionId); } closeModal(); break; case 'completed': if (config.onComplete) { config.onComplete(sessionId); } closeModal(); break; case 'error': if (config.onError) { config.onError(sessionId, data.error || 'Unknown error'); } break; case 'rejected': if (config.onReject) { config.onReject(sessionId); } closeModal(); break; case 'successful': if (config.onSuccess) { config.onSuccess(sessionId); } closeModal(); break; case 'start': if (startTimeoutId !== null) { window.clearTimeout(startTimeoutId); startTimeoutId = null; } if (!hasStarted && config.onStart) { config.onStart(data.sessionId || sessionId); hasStarted = true; } break; } } } catch (error) { console.error('Error handling iframe message:', error); } }; const iframe = createElement('iframe', 'bynn-iframe', { src: url, width: '100%', height: '100%', frameBorder: '0', allow: 'camera *; microphone *' }); window.addEventListener('message', handleMessage); // Clean up listener when iframe is removed const cleanup = () => { window.removeEventListener('message', handleMessage); if (startTimeoutId !== null) { window.clearTimeout(startTimeoutId); startTimeoutId = null; } }; iframe.addEventListener('remove', cleanup); window.addEventListener('unload', cleanup); // Add iframe to wrapper, then wrapper to content wrapper.appendChild(iframe); content.appendChild(wrapper); } document.body.appendChild(modalElement); } const COLORS = { primary: { main: '#6366F1', hover: '#4F46E5', disabled: '#C7D2FE', light: '#EEF2FF' }, neutral: { 50: '#F9FAFB', 100: '#F3F4F6', 200: '#E5E7EB', 300: '#D1D5DB', 600: '#4B5563', 700: '#374151', 800: '#1F2937' }, success: { light: '#ECFDF5', text: '#047857' }, error: { light: '#FEF2F2', main: '#EF4444', hover: '#DC2626', text: '#B91C1C' } }; function showErrorModal(message) { const { modalElement } = createModal(); const content = modalElement.querySelector('.bynn-modal-content'); if (content) { const alert = createElement('div', 'bynn-error-alert'); alert.setAttribute('style', ` background-color: ${COLORS.error.light}; color: ${COLORS.error.text}; padding: 1rem; border-radius: 8px; text-align: center; font-weight: 500; `); const text = createElement('p', '', { textContent: message }); alert.appendChild(text); content.appendChild(alert); } document.body.appendChild(modalElement); } var css_248z$1 = ":root{--bynn-primary:#6366f1;--bynn-primary-hover:#4f46e5;--bynn-primary-disabled:#c7d2fe;--bynn-primary-light:#eef2ff;--bynn-bg-white:#fff;--bynn-bg-input:#f9fafb;--bynn-neutral-50:#f9fafb;--bynn-neutral-100:#f3f4f6;--bynn-neutral-200:#e5e7eb;--bynn-neutral-300:#d1d5db;--bynn-neutral-600:#4b5563;--bynn-neutral-800:#1f2937}[class^=bynn-]{box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;margin:0;padding:0}"; styleInject(css_248z$1); var css_248z = ".data-bynn-sdk .bynn-form{background:var(--bynn-bg-white);border-radius:16px;box-shadow:none;margin:0 auto;max-width:440px;padding:2.5rem;width:100%}.data-bynn-sdk .bynn-input-wrapper{margin-bottom:1.5rem}.data-bynn-sdk .bynn-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bynn-bg-input);border:1px solid var(--bynn-neutral-200);border-radius:8px;color:var(--bynn-neutral-800);font-size:.9375rem;padding:.75rem 1rem;transition:all .2s ease;width:100%}.data-bynn-sdk .bynn-input:hover{border-color:var(--bynn-neutral-300)}.data-bynn-sdk .bynn-input:focus{background:var(--bynn-bg-white);border-color:var(--bynn-primary);box-shadow:0 0 0 4px var(--bynn-primary-light);outline:none}.data-bynn-sdk .bynn-input::-moz-placeholder{color:var(--bynn-neutral-500)}.data-bynn-sdk .bynn-input::placeholder{color:var(--bynn-neutral-500)}.data-bynn-sdk select.bynn-input{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-position:right .75rem center;background-repeat:no-repeat;background-size:16px;padding-right:2.5rem}.data-bynn-sdk .bynn-submit{background:var(--bynn-primary);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:13.33px;font-weight:600;padding:.875rem;transition:all .2s ease;width:100%}.data-bynn-sdk .bynn-submit:hover{background:var(--bynn-primary-hover)}.data-bynn-sdk .bynn-submit:active{transform:translateY(0)}.data-bynn-sdk .bynn-submit:disabled{background:var(--bynn-primary-disabled);cursor:not-allowed;transform:none}.data-bynn-sdk .bynn-description{color:var(--bynn-neutral-600);font-size:11px;margin-bottom:0;margin-top:10px;text-align:center}.data-bynn-sdk .bynn-description a{color:inherit;text-decoration:none}.data-bynn-sdk .bynn-description a:hover{color:var(--bynn-primary)}"; styleInject(css_248z); function createBynn(config) { const { host = DEFAULT_HOST, apiKey, parentId, fields = [], onSession, i18n, kycLevel, onCancel, onComplete, onError, onStart, onReject, onSuccess } = config; let params = { person: { first_name: '', last_name: '', email_address: '' } }; fields.forEach(field => { if (field.visible === false && field.value) { params.person[field.name] = field.value; } }); const setParams = (newParams) => { params = Object.assign(Object.assign({}, params), newParams); }; const mount = async (options = {}) => { const form = await createVerificationForm(parentId, options, fields); form.onsubmit = async (e) => { var _a; e.preventDefault(); const formData = new FormData(form); const submitBtn = form.querySelector('button[type="submit"]'); submitBtn.disabled = true; submitBtn.textContent = options.loadingText || 'Loading.