@xsolla/payment-client-core 0.1.4 → 0.1.5-2

package/fesm2015/xsolla-payment-client-core.mjs

@@ -1,9 +1,10 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Inject, isDevMode, NgModule } from '@angular/core';
-import { firstValueFrom, lastValueFrom, map, Subject, tap, BehaviorSubject, filter as filter$1, takeUntil, skip, throwError } from 'rxjs';
+import { firstValueFrom, lastValueFrom, map, Subject, BehaviorSubject, filter as filter$1, takeUntil, skip, throwError } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import JSEncrypt from 'jsencrypt';
 import { UntypedFormGroup, Validators, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { filter, map as map$1, catchError } from 'rxjs/operators';
 import * as i1$1 from '@angular/router';
@@ -605,6 +606,15 @@ var InputEventName;
     InputEventName["focus"] = "focus";
 })(InputEventName || (InputEventName = {}));
 
+class ShowErrorsAction {
+    constructor(errors) {
+        this.type = 'show_errors';
+        this.data = {
+            errors,
+        };
+    }
+}
+
 class InitializeResponse {
     constructor(response) {
         this.paymentForm = null;
@@ -655,14 +665,87 @@ const initializeResponseFactoryProvider = {
     useValue: (...args) => new InitializeResponse(...args),
 };
 
-class ShowErrorsAction {
-    constructor(errors) {
-        this.type = 'show_errors';
-        this.data = {
-            errors,
-        };
+const masterCardAndVisaPaymentMethodId = 26;
+const maestroPaymentMethodId = 490;
+const creditCardPaymentMethodId = 1380;
+const americanExpressMethodId = 714;
+const specialCards = [
+    maestroPaymentMethodId,
+    masterCardAndVisaPaymentMethodId,
+    americanExpressMethodId,
+];
+const cardsWith3ds = [
+    masterCardAndVisaPaymentMethodId,
+    maestroPaymentMethodId,
+    creditCardPaymentMethodId,
+];
+
+class XpsApiService {
+    constructor(window, secureApiClient, settingsService, countryService) {
+        this.window = window;
+        this.secureApiClient = secureApiClient;
+        this.settingsService = settingsService;
+        this.countryService = countryService;
+        this.directPaymentApiRoute = 'directpayment';
+    }
+    directPaymentRequest(parameters) {
+        var _a, _b, _c, _d, _e;
+        return __awaiter(this, void 0, void 0, function* () {
+            const pid = (_c = (_b = (_a = parameters.pid) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : parameters.xps_fix_pid) !== null && _c !== void 0 ? _c : '';
+            const paymentWithSavedMethod = (_e = (_d = parameters.paymentWithSavedMethod) !== null && _d !== void 0 ? _d : parameters.xps_paymentWithSavedMethod) !== null && _e !== void 0 ? _e : '';
+            const requestParams = Object.assign(Object.assign(Object.assign(Object.assign({}, this.collectAnalyticsParameters(pid, paymentWithSavedMethod)), this.collectUserSessionId()), { country: this.countryService.getCountry() }), parameters);
+            return lastValueFrom(this.secureApiClient.post(this.directPaymentApiRoute, new URLSearchParams(Object.assign({}, requestParams)), {
+                headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'),
+                responseType: 'json',
+            }));
+        });
+    }
+    collectAnalyticsParameters(paymentMethodId, paymentWithSavedMethod) {
+        const parameters = {};
+        parameters.paymentWithSavedMethod = paymentWithSavedMethod
+            ? paymentWithSavedMethod
+            : "0" /* XpsBoolean.false */;
+        if (!paymentMethodId) {
+            return parameters;
+        }
+        /* If payment method with 3DSecure */
+        if (cardsWith3ds.includes(Number(paymentMethodId))) {
+            parameters.container3DS = JSON.stringify({
+                browserjavaenabled: this.window.navigator.javaEnabled(),
+                browserlanguage: this.window.navigator.language,
+                browsercolordepth: this.window.screen.colorDepth,
+                browserscreenheight: this.window.screen.availHeight,
+                browserscreenwidth: this.window.screen.availWidth,
+                browsertz: new Date().getTimezoneOffset(),
+                browserappname: this.window.navigator.appName,
+                browserlocaltime: new Date().toString(),
+                browserplatform: this.window.navigator.platform || '',
+                browsercookiesenabled: this.window.navigator.cookieEnabled,
+            });
+        }
+        return parameters;
+    }
+    collectUserSessionId() {
+        var _a, _b;
+        const parameters = {};
+        parameters.xps_idUserSession = (_a = this.settingsService.user.session_id) !== null && _a !== void 0 ? _a : '';
+        parameters.user_session_id = (_b = this.settingsService.user.session_id) !== null && _b !== void 0 ? _b : '';
+        return parameters;
     }
 }
+XpsApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XpsApiService, deps: [{ token: windowToken }, { token: SecureApiClient }, { token: SettingsService }, { token: CountryService }], target: i0.ɵɵFactoryTarget.Injectable });
+XpsApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XpsApiService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XpsApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [windowToken]
+                    }] }, { type: SecureApiClient }, { type: SettingsService }, { type: CountryService }];
+    } });
 
 class ShowFieldsAction {
     constructor(submitResponse) {
@@ -694,17 +777,16 @@ const showFieldsActionFactoryProvider = {
 
 class CheckStatusAction {
     constructor(submitResponse) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.type = 'check_status';
-        const status = submitResponse.parameters.status;
         this.data = {
-            invoice: status === null || status === void 0 ? void 0 : status.invoice,
-            signature: (_a = submitResponse.parameters.form.signature) === null || _a === void 0 ? void 0 : _a.value,
-            locale: (_b = submitResponse.parameters.form.locale) === null || _b === void 0 ? void 0 : _b.value,
-            testPs: (_c = submitResponse.parameters.form.testPs) === null || _c === void 0 ? void 0 : _c.value,
-            testXsolla: (_d = submitResponse.parameters.form.testXsolla) === null || _d === void 0 ? void 0 : _d.value,
-            testProject: (_e = submitResponse.parameters.form.testProject) === null || _e === void 0 ? void 0 : _e.value,
-            userReturnStatus: (_f = submitResponse.parameters.form.userReturnStatus) === null || _f === void 0 ? void 0 : _f.value,
+            invoice: parseInt((_a = submitResponse.parameters.form.fix_invoice) === null || _a === void 0 ? void 0 : _a.value),
+            signature: (_b = submitResponse.parameters.form.signature) === null || _b === void 0 ? void 0 : _b.value,
+            locale: (_c = submitResponse.parameters.form.locale) === null || _c === void 0 ? void 0 : _c.value,
+            testPs: (_d = submitResponse.parameters.form.testPs) === null || _d === void 0 ? void 0 : _d.value,
+            testXsolla: (_e = submitResponse.parameters.form.testXsolla) === null || _e === void 0 ? void 0 : _e.value,
+            testProject: (_f = submitResponse.parameters.form.testProject) === null || _f === void 0 ? void 0 : _f.value,
+            userReturnStatus: (_g = submitResponse.parameters.form.userReturnStatus) === null || _g === void 0 ? void 0 : _g.value,
         };
     }
 }
@@ -787,6 +869,22 @@ const showErrorsActionFactoryProvider = {
     },
 };
 
+class ThreeDsAction {
+    constructor(statusUpdate) {
+        this.type = '3DS';
+        this.data = statusUpdate;
+    }
+}
+
+const threeDsActionFactoryToken = new InjectionToken('ThreeDsAction');
+const threeDsActionFactoryProvider = {
+    provide: threeDsActionFactoryToken,
+    useValue: {
+        factory: (...args) => new ThreeDsAction(...args),
+        isSuitable: () => false,
+    },
+};
+
 const nextActionsToken = new InjectionToken('Action');
 const nextActions = [
     showFieldsActionFactoryProvider,
@@ -796,6 +894,7 @@ const nextActions = [
 const flowUpdateNextActions = [
     statusUpdatedActionFactoryProvider,
     showErrorsActionFactoryProvider,
+    threeDsActionFactoryProvider,
 ];
 
 class NextActionService {
@@ -856,522 +955,457 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     }] }, { type: i0.Injector }];
     } });
 
-class InitializeService {
-    constructor(responseFactory, secureApi, settingsService, countryService, nextActionService) {
-        this.responseFactory = responseFactory;
-        this.secureApi = secureApi;
-        this.settingsService = settingsService;
-        this.countryService = countryService;
-        this.nextActionService = nextActionService;
-        this.apiRoute = 'directpayment';
-        // TODO PAYMENTS-15743: replace with new refer id for headless core
-        this.ps4ReferId = '22';
-    }
-    request(config) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const requestParams = {
-                access_token: this.settingsService.token,
-                pid: String(config.paymentMethodId),
-                refer: this.ps4ReferId,
-                country: this.countryService.getCountry(),
-                returnUrl: config.returnUrl,
-            };
-            return lastValueFrom(this.secureApi
-                .post(this.apiRoute, new URLSearchParams(Object.assign({}, requestParams)), {
-                headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'),
-                responseType: 'json',
-            })
-                .pipe(map((response) => this.responseFactory(response)), tap((response) => {
-                var _a, _b;
-                if ((_b = (_a = response.paymentForm) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b.length) {
-                    this.nextActionService.emitFlowUpdates(new ShowErrorsAction(response.paymentForm.errors));
-                }
-            }))).catch((error) => {
-                throw new ResponseError(error.message);
-            });
-        });
-    }
-}
-InitializeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InitializeService, deps: [{ token: initializeResponseFactoryToken }, { token: SecureApiClient }, { token: SettingsService }, { token: CountryService }, { token: NextActionService }], target: i0.ɵɵFactoryTarget.Injectable });
-InitializeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InitializeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InitializeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [initializeResponseFactoryToken]
-                    }] }, { type: SecureApiClient }, { type: SettingsService }, { type: CountryService }, { type: NextActionService }];
-    } });
+var ErrorTags;
+(function (ErrorTags) {
+    ErrorTags["APP"] = "appError";
+    ErrorTags["HTTP"] = "httpError";
+    ErrorTags["JS"] = "jsError";
+    ErrorTags["WS"] = "webSocket";
+    ErrorTags["ENCRYPT"] = "encrypt";
+    ErrorTags["APPLEPAY"] = "applepay";
+    ErrorTags["HEADLESS_UI"] = "headlessUi";
+    ErrorTags["GOOGLEPAY"] = "googlepay";
+    ErrorTags["PAYTM"] = "paytm";
+})(ErrorTags || (ErrorTags = {}));
 
-class XpsApiPartRequest {
-    addXpsParameters(parameters) {
-        for (const key in parameters) {
-            this[`xps_${key}`] = parameters[key];
+class TaggedError extends Error {
+    constructor(message, tags) {
+        super(message);
+        this.tags = [];
+        this.parentTag = ErrorTags.HEADLESS_UI;
+        this.tags = this.childTag
+            ? [this.parentTag, this.childTag]
+            : [this.parentTag];
+        if (tags) {
+            const newTags = tags.filter((t, i, arr) => !this.tags.includes(t) && arr.indexOf(t) == i);
+            this.tags = [...this.tags, ...newTags];
         }
     }
 }
 
-class TokenError extends AppError {
-    constructor() {
-        super('XPS API needs token.');
+class EncryptCreditCardError extends TaggedError {
+    constructor(message, tags) {
+        tags = tags ? [...tags, ErrorTags.ENCRYPT] : [ErrorTags.ENCRYPT];
+        super(message, tags);
     }
 }
 
-class SubmitRequest extends XpsApiPartRequest {
-    constructor(parameters) {
-        super();
-        const { token, fields, form, dfpHash } = parameters;
-        if (token === null) {
-            throw new TokenError();
-        }
-        this.access_token = token;
-        if (dfpHash) {
-            this.xps_dfp_hash = dfpHash;
-        }
-        this.addXpsParameters(this.getFieldsValues(fields, form));
-    }
-    getFieldsValues(fields, form) {
-        return fields.reduce((xpsParams, field) => {
-            const formControl = form.get(field.name);
-            xpsParams[field.name] = formControl ? formControl.value : field === null || field === void 0 ? void 0 : field.value;
-            return xpsParams;
-        }, {});
-    }
-}
+const fourBlockMask = '9999 9999 9999 9999';
 
-const submitRequestFactoryToken = new InjectionToken('SubmitRequest');
-const submitRequestFactoryProvider = {
-    provide: submitRequestFactoryToken,
-    useValue: (...args) => new SubmitRequest(...args),
+var CreditCardTypes;
+(function (CreditCardTypes) {
+    CreditCardTypes["DEFAULT"] = "0";
+    CreditCardTypes["VISA"] = "1";
+    CreditCardTypes["MASTERCARD"] = "2";
+    CreditCardTypes["MAESTRO"] = "3";
+    CreditCardTypes["AMERICAN_EXPRESS"] = "4";
+    CreditCardTypes["DINERS_CLUBS"] = "5";
+    CreditCardTypes["DISCOVER"] = "6";
+    CreditCardTypes["JCB"] = "9";
+    CreditCardTypes["DANKORT"] = "11";
+    CreditCardTypes["HIPERCARD"] = "12";
+    CreditCardTypes["ELO"] = "13";
+    CreditCardTypes["AURA"] = "14";
+    CreditCardTypes["NARANJA"] = "15";
+    CreditCardTypes["MIR"] = "16";
+    CreditCardTypes["CHINA_UNION_PAY"] = "17";
+    CreditCardTypes["POSTEPAY"] = "18";
+})(CreditCardTypes || (CreditCardTypes = {}));
+
+const visa = {
+    id: CreditCardTypes.VISA,
+    minLength: 13,
+    maxLength: 16,
+    iconName: 'visa',
+    mask: fourBlockMask,
+    checkNumber(number) {
+        return number.startsWith('4');
+    },
 };
 
-const submitResponseFactoryToken = new InjectionToken('SubmitResponse');
-const submitResponseFactoryProvider = {
-    provide: submitResponseFactoryToken,
-    useValue: (...args) => new SubmitResponse(...args),
+const mastercard = {
+    id: CreditCardTypes.MASTERCARD,
+    minLength: 16,
+    maxLength: 16,
+    iconName: 'mastercard',
+    mask: fourBlockMask,
+    checkNumber(number) {
+        const subLength = 6;
+        const cardNumberSub = number.substring(0, subLength);
+        return (new RegExp(/^5[1-5]/).test(number) ||
+            (cardNumberSub >= '222100' && cardNumberSub <= '272099'));
+    },
 };
 
-class TerminalError extends AppError {
-    constructor(message, code) {
-        super(message);
-        this.code = code;
-    }
-}
+const defaultMask = '9999 9999 9999 9999 999';
 
-class DefaultTerminalError extends TerminalError {
-    constructor() {
-        const message = `It's not you, it's us, but we can help. Please contact our customer support.`;
-        super(message, '1000-0002');
-    }
-}
+const maestro = {
+    id: CreditCardTypes.MAESTRO,
+    minLength: 12,
+    maxLength: 19,
+    iconName: 'maestro',
+    mask: defaultMask,
+    checkNumber(number) {
+        return new RegExp(/^(5018)|^(5020)|^(5038)|^(5893)|^(6304)|^(6759)|^(6761)|^(6762)|^(6763)|^(0604)|^(6706)|^(6771)|^(6709)/).test(number);
+    },
+    maxCvvLength: 3,
+};
 
-class DeviceFingerPrintService {
-    constructor(secureApi, settingsService, window) {
-        this.secureApi = secureApi;
-        this.settingsService = settingsService;
-        this.window = window;
-        this.apiRoute = 'dfp';
-        this.fingerprintApiUrl = 'https://afs.xsolla.com/dfp/api/v1/';
-    }
-    init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.settingsService.isInitialized) {
-                return;
-            }
-            this.fingerprintJs = yield this.loadFingerprintJs();
-            this.hash = yield this.buildHash();
-            this.antifraudFingerprintLibrary =
-                yield this.loadAntifraudFingerprintLibrary();
-        });
-    }
-    // eslint-disable-next-line @typescript-eslint/require-await
-    getHash() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.hash;
-        });
-    }
-    loadFingerprintJs() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { default: library, murmurX64Hash128: getHash } = yield import('@fingerprintjs/fingerprintjs');
-            return { library, getHash };
-        });
-    }
-    loadAntifraudFingerprintLibrary() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const library = yield import('@xsolla/antifraud-fingerprint');
-            return library.default;
-        });
-    }
-    // eslint-disable-next-line @typescript-eslint/require-await
-    makeAntifraudFingerprint() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.settingsService.token) {
-                return null;
-            }
-            const antifraudFingerprint = this.antifraudFingerprintLibrary;
-            try {
-                return new antifraudFingerprint({
-                    api: {
-                        url: this.fingerprintApiUrl,
-                        token: this.settingsService.token,
-                        timeout: 3000,
-                    },
-                    retry: {
-                        num: 1,
-                        timeout: 500,
-                    },
-                });
-            }
-            catch (error) {
-                return null;
-            }
-        });
-    }
-    /**
-     *Загружаем библиотеку, генерируем данные,
-     *хешируем с помощью BASE64 и отправляем на бэкенд,
-     *в ответ получаем dfp_hash.
-     **/
-    buildHash() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const fingerPrintData = yield this.generate();
-            const hash = yield this.send(fingerPrintData).catch(() => {
-                return null;
-            });
-            return JSON.stringify(hash);
-        });
-    }
-    /**
-     *Новая версия библиотеки содержит не все компоненты, некоторые приходится имплементировать самостоятельно
-     **/
-    getHasLiedResolution() {
-        const { screen } = this.window;
-        return (screen.width < screen.availWidth || screen.height < screen.availHeight);
-    }
-    /**
-     *Бэкенд заточен под конкретные поля, которые необходимо смапить.
-     **/
-    getComponents(components) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return {
-            user_agent: navigator.userAgent,
-            language: (_c = (_b = (_a = components.languages.value) === null || _a === void 0 ? void 0 : _a.shift()) === null || _b === void 0 ? void 0 : _b.shift()) !== null && _c !== void 0 ? _c : '',
-            color_depth: components.colorDepth.value,
-            device_memory: components.deviceMemory.value,
-            hardware_concurrency: components.hardwareConcurrency.value,
-            resolution: components.screenResolution.value,
-            available_resolution: components.screenResolution.value,
-            timezone_offset: new Date().getTimezoneOffset(),
-            session_storage: components.sessionStorage.value ? 1 : 0,
-            local_storage: components.localStorage.value ? 1 : 0,
-            indexed_db: components.indexedDB.value ? 1 : 0,
-            open_database: components.openDatabase.value ? 1 : 0,
-            navigator_platform: components.platform.value,
-            regular_plugins: (_e = (_d = components.plugins.value) === null || _d === void 0 ? void 0 : _d.map((plugin) => plugin.name)) !== null && _e !== void 0 ? _e : [],
-            canvas: (_f = components.canvas.value) === null || _f === void 0 ? void 0 : _f.text,
-            webgl: (_g = components.canvas.value) === null || _g === void 0 ? void 0 : _g.text,
-            webgl_vendor: components.vendor.value,
-            has_lied_resolution: this.getHasLiedResolution(),
-            touch_support: Object.values((_h = components.touchSupport.value) !== null && _h !== void 0 ? _h : {}),
-            js_fonts: components.fonts.value,
-        };
-    }
-    /**
-     * Получаем данные dfp с помощью FingerprintJS, мапим необходимые поля, добавляем хэш
-     **/
-    generate() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { library, getHash } = this.fingerprintJs;
-            const fingerprint = yield library.load();
-            const commonFingerPrintData = yield fingerprint.get();
-            const fingerPrintData = this.getComponents(commonFingerPrintData.components);
-            fingerPrintData.hash = getHash(JSON.stringify(fingerPrintData));
-            return fingerPrintData;
-        });
-    }
-    /**
-     * Отправка dfp на сервер, в ответ получаем dfp_hash
-     **/
-    send(fingerPrintData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const token = this.settingsService.token;
-            if (token === null) {
-                throw new DefaultTerminalError();
-            }
-            const requestBody = {
-                access_token: token,
-                'dfp[200]': '',
-            };
-            requestBody['dfp[200]'] = btoa(encodeURIComponent(JSON.stringify(fingerPrintData)));
-            return lastValueFrom(this.secureApi.post(this.apiRoute, new URLSearchParams(requestBody), {
-                headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'),
-                responseType: 'json',
-            }))
-                .then((response) => {
-                return response.dfp_hash;
-            })
-                .then((hash) => __awaiter(this, void 0, void 0, function* () {
-                const fingerprint = yield this.makeAntifraudFingerprint();
-                if (!fingerprint) {
-                    return null;
-                }
-                yield (fingerprint === null || fingerprint === void 0 ? void 0 : fingerprint.dispatch(hash['200']).catch((err) => console.log(err)));
-                const afsHash = yield fingerprint.hash();
-                return Object.assign({ '301': afsHash }, hash);
-            }))
-                .catch((error) => {
-                var _a, _b, _c, _d, _e, _f;
-                const response = error.getHttpErrorData().response;
-                throw new TerminalError((_c = (_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : '', (_f = (_e = (_d = response.data) === null || _d === void 0 ? void 0 : _d.errors[0]) === null || _e === void 0 ? void 0 : _e.support_code) !== null && _f !== void 0 ? _f : '');
-            });
-        });
-    }
-}
-DeviceFingerPrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceFingerPrintService, deps: [{ token: SecureApiClient }, { token: SettingsService }, { token: windowToken }], target: i0.ɵɵFactoryTarget.Injectable });
-DeviceFingerPrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceFingerPrintService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceFingerPrintService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: SecureApiClient }, { type: SettingsService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [windowToken]
-                    }] }];
-    } });
+const americanExpress = {
+    id: CreditCardTypes.AMERICAN_EXPRESS,
+    minLength: 15,
+    maxLength: 15,
+    iconName: 'american-express',
+    mask: '9999 999999 99999',
+    checkNumber(number) {
+        return new RegExp(/^(34)|^(37)/).test(number);
+    },
+    maxCvvLength: 4,
+};
 
-class SubmitService {
-    constructor(requestFactory, responseFactory, settingsService, deviceFingerPrintService, secureApi) {
-        this.requestFactory = requestFactory;
-        this.responseFactory = responseFactory;
-        this.settingsService = settingsService;
-        this.deviceFingerPrintService = deviceFingerPrintService;
-        this.secureApi = secureApi;
-        this.directPaymentApiRoute = 'directpayment';
-    }
-    // NB: Never add 'async' statement for this method!
-    // 'Async' statement wraps current promise into another.
-    // In this way two promises become unequal, that can broke XPS API requests logic.
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
-    request(fields, form) {
-        const responsePromise = this.deviceFingerPrintService
-            .getHash()
-            // eslint-disable-next-line @typescript-eslint/promise-function-async
-            .then((dfpHash) => {
-            const requestParams = this.requestFactory({
-                token: this.settingsService.token,
-                fields,
-                form,
-                dfpHash,
-            });
-            return lastValueFrom(this.secureApi.post(this.directPaymentApiRoute, new URLSearchParams(Object.assign({}, requestParams)), {
-                headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'),
-                responseType: 'json',
-            }))
-                .then((response) => this.responseFactory(response))
-                .catch((error) => {
-                throw new ResponseError(error.message);
-            });
-        });
-        return responsePromise;
-    }
-}
-SubmitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SubmitService, deps: [{ token: submitRequestFactoryToken }, { token: submitResponseFactoryToken }, { token: SettingsService }, { token: DeviceFingerPrintService }, { token: SecureApiClient }], target: i0.ɵɵFactoryTarget.Injectable });
-SubmitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SubmitService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SubmitService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [submitRequestFactoryToken]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [submitResponseFactoryToken]
-                    }] }, { type: SettingsService }, { type: DeviceFingerPrintService }, { type: SecureApiClient }];
-    } });
+const dinersClubs = {
+    id: CreditCardTypes.DINERS_CLUBS,
+    minLength: 14,
+    maxLength: 14,
+    iconName: 'dinersclub',
+    mask: '9999 9999 9999 99',
+    checkNumber(number) {
+        const regex = /^(36[0-9]|3(?:0[0-59]|[68][0-9])[0-9])/;
+        return regex.test(number);
+    },
+};
 
-class EmitDataService {
-    constructor() {
-        this.dataSubject = new Subject();
-        this.data$ = this.dataSubject.asObservable();
-    }
-    emit(data) {
-        this.dataSubject.next(data);
-    }
-}
+const discover = {
+    id: CreditCardTypes.DISCOVER,
+    minLength: 16,
+    maxLength: 19,
+    iconName: 'discover',
+    mask: defaultMask,
+    checkNumber(number) {
+        return new RegExp(/^(6011)|^(622(1(2[6-9]|[3-9][0-9])|[2-8][0-9]{2}|9([01][0-9]|2[0-5])))|^(64[4-9])|^65/).test(number);
+    },
+};
 
-class XpsRequest {
-    addXpsParameters(parameters) {
-        for (const key in parameters) {
-            this[`xps_${key}`] = parameters[key];
-        }
-    }
-}
+const jcb = {
+    id: CreditCardTypes.JCB,
+    minLength: 15,
+    maxLength: 16,
+    iconName: 'jcb',
+    mask: fourBlockMask,
+    checkNumber(number) {
+        return new RegExp(/^35(2[89]|[3-8][0-9])/).test(number);
+    },
+};
 
-/* eslint-disable @typescript-eslint/naming-convention */
-class SyncRequest extends XpsRequest {
-    constructor(parameters) {
-        super();
-        this.xps_fix_command = 'calculate';
-        this.access_token = parameters.token;
-        const fieldsValues = this.getFieldsValues(parameters.changedField, parameters.fields, parameters.form);
-        this.addXpsParameters(Object.assign(Object.assign({}, fieldsValues), { change_element: parameters.changedField.name }));
-    }
-    getFieldsValues(changedField, fields, form) {
-        var _a;
-        const fieldsMap = this.getFieldsMap(fields);
-        return (_a = changedField === null || changedField === void 0 ? void 0 : changedField.javascript) === null || _a === void 0 ? void 0 : _a.change.params.reduce((xpsParams, fieldName) => {
-            var _a;
-            const formControl = form.get(fieldName);
-            const field = fieldsMap.get(fieldName);
-            if (formControl || field) {
-                xpsParams[fieldName] = (_a = formControl === null || formControl === void 0 ? void 0 : formControl.value) !== null && _a !== void 0 ? _a : field === null || field === void 0 ? void 0 : field.value;
-            }
-            return xpsParams;
-        }, {});
-    }
-    getFieldsMap(fields) {
-        const map = new Map();
-        fields.forEach((field) => map.set(field.name, field));
-        return map;
-    }
-}
+const dankort = {
+    id: CreditCardTypes.DANKORT,
+    minLength: 16,
+    maxLength: 16,
+    iconName: 'dankort',
+    mask: fourBlockMask,
+    checkNumber(number) {
+        const subLength = 4;
+        const cardNumberSub = number.substring(0, subLength);
+        return cardNumberSub === '5019';
+    },
+};
 
-const syncRequestFactoryToken = new InjectionToken('SyncRequest');
-const syncRequestFactoryProvider = {
-    provide: syncRequestFactoryToken,
-    useValue: (...args) => new SyncRequest(...args),
+const hipercard = {
+    id: CreditCardTypes.HIPERCARD,
+    minLength: 13,
+    maxLength: 19,
+    iconName: 'hipercard',
+    mask: defaultMask,
+    checkNumber(number) {
+        return new RegExp(/^((606282|637095|637568)[0-9]|38[0-9]{14,17})/).test(number);
+    },
 };
 
-class SyncResponse {
-    constructor(changedField, response) {
-        var _a;
-        this.error = null;
-        const fieldError = (_a = response === null || response === void 0 ? void 0 : response.errors) === null || _a === void 0 ? void 0 : _a.find((error) => error.element_name === changedField.name);
-        if (fieldError) {
-            this.error = {
-                asyncError: {
-                    code: fieldError.code,
-                    message: fieldError.message,
-                },
-            };
-        }
-        this.fields = Object.keys(response.form).map((key) => response.form[key]);
-        this.parameters = response;
-    }
-}
+const elo = {
+    id: CreditCardTypes.ELO,
+    minLength: 16,
+    maxLength: 19,
+    iconName: 'elo',
+    mask: defaultMask,
+    checkNumber(number) {
+        return new RegExp(/^(40117[8-9]|431274|438935|451416|457393|45763[1-2]|506(699|7[0-6][0-9]|77[0-8])|509\d{3}|504175|627780|636297|636368|65003[1-3]|6500(3[5-9]|4[0-9]|5[0-1])|6504(0[5-9]|[1-3][0-9])|650(4[8-9][0-9]|5[0-2][0-9]|53[0-8])|6505(4[1-9]|[5-8][0-9]|9[0-8])|6507(0[0-9]|1[0-8])|65072[0-7]|6509(0[1-9]|1[0-9]|20)|6516(5[2-9]|[6-7][0-9])|6550([0-1][0-9]|2[1-9]|[3-4][0-9]|5[0-8]))/).test(number);
+    },
+};
 
-const syncResponseFactoryToken = new InjectionToken('SyncResponse');
-const syncResponseFactoryProvider = {
-    provide: syncResponseFactoryToken,
-    useValue: (...args) => new SyncResponse(...args),
+const aura = {
+    id: CreditCardTypes.AURA,
+    minLength: 16,
+    maxLength: 19,
+    iconName: 'aura',
+    mask: defaultMask,
+    checkNumber(number) {
+        const subLength = 8;
+        const cardNumberSub = number.substring(0, subLength);
+        return ['50786000', '50786018', '50786019'].includes(cardNumberSub);
+    },
 };
 
-class SyncService extends EmitDataService {
-    constructor(requestFactory, responseFactory, secureApi, nextActionService, settingsService) {
-        super();
-        this.requestFactory = requestFactory;
-        this.responseFactory = responseFactory;
-        this.secureApi = secureApi;
-        this.nextActionService = nextActionService;
-        this.settingsService = settingsService;
-        this.apiRoute = 'directpayment';
-        this.prevFieldSyncStates = {};
-        this.form = new UntypedFormGroup({});
-        this.fields = [];
-        this.fieldAsyncValidation = new Subject();
-    }
-    get fieldAsyncValidation$() {
-        return this.fieldAsyncValidation.asObservable();
+const naranja = {
+    id: CreditCardTypes.NARANJA,
+    minLength: 12,
+    maxLength: 19,
+    iconName: 'naranja',
+    mask: defaultMask,
+    checkNumber(number) {
+        const subLength = 6;
+        const cardNumberSub = number.substring(0, subLength);
+        return cardNumberSub === '589562';
+    },
+};
+
+const mir = {
+    id: CreditCardTypes.MIR,
+    minLength: 16,
+    maxLength: 16,
+    iconName: 'mir',
+    mask: defaultMask,
+    checkNumber(number) {
+        const subLength = 4;
+        const cardNumberSub = number.substring(0, subLength);
+        return cardNumberSub >= '2200' && cardNumberSub <= '2204';
+    },
+};
+
+const chinaUnionPay = {
+    id: CreditCardTypes.CHINA_UNION_PAY,
+    minLength: 16,
+    maxLength: 19,
+    iconName: 'unionpay',
+    mask: '999 9999 9999 99999999',
+    checkNumber(number) {
+        return number.startsWith('62');
+    },
+};
+
+const defaultCard = {
+    id: CreditCardTypes.DEFAULT,
+    minLength: 12,
+    maxLength: 19,
+    iconName: null,
+    mask: defaultMask,
+    checkNumber() {
+        return false;
+    },
+};
+
+const postePay = {
+    id: CreditCardTypes.POSTEPAY,
+    minLength: 12,
+    maxLength: 19,
+    iconName: 'poste_pay',
+    mask: '9999 9999 9999 9999 999',
+    checkNumber(number) {
+        const regex = /^(5018)|^(5020)|^(5038)|^(5893)|^(6304)|^(6759)|^(6761)|^(6762)|^(6763)|^(0604)|^(6706)|^(6771)|^(6709)/;
+        return regex.test(number);
+    },
+};
+
+/**
+ * order does matter
+ * settings with more specific pattern should be placed above
+ * Example:
+ * - 12*
+ * - 12
+ * - 1
+ * "12*" pattern should be checked first, otherwise pattern "1" will be taken
+ * before "12*" checked
+ */
+const orderedCardSettings = [
+    aura,
+    naranja,
+    maestro,
+    postePay,
+    elo,
+    discover,
+    dankort,
+    hipercard,
+    mir,
+    jcb,
+    dinersClubs,
+    americanExpress,
+    mastercard,
+    chinaUnionPay,
+    visa,
+    defaultCard,
+];
+
+const creditCardsMap = {
+    [CreditCardTypes.DEFAULT]: defaultCard,
+    [CreditCardTypes.VISA]: visa,
+    [CreditCardTypes.MASTERCARD]: mastercard,
+    [CreditCardTypes.MAESTRO]: maestro,
+    [CreditCardTypes.AMERICAN_EXPRESS]: americanExpress,
+    [CreditCardTypes.DINERS_CLUBS]: dinersClubs,
+    [CreditCardTypes.DISCOVER]: discover,
+    [CreditCardTypes.JCB]: jcb,
+    [CreditCardTypes.DANKORT]: dankort,
+    [CreditCardTypes.HIPERCARD]: hipercard,
+    [CreditCardTypes.ELO]: elo,
+    [CreditCardTypes.AURA]: aura,
+    [CreditCardTypes.NARANJA]: naranja,
+    [CreditCardTypes.MIR]: mir,
+    [CreditCardTypes.CHINA_UNION_PAY]: chinaUnionPay,
+    [CreditCardTypes.POSTEPAY]: postePay,
+};
+
+class CreditCardService {
+    getBinNumber(cardNumber) {
+        const binNumberLength = 6;
+        return cardNumber.replace(/\s+/g, '').substring(0, binNumberLength);
     }
-    setup(form, fields) {
-        this.reset();
-        this.form = form;
-        this.fields = fields;
+    getAccountSuffix(cardNumber) {
+        const accountSuffixLength = 4;
+        return cardNumber
+            .replace(/\s+/g, '')
+            .substring(cardNumber.length - accountSuffixLength);
     }
-    reset() {
-        this.prevFieldSyncStates = {};
-        this.form = new UntypedFormGroup({});
-        this.fields = [];
+    getTypeByNumber(cardNumber) {
+        cardNumber = cardNumber.replace(/\s+/g, '');
+        const cardSettings = orderedCardSettings.find((settings) => {
+            const isNumberMatched = settings.checkNumber(cardNumber);
+            return isNumberMatched ? settings.id : false;
+        });
+        return cardSettings ? cardSettings.id : defaultCard.id;
     }
-    validate(field) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.isReadyField(field)) {
-                return Promise.resolve(null);
-            }
-            const control = this.form.get(field.name);
-            const value = control === null || control === void 0 ? void 0 : control.value;
-            const prevFieldState = this.getPrevFieldSyncState(field);
-            const isInitialValue = value === field.value && !prevFieldState;
-            if (isInitialValue) {
-                return Promise.resolve(null);
-            }
-            if (prevFieldState && value === prevFieldState.value) {
-                return Promise.resolve(prevFieldState.result).then((response) => {
-                    var _a;
-                    return (_a = response === null || response === void 0 ? void 0 : response.error) !== null && _a !== void 0 ? _a : null;
-                });
-            }
-            const requestPromise = this.request(field);
-            this.setPrevFieldSyncState(field, value, requestPromise);
-            return requestPromise.then((response) => {
-                var _a;
-                this.fieldAsyncValidation.next({
-                    value,
-                    field,
-                    response,
-                });
-                return (_a = response.error) !== null && _a !== void 0 ? _a : null;
-            });
+    getCreditCardSettings(cardType) {
+        const creditCard = creditCardsMap[cardType];
+        if (!creditCard) {
+            return defaultCard;
+        }
+        return creditCard;
+    }
+}
+CreditCardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CreditCardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class EncryptCreditCardService {
+    constructor(creditCardService) {
+        this.creditCardService = creditCardService;
+        this.secureFieldNames = [
+            'xps_card_number',
+            'xps_cvv',
+            'xps_extra_cvv',
+            'xps_card_year',
+            'xps_card_month',
+        ];
+        this.jsEncrypt = new JSEncrypt();
+    }
+    setPublicKey(publicKey) {
+        this.jsEncrypt.setPublicKey(publicKey);
+    }
+    encryptCreditCard(request) {
+        if (request.xps_card_number) {
+            const openCard = this.createOpenCard(request);
+            request.xps_open_card = JSON.stringify(openCard);
+        }
+        const encryptedCard = this.createEncryptedCard(request);
+        if (!request.xps_encrypted_card && JSON.stringify(encryptedCard) !== '{}') {
+            request.xps_encrypted_card = this.encrypt(JSON.stringify(encryptedCard));
+        }
+        this.secureFieldNames.forEach((secureFieldName) => {
+            delete request[secureFieldName];
         });
+        return request;
     }
-    getSyncValidationErrors(field) {
+    encrypt(value) {
         var _a;
-        const control = this.form.get(field.name);
-        return (_a = control === null || control === void 0 ? void 0 : control.errors) !== null && _a !== void 0 ? _a : null;
+        if (!((_a = this.jsEncrypt) === null || _a === void 0 ? void 0 : _a.getPublicKey())) {
+            throw new EncryptCreditCardError('Empty public key');
+        }
+        const encryptedValue = this.jsEncrypt.encrypt(value);
+        if (!encryptedValue) {
+            throw new EncryptCreditCardError('Encryption returns false instead of encrypted string');
+        }
+        return encryptedValue;
+    }
+    createEncryptedCard(request) {
+        const encryptedCard = {
+            card_number: request.xps_card_number,
+            card_year: request.xps_card_year,
+            card_month: request.xps_card_month,
+            cvv: request.xps_cvv,
+        };
+        if (request.xps_extra_cvv) {
+            encryptedCard.cvv = request.xps_extra_cvv;
+        }
+        return encryptedCard;
     }
-    request(field) {
+    createOpenCard(request) {
+        return {
+            card_bin: this.creditCardService.getBinNumber(request.xps_card_number),
+            card_suffix: this.creditCardService.getAccountSuffix(request.xps_card_number),
+            card_year: request.xps_card_year,
+            card_month: request.xps_card_month,
+        };
+    }
+}
+EncryptCreditCardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EncryptCreditCardService, deps: [{ token: CreditCardService }], target: i0.ɵɵFactoryTarget.Injectable });
+EncryptCreditCardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EncryptCreditCardService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EncryptCreditCardService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: CreditCardService }]; } });
+
+class InitializeService {
+    constructor(responseFactory, xpsApiService, settingsService, countryService, nextActionService, encryptCreditCardService) {
+        this.responseFactory = responseFactory;
+        this.xpsApiService = xpsApiService;
+        this.settingsService = settingsService;
+        this.countryService = countryService;
+        this.nextActionService = nextActionService;
+        this.encryptCreditCardService = encryptCreditCardService;
+        // TODO PAYMENTS-15743: replace with new refer id for headless core
+        this.ps4ReferId = '22';
+    }
+    request(config) {
         return __awaiter(this, void 0, void 0, function* () {
-            const requestParams = this.requestFactory({
-                token: this.settingsService.token,
-                changedField: field,
-                fields: this.fields,
-                form: this.form,
-            });
-            return lastValueFrom(this.secureApi.post(this.apiRoute, new URLSearchParams(requestParams), {
-                headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'),
-                responseType: 'json',
-            })).then((response) => {
-                var _a;
-                if ((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length) {
-                    this.nextActionService.emitFlowUpdates(new ShowErrorsAction(response.errors));
+            const requestParams = {
+                access_token: this.settingsService.token,
+                pid: String(config.paymentMethodId),
+                refer: this.ps4ReferId,
+                country: this.countryService.getCountry(),
+                returnUrl: config.returnUrl,
+            };
+            return this.xpsApiService
+                .directPaymentRequest(requestParams)
+                .then((response) => {
+                var _a, _b;
+                const initializeResponse = this.responseFactory(response);
+                if ((_b = (_a = initializeResponse.paymentForm) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b.length) {
+                    this.nextActionService.emitFlowUpdates(new ShowErrorsAction(initializeResponse.paymentForm.errors));
                 }
-                this.emit(response);
-                return this.responseFactory(field, response);
+                if (initializeResponse.paymentForm) {
+                    this.setCreditCardEncryptKey(initializeResponse.paymentForm);
+                }
+                return initializeResponse;
+            })
+                .catch((error) => {
+                throw new ResponseError(error.message);
             });
         });
     }
-    isReadyField(field) {
-        var _a, _b;
-        const isSyncEnabled = !!((_a = field.javascript) === null || _a === void 0 ? void 0 : _a.change);
-        const isExistsInForm = !!((_b = this.form) === null || _b === void 0 ? void 0 : _b.get(field.name));
-        return isSyncEnabled && isExistsInForm;
-    }
-    getPrevFieldSyncState(field) {
-        return this.prevFieldSyncStates[field.name];
-    }
-    setPrevFieldSyncState(field, value, result) {
-        this.prevFieldSyncStates[field.name] = { value, result };
+    setCreditCardEncryptKey(paymentForm) {
+        const publicKeyField = paymentForm.fields.find((field) => field.name === 'public_key');
+        if (!publicKeyField) {
+            return;
+        }
+        this.encryptCreditCardService.setPublicKey(atob(publicKeyField.value));
     }
 }
-SyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SyncService, deps: [{ token: syncRequestFactoryToken }, { token: syncResponseFactoryToken }, { token: SecureApiClient }, { token: NextActionService }, { token: SettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
-SyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SyncService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SyncService, decorators: [{
+InitializeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InitializeService, deps: [{ token: initializeResponseFactoryToken }, { token: XpsApiService }, { token: SettingsService }, { token: CountryService }, { token: NextActionService }, { token: EncryptCreditCardService }], target: i0.ɵɵFactoryTarget.Injectable });
+InitializeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InitializeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InitializeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1379,561 +1413,613 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
-                        args: [syncRequestFactoryToken]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [syncResponseFactoryToken]
-                    }] }, { type: SecureApiClient }, { type: NextActionService }, { type: SettingsService }];
+                        args: [initializeResponseFactoryToken]
+                    }] }, { type: XpsApiService }, { type: SettingsService }, { type: CountryService }, { type: NextActionService }, { type: EncryptCreditCardService }];
     } });
 
-class ControlConfig {
-    constructor() {
-        this.shouldHideUserInput = false;
+class XpsApiPartRequest {
+    addXpsParameters(parameters) {
+        for (const key in parameters) {
+            this[`xps_${key}`] = parameters[key];
+        }
     }
 }
 
-class TextControlConfig extends ControlConfig {
+class TokenError extends AppError {
     constructor() {
-        super(...arguments);
-        this.controlType = 'text';
+        super('XPS API needs token.');
     }
 }
 
-function convert(validator, message) {
-    return (control) => {
-        const errors = validator(control);
-        if (!errors) {
-            return errors;
+class SubmitRequest extends XpsApiPartRequest {
+    constructor(parameters) {
+        super();
+        const { token, fields, form, dfpHash } = parameters;
+        if (token === null) {
+            throw new TokenError();
         }
-        const firstErrorKey = Object.keys(errors)[0];
-        const firstError = errors[firstErrorKey];
-        const error = typeof firstError === 'object' && firstError !== null ? firstError : {};
-        error.message = message;
-        errors[firstErrorKey] = error;
-        return errors;
-    };
+        this.access_token = token;
+        if (dfpHash) {
+            this.xps_dfp_hash = dfpHash;
+        }
+        this.addXpsParameters(this.getFieldsValues(fields, form));
+    }
+    getFieldsValues(fields, form) {
+        return fields.reduce((xpsParams, field) => {
+            const formControl = form.get(field.name);
+            xpsParams[field.name] = formControl ? formControl.value : field === null || field === void 0 ? void 0 : field.value;
+            return xpsParams;
+        }, {});
+    }
 }
 
-const emailRegexp = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i; // eslint-disable-line
-function convertedEmailValidator() {
-    return convert(Validators.pattern(emailRegexp), 'Enter a valid email');
-}
+const submitRequestFactoryToken = new InjectionToken('SubmitRequest');
+const submitRequestFactoryProvider = {
+    provide: submitRequestFactoryToken,
+    useValue: (...args) => new SubmitRequest(...args),
+};
 
-function convertedRequiredValidator() {
-    return convert(Validators.required, 'Required');
-}
+const submitResponseFactoryToken = new InjectionToken('SubmitResponse');
+const submitResponseFactoryProvider = {
+    provide: submitResponseFactoryToken,
+    useValue: (...args) => new SubmitResponse(...args),
+};
 
-class Converter {
-    constructor(syncService) {
-        this.syncService = syncService;
-    }
-    convertToConfig(field, formState) {
-        const config = this.createControlConfig(field, formState);
-        if (formState === null || formState === void 0 ? void 0 : formState.disabled) {
-            config.disabled = true;
-        }
-        return config;
-    }
-    convertToFormControl(field) {
-        return new UntypedFormControl(this.getValue(field), this.getValidators(field), this.getAsyncValidators(field));
+class DeviceFingerPrintService {
+    constructor(settingsService) {
+        this.settingsService = settingsService;
     }
-    getValidators(field) {
-        const validators = [];
-        if (field.isMandatory === "1" /* XpsBoolean.true */) {
-            validators.push(convertedRequiredValidator());
-        }
-        if (field.regex) {
-            const match = /^\/(.*)\/([gim]*)$/.exec(field.regex);
-            if (match) {
-                const pattern = new RegExp(match[1], match[2]);
-                const errorMessage = field.validation_error_msg
-                    ? field.validation_error_msg
-                    : 'Enter valid data';
-                validators.push(convert(Validators.pattern(pattern), errorMessage));
-            }
+    init() {
+        if (!this.settingsService.isInitialized) {
+            return;
         }
-        return validators;
-    }
-    getAsyncValidators(field) {
-        return () => __awaiter(this, void 0, void 0, function* () { return this.syncService.validate(field); });
-    }
-    createDefaultControlConfig(controlConfigClass, field) {
-        const config = new controlConfigClass();
-        this.copyCommonOptions(config, field);
-        return config;
-    }
-    getValue(field) {
-        return field.value;
+        this.antifraudFingerprintLibrary = this.loadAntifraudFingerprintLibrary();
+        this.hash = this.buildHash();
     }
-    getDataType() {
-        return 'text';
+    getHash() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.hash;
+        });
     }
-    getAutocomplete() {
-        return 'off';
+    loadAntifraudFingerprintLibrary() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const library = yield import('@xsolla/antifraud-fingerprint');
+            return library.AntifraudFingerprint;
+        });
     }
-    shouldHideUserInput() {
-        return false;
+    buildHash() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const hash = yield this.generate();
+            return JSON.stringify(hash);
+        });
     }
-    getCommonControlConfig(field) {
-        return {
-            name: field.name,
-            title: field.title,
-            labelHint: field.label_hint,
-            dataType: this.getDataType(),
-            readonly: field.isReadonly === "1" /* XpsBoolean.true */,
-            placeholder: field.example,
-            autocomplete: this.getAutocomplete(),
-        };
+    generate() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const fingerprint = yield this.makeAntifraudFingerprint();
+            if (!fingerprint) {
+                return null;
+            }
+            yield fingerprint.dispatch().catch((err) => console.log(err));
+            const afsHash = yield fingerprint.hash();
+            return { '301': afsHash };
+        });
     }
-    copyCommonOptions(target, field) {
-        const commonControlConfig = this.getCommonControlConfig(field);
-        Object.keys(commonControlConfig).forEach((sourceKey) => {
-            if (!(sourceKey in target)) {
-                target[sourceKey] = commonControlConfig[sourceKey];
+    makeAntifraudFingerprint() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.settingsService.token) {
+                return null;
+            }
+            const antifraudFingerprint = yield this
+                .antifraudFingerprintLibrary;
+            try {
+                return new antifraudFingerprint({
+                    api: {
+                        url: 'https://afs.xsolla.com/dfp/api/v1/',
+                        token: this.settingsService.token,
+                        timeout: 3000,
+                    },
+                    retry: {
+                        num: 1,
+                        timeout: 500,
+                    },
+                });
+            }
+            catch (error) {
+                return null;
             }
         });
     }
 }
+DeviceFingerPrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceFingerPrintService, deps: [{ token: SettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
+DeviceFingerPrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceFingerPrintService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceFingerPrintService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SettingsService }]; } });
 
-class EmailConverter extends Converter {
-    constructor(syncService) {
-        super(syncService);
+class SubmitService {
+    constructor(requestFactory, responseFactory, settingsService, deviceFingerPrintService, xpsApiService, encryptCreditCardService) {
+        this.requestFactory = requestFactory;
+        this.responseFactory = responseFactory;
+        this.settingsService = settingsService;
+        this.deviceFingerPrintService = deviceFingerPrintService;
+        this.xpsApiService = xpsApiService;
+        this.encryptCreditCardService = encryptCreditCardService;
     }
-    getValidators(field) {
-        return super.getValidators(field).concat([convertedEmailValidator()]);
+    // NB: Never add 'async' statement for this method!
+    // 'Async' statement wraps current promise into another.
+    // In this way two promises become unequal, that can broke XPS API requests logic.
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    request(fields, form) {
+        return (this.deviceFingerPrintService
+            .getHash()
+            // eslint-disable-next-line @typescript-eslint/promise-function-async
+            .then((dfpHash) => {
+            const requestParams = this.requestFactory({
+                token: this.settingsService.token,
+                fields,
+                form,
+                dfpHash,
+            });
+            const encryptedRequest = this.encryptCreditCardService.encryptCreditCard(requestParams);
+            return this.xpsApiService
+                .directPaymentRequest(encryptedRequest)
+                .then((response) => this.responseFactory(response))
+                .catch((error) => {
+                throw new ResponseError(error.message);
+            });
+        }));
     }
-    createControlConfig(field) {
-        const config = this.createDefaultControlConfig(TextControlConfig, field);
-        config.autocomplete = 'email';
-        config.icon = 'mail';
-        return config;
+}
+SubmitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SubmitService, deps: [{ token: submitRequestFactoryToken }, { token: submitResponseFactoryToken }, { token: SettingsService }, { token: DeviceFingerPrintService }, { token: XpsApiService }, { token: EncryptCreditCardService }], target: i0.ɵɵFactoryTarget.Injectable });
+SubmitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SubmitService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SubmitService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [submitRequestFactoryToken]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [submitResponseFactoryToken]
+                    }] }, { type: SettingsService }, { type: DeviceFingerPrintService }, { type: XpsApiService }, { type: EncryptCreditCardService }];
+    } });
+
+class EmitDataService {
+    constructor() {
+        this.dataSubject = new Subject();
+        this.data$ = this.dataSubject.asObservable();
     }
-    getDataType() {
-        return 'email';
+    emit(data) {
+        this.dataSubject.next(data);
     }
 }
-EmailConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EmailConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
-EmailConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EmailConverter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EmailConverter, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: SyncService }]; } });
-
-const restrictedValueValidator = (restrictedValue) => {
-    return ({ value }) => {
-        return value !== restrictedValue ? null : { valueAllowed: false };
-    };
-};
 
-class ZipConverter extends Converter {
-    constructor(syncService, countryService) {
-        super(syncService);
-        this.countryService = countryService;
-        this.minLength = 3;
-        this.maxLength = 10;
-        this.usCountryLength = 5;
-    }
-    get isUsCountry() {
-        return this.countryService.getCountry() === 'US';
+/* eslint-disable @typescript-eslint/naming-convention */
+class SyncRequest extends XpsApiPartRequest {
+    constructor(parameters) {
+        super();
+        this.xps_fix_command = 'calculate';
+        this.access_token = parameters.token;
+        const fieldsValues = this.getFieldsValues(parameters.changedField, parameters.fields, parameters.form);
+        this.addXpsParameters(Object.assign(Object.assign({}, fieldsValues), { change_element: parameters.changedField.name }));
     }
-    getValidators(field) {
-        const minLength = this.isUsCountry ? this.usCountryLength : this.minLength;
-        const maxLength = this.isUsCountry ? this.usCountryLength : this.maxLength;
-        const validators = super
-            .getValidators(field)
-            .concat([
-            convert(Validators.minLength(minLength), `Enter at least ${minLength} characters`),
-            convert(Validators.maxLength(maxLength), `Enter no more than ${maxLength} characters`),
-        ]);
-        if (this.isUsCountry) {
-            validators.push(convert(restrictedValueValidator('00000'), 'Enter a valid ZIP code'));
-        }
-        return validators;
-    }
-    createControlConfig(field) {
-        const config = this.createDefaultControlConfig(TextControlConfig, field);
-        config.icon = 'location';
-        if (this.isUsCountry) {
-            config.maskConfig = {
-                guide: false,
-                unmaskModelValue: true,
-                showMask: true,
-            };
-            config.inputMode = 'numeric';
-            if (masksFunctionsMap['zip']) {
-                config.maskConfig.mask = masksFunctionsMap['zip'];
+    getFieldsValues(changedField, fields, form) {
+        var _a;
+        const fieldsMap = this.getFieldsMap(fields);
+        return (_a = changedField === null || changedField === void 0 ? void 0 : changedField.javascript) === null || _a === void 0 ? void 0 : _a.change.params.reduce((xpsParams, fieldName) => {
+            var _a;
+            const formControl = form.get(fieldName);
+            const field = fieldsMap.get(fieldName);
+            if (formControl || field) {
+                xpsParams[fieldName] = (_a = formControl === null || formControl === void 0 ? void 0 : formControl.value) !== null && _a !== void 0 ? _a : field === null || field === void 0 ? void 0 : field.value;
             }
-        }
-        else {
-            config.maxLength = this.maxLength;
-        }
-        return config;
-    }
-    getAutocomplete() {
-        return 'postal-code';
+            return xpsParams;
+        }, {});
     }
-    getDataType() {
-        return 'text';
+    getFieldsMap(fields) {
+        const map = new Map();
+        fields.forEach((field) => map.set(field.name, field));
+        return map;
     }
 }
-ZipConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ZipConverter, deps: [{ token: SyncService }, { token: CountryService }], target: i0.ɵɵFactoryTarget.Injectable });
-ZipConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ZipConverter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ZipConverter, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: SyncService }, { type: CountryService }]; } });
 
-function isEmptyInputValue(value) {
-    return value == null || value.length === 0;
-}
+const syncRequestFactoryToken = new InjectionToken('SyncRequest');
+const syncRequestFactoryProvider = {
+    provide: syncRequestFactoryToken,
+    useValue: (...args) => new SyncRequest(...args),
+};
 
-function isString(value) {
-    return typeof value === 'string';
+class SyncResponse {
+    constructor(changedField, response) {
+        var _a;
+        this.error = null;
+        const fieldError = (_a = response === null || response === void 0 ? void 0 : response.errors) === null || _a === void 0 ? void 0 : _a.find((error) => error.element_name === changedField.name);
+        if (fieldError) {
+            this.error = {
+                asyncError: {
+                    code: fieldError.code,
+                    message: fieldError.message,
+                },
+            };
+        }
+        this.fields = Object.keys(response.form).map((key) => response.form[key]);
+        this.parameters = response;
+    }
 }
 
-/**
- * Checks number match Luhn algorithm.
- * Based on http://en.wikipedia.org/wiki/Luhn.
- */
-const luhnFormulaValidator = ({ value }) => {
-    if (isEmptyInputValue(value) || !isString(value)) {
-        return null;
+const syncResponseFactoryToken = new InjectionToken('SyncResponse');
+const syncResponseFactoryProvider = {
+    provide: syncResponseFactoryToken,
+    useValue: (...args) => new SyncResponse(...args),
+};
+
+class SyncService extends EmitDataService {
+    constructor(requestFactory, responseFactory, xpsApiService, nextActionService, settingsService, encryptCreditCardService) {
+        super();
+        this.requestFactory = requestFactory;
+        this.responseFactory = responseFactory;
+        this.xpsApiService = xpsApiService;
+        this.nextActionService = nextActionService;
+        this.settingsService = settingsService;
+        this.encryptCreditCardService = encryptCreditCardService;
+        this.prevFieldSyncStates = {};
+        this.form = new UntypedFormGroup({});
+        this.fields = [];
+        this.fieldAsyncValidation = new Subject();
     }
-    const error = {
-        rewritableError: {
-            message: `Enter a valid card number`,
-        },
-    };
-    if (/[^0-9 -]+/.test(value)) {
-        // accept only spaces, digits and dashes
-        return error;
+    get fieldAsyncValidation$() {
+        return this.fieldAsyncValidation.asObservable();
     }
-    let resultSum = 0;
-    let digit = 0;
-    let isEven = false;
-    const modBase = 10;
-    const digitRadix = 10;
-    const maxNumber = 9;
-    const digits = value.replace(/\D/g, '');
-    // Checks if number match Luhn algorithm
-    // based on http://en.wikipedia.org/wiki/Luhn
-    for (let index = digits.length - 1; index >= 0; index--) {
-        const char = digits.charAt(index);
-        digit = parseInt(char, digitRadix);
-        if (isEven && (digit *= 2) > maxNumber) {
-            digit -= maxNumber;
-        }
-        resultSum += digit;
-        isEven = !isEven;
+    setup(form, fields) {
+        this.reset();
+        this.form = form;
+        this.fields = fields;
     }
-    return resultSum % modBase === 0 ? null : error;
-};
+    reset() {
+        this.prevFieldSyncStates = {};
+        this.form = new UntypedFormGroup({});
+        this.fields = [];
+    }
+    validate(field) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.isReadyField(field)) {
+                return Promise.resolve(null);
+            }
+            const control = this.form.get(field.name);
+            const value = control === null || control === void 0 ? void 0 : control.value;
+            const prevFieldState = this.getPrevFieldSyncState(field);
+            const isInitialValue = value === field.value && !prevFieldState;
+            if (isInitialValue) {
+                return Promise.resolve(null);
+            }
+            if (prevFieldState && value === prevFieldState.value) {
+                return Promise.resolve(prevFieldState.result).then((response) => {
+                    var _a;
+                    return (_a = response === null || response === void 0 ? void 0 : response.error) !== null && _a !== void 0 ? _a : null;
+                });
+            }
+            const requestPromise = this.request(field);
+            this.setPrevFieldSyncState(field, value, requestPromise);
+            return requestPromise.then((response) => {
+                var _a;
+                this.fieldAsyncValidation.next({
+                    value,
+                    field,
+                    response,
+                });
+                return (_a = response.error) !== null && _a !== void 0 ? _a : null;
+            });
+        });
+    }
+    getSyncValidationErrors(field) {
+        var _a;
+        const control = this.form.get(field.name);
+        return (_a = control === null || control === void 0 ? void 0 : control.errors) !== null && _a !== void 0 ? _a : null;
+    }
+    request(field) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const requestParams = this.requestFactory({
+                token: this.settingsService.token,
+                changedField: field,
+                fields: this.fields,
+                form: this.form,
+            });
+            const encryptedRequest = this.encryptCreditCardService.encryptCreditCard(requestParams);
+            return this.xpsApiService
+                .directPaymentRequest(encryptedRequest)
+                .then((response) => {
+                var _a;
+                if ((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length) {
+                    this.nextActionService.emitFlowUpdates(new ShowErrorsAction(response.errors));
+                }
+                this.emit(response);
+                return this.responseFactory(field, response);
+            });
+        });
+    }
+    isReadyField(field) {
+        var _a, _b;
+        const isSyncEnabled = !!((_a = field.javascript) === null || _a === void 0 ? void 0 : _a.change);
+        const isExistsInForm = !!((_b = this.form) === null || _b === void 0 ? void 0 : _b.get(field.name));
+        return isSyncEnabled && isExistsInForm;
+    }
+    getPrevFieldSyncState(field) {
+        return this.prevFieldSyncStates[field.name];
+    }
+    setPrevFieldSyncState(field, value, result) {
+        this.prevFieldSyncStates[field.name] = { value, result };
+    }
+}
+SyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SyncService, deps: [{ token: syncRequestFactoryToken }, { token: syncResponseFactoryToken }, { token: XpsApiService }, { token: NextActionService }, { token: SettingsService }, { token: EncryptCreditCardService }], target: i0.ɵɵFactoryTarget.Injectable });
+SyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SyncService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SyncService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [syncRequestFactoryToken]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [syncResponseFactoryToken]
+                    }] }, { type: XpsApiService }, { type: NextActionService }, { type: SettingsService }, { type: EncryptCreditCardService }];
+    } });
 
-class CardNumberConfig extends ControlConfig {
+class ControlConfig {
+    constructor() {
+        this.shouldHideUserInput = false;
+    }
+}
+
+class TextControlConfig extends ControlConfig {
     constructor() {
         super(...arguments);
-        this.controlType = 'card-number';
-        this.availableCardTypes = [];
-        this.customError = '';
+        this.controlType = 'text';
     }
 }
 
-const fourBlockMask = '9999 9999 9999 9999';
+function convert(validator, message) {
+    return (control) => {
+        const errors = validator(control);
+        if (!errors) {
+            return errors;
+        }
+        const firstErrorKey = Object.keys(errors)[0];
+        const firstError = errors[firstErrorKey];
+        const error = typeof firstError === 'object' && firstError !== null ? firstError : {};
+        error.message = message;
+        errors[firstErrorKey] = error;
+        return errors;
+    };
+}
 
-var CreditCardTypes;
-(function (CreditCardTypes) {
-    CreditCardTypes["DEFAULT"] = "0";
-    CreditCardTypes["VISA"] = "1";
-    CreditCardTypes["MASTERCARD"] = "2";
-    CreditCardTypes["MAESTRO"] = "3";
-    CreditCardTypes["AMERICAN_EXPRESS"] = "4";
-    CreditCardTypes["DINERS_CLUBS"] = "5";
-    CreditCardTypes["DISCOVER"] = "6";
-    CreditCardTypes["JCB"] = "9";
-    CreditCardTypes["DANKORT"] = "11";
-    CreditCardTypes["HIPERCARD"] = "12";
-    CreditCardTypes["ELO"] = "13";
-    CreditCardTypes["AURA"] = "14";
-    CreditCardTypes["NARANJA"] = "15";
-    CreditCardTypes["MIR"] = "16";
-    CreditCardTypes["CHINA_UNION_PAY"] = "17";
-    CreditCardTypes["POSTEPAY"] = "18";
-})(CreditCardTypes || (CreditCardTypes = {}));
-
-const visa = {
-    id: CreditCardTypes.VISA,
-    minLength: 13,
-    maxLength: 16,
-    iconName: 'visa',
-    mask: fourBlockMask,
-    checkNumber(number) {
-        return number.startsWith('4');
-    },
-};
-
-const mastercard = {
-    id: CreditCardTypes.MASTERCARD,
-    minLength: 16,
-    maxLength: 16,
-    iconName: 'mastercard',
-    mask: fourBlockMask,
-    checkNumber(number) {
-        const subLength = 6;
-        const cardNumberSub = number.substring(0, subLength);
-        return (new RegExp(/^5[1-5]/).test(number) ||
-            (cardNumberSub >= '222100' && cardNumberSub <= '272099'));
-    },
-};
-
-const defaultMask = '9999 9999 9999 9999 999';
-
-const maestro = {
-    id: CreditCardTypes.MAESTRO,
-    minLength: 12,
-    maxLength: 19,
-    iconName: 'maestro',
-    mask: defaultMask,
-    checkNumber(number) {
-        return new RegExp(/^(5018)|^(5020)|^(5038)|^(5893)|^(6304)|^(6759)|^(6761)|^(6762)|^(6763)|^(0604)|^(6706)|^(6771)|^(6709)/).test(number);
-    },
-    maxCvvLength: 3,
-};
-
-const americanExpress = {
-    id: CreditCardTypes.AMERICAN_EXPRESS,
-    minLength: 15,
-    maxLength: 15,
-    iconName: 'american-express',
-    mask: '9999 999999 99999',
-    checkNumber(number) {
-        return new RegExp(/^(34)|^(37)/).test(number);
-    },
-    maxCvvLength: 4,
-};
-
-const dinersClubs = {
-    id: CreditCardTypes.DINERS_CLUBS,
-    minLength: 14,
-    maxLength: 14,
-    iconName: 'dinersclub',
-    mask: '9999 9999 9999 99',
-    checkNumber(number) {
-        const regex = /^(36[0-9]|3(?:0[0-59]|[68][0-9])[0-9])/;
-        return regex.test(number);
-    },
-};
-
-const discover = {
-    id: CreditCardTypes.DISCOVER,
-    minLength: 16,
-    maxLength: 19,
-    iconName: 'discover',
-    mask: defaultMask,
-    checkNumber(number) {
-        return new RegExp(/^(6011)|^(622(1(2[6-9]|[3-9][0-9])|[2-8][0-9]{2}|9([01][0-9]|2[0-5])))|^(64[4-9])|^65/).test(number);
-    },
-};
-
-const jcb = {
-    id: CreditCardTypes.JCB,
-    minLength: 15,
-    maxLength: 16,
-    iconName: 'jcb',
-    mask: fourBlockMask,
-    checkNumber(number) {
-        return new RegExp(/^35(2[89]|[3-8][0-9])/).test(number);
-    },
-};
-
-const dankort = {
-    id: CreditCardTypes.DANKORT,
-    minLength: 16,
-    maxLength: 16,
-    iconName: 'dankort',
-    mask: fourBlockMask,
-    checkNumber(number) {
-        const subLength = 4;
-        const cardNumberSub = number.substring(0, subLength);
-        return cardNumberSub === '5019';
-    },
-};
-
-const hipercard = {
-    id: CreditCardTypes.HIPERCARD,
-    minLength: 13,
-    maxLength: 19,
-    iconName: 'hipercard',
-    mask: defaultMask,
-    checkNumber(number) {
-        return new RegExp(/^((606282|637095|637568)[0-9]|38[0-9]{14,17})/).test(number);
-    },
-};
-
-const elo = {
-    id: CreditCardTypes.ELO,
-    minLength: 16,
-    maxLength: 19,
-    iconName: 'elo',
-    mask: defaultMask,
-    checkNumber(number) {
-        return new RegExp(/^(40117[8-9]|431274|438935|451416|457393|45763[1-2]|506(699|7[0-6][0-9]|77[0-8])|509\d{3}|504175|627780|636297|636368|65003[1-3]|6500(3[5-9]|4[0-9]|5[0-1])|6504(0[5-9]|[1-3][0-9])|650(4[8-9][0-9]|5[0-2][0-9]|53[0-8])|6505(4[1-9]|[5-8][0-9]|9[0-8])|6507(0[0-9]|1[0-8])|65072[0-7]|6509(0[1-9]|1[0-9]|20)|6516(5[2-9]|[6-7][0-9])|6550([0-1][0-9]|2[1-9]|[3-4][0-9]|5[0-8]))/).test(number);
-    },
-};
-
-const aura = {
-    id: CreditCardTypes.AURA,
-    minLength: 16,
-    maxLength: 19,
-    iconName: 'aura',
-    mask: defaultMask,
-    checkNumber(number) {
-        const subLength = 8;
-        const cardNumberSub = number.substring(0, subLength);
-        return ['50786000', '50786018', '50786019'].includes(cardNumberSub);
-    },
-};
-
-const naranja = {
-    id: CreditCardTypes.NARANJA,
-    minLength: 12,
-    maxLength: 19,
-    iconName: 'naranja',
-    mask: defaultMask,
-    checkNumber(number) {
-        const subLength = 6;
-        const cardNumberSub = number.substring(0, subLength);
-        return cardNumberSub === '589562';
-    },
-};
-
-const mir = {
-    id: CreditCardTypes.MIR,
-    minLength: 16,
-    maxLength: 16,
-    iconName: 'mir',
-    mask: defaultMask,
-    checkNumber(number) {
-        const subLength = 4;
-        const cardNumberSub = number.substring(0, subLength);
-        return cardNumberSub >= '2200' && cardNumberSub <= '2204';
-    },
-};
+const emailRegexp = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i; // eslint-disable-line
+function convertedEmailValidator() {
+    return convert(Validators.pattern(emailRegexp), 'Enter a valid email');
+}
 
-const chinaUnionPay = {
-    id: CreditCardTypes.CHINA_UNION_PAY,
-    minLength: 16,
-    maxLength: 19,
-    iconName: 'unionpay',
-    mask: '999 9999 9999 99999999',
-    checkNumber(number) {
-        return number.startsWith('62');
-    },
-};
+function convertedRequiredValidator() {
+    return convert(Validators.required, 'Required');
+}
 
-const defaultCard = {
-    id: CreditCardTypes.DEFAULT,
-    minLength: 12,
-    maxLength: 19,
-    iconName: null,
-    mask: defaultMask,
-    checkNumber() {
+class Converter {
+    constructor(syncService) {
+        this.syncService = syncService;
+    }
+    convertToConfig(field, formState) {
+        const config = this.createControlConfig(field, formState);
+        if (formState === null || formState === void 0 ? void 0 : formState.disabled) {
+            config.disabled = true;
+        }
+        return config;
+    }
+    convertToFormControl(field) {
+        return new UntypedFormControl(this.getValue(field), this.getValidators(field), this.getAsyncValidators(field));
+    }
+    getValidators(field) {
+        const validators = [];
+        if (field.isMandatory === "1" /* XpsBoolean.true */) {
+            validators.push(convertedRequiredValidator());
+        }
+        if (field.regex) {
+            const match = /^\/(.*)\/([gim]*)$/.exec(field.regex);
+            if (match) {
+                const pattern = new RegExp(match[1], match[2]);
+                const errorMessage = field.validation_error_msg
+                    ? field.validation_error_msg
+                    : 'Enter valid data';
+                validators.push(convert(Validators.pattern(pattern), errorMessage));
+            }
+        }
+        return validators;
+    }
+    getAsyncValidators(field) {
+        return () => __awaiter(this, void 0, void 0, function* () { return this.syncService.validate(field); });
+    }
+    createDefaultControlConfig(controlConfigClass, field) {
+        const config = new controlConfigClass();
+        this.copyCommonOptions(config, field);
+        return config;
+    }
+    getValue(field) {
+        return field.value;
+    }
+    getDataType() {
+        return 'text';
+    }
+    getAutocomplete() {
+        return 'off';
+    }
+    shouldHideUserInput() {
         return false;
-    },
-};
-
-const postePay = {
-    id: CreditCardTypes.POSTEPAY,
-    minLength: 12,
-    maxLength: 19,
-    iconName: 'poste_pay',
-    mask: '9999 9999 9999 9999 999',
-    checkNumber(number) {
-        const regex = /^(5018)|^(5020)|^(5038)|^(5893)|^(6304)|^(6759)|^(6761)|^(6762)|^(6763)|^(0604)|^(6706)|^(6771)|^(6709)/;
-        return regex.test(number);
-    },
-};
+    }
+    getCommonControlConfig(field) {
+        return {
+            name: field.name,
+            title: field.title,
+            labelHint: field.label_hint,
+            dataType: this.getDataType(),
+            readonly: field.isReadonly === "1" /* XpsBoolean.true */,
+            placeholder: field.example,
+            autocomplete: this.getAutocomplete(),
+        };
+    }
+    copyCommonOptions(target, field) {
+        const commonControlConfig = this.getCommonControlConfig(field);
+        Object.keys(commonControlConfig).forEach((sourceKey) => {
+            if (!(sourceKey in target)) {
+                target[sourceKey] = commonControlConfig[sourceKey];
+            }
+        });
+    }
+}
 
-/**
- * order does matter
- * settings with more specific pattern should be placed above
- * Example:
- * - 12*
- * - 12
- * - 1
- * "12*" pattern should be checked first, otherwise pattern "1" will be taken
- * before "12*" checked
- */
-const orderedCardSettings = [
-    aura,
-    naranja,
-    maestro,
-    postePay,
-    elo,
-    discover,
-    dankort,
-    hipercard,
-    mir,
-    jcb,
-    dinersClubs,
-    americanExpress,
-    mastercard,
-    chinaUnionPay,
-    visa,
-    defaultCard,
-];
+class EmailConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    getValidators(field) {
+        return super.getValidators(field).concat([convertedEmailValidator()]);
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.autocomplete = 'email';
+        config.icon = 'mail';
+        return config;
+    }
+    getDataType() {
+        return 'email';
+    }
+}
+EmailConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EmailConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+EmailConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EmailConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: EmailConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
 
-const creditCardsMap = {
-    [CreditCardTypes.DEFAULT]: defaultCard,
-    [CreditCardTypes.VISA]: visa,
-    [CreditCardTypes.MASTERCARD]: mastercard,
-    [CreditCardTypes.MAESTRO]: maestro,
-    [CreditCardTypes.AMERICAN_EXPRESS]: americanExpress,
-    [CreditCardTypes.DINERS_CLUBS]: dinersClubs,
-    [CreditCardTypes.DISCOVER]: discover,
-    [CreditCardTypes.JCB]: jcb,
-    [CreditCardTypes.DANKORT]: dankort,
-    [CreditCardTypes.HIPERCARD]: hipercard,
-    [CreditCardTypes.ELO]: elo,
-    [CreditCardTypes.AURA]: aura,
-    [CreditCardTypes.NARANJA]: naranja,
-    [CreditCardTypes.MIR]: mir,
-    [CreditCardTypes.CHINA_UNION_PAY]: chinaUnionPay,
-    [CreditCardTypes.POSTEPAY]: postePay,
+const restrictedValueValidator = (restrictedValue) => {
+    return ({ value }) => {
+        return value !== restrictedValue ? null : { valueAllowed: false };
+    };
 };
 
-class CreditCardService {
-    getBinNumber(cardNumber) {
-        const binNumberLength = 6;
-        return cardNumber.replace(/\s+/g, '').substring(0, binNumberLength);
+class ZipConverter extends Converter {
+    constructor(syncService, countryService) {
+        super(syncService);
+        this.countryService = countryService;
+        this.minLength = 3;
+        this.maxLength = 10;
+        this.usCountryLength = 5;
     }
-    getAccountSuffix(cardNumber) {
-        const accountSuffixLength = 4;
-        return cardNumber
-            .replace(/\s+/g, '')
-            .substring(cardNumber.length - accountSuffixLength);
+    get isUsCountry() {
+        return this.countryService.getCountry() === 'US';
+    }
+    getValidators(field) {
+        const minLength = this.isUsCountry ? this.usCountryLength : this.minLength;
+        const maxLength = this.isUsCountry ? this.usCountryLength : this.maxLength;
+        const validators = super
+            .getValidators(field)
+            .concat([
+            convert(Validators.minLength(minLength), `Enter at least ${minLength} characters`),
+            convert(Validators.maxLength(maxLength), `Enter no more than ${maxLength} characters`),
+        ]);
+        if (this.isUsCountry) {
+            validators.push(convert(restrictedValueValidator('00000'), 'Enter a valid ZIP code'));
+        }
+        return validators;
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.icon = 'location';
+        if (this.isUsCountry) {
+            config.maskConfig = {
+                guide: false,
+                unmaskModelValue: true,
+                showMask: true,
+            };
+            config.inputMode = 'numeric';
+            if (masksFunctionsMap['zip']) {
+                config.maskConfig.mask = masksFunctionsMap['zip'];
+            }
+        }
+        else {
+            config.maxLength = this.maxLength;
+        }
+        return config;
+    }
+    getAutocomplete() {
+        return 'postal-code';
+    }
+    getDataType() {
+        return 'text';
+    }
+}
+ZipConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ZipConverter, deps: [{ token: SyncService }, { token: CountryService }], target: i0.ɵɵFactoryTarget.Injectable });
+ZipConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ZipConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ZipConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }, { type: CountryService }]; } });
+
+function isEmptyInputValue(value) {
+    return value == null || value.length === 0;
+}
+
+function isString(value) {
+    return typeof value === 'string';
+}
+
+/**
+ * Checks number match Luhn algorithm.
+ * Based on http://en.wikipedia.org/wiki/Luhn.
+ */
+const luhnFormulaValidator = ({ value }) => {
+    if (isEmptyInputValue(value) || !isString(value)) {
+        return null;
     }
-    getTypeByNumber(cardNumber) {
-        cardNumber = cardNumber.replace(/\s+/g, '');
-        const cardSettings = orderedCardSettings.find((settings) => {
-            const isNumberMatched = settings.checkNumber(cardNumber);
-            return isNumberMatched ? settings.id : false;
-        });
-        return cardSettings ? cardSettings.id : defaultCard.id;
+    const error = {
+        rewritableError: {
+            message: `Enter a valid card number`,
+        },
+    };
+    if (/[^0-9 -]+/.test(value)) {
+        // accept only spaces, digits and dashes
+        return error;
     }
-    getCreditCardSettings(cardType) {
-        const creditCard = creditCardsMap[cardType];
-        if (!creditCard) {
-            return defaultCard;
+    let resultSum = 0;
+    let digit = 0;
+    let isEven = false;
+    const modBase = 10;
+    const digitRadix = 10;
+    const maxNumber = 9;
+    const digits = value.replace(/\D/g, '');
+    // Checks if number match Luhn algorithm
+    // based on http://en.wikipedia.org/wiki/Luhn
+    for (let index = digits.length - 1; index >= 0; index--) {
+        const char = digits.charAt(index);
+        digit = parseInt(char, digitRadix);
+        if (isEven && (digit *= 2) > maxNumber) {
+            digit -= maxNumber;
         }
-        return creditCard;
+        resultSum += digit;
+        isEven = !isEven;
+    }
+    return resultSum % modBase === 0 ? null : error;
+};
+
+class CardNumberConfig extends ControlConfig {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'card-number';
+        this.availableCardTypes = [];
+        this.customError = '';
     }
 }
-CreditCardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CreditCardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
 
 class CreditCardMinLengthValidator {
     constructor(creditService) {
@@ -1956,56 +2042,366 @@ class CreditCardMinLengthValidator {
         };
     }
 }
-CreditCardMinLengthValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardMinLengthValidator, deps: [{ token: CreditCardService }], target: i0.ɵɵFactoryTarget.Injectable });
-CreditCardMinLengthValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardMinLengthValidator });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardMinLengthValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: CreditCardService }]; } });
+CreditCardMinLengthValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardMinLengthValidator, deps: [{ token: CreditCardService }], target: i0.ɵɵFactoryTarget.Injectable });
+CreditCardMinLengthValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardMinLengthValidator });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardMinLengthValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: CreditCardService }]; } });
+
+class CardNumberConverter extends Converter {
+    constructor(syncService, maxLengthValidator, minLengthValidator) {
+        super(syncService);
+        this.maxLengthValidator = maxLengthValidator;
+        this.minLengthValidator = minLengthValidator;
+    }
+    getValidators(field) {
+        return super
+            .getValidators(field)
+            .concat([
+            luhnFormulaValidator,
+            this.minLengthValidator.validate,
+            this.maxLengthValidator.validate,
+        ]);
+    }
+    createControlConfig(field, formState) {
+        var _a, _b;
+        const config = this.createDefaultControlConfig(CardNumberConfig, field);
+        config.placeholder = config.title;
+        config.availableCardTypes =
+            (_a = formState === null || formState === void 0 ? void 0 : formState.availableCardTypes) !== null && _a !== void 0 ? _a : [];
+        config.activeCardType = formState === null || formState === void 0 ? void 0 : formState.activeCardType;
+        config.customError = formState === null || formState === void 0 ? void 0 : formState.customError;
+        config.disabled = (_b = formState === null || formState === void 0 ? void 0 : formState.disabled) !== null && _b !== void 0 ? _b : false;
+        return config;
+    }
+    getAutocomplete() {
+        return 'cc-number';
+    }
+    getDataType() {
+        return 'text';
+    }
+}
+CardNumberConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardNumberConverter, deps: [{ token: SyncService }, { token: CreditCardMinLengthValidator }, { token: CreditCardMinLengthValidator }], target: i0.ɵɵFactoryTarget.Injectable });
+CardNumberConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardNumberConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardNumberConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }, { type: CreditCardMinLengthValidator }, { type: CreditCardMinLengthValidator }]; } });
+
+class CardExpirationConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    getValidators() {
+        return [];
+    }
+    createControlConfig(field, formState) {
+        var _a;
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.maskConfig = {
+            mask: '99',
+            guide: false,
+        };
+        config.inputMode = 'numeric';
+        config.title = 'date';
+        config.disabled = (_a = formState === null || formState === void 0 ? void 0 : formState.disabled) !== null && _a !== void 0 ? _a : false;
+        return config;
+    }
+    getAutocomplete() {
+        return 'cc-exp';
+    }
+    getDataType() {
+        return 'text';
+    }
+}
+CardExpirationConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardExpirationConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CardExpirationConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardExpirationConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardExpirationConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class CvvConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        this.maxFieldLength = 4;
+    }
+    getValidators() {
+        return [];
+    }
+    createControlConfig(field, formState) {
+        var _a;
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.maskConfig = {
+            mask: () => new Array(this.maxFieldLength).fill('9').join(''),
+            unmaskModelValue: false,
+            guide: false,
+        };
+        config.tooltip = {
+            text: 'The code is on the back of your card',
+            image: 'cvv',
+            parentField: FieldNames.cvv,
+            position: 'input',
+            analyticsAction: 'show-cvv-tooltip',
+        };
+        config.inputMode = 'numeric';
+        config.shouldHideUserInput = this.shouldHideUserInput();
+        config.disabled = (_a = formState === null || formState === void 0 ? void 0 : formState.disabled) !== null && _a !== void 0 ? _a : false;
+        return config;
+    }
+    getAutocomplete() {
+        return 'cc-csc';
+    }
+    getDataType() {
+        return 'password';
+    }
+    shouldHideUserInput() {
+        return true;
+    }
+}
+CvvConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CvvConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CvvConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CvvConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CvvConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+const birthdateValidator = ({ value }) => {
+    if (isEmptyInputValue(value) || typeof value !== 'string') {
+        return null;
+    }
+    const error = {
+        invalidBirthDate: {
+            message: `Enter a valid birth date`,
+        },
+    };
+    const dateArr = value.split('/');
+    const datePartsCount = 3;
+    const dayIndex = 0;
+    const monthIndex = 1;
+    const yearIndex = 2;
+    const maxMonths = 12;
+    const maxDays = 31;
+    const minAge = 16;
+    const maxAge = 120;
+    if (dateArr.length < datePartsCount) {
+        return null;
+    }
+    if (+dateArr[monthIndex] > maxMonths || +dateArr[dayIndex] > maxDays) {
+        return error;
+    }
+    const currentDate = new Date(+dateArr[yearIndex], +dateArr[monthIndex], +dateArr[dayIndex]);
+    const nowDate = new Date();
+    if (isNaN(currentDate.getFullYear()) ||
+        nowDate.getFullYear() - currentDate.getFullYear() <= minAge ||
+        nowDate.getFullYear() - currentDate.getFullYear() > maxAge) {
+        return error;
+    }
+    else {
+        return null;
+    }
+};
+
+class BirthDateConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    getValidators(field) {
+        return super
+            .getValidators(field)
+            .concat([
+            convert(Validators.pattern(/^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{4}$/), `Enter a valid birth date`),
+            birthdateValidator,
+        ]);
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.maskConfig = {
+            mask: '99/99/9999',
+            unmaskModelValue: false,
+            guide: false,
+        };
+        config.placeholder = `DD/MM/YYYY`;
+        config.inputMode = 'numeric';
+        return config;
+    }
+}
+BirthDateConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BirthDateConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+BirthDateConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BirthDateConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BirthDateConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class CardholderNameConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    createControlConfig(field) {
+        return this.createDefaultControlConfig(TextControlConfig, field);
+    }
+    getAutocomplete() {
+        return 'cc-name';
+    }
+    getDataType() {
+        return 'text';
+    }
+}
+CardholderNameConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardholderNameConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CardholderNameConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardholderNameConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardholderNameConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+const cpfNameRegex = /^[a-zA-ZÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ.'-]{2,50}(?: [a-zA-ZÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ.'-]{2,50}){1,8}$/i; // tslint:disable-line
+
+class CpfNameConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    getValidators(field) {
+        return super
+            .getValidators(field)
+            .concat([
+            convert(Validators.pattern(cpfNameRegex), `Enter a valid name`),
+        ]);
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.tooltip = {
+            text: `Where to find your name`,
+            image: 'cpf-name',
+        };
+        return config;
+    }
+}
+CpfNameConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CpfNameConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CpfNameConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CpfNameConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CpfNameConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class CpfNumberConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.maskConfig = {
+            mask: '999.999.999-99',
+            unmaskModelValue: true,
+            guide: false,
+        };
+        config.inputMode = 'numeric';
+        config.placeholder = '000.000.000-00';
+        config.tooltip = {
+            text: `Where to find your registration number`,
+            image: 'cpf-number',
+        };
+        return config;
+    }
+}
+CpfNumberConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CpfNumberConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CpfNumberConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CpfNumberConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CpfNumberConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class StreetNumberConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    getValidators(field, formState) {
+        const validators = super.getValidators(field);
+        if ((formState === null || formState === void 0 ? void 0 : formState.country) === 'BL') {
+            validators.push(convert(restrictedValueValidator('0'), `Enter a valid building number`));
+        }
+        return validators;
+    }
+    createControlConfig(field) {
+        return this.createDefaultControlConfig(TextControlConfig, field);
+    }
+}
+StreetNumberConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StreetNumberConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+StreetNumberConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StreetNumberConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StreetNumberConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class TextConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    createControlConfig(field) {
+        return this.createDefaultControlConfig(TextControlConfig, field);
+    }
+}
+TextConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+TextConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+function phoneValidator() {
+    return convert(Validators.pattern(/^\d*$/), 'Enter a valid phone');
+}
+
+function minLengthValidator(minLength) {
+    return convert(Validators.minLength(minLength), `Enter at least ${minLength} characters`);
+}
+
+function maxLengthValidator(maxLength) {
+    return convert(Validators.maxLength(maxLength), `Enter no more than ${maxLength} characters`);
+}
+
+class PhoneControlConfig extends ControlConfig {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'phone';
+    }
+}
 
-class CardNumberConverter extends Converter {
-    constructor(syncService, maxLengthValidator, minLengthValidator) {
+class PhoneConverter extends Converter {
+    constructor(syncService) {
         super(syncService);
-        this.maxLengthValidator = maxLengthValidator;
-        this.minLengthValidator = minLengthValidator;
     }
     getValidators(field) {
+        const minLength = 10;
+        const maxLength = 15;
         return super
             .getValidators(field)
             .concat([
-            luhnFormulaValidator,
-            this.minLengthValidator.validate,
-            this.maxLengthValidator.validate,
+            convertedRequiredValidator(),
+            phoneValidator(),
+            minLengthValidator(minLength),
+            maxLengthValidator(maxLength),
         ]);
     }
-    createControlConfig(field, formState) {
-        var _a, _b;
-        const config = this.createDefaultControlConfig(CardNumberConfig, field);
-        config.placeholder = config.title;
-        config.availableCardTypes =
-            (_a = formState === null || formState === void 0 ? void 0 : formState.availableCardTypes) !== null && _a !== void 0 ? _a : [];
-        config.activeCardType = formState === null || formState === void 0 ? void 0 : formState.activeCardType;
-        config.customError = formState === null || formState === void 0 ? void 0 : formState.customError;
-        config.disabled = (_b = formState === null || formState === void 0 ? void 0 : formState.disabled) !== null && _b !== void 0 ? _b : false;
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(PhoneControlConfig, field);
+        config.inputMode = 'numeric';
         return config;
     }
-    getAutocomplete() {
-        return 'cc-number';
-    }
-    getDataType() {
-        return 'text';
-    }
 }
-CardNumberConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardNumberConverter, deps: [{ token: SyncService }, { token: CreditCardMinLengthValidator }, { token: CreditCardMinLengthValidator }], target: i0.ɵɵFactoryTarget.Injectable });
-CardNumberConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardNumberConverter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardNumberConverter, decorators: [{
+PhoneConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PhoneConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+PhoneConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PhoneConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PhoneConverter, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: SyncService }, { type: CreditCardMinLengthValidator }, { type: CreditCardMinLengthValidator }]; } });
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
 
 const convertersMapToken = new InjectionToken('ConvertersTokensMap');
 const convertersMap = {
     zip: ZipConverter,
     email: EmailConverter,
     card_number: CardNumberConverter,
+    card_month: CardExpirationConverter,
+    card_year: CardExpirationConverter,
+    cvv: CvvConverter,
+    extra_cvv: CvvConverter,
+    cardholdername: CardholderNameConverter,
+    cpf_number: CpfNumberConverter,
+    cpf_name: CpfNameConverter,
+    birth_date: BirthDateConverter,
+    street_number: StreetNumberConverter,
+    text: TextConverter,
+    phone: PhoneConverter,
 };
 
 class ControlConfigService {
@@ -2169,6 +2565,13 @@ const statusSearchParamsMap = new Map([
     ],
 ]);
 
+class TerminalError extends AppError {
+    constructor(message, code) {
+        super(message);
+        this.code = code;
+    }
+}
+
 class XpsApiPart {
     constructor() {
         this.response = new BehaviorSubject(null);
@@ -2426,23 +2829,20 @@ const checkStatusResponseFactoryProvider = {
 };
 
 class CheckStatusService extends XpsApiPart {
-    constructor(secureApiClient, settingsService, requestFactory, responseFactory) {
+    constructor(xpsApiService, settingsService, requestFactory, responseFactory) {
         super();
-        this.secureApiClient = secureApiClient;
+        this.xpsApiService = xpsApiService;
         this.settingsService = settingsService;
         this.requestFactory = requestFactory;
         this.responseFactory = responseFactory;
-        this.apiRoute = 'directpayment';
     }
     setRequestParams(invoice) {
         this.invoice = invoice;
     }
     request() {
         const requestParams = this.requestFactory(this.settingsService.token, this.invoice);
-        lastValueFrom(this.secureApiClient.post(this.apiRoute, new URLSearchParams(Object.assign({}, requestParams)), {
-            headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'),
-            responseType: 'json',
-        }))
+        this.xpsApiService
+            .directPaymentRequest(requestParams)
             .then((response) => {
             const checkStatusResponse = this.responseFactory({
                 status: response.status,
@@ -2456,7 +2856,7 @@ class CheckStatusService extends XpsApiPart {
         });
     }
 }
-CheckStatusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CheckStatusService, deps: [{ token: SecureApiClient }, { token: SettingsService }, { token: checkStatusRequestFactoryToken }, { token: checkStatusResponseFactoryToken }], target: i0.ɵɵFactoryTarget.Injectable });
+CheckStatusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CheckStatusService, deps: [{ token: XpsApiService }, { token: SettingsService }, { token: checkStatusRequestFactoryToken }, { token: checkStatusResponseFactoryToken }], target: i0.ɵɵFactoryTarget.Injectable });
 CheckStatusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CheckStatusService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CheckStatusService, decorators: [{
             type: Injectable,
@@ -2464,7 +2864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     providedIn: 'root',
                 }]
         }], ctorParameters: function () {
-        return [{ type: SecureApiClient }, { type: SettingsService }, { type: undefined, decorators: [{
+        return [{ type: XpsApiService }, { type: SettingsService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [checkStatusRequestFactoryToken]
                     }] }, { type: undefined, decorators: [{
@@ -2604,34 +3004,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
-var ErrorTags;
-(function (ErrorTags) {
-    ErrorTags["APP"] = "appError";
-    ErrorTags["HTTP"] = "httpError";
-    ErrorTags["JS"] = "jsError";
-    ErrorTags["WS"] = "webSocket";
-    ErrorTags["ENCRYPT"] = "encrypt";
-    ErrorTags["APPLEPAY"] = "applepay";
-    ErrorTags["HEADLESS_UI"] = "headlessUi";
-    ErrorTags["GOOGLEPAY"] = "googlepay";
-    ErrorTags["PAYTM"] = "paytm";
-})(ErrorTags || (ErrorTags = {}));
-
-class TaggedError extends Error {
-    constructor(message, tags) {
-        super(message);
-        this.tags = [];
-        this.parentTag = ErrorTags.HEADLESS_UI;
-        this.tags = this.childTag
-            ? [this.parentTag, this.childTag]
-            : [this.parentTag];
-        if (tags) {
-            const newTags = tags.filter((t, i, arr) => !this.tags.includes(t) && arr.indexOf(t) == i);
-            this.tags = [...this.tags, ...newTags];
-        }
-    }
-}
-
 class WsError extends TaggedError {
     constructor(message, channelName, tags) {
         tags = tags ? [...tags, ErrorTags.WS] : [ErrorTags.WS];
@@ -3530,11 +3902,445 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+var ThreeDsStatusWebSocketTypes;
+(function (ThreeDsStatusWebSocketTypes) {
+    ThreeDsStatusWebSocketTypes["status3DS_changed"] = "status3DS_changed";
+})(ThreeDsStatusWebSocketTypes || (ThreeDsStatusWebSocketTypes = {}));
+
+var ThreeDsStatusTypes;
+(function (ThreeDsStatusTypes) {
+    ThreeDsStatusTypes["completed"] = "completed";
+    ThreeDsStatusTypes["challenge"] = "challenge";
+    ThreeDsStatusTypes["collectDfp"] = "collect_dfp";
+})(ThreeDsStatusTypes || (ThreeDsStatusTypes = {}));
+
+class XpsResponseError extends AppError {
+    constructor(message) {
+        super('XPS response failed' + (message ? `: "${message}".` : '.'));
+    }
+}
+
+class StatusThreeDsRequest {
+    constructor(token, threeDsId) {
+        this.access_token = token;
+        this.threeDSTrXid = threeDsId;
+    }
+}
+
+const statusThreeDsRequestFactoryToken = new InjectionToken('StatusThreeDsRequest');
+const statusThreeDsRequestFactoryProvider = {
+    provide: statusThreeDsRequestFactoryToken,
+    useValue: (...args) => new StatusThreeDsRequest(...args),
+};
+
+class StatusThreeDsResponse {
+    constructor(params) {
+        this.status = params.status;
+        this.checkoutForm = params.checkoutForm;
+    }
+}
+
+const statusThreeDsResponseFactoryToken = new InjectionToken('StatusThreeDsResponse');
+const statusThreeDsResponseFactoryProvider = {
+    provide: statusThreeDsResponseFactoryToken,
+    useValue: (...args) => new StatusThreeDsResponse(...args),
+};
+
+class StatusThreeDsService {
+    get response$() {
+        return this.response.asObservable();
+    }
+    constructor(secureApi, settingsService, requestFactory, responseFactory) {
+        this.secureApi = secureApi;
+        this.settingsService = settingsService;
+        this.requestFactory = requestFactory;
+        this.responseFactory = responseFactory;
+        this.apiRoute = 'secure3d/check';
+        this.response = new Subject();
+    }
+    request(data) {
+        const token = this.settingsService.token;
+        if (!token) {
+            throw new TokenError();
+        }
+        const requestParams = this.requestFactory(token, data.threeDSTrXid);
+        void lastValueFrom(this.secureApi
+            .post(this.apiRoute, new URLSearchParams(Object.assign({}, requestParams)), {
+            headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'),
+            responseType: 'json',
+        })
+            .pipe(map$1((response) => {
+            const statusResponse = this.responseFactory({
+                status: response.secure3d.status,
+                checkoutForm: response.secure3d.checkout_form,
+            });
+            this.response.next(statusResponse);
+        }))).catch((error) => {
+            throw new XpsResponseError(error.message);
+        });
+    }
+}
+StatusThreeDsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StatusThreeDsService, deps: [{ token: SecureApiClient }, { token: SettingsService }, { token: statusThreeDsRequestFactoryToken }, { token: statusThreeDsResponseFactoryToken }], target: i0.ɵɵFactoryTarget.Injectable });
+StatusThreeDsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StatusThreeDsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StatusThreeDsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: SecureApiClient }, { type: SettingsService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [statusThreeDsRequestFactoryToken]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [statusThreeDsResponseFactoryToken]
+                    }] }];
+    } });
+
+class NotifyDfpStatusRequest {
+    constructor(params) {
+        this.access_token = params.token;
+        this.threeDSTrXid = params.threeDsTrXid;
+        this.secure3dCompind = params.isCompind ? 'Y' : 'N';
+    }
+}
+
+const notifyDfpStatusRequestFactoryToken = new InjectionToken('NotifyDfpStatusRequest');
+const notifyDfpStatusRequestFactoryProvider = {
+    provide: notifyDfpStatusRequestFactoryToken,
+    useValue: (...args) => new NotifyDfpStatusRequest(...args),
+};
+
+class NotifyDfpStatusService {
+    constructor(secureApi, settingsService, requestFactory) {
+        this.secureApi = secureApi;
+        this.settingsService = settingsService;
+        this.requestFactory = requestFactory;
+        this.apiRouteComplete = 'secure3d/notify';
+    }
+    /*
+     * isCompind is a flag of dfp expired state
+     */
+    request(threeDsId, isCompind) {
+        const token = this.settingsService.token;
+        if (!token) {
+            throw new TokenError();
+        }
+        const requestParams = this.requestFactory({
+            token: token,
+            threeDsTrXid: threeDsId,
+            isCompind,
+        });
+        lastValueFrom(this.secureApi.post(this.apiRouteComplete, new URLSearchParams(Object.assign({}, requestParams)), {
+            headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'),
+            responseType: 'json',
+        })).catch((error) => {
+            throw new XpsResponseError(error.message);
+        });
+    }
+}
+NotifyDfpStatusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NotifyDfpStatusService, deps: [{ token: SecureApiClient }, { token: SettingsService }, { token: notifyDfpStatusRequestFactoryToken }], target: i0.ɵɵFactoryTarget.Injectable });
+NotifyDfpStatusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NotifyDfpStatusService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NotifyDfpStatusService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: SecureApiClient }, { type: SettingsService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [notifyDfpStatusRequestFactoryToken]
+                    }] }];
+    } });
+
+class DfpCollectService {
+    constructor(window, notifyDfpStatusService) {
+        this.window = window;
+        this.notifyDfpStatusService = notifyDfpStatusService;
+        this.iframeName = 'iframeDFP';
+        this.formName = 'formDFP';
+    }
+    collectDfpStatus(threeDsForm) {
+        if (threeDsForm.waitCallback) {
+            this.openIframeWithPostRequest(threeDsForm, false);
+        }
+        else {
+            this.openIframeWithPostRequest(threeDsForm, true);
+        }
+    }
+    /*
+     * This method create invisible iframe with required params and after that it submit form in iframe
+     * */
+    openIframeWithPostRequest(threeDsForm, isNeedNotifyAfterLoad) {
+        const iFrameElement = this.window.document.getElementById(this.iframeName);
+        if (!iFrameElement) {
+            this.createIframe(isNeedNotifyAfterLoad, threeDsForm.threeDSTrXid);
+            this.postFormToIframe(threeDsForm.threeDSMethod, threeDsForm.threeDSMethodData);
+        }
+    }
+    /*
+     * isNeedNotifyAfterLoad is need to send notification of dft to server
+     * */
+    createIframe(isNeedNotifyAfterLoad, threeDsTrXid) {
+        const attributes = {
+            name: this.iframeName,
+            id: this.iframeName,
+            src: 'javascript:false',
+            style: 'display:none',
+        };
+        const iFrame = this.window.document.createElement('iframe');
+        this.setAttributes(iFrame, attributes);
+        this.window.document.body.appendChild(iFrame);
+        if (isNeedNotifyAfterLoad) {
+            this.window.document.getElementById(this.iframeName).onload = () => {
+                this.notifyDfpStatusService.request(threeDsTrXid, true);
+            };
+        }
+    }
+    /*
+     * This method will submit form in our iframe. Form will be created, if it's don't exist
+     * */
+    postFormToIframe(url, threeDsMethod) {
+        let form = this.window.document.getElementById(this.formName);
+        if (!form) {
+            form = this.createForm();
+            this.window.document.body.appendChild(form);
+        }
+        form.setAttribute('action', url);
+        form.setAttribute('target', this.iframeName);
+        form.appendChild(this.createInput('threeDSMethodData', threeDsMethod));
+        form.submit();
+    }
+    /*
+     * This method will create invisible form with required params
+     */
+    createForm() {
+        const form = this.window.document.createElement('form');
+        const initAttributes = {
+            name: this.formName,
+            id: this.formName,
+            style: 'display:none',
+            method: 'POST',
+            enctype: 'application/x-www-form-urlencoded',
+        };
+        this.setAttributes(form, initAttributes);
+        return form;
+    }
+    createInput(name, value) {
+        const input = this.window.document.createElement('input');
+        input.type = 'hidden';
+        input.name = name;
+        input.value = value;
+        return input;
+    }
+    /*
+     * This method will set attributes to form/iframe
+     * */
+    setAttributes(element, attributes) {
+        Object.keys(attributes).forEach((name) => {
+            element.setAttribute(name, attributes[name]);
+        });
+    }
+}
+DfpCollectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DfpCollectService, deps: [{ token: windowToken }, { token: NotifyDfpStatusService }], target: i0.ɵɵFactoryTarget.Injectable });
+DfpCollectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DfpCollectService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DfpCollectService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [windowToken]
+                    }] }, { type: NotifyDfpStatusService }];
+    } });
+
+class ReinsuranceCheckService {
+    constructor(window) {
+        this.window = window;
+        this.timers = {};
+    }
+    addTimer(timer) {
+        if (!timer) {
+            return;
+        }
+        this.removeTimer(timer.id);
+        this.timers[timer.id] = timer;
+        const timerInStorage = this.timers[timer.id];
+        this.window.setTimeout(() => {
+            timerInStorage.callback();
+            this.timers[timer.id] = null;
+        }, timerInStorage.timeoutMs);
+    }
+    removeTimer(id) {
+        const timerInStorage = this.timers[id];
+        if (!timerInStorage) {
+            return;
+        }
+        this.window.clearTimeout(timerInStorage.timeoutRef);
+        this.timers[id] = null;
+    }
+}
+ReinsuranceCheckService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ReinsuranceCheckService, deps: [{ token: windowToken }], target: i0.ɵɵFactoryTarget.Injectable });
+ReinsuranceCheckService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ReinsuranceCheckService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ReinsuranceCheckService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [windowToken]
+                    }] }];
+    } });
+
+class ThreeDs20Service {
+    get statusUpdates$() {
+        return this.statusUpdates.asObservable();
+    }
+    constructor(statusThreeDsService, notifyDfpStatusService, webSocketFactory, dfpCollectService, reinsuranceCheckService) {
+        this.statusThreeDsService = statusThreeDsService;
+        this.notifyDfpStatusService = notifyDfpStatusService;
+        this.webSocketFactory = webSocketFactory;
+        this.dfpCollectService = dfpCollectService;
+        this.reinsuranceCheckService = reinsuranceCheckService;
+        this.webSocketClient = null;
+        this.statusUpdates = new Subject();
+        this.statusRequestSubscription = null;
+        this.notifyDfpTimerId = 'notify-dfp';
+        this.notifyDfpTimeoutMs = 10000;
+        this.statusThreeDsTimerId = 'status-three-ds';
+        this.statusThreeDsTimeoutMs = 180000;
+    }
+    checkThreeDs20(threeDsForm) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!threeDsForm) {
+                return;
+            }
+            this.reinsuranceCheckService.addTimer({
+                id: this.notifyDfpTimerId,
+                timeoutMs: this.notifyDfpTimeoutMs,
+                callback: () => {
+                    this.notifyDfpStatusService.request(threeDsForm.threeDSTrXid, false);
+                },
+            });
+            this.webSocketClient = this.webSocketFactory.createWebSocketClient(threeDsForm.webSocketChannelUrl, threeDsForm.webSocketClientType);
+            yield this.webSocketClient.open(threeDsForm.webSocketChannelUrl, threeDsForm.webSocketClientType);
+            (_a = this.webSocketSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.webSocketSubscription = this.webSocketClient.messages$.subscribe((message) => {
+                if (message !== ThreeDsStatusWebSocketTypes.status3DS_changed) {
+                    return;
+                }
+                this.statusThreeDsService.request(threeDsForm);
+            });
+            (_b = this.webSocketReconnectionSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            this.webSocketReconnectionSubscription =
+                this.webSocketClient.subscribeOnSuccessfulReconnection(() => {
+                    this.statusThreeDsService.request(threeDsForm);
+                });
+            this.handleThreeDsUpdates(threeDsForm);
+            this.statusThreeDsService.request(threeDsForm);
+            this.reinsuranceCheckService.addTimer({
+                id: this.statusThreeDsTimerId,
+                timeoutMs: this.statusThreeDsTimeoutMs,
+                callback: () => {
+                    this.statusThreeDsService.request(threeDsForm);
+                },
+            });
+        });
+    }
+    handleThreeDsUpdates(threeDsForm) {
+        var _a;
+        (_a = this.statusRequestSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.statusRequestSubscription =
+            this.statusThreeDsService.response$.subscribe((threeDsStatus) => {
+                if (!threeDsStatus) {
+                    return;
+                }
+                if (threeDsStatus.status === ThreeDsStatusTypes.completed) {
+                    this.stopReinsuranceMethods();
+                    this.statusUpdates.next({
+                        type: 'complete',
+                        data: {
+                            statusUrl: threeDsForm.statusUrl,
+                        },
+                    });
+                    return;
+                }
+                if (threeDsStatus.status === ThreeDsStatusTypes.challenge &&
+                    threeDsStatus.checkoutForm) {
+                    this.stopReinsuranceMethods();
+                    this.statusUpdates.next({
+                        type: 'challenge',
+                        data: threeDsStatus.checkoutForm,
+                    });
+                }
+                if (threeDsStatus.status === ThreeDsStatusTypes.collectDfp) {
+                    this.dfpCollectService.collectDfpStatus(threeDsForm);
+                }
+            });
+    }
+    stopReinsuranceMethods() {
+        var _a, _b;
+        this.reinsuranceCheckService.removeTimer(this.notifyDfpTimerId);
+        this.reinsuranceCheckService.removeTimer(this.statusThreeDsTimerId);
+        (_a = this.webSocketClient) === null || _a === void 0 ? void 0 : _a.close();
+        (_b = this.statusRequestSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+    }
+}
+ThreeDs20Service.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ThreeDs20Service, deps: [{ token: StatusThreeDsService }, { token: NotifyDfpStatusService }, { token: WebSocketFactory }, { token: DfpCollectService }, { token: ReinsuranceCheckService }], target: i0.ɵɵFactoryTarget.Injectable });
+ThreeDs20Service.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ThreeDs20Service, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ThreeDs20Service, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: StatusThreeDsService }, { type: NotifyDfpStatusService }, { type: WebSocketFactory }, { type: DfpCollectService }, { type: ReinsuranceCheckService }]; } });
+
+class ThreeDsService {
+    constructor(threeDs20Service, nextActionService) {
+        this.threeDs20Service = threeDs20Service;
+        this.nextActionService = nextActionService;
+        this.statusSubscription = null;
+    }
+    checkThreeDs(params) {
+        var _a;
+        /*
+          At this moment we support only 3ds 2.0 version.
+          3ds 1.0 currently working by our redirect logic (Redirect NextAction).
+          If in future we will get new version of 3ds, we should add 3ds determination logic to this service
+        */
+        void this.threeDs20Service.checkThreeDs20(params.parameters.threeDSForm);
+        (_a = this.statusSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.statusSubscription = this.threeDs20Service.statusUpdates$.subscribe((statusUpdate) => {
+            if (statusUpdate.type === 'complete') {
+                return this.nextActionService.emitFlowUpdates(new CheckStatusAction(params));
+            }
+            this.nextActionService.emitFlowUpdates(new ThreeDsAction(statusUpdate));
+        });
+    }
+    stopChecking() {
+        var _a;
+        (_a = this.statusSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+}
+ThreeDsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ThreeDsService, deps: [{ token: ThreeDs20Service }, { token: NextActionService }], target: i0.ɵɵFactoryTarget.Injectable });
+ThreeDsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ThreeDsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ThreeDsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: ThreeDs20Service }, { type: NextActionService }]; } });
+
 class PaymentService {
     get formFieldsStatus$() {
         return this.formFieldsStatusSubject.asObservable().pipe(filter$1(Boolean));
     }
-    constructor(initializeService, submitService, syncService, formService, statusService, financeDetailsService, creditCardStateService, nextActionService, controlConfigService) {
+    constructor(initializeService, submitService, syncService, formService, statusService, financeDetailsService, creditCardStateService, nextActionService, controlConfigService, threeDsService) {
         this.initializeService = initializeService;
         this.submitService = submitService;
         this.syncService = syncService;
@@ -3544,6 +4350,7 @@ class PaymentService {
         this.creditCardStateService = creditCardStateService;
         this.nextActionService = nextActionService;
         this.controlConfigService = controlConfigService;
+        this.threeDsService = threeDsService;
         this.form = null;
         this.data = null;
         this.financeDetails = null;
@@ -3583,6 +4390,13 @@ class PaymentService {
             const submitResponse = yield this.submitService.request(this.fields, this.form);
             this.data = submitResponse;
             this.emitFinanceDetails(submitResponse.summary);
+            // Handle 3ds flow
+            if (submitResponse.currentCommand === XpsCommand.create) {
+                this.runThreeDs();
+                return;
+            }
+            this.fields = this.getFields();
+            this.form = this.formService.createForm(this.fields);
             return this.nextActionService.getNextAction(submitResponse);
         });
     }
@@ -3603,7 +4417,10 @@ class PaymentService {
         });
     }
     runThreeDs() {
-        throw new Error('Method not implemented.');
+        if (!isSubmitResponse(this.data)) {
+            throw new Error('Should submit form first');
+        }
+        this.threeDsService.checkThreeDs(this.data);
     }
     getFinanceDetails() {
         return this.financeDetails;
@@ -3658,6 +4475,7 @@ class PaymentService {
         this.fields = [];
         this.formDestroy$.next();
         this.destroy$.next();
+        this.threeDsService.stopChecking();
     }
     emitFinanceDetails(summary) {
         this.financeDetailsService.emit(summary);
@@ -3705,14 +4523,14 @@ class PaymentService {
             .subscribe(() => this.emitFormFieldsStatus(form));
     }
 }
-PaymentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PaymentService, deps: [{ token: InitializeService }, { token: SubmitService }, { token: SyncService }, { token: FormService }, { token: StatusService }, { token: FinanceDetailsService }, { token: CreditCardStateService }, { token: NextActionService }, { token: ControlConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+PaymentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PaymentService, deps: [{ token: InitializeService }, { token: SubmitService }, { token: SyncService }, { token: FormService }, { token: StatusService }, { token: FinanceDetailsService }, { token: CreditCardStateService }, { token: NextActionService }, { token: ControlConfigService }, { token: ThreeDsService }], target: i0.ɵɵFactoryTarget.Injectable });
 PaymentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PaymentService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PaymentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: InitializeService }, { type: SubmitService }, { type: SyncService }, { type: FormService }, { type: StatusService }, { type: FinanceDetailsService }, { type: CreditCardStateService }, { type: NextActionService }, { type: ControlConfigService }]; } });
+        }], ctorParameters: function () { return [{ type: InitializeService }, { type: SubmitService }, { type: SyncService }, { type: FormService }, { type: StatusService }, { type: FinanceDetailsService }, { type: CreditCardStateService }, { type: NextActionService }, { type: ControlConfigService }, { type: ThreeDsService }]; } });
 
 class RefundPolicyService {
     constructor(settingsService) {
@@ -3845,7 +4663,7 @@ class CoreLibraryService {
     init(configuration) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.settingsService.init(configuration);
-            yield this.deviceFingerPrintService.init();
+            this.deviceFingerPrintService.init();
         });
     }
     getStatus(url) {
@@ -3980,6 +4798,15 @@ FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15
         ZipConverter,
         EmailConverter,
         CardNumberConverter,
+        CardExpirationConverter,
+        CvvConverter,
+        CardholderNameConverter,
+        CpfNumberConverter,
+        CpfNameConverter,
+        BirthDateConverter,
+        StreetNumberConverter,
+        TextConverter,
+        PhoneConverter,
         { provide: convertersMapToken, useValue: convertersMap },
     ], imports: [ReactiveFormsModule, ValidatorsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, decorators: [{
@@ -3992,6 +4819,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         ZipConverter,
                         EmailConverter,
                         CardNumberConverter,
+                        CardExpirationConverter,
+                        CvvConverter,
+                        CardholderNameConverter,
+                        CpfNumberConverter,
+                        CpfNameConverter,
+                        BirthDateConverter,
+                        StreetNumberConverter,
+                        TextConverter,
+                        PhoneConverter,
                         { provide: convertersMapToken, useValue: convertersMap },
                     ],
                 }]
@@ -4021,6 +4857,9 @@ CoreLibraryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
         checkStatusRequestFactoryProvider,
         checkStatusResponseFactoryProvider,
         financeDetailsResponseFactoryProvider,
+        statusThreeDsRequestFactoryProvider,
+        statusThreeDsResponseFactoryProvider,
+        notifyDfpStatusRequestFactoryProvider,
         {
             provide: nextActionsToken,
             useValue: nextActions,
@@ -4052,6 +4891,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         checkStatusRequestFactoryProvider,
                         checkStatusResponseFactoryProvider,
                         financeDetailsResponseFactoryProvider,
+                        statusThreeDsRequestFactoryProvider,
+                        statusThreeDsResponseFactoryProvider,
+                        notifyDfpStatusRequestFactoryProvider,
                         {
                             provide: nextActionsToken,
                             useValue: nextActions,