@xsolla/payment-client-core 0.1.2 → 0.1.4

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

@@ -1,12 +1,13 @@
 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, distinctUntilChanged, throwError } from 'rxjs';
+import { firstValueFrom, lastValueFrom, map, Subject, tap, 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 { UntypedFormGroup, Validators, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { filter, map as map$1, catchError } from 'rxjs/operators';
 import * as i1$1 from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 const masksFunctionsMap = {
     zip: () => {
@@ -598,18 +599,6 @@ const isSubmitResponse = (value) => {
     return value instanceof SubmitResponse;
 };
 
-class ShowFieldStateAction {
-    constructor(control) {
-        this.type = 'show_field_state';
-        this.data = {
-            fieldName: control.fieldName,
-            fieldState: control.fieldState,
-            error: control.error,
-            isFocused: control.isFocused,
-        };
-    }
-}
-
 var InputEventName;
 (function (InputEventName) {
     InputEventName["blur"] = "blur";
@@ -697,7 +686,8 @@ const showFieldsActionFactoryProvider = {
     useValue: {
         factory: (...args) => new ShowFieldsAction(...args),
         isSuitable: (response) => {
-            return response.currentCommand === XpsCommand.check;
+            return (response.currentCommand === XpsCommand.check ||
+                response.currentCommand === XpsCommand.form);
         },
     },
 };
@@ -797,17 +787,6 @@ const showErrorsActionFactoryProvider = {
     },
 };
 
-const showFieldStateActionFactoryToken = new InjectionToken('ShowFieldStateAction');
-const showFieldStateActionFactoryProvider = {
-    provide: showFieldStateActionFactoryToken,
-    useValue: {
-        factory: (...args) => new ShowFieldStateAction(...args),
-        isSuitable: () => {
-            return true;
-        },
-    },
-};
-
 const nextActionsToken = new InjectionToken('Action');
 const nextActions = [
     showFieldsActionFactoryProvider,
@@ -817,7 +796,6 @@ const nextActions = [
 const flowUpdateNextActions = [
     statusUpdatedActionFactoryProvider,
     showErrorsActionFactoryProvider,
-    showFieldStateActionFactoryProvider,
 ];
 
 class NextActionService {
@@ -1273,11 +1251,14 @@ const syncRequestFactoryProvider = {
 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.rewritableError = {
-                code: fieldError.code,
-                message: fieldError.message,
+            this.error = {
+                asyncError: {
+                    code: fieldError.code,
+                    message: fieldError.message,
+                },
             };
         }
         this.fields = Object.keys(response.form).map((key) => response.form[key]);
@@ -1303,6 +1284,10 @@ class SyncService extends EmitDataService {
         this.prevFieldSyncStates = {};
         this.form = new UntypedFormGroup({});
         this.fields = [];
+        this.fieldAsyncValidation = new Subject();
+    }
+    get fieldAsyncValidation$() {
+        return this.fieldAsyncValidation.asObservable();
     }
     setup(form, fields) {
         this.reset();
@@ -1329,27 +1314,26 @@ class SyncService extends EmitDataService {
             if (prevFieldState && value === prevFieldState.value) {
                 return Promise.resolve(prevFieldState.result).then((response) => {
                     var _a;
-                    return (_a = response === null || response === void 0 ? void 0 : response.rewritableError) !== null && _a !== void 0 ? _a : null;
+                    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;
-                return (_a = response.rewritableError) !== null && _a !== void 0 ? _a : null;
+                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);
-        if (!control) {
-            return null;
-        }
-        const rewritableError = (_a = control.errors) === null || _a === void 0 ? void 0 : _a.rewritableError;
-        return rewritableError
-            ? { message: rewritableError.message, code: rewritableError.code }
-            : null;
+        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* () {
@@ -1415,44 +1399,28 @@ class TextControlConfig extends ControlConfig {
     }
 }
 
-function convert(validator, message, errorCode) {
+function convert(validator, message) {
     return (control) => {
         const errors = validator(control);
         if (!errors) {
             return errors;
         }
         const firstErrorKey = Object.keys(errors)[0];
-        let error = errors[firstErrorKey];
-        error = typeof error === 'object' && error !== null ? error : {};
-        const rewritableError = Object.assign({}, error);
-        rewritableError.message = message;
-        rewritableError.code = errorCode;
-        if (error[firstErrorKey] != null) {
-            rewritableError.value = error[firstErrorKey];
-        }
-        if (rewritableError.requiredLength) {
-            rewritableError.number = rewritableError.requiredLength;
-        }
-        errors.rewritableError = rewritableError;
+        const firstError = errors[firstErrorKey];
+        const error = typeof firstError === 'object' && firstError !== null ? firstError : {};
+        error.message = message;
+        errors[firstErrorKey] = error;
         return errors;
     };
 }
 
-var ErrorsCodes;
-(function (ErrorsCodes) {
-    ErrorsCodes["minLength"] = "min-length";
-    ErrorsCodes["maxLength"] = "max-length";
-    ErrorsCodes["invalidValue"] = "invalid-value";
-    ErrorsCodes["required"] = "required";
-})(ErrorsCodes || (ErrorsCodes = {}));
-
 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 emailValidator() {
-    return convert(Validators.pattern(emailRegexp), 'Enter a valid email', ErrorsCodes.invalidValue);
+function convertedEmailValidator() {
+    return convert(Validators.pattern(emailRegexp), 'Enter a valid email');
 }
 
-function requiredValidator() {
-    return convert(Validators.required, 'Required', ErrorsCodes.required);
+function convertedRequiredValidator() {
+    return convert(Validators.required, 'Required');
 }
 
 class Converter {
@@ -1467,12 +1435,12 @@ class Converter {
         return config;
     }
     convertToFormControl(field) {
-        return new UntypedFormControl(this.getValue(field), this.getValidators(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(requiredValidator());
+            validators.push(convertedRequiredValidator());
         }
         if (field.regex) {
             const match = /^\/(.*)\/([gim]*)$/.exec(field.regex);
@@ -1481,11 +1449,14 @@ class Converter {
                 const errorMessage = field.validation_error_msg
                     ? field.validation_error_msg
                     : 'Enter valid data';
-                validators.push(convert(Validators.pattern(pattern), errorMessage, ErrorsCodes.invalidValue));
+                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);
@@ -1529,7 +1500,7 @@ class EmailConverter extends Converter {
         super(syncService);
     }
     getValidators(field) {
-        return super.getValidators(field).concat([emailValidator()]);
+        return super.getValidators(field).concat([convertedEmailValidator()]);
     }
     createControlConfig(field) {
         const config = this.createDefaultControlConfig(TextControlConfig, field);
@@ -1570,11 +1541,11 @@ class ZipConverter extends Converter {
         const validators = super
             .getValidators(field)
             .concat([
-            convert(Validators.minLength(minLength), `Enter at least ${minLength} characters`, ErrorsCodes.minLength),
-            convert(Validators.maxLength(maxLength), `Enter no more than ${maxLength} characters`, ErrorsCodes.maxLength),
+            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', ErrorsCodes.invalidValue));
+            validators.push(convert(restrictedValueValidator('00000'), 'Enter a valid ZIP code'));
         }
         return validators;
     }
@@ -1610,10 +1581,431 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             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;
+    }
+    const error = {
+        rewritableError: {
+            message: `Enter a valid card number`,
+        },
+    };
+    if (/[^0-9 -]+/.test(value)) {
+        // accept only spaces, digits and dashes
+        return error;
+    }
+    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;
+    }
+    return resultSum % modBase === 0 ? null : error;
+};
+
+class CardNumberConfig extends ControlConfig {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'card-number';
+        this.availableCardTypes = [];
+        this.customError = '';
+    }
+}
+
+const fourBlockMask = '9999 9999 9999 9999';
+
+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 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);
+    }
+    getAccountSuffix(cardNumber) {
+        const accountSuffixLength = 4;
+        return cardNumber
+            .replace(/\s+/g, '')
+            .substring(cardNumber.length - accountSuffixLength);
+    }
+    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;
+    }
+    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 CreditCardMinLengthValidator {
+    constructor(creditService) {
+        this.creditService = creditService;
+        this.validate = (field) => {
+            if (isEmptyInputValue(field.value) || !isString(field.value)) {
+                return null;
+            }
+            const length = field.value.length;
+            const cardType = this.creditService.getTypeByNumber(field.value);
+            const { minLength } = this.creditService.getCreditCardSettings(cardType);
+            return length < minLength
+                ? {
+                    rewritableError: {
+                        message: `Enter at least ${minLength} characters`,
+                        number: minLength,
+                    },
+                }
+                : null;
+        };
+    }
+}
+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 }]; } });
+
 const convertersMapToken = new InjectionToken('ConvertersTokensMap');
 const convertersMap = {
     zip: ZipConverter,
     email: EmailConverter,
+    card_number: CardNumberConverter,
 };
 
 class ControlConfigService {
@@ -3127,22 +3519,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     }] }];
     } });
 
+class CreditCardStateService extends EmitDataService {
+}
+CreditCardStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+CreditCardStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardStateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CreditCardStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class PaymentService {
-    constructor(initializeService, submitService, syncService, formService, statusService, financeDetailsService, nextActionService, controlConfigService) {
+    get formFieldsStatus$() {
+        return this.formFieldsStatusSubject.asObservable().pipe(filter$1(Boolean));
+    }
+    constructor(initializeService, submitService, syncService, formService, statusService, financeDetailsService, creditCardStateService, nextActionService, controlConfigService) {
         this.initializeService = initializeService;
         this.submitService = submitService;
         this.syncService = syncService;
         this.formService = formService;
         this.statusService = statusService;
         this.financeDetailsService = financeDetailsService;
+        this.creditCardStateService = creditCardStateService;
         this.nextActionService = nextActionService;
         this.controlConfigService = controlConfigService;
         this.form = null;
         this.data = null;
         this.financeDetails = null;
+        this.focusFieldName = null;
         this.fields = [];
         this.destroy$ = new Subject();
         this.formDestroy$ = new Subject();
+        this.formFieldsStatusSubject = new BehaviorSubject(null);
     }
     initialize(config) {
         var _a;
@@ -3154,9 +3563,10 @@ class PaymentService {
             this.data = yield this.initializeService.request(config);
             this.fields = this.getFields();
             this.form = this.formService.createForm(this.fields);
-            this.listenSyncValidationErrors(this.form);
-            this.emitFinanceDetails((_a = this.data.paymentForm) === null || _a === void 0 ? void 0 : _a.summary);
             this.setupSyncService(this.form, this.fields);
+            this.listenFormStatusChanges(this.form);
+            this.emitFinanceDetails((_a = this.data.paymentForm) === null || _a === void 0 ? void 0 : _a.summary);
+            this.emitFormFieldsStatus(this.form);
             return this.fields.filter((field) => (field === null || field === void 0 ? void 0 : field.isVisible) === "1" /* XpsBoolean.true */);
         });
     }
@@ -3167,14 +3577,7 @@ class PaymentService {
             }
             if (!this.form.valid) {
                 this.form.markAllAsTouched();
-                Object.keys(this.form.controls).forEach((controlKey) => {
-                    var _a;
-                    const control = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(controlKey);
-                    if (control) {
-                        const controlObject = this.getControlState(controlKey, control);
-                        this.nextActionService.emitFlowUpdates(new ShowFieldStateAction(Object.assign(Object.assign({}, controlObject), { isFocused: true })));
-                    }
-                });
+                this.emitFormFieldsStatus(this.form);
                 return;
             }
             const submitResponse = yield this.submitService.request(this.fields, this.form);
@@ -3231,22 +3634,22 @@ class PaymentService {
     changeFieldState(name, state) {
         var _a;
         const formControl = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(name);
-        if (!formControl) {
+        if (!this.form || !formControl) {
             return;
         }
-        const controlObject = this.getControlState(name, formControl);
         switch (state) {
             case InputEventName.blur: {
                 formControl.markAsTouched();
-                this.nextActionService.emitFlowUpdates(new ShowFieldStateAction(Object.assign(Object.assign({}, controlObject), { isFocused: true })));
-                return;
+                this.focusFieldName = null;
+                break;
             }
             case InputEventName.focus: {
                 formControl.markAsUntouched();
-                this.nextActionService.emitFlowUpdates(new ShowFieldStateAction(Object.assign(Object.assign({}, controlObject), { isFocused: false })));
-                return;
+                this.focusFieldName = name;
+                break;
             }
         }
+        this.emitFormFieldsStatus(this.form);
     }
     destroy() {
         this.data = null;
@@ -3259,48 +3662,57 @@ class PaymentService {
     emitFinanceDetails(summary) {
         this.financeDetailsService.emit(summary);
     }
+    emitCreditCardState(idCardType) {
+        this.creditCardStateService.emit({ idCardType });
+    }
+    emitFormFieldsStatus(form) {
+        const formFieldsStatus = {};
+        Object.keys(form.controls).forEach((name) => {
+            const control = form.controls[name];
+            formFieldsStatus[name] = {
+                name: name,
+                validationStatus: control.status,
+                errors: control.errors,
+                isFocused: this.focusFieldName === name,
+            };
+        });
+        this.formFieldsStatusSubject.next(formFieldsStatus);
+    }
     setupSyncService(form, fields) {
         this.syncService.setup(form, fields);
         this.syncService.data$
             .pipe(takeUntil(this.destroy$))
-            .subscribe((response) => this.emitFinanceDetails(response.summary));
+            .subscribe((response) => {
+            this.emitFinanceDetails(response.summary);
+        });
+        this.syncService.fieldAsyncValidation$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((fieldAsyncValidation) => {
+            switch (fieldAsyncValidation.field.name) {
+                case FieldNames.cardNumber:
+                    this.emitCreditCardState(fieldAsyncValidation.response.parameters.idCardType);
+            }
+        });
     }
     listenFinanceDetails() {
         this.financeDetailsService.data$
             .pipe(takeUntil(this.destroy$))
             .subscribe((financeDetails) => (this.financeDetails = financeDetails));
     }
-    listenSyncValidationErrors(form) {
-        Object.keys(form.controls).forEach((key) => {
-            const control = form.get(key);
-            if (control) {
-                control.statusChanges
-                    .pipe(distinctUntilChanged(), takeUntil(this.formDestroy$))
-                    .subscribe((status) => {
-                    const controlObject = this.getControlState(key, control, status);
-                    this.nextActionService.emitFlowUpdates(new ShowFieldStateAction(controlObject));
-                });
-            }
-        });
-    }
-    getControlState(controlName, controlObject, status) {
-        var _a, _b;
-        const controlError = (_b = (_a = controlObject.errors) === null || _a === void 0 ? void 0 : _a['rewritableError']) !== null && _b !== void 0 ? _b : null;
-        return {
-            fieldName: controlName,
-            fieldState: status !== null && status !== void 0 ? status : controlObject.status,
-            error: controlError,
-        };
+    listenFormStatusChanges(form) {
+        form.statusChanges
+            .pipe(takeUntil(this.formDestroy$))
+            .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: 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 }], 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: NextActionService }, { type: ControlConfigService }]; } });
+        }], ctorParameters: function () { return [{ type: InitializeService }, { type: SubmitService }, { type: SyncService }, { type: FormService }, { type: StatusService }, { type: FinanceDetailsService }, { type: CreditCardStateService }, { type: NextActionService }, { type: ControlConfigService }]; } });
 
 class RefundPolicyService {
     constructor(settingsService) {
@@ -3408,7 +3820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         }], ctorParameters: function () { return [{ type: SettingsService }, { type: RefundPolicyService }, { type: SecureConnectionService }, { type: DisclaimerService }]; } });
 
 class CoreLibraryService {
-    constructor(settingsService, countryService, paymentMethodsService, savedMethodsService, userBalanceService, paymentConfigService, paymentService, deviceFingerPrintService, financeDetailsService, legalService, statusService, nextActionService) {
+    constructor(settingsService, countryService, paymentMethodsService, savedMethodsService, userBalanceService, paymentConfigService, paymentService, deviceFingerPrintService, financeDetailsService, legalService, statusService, nextActionService, creditCardService, creditCardStateService) {
         this.settingsService = settingsService;
         this.countryService = countryService;
         this.paymentMethodsService = paymentMethodsService;
@@ -3421,6 +3833,8 @@ class CoreLibraryService {
         this.legalService = legalService;
         this.statusService = statusService;
         this.nextActionService = nextActionService;
+        this.creditCardService = creditCardService;
+        this.creditCardStateService = creditCardStateService;
         this.paymentMethods = {
             getList: () => __awaiter(this, void 0, void 0, function* () { return this.paymentMethodsService.getList(); }),
             getQuickMethods: () => __awaiter(this, void 0, void 0, function* () { return this.paymentMethodsService.getQuickMethods(); }),
@@ -3455,14 +3869,23 @@ class CoreLibraryService {
             flowUpdates$: this.nextActionService.flowUpdates$,
             financeDetailsUpdates$: this.financeDetailsService.data$,
             form: {
+                fieldsStatus$: this.paymentService.formFieldsStatus$,
                 getControlConfig: (field) => this.paymentService.getFieldConfig(field),
                 changeFieldValue: (name, value) => this.paymentService.changeFieldValue(name, value),
-                changeFieldState: (name, state) => {
-                    this.paymentService.changeFieldState(name, state);
-                },
+                changeFieldState: (name, state) => this.paymentService.changeFieldState(name, state),
             },
         };
     }
+    getCreditCardService() {
+        return {
+            getTypeByNumber: (cardNumber) => this.creditCardService.getTypeByNumber(cardNumber),
+            getCreditCardSettings: (cardType) => this.creditCardService.getCreditCardSettings(cardType),
+            cardTypeUpdates$: this.creditCardStateService.data$,
+        };
+    }
+    get cardTypeUpdates$() {
+        return this.creditCardStateService.data$;
+    }
     getLegalComponentConfig() {
         return this.legalService.getLegalComponentConfig();
     }
@@ -3471,14 +3894,14 @@ class CoreLibraryService {
         return masksFunctionsMap[sanitizedName];
     }
 }
-CoreLibraryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CoreLibraryService, deps: [{ token: SettingsService }, { token: CountryService }, { token: PaymentMethodsService }, { token: SavedMethodsService }, { token: UserBalanceService }, { token: PaymentConfigService }, { token: PaymentService }, { token: DeviceFingerPrintService }, { token: FinanceDetailsService }, { token: LegalService }, { token: StatusService }, { token: NextActionService }], target: i0.ɵɵFactoryTarget.Injectable });
+CoreLibraryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CoreLibraryService, deps: [{ token: SettingsService }, { token: CountryService }, { token: PaymentMethodsService }, { token: SavedMethodsService }, { token: UserBalanceService }, { token: PaymentConfigService }, { token: PaymentService }, { token: DeviceFingerPrintService }, { token: FinanceDetailsService }, { token: LegalService }, { token: StatusService }, { token: NextActionService }, { token: CreditCardService }, { token: CreditCardStateService }], target: i0.ɵɵFactoryTarget.Injectable });
 CoreLibraryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CoreLibraryService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CoreLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: SettingsService }, { type: CountryService }, { type: PaymentMethodsService }, { type: SavedMethodsService }, { type: UserBalanceService }, { type: PaymentConfigService }, { type: PaymentService }, { type: DeviceFingerPrintService }, { type: FinanceDetailsService }, { type: LegalService }, { type: StatusService }, { type: NextActionService }]; } });
+        }], ctorParameters: function () { return [{ type: SettingsService }, { type: CountryService }, { type: PaymentMethodsService }, { type: SavedMethodsService }, { type: UserBalanceService }, { type: PaymentConfigService }, { type: PaymentService }, { type: DeviceFingerPrintService }, { type: FinanceDetailsService }, { type: LegalService }, { type: StatusService }, { type: NextActionService }, { type: CreditCardService }, { type: CreditCardStateService }]; } });
 
 class HttpError extends AppError {
     constructor(error, req) {
@@ -3533,26 +3956,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; } });
 
+class ValidatorsModule {
+}
+ValidatorsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ValidatorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ValidatorsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ValidatorsModule, imports: [CommonModule] });
+ValidatorsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ValidatorsModule, providers: [CreditCardMinLengthValidator], imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ValidatorsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule],
+                    providers: [CreditCardMinLengthValidator],
+                }]
+        }] });
+
 class FormModule {
 }
 FormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormModule, imports: [ReactiveFormsModule] });
+FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormModule, imports: [ReactiveFormsModule, ValidatorsModule] });
 FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, providers: [
         FormService,
         ControlConfigService,
         ZipConverter,
         EmailConverter,
+        CardNumberConverter,
         { provide: convertersMapToken, useValue: convertersMap },
-    ], imports: [ReactiveFormsModule] });
+    ], imports: [ReactiveFormsModule, ValidatorsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [ReactiveFormsModule],
+                    imports: [ReactiveFormsModule, ValidatorsModule],
                     providers: [
                         FormService,
                         ControlConfigService,
                         ZipConverter,
                         EmailConverter,
+                        CardNumberConverter,
                         { provide: convertersMapToken, useValue: convertersMap },
                     ],
                 }]