@idonatedev/idonate-sdk 1.1.0-dev1 → 1.1.0-dev10

package/dist/tokenize/SpreedlyTokenizer.js

@@ -8,16 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpreedlyTokenizer = void 0;
 const Tokenizer_1 = require("./Tokenizer");
 const types_1 = require("./types");
 const constants_1 = require("../constants");
 const typeAdapters_1 = require("../typeAdapters");
-const config_handler_1 = __importDefault(require("../config-handler"));
 const spreedly_secure_1 = require("./spreedly-secure");
 const styles_1 = require("./styles");
 const tokenizer_constants_1 = require("./tokenizer-constants");
@@ -25,10 +21,11 @@ const tokenizer_utils_1 = require("./tokenizer-utils");
 const SPREEDLY_SCRIPT_URL = 'https://core.spreedly.com/iframe/iframe-v1.min.js';
 const SPREEDLY_SCRIPT_ID = 'spreedly-iframe-script';
 class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
-    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false) {
+    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line') {
         super();
         this.environmentKey = environmentKey;
         this.containerId = containerId;
+        this.layout = layout;
         this.isReady = false;
         this.bankCountry = 'US';
         this.enableTestMode = false;
@@ -59,9 +56,10 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 isValid: false,
                 cardNumber: { isValid: false, isEmpty: true },
                 cvv: { isValid: false, isEmpty: true },
+                expiry: { isValid: false, isEmpty: true },
             };
         }
-        this.mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, styles);
+        this.mergedStyles = (0, styles_1.getContainerStylesForLayout)((0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, styles), this.layout);
         const fieldIds = this.generateFieldIds(containerId);
         this.numberEl = fieldIds.numberId;
         this.cvvEl = fieldIds.cvvId;
@@ -73,24 +71,29 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             if (container.mode !== 'bank_account') {
                 yield SpreedlyTokenizer.ensureSpreedlyLoaded();
             }
-            const environmentKey = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.environment_key;
+            let environmentKey = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.environment_key;
+            if (!environmentKey && config.clientConfig.spreedlyEnvironmentKey) {
+                environmentKey = config.clientConfig.spreedlyEnvironmentKey;
+            }
             if (!environmentKey) {
-                throw new Error('Spreedly environment key not configured');
+                environmentKey = '';
             }
-            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false);
-            tokenizer.organizationId = config === null || config === void 0 ? void 0 : config.organizationId;
-            tokenizer.embedId = config === null || config === void 0 ? void 0 : config.embedId;
+            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line');
+            tokenizer.organizationId = config.organizationId;
+            tokenizer.embedId = config.embedId;
+            tokenizer.clientConfig = config.clientConfig;
             tokenizer.createInternalElements();
             let securityArgs;
             if (container.mode === 'credit_card' &&
-                (config === null || config === void 0 ? void 0 : config.organizationId) &&
-                (config === null || config === void 0 ? void 0 : config.embedId)) {
+                config.clientConfig.enableSpreedlySecureTokenization) {
+                if (!config.organizationId || !config.embedId) {
+                    throw new Error('Secure tokenization is enabled but organizationId and embedId are required');
+                }
                 try {
-                    const configHandler = new config_handler_1.default({});
-                    securityArgs = yield (0, spreedly_secure_1.fetchSpreedlySecurityArgs)(configHandler, config.organizationId, config.embedId);
+                    securityArgs = yield (0, spreedly_secure_1.fetchSpreedlySecurityArgs)(config.clientConfig, config.organizationId, config.embedId);
                 }
                 catch (error) {
-                    console.warn('Failed to fetch security args, using standard tokenization');
+                    throw new Error(`Secure tokenization is enabled but failed to initialize: ${error instanceof Error ? error.message : 'Unknown error'}`);
                 }
             }
             yield tokenizer.init(securityArgs);
@@ -203,40 +206,40 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             return new Promise((resolve, reject) => {
                 var _a, _b, _c, _d, _e, _f;
                 const timeout = setTimeout(() => {
-                    this.spreedly.removeHandlers();
+                    if (this.spreedly && this.spreedly.removeHandlers) {
+                        this.spreedly.removeHandlers();
+                    }
                     reject(new types_1.TokenizationError('Tokenization timeout', 'TIMEOUT'));
                 }, tokenizer_constants_1.TOKENIZE_TIMEOUT);
                 const cleanup = () => {
                     clearTimeout(timeout);
-                    this.spreedly.removeHandlers();
+                    if (this.spreedly && this.spreedly.removeHandlers) {
+                        this.spreedly.removeHandlers();
+                    }
                 };
                 this.spreedly.on('paymentMethod', (token, pmData) => {
                     cleanup();
-                    resolve({
+                    const paymentToken = {
                         token,
                         lastFour: pmData.last_four_digits,
                         cardType: this.normalizeCardType(pmData.card_type),
                         provider: 'spreedly',
-                    });
+                    };
+                    this.emit('tokenReady', paymentToken);
+                    resolve(paymentToken);
                 });
                 this.spreedly.on('errors', (errors) => {
                     cleanup();
                     reject(new types_1.TokenizationError(errors));
                 });
-                let expiryMonth = cardData.expiryMonth || '';
-                let expiryYear = cardData.expiryYear || '';
-                if (!expiryMonth || !expiryYear) {
-                    const expiry = this.parseExpiry(this.expiryEl);
-                    if (expiry) {
-                        expiryMonth = expiry.month;
-                        expiryYear = expiry.year;
-                    }
-                    else {
-                        cleanup();
-                        reject(new types_1.TokenizationError('Expiration date is required', 'VALIDATION_ERROR'));
-                        return;
-                    }
+                const expiry = this.parseExpiry(this.expiryEl);
+                if (!expiry) {
+                    cleanup();
+                    reject(new types_1.TokenizationError('Expiration date is required', 'VALIDATION_ERROR'));
+                    return;
                 }
+                const expiryMonth = expiry.month;
+                const expiryYear = expiry.year;
                 this.spreedly.tokenizeCreditCard({
                     first_name: cardData.firstName,
                     last_name: cardData.lastName,
@@ -255,64 +258,127 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         });
     }
     createCanadianBankAccountFields(container) {
-        this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
-        Object.assign(this.institutionNumberEl.style, {
-            flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.flex,
-            minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.minWidth,
-        });
-        this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
-        this.institutionNumberEl.addEventListener('blur', () => {
-            const isValid = (0, tokenizer_utils_1.validateInstitutionNumber)(this.institutionNumberEl.value);
-            if (!isValid && this.institutionNumberEl.value) {
-                this.applyErrorStyles(this.institutionNumberEl);
-            }
-            else {
-                this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
-            }
-            this.updateBankAccountValidation();
-        });
-        container.appendChild(this.institutionNumberEl);
-        this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
-        Object.assign(this.transitNumberEl.style, {
-            flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.flex,
-            minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.minWidth,
-        });
-        this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
-        this.transitNumberEl.addEventListener('blur', () => {
-            const isValid = (0, tokenizer_utils_1.validateTransitNumber)(this.transitNumberEl.value);
-            if (!isValid && this.transitNumberEl.value) {
-                this.applyErrorStyles(this.transitNumberEl);
-            }
-            else {
-                this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
-            }
-            this.updateBankAccountValidation();
-        });
-        container.appendChild(this.transitNumberEl);
-        this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
-        Object.assign(this.accountNumberEl.style, {
-            flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.flex,
-            minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.minWidth,
-        });
-        this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
-        this.accountNumberEl.addEventListener('blur', () => {
-            const isValid = (0, tokenizer_utils_1.validateCanadianAccountNumber)(this.accountNumberEl.value);
-            if (!isValid && this.accountNumberEl.value) {
-                this.applyErrorStyles(this.accountNumberEl);
-            }
-            else {
-                this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
-            }
-            this.updateBankAccountValidation();
-        });
-        container.appendChild(this.accountNumberEl);
-        this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
-        Object.assign(this.accountTypeEl.style, {
-            flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.flex,
-            minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
-        });
-        this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
-        container.appendChild(this.accountTypeEl);
+        if (this.layout === 'two-line') {
+            this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: '2',
+                minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
+            container.appendChild(this.accountTypeEl);
+            this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
+            Object.assign(this.institutionNumberEl.style, {
+                flex: '1',
+                minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.minWidth,
+            });
+            this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'middle');
+            this.institutionNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateInstitutionNumber)(this.institutionNumberEl.value);
+                if (!isValid && this.institutionNumberEl.value) {
+                    this.applyErrorStyles(this.institutionNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'middle');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.institutionNumberEl);
+            this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
+            Object.assign(this.transitNumberEl.style, {
+                flex: '2',
+                minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.minWidth,
+            });
+            this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'right');
+            this.transitNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateTransitNumber)(this.transitNumberEl.value);
+                if (!isValid && this.transitNumberEl.value) {
+                    this.applyErrorStyles(this.transitNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'right');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.transitNumberEl);
+            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
+            Object.assign(this.accountNumberEl.style, {
+                flex: '1',
+                flexBasis: '100%',
+                minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
+            this.accountNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateCanadianAccountNumber)(this.accountNumberEl.value);
+                if (!isValid && this.accountNumberEl.value) {
+                    this.applyErrorStyles(this.accountNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.accountNumberEl);
+        }
+        else {
+            this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
+            Object.assign(this.institutionNumberEl.style, {
+                flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.flex,
+                minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.minWidth,
+            });
+            this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
+            this.institutionNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateInstitutionNumber)(this.institutionNumberEl.value);
+                if (!isValid && this.institutionNumberEl.value) {
+                    this.applyErrorStyles(this.institutionNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.institutionNumberEl);
+            this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
+            Object.assign(this.transitNumberEl.style, {
+                flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.flex,
+                minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.minWidth,
+            });
+            this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
+            this.transitNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateTransitNumber)(this.transitNumberEl.value);
+                if (!isValid && this.transitNumberEl.value) {
+                    this.applyErrorStyles(this.transitNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.transitNumberEl);
+            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
+            Object.assign(this.accountNumberEl.style, {
+                flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.flex,
+                minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+            this.accountNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateCanadianAccountNumber)(this.accountNumberEl.value);
+                if (!isValid && this.accountNumberEl.value) {
+                    this.applyErrorStyles(this.accountNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.accountNumberEl);
+            this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.flex,
+                minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
+            container.appendChild(this.accountTypeEl);
+        }
     }
     tokenizeBankAccountInternal(bankData) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -379,7 +445,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                     accountType: accountType,
                     accountHolderType: accountHolderType,
                 },
-            }, new config_handler_1.default({ spreedlyEnvironmentKey: this.environmentKey }));
+            }, this.clientConfig);
             return {
                 token: result,
                 lastFour: accountNumber.slice(-4),
@@ -401,29 +467,49 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
     }
     validateCardInternal() {
         return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => {
-                this.spreedly.on('validation', (isValid, validationData) => {
-                    this.spreedly.removeHandlers();
-                    const errors = [];
-                    if (!validationData.validNumber) {
-                        errors.push({
-                            field: 'cardNumber',
-                            message: 'Invalid card number',
-                        });
-                    }
-                    if (!validationData.validCvv) {
-                        errors.push({
-                            field: 'cvv',
-                            message: 'Invalid CVV',
-                        });
-                    }
-                    resolve({
-                        isValid: isValid && errors.length === 0,
-                        errors,
-                    });
+            var _a, _b, _c, _d, _e;
+            const errors = [];
+            if ((_a = this.currentValidationState.cardNumber) === null || _a === void 0 ? void 0 : _a.isEmpty) {
+                errors.push({
+                    field: 'cardNumber',
+                    message: 'Card number is required',
                 });
-                this.spreedly.validate();
-            });
+            }
+            else if (!((_b = this.currentValidationState.cardNumber) === null || _b === void 0 ? void 0 : _b.isValid)) {
+                errors.push({
+                    field: 'cardNumber',
+                    message: 'Invalid card number',
+                });
+            }
+            if ((_c = this.currentValidationState.cvv) === null || _c === void 0 ? void 0 : _c.isEmpty) {
+                errors.push({
+                    field: 'cvv',
+                    message: 'CVV is required',
+                });
+            }
+            else if (!((_d = this.currentValidationState.cvv) === null || _d === void 0 ? void 0 : _d.isValid)) {
+                errors.push({
+                    field: 'cvv',
+                    message: 'Invalid CVV',
+                });
+            }
+            const expiry = this.parseExpiry(this.expiryEl);
+            if (!((_e = this.expiryEl) === null || _e === void 0 ? void 0 : _e.value)) {
+                errors.push({
+                    field: 'expiry',
+                    message: 'Expiration date is required',
+                });
+            }
+            else if (!expiry) {
+                errors.push({
+                    field: 'expiry',
+                    message: 'Invalid expiration date',
+                });
+            }
+            return {
+                isValid: errors.length === 0,
+                errors,
+            };
         });
     }
     validateBankAccountInternal() {
@@ -603,33 +689,57 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         }
     }
     destroy() {
-        this.spreedly.removeHandlers();
+        if (this.spreedly && this.spreedly.removeHandlers) {
+            this.spreedly.removeHandlers();
+        }
         this.eventHandlers.clear();
         if (this.expiryEl) {
         }
     }
+    hasToken() {
+        return false;
+    }
+    getToken() {
+        return null;
+    }
+    get tokenizationMode() {
+        return 'manual';
+    }
+    updateOverallValidation() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.mode === 'credit_card') {
+            this.currentValidationState.isValid =
+                ((_b = (_a = this.currentValidationState.cardNumber) === null || _a === void 0 ? void 0 : _a.isValid) !== null && _b !== void 0 ? _b : false) &&
+                    ((_d = (_c = this.currentValidationState.cvv) === null || _c === void 0 ? void 0 : _c.isValid) !== null && _d !== void 0 ? _d : false) &&
+                    ((_f = (_e = this.currentValidationState.expiry) === null || _e === void 0 ? void 0 : _e.isValid) !== null && _f !== void 0 ? _f : false);
+        }
+        else {
+            this.currentValidationState.isValid = true;
+        }
+        this.emit('validation', this.currentValidationState);
+    }
     handleFieldEvent(fieldName, eventType, inputProperties) {
-        var _a, _b, _c, _d;
-        if (fieldName === 'number') {
-            this.currentValidationState.cardNumber = {
-                isValid: inputProperties.validNumber || false,
-                isEmpty: inputProperties.numberLength === 0,
-            };
-            if (inputProperties.cardType && inputProperties.cardType !== 'unknown') {
-                this.emit('cardTypeChange', {
-                    cardType: this.normalizeCardType(inputProperties.cardType),
-                });
+        if (eventType === 'input') {
+            if (fieldName === 'number') {
+                this.currentValidationState.cardNumber = {
+                    isValid: inputProperties.validNumber || false,
+                    isEmpty: inputProperties.numberLength === 0,
+                };
+                if (inputProperties.cardType &&
+                    inputProperties.cardType !== 'unknown') {
+                    this.emit('cardTypeChange', {
+                        cardType: this.normalizeCardType(inputProperties.cardType),
+                    });
+                }
             }
+            else if (fieldName === 'cvv') {
+                this.currentValidationState.cvv = {
+                    isValid: inputProperties.validCvv || false,
+                    isEmpty: inputProperties.cvvLength === 0,
+                };
+            }
+            this.updateOverallValidation();
         }
-        else if (fieldName === 'cvv') {
-            this.currentValidationState.cvv = {
-                isValid: inputProperties.validCvv || false,
-                isEmpty: inputProperties.cvvLength === 0,
-            };
-        }
-        this.currentValidationState.isValid =
-            ((_b = (_a = this.currentValidationState.cardNumber) === null || _a === void 0 ? void 0 : _a.isValid) !== null && _b !== void 0 ? _b : false) &&
-                ((_d = (_c = this.currentValidationState.cvv) === null || _c === void 0 ? void 0 : _c.isValid) !== null && _d !== void 0 ? _d : false);
         if (eventType === 'focus') {
             this.emit('focus', { field: fieldName });
         }
@@ -638,7 +748,6 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         }
         else if (eventType === 'input') {
             this.emit('change', { field: fieldName });
-            this.emit('validation', this.currentValidationState);
         }
     }
     createInternalElements() {
@@ -656,20 +765,57 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         }
     }
     createCreditCardFields(container) {
-        const cardNumberDiv = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, tokenizer_constants_1.FIELD_FLEX.cardNumber.flex, tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
-        cardNumberDiv.style.height = this.mergedStyles.input.height;
-        container.appendChild(cardNumberDiv);
-        this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
-        Object.assign(this.expiryEl.style, {
-            flex: tokenizer_constants_1.FIELD_FLEX.expiry.flex,
-            minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
-        });
-        this.applyInputStyles(this.expiryEl, this.mergedStyles, 'middle');
-        this.addExpiryFormatter(this.expiryEl);
-        container.appendChild(this.expiryEl);
-        const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, tokenizer_constants_1.FIELD_FLEX.cvv.flex, tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
-        cvvDiv.style.height = this.mergedStyles.input.height;
-        container.appendChild(cvvDiv);
+        if (this.layout === 'two-line') {
+            const cardNumberDiv = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, '1', tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
+            cardNumberDiv.style.height = this.mergedStyles.input.height;
+            cardNumberDiv.style.flexBasis = '100%';
+            container.appendChild(cardNumberDiv);
+            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
+            Object.assign(this.expiryEl.style, {
+                flex: '1',
+                minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
+            });
+            this.applyInputStyles(this.expiryEl, this.mergedStyles, 'left');
+            this.addExpiryFormatter(this.expiryEl);
+            this.expiryEl.addEventListener('input', () => {
+                var _a;
+                const expiry = this.parseExpiry(this.expiryEl);
+                this.currentValidationState.expiry = {
+                    isValid: !!expiry,
+                    isEmpty: !((_a = this.expiryEl) === null || _a === void 0 ? void 0 : _a.value),
+                };
+                this.updateOverallValidation();
+            });
+            container.appendChild(this.expiryEl);
+            const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, '1', tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
+            cvvDiv.style.height = this.mergedStyles.input.height;
+            container.appendChild(cvvDiv);
+        }
+        else {
+            const cardNumberDiv = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, tokenizer_constants_1.FIELD_FLEX.cardNumber.flex, tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
+            cardNumberDiv.style.height = this.mergedStyles.input.height;
+            container.appendChild(cardNumberDiv);
+            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
+            Object.assign(this.expiryEl.style, {
+                flex: tokenizer_constants_1.FIELD_FLEX.expiry.flex,
+                minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
+            });
+            this.applyInputStyles(this.expiryEl, this.mergedStyles, 'middle');
+            this.addExpiryFormatter(this.expiryEl);
+            this.expiryEl.addEventListener('input', () => {
+                var _a;
+                const expiry = this.parseExpiry(this.expiryEl);
+                this.currentValidationState.expiry = {
+                    isValid: !!expiry,
+                    isEmpty: !((_a = this.expiryEl) === null || _a === void 0 ? void 0 : _a.value),
+                };
+                this.updateOverallValidation();
+            });
+            container.appendChild(this.expiryEl);
+            const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, tokenizer_constants_1.FIELD_FLEX.cvv.flex, tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
+            cvvDiv.style.height = this.mergedStyles.input.height;
+            container.appendChild(cvvDiv);
+        }
     }
     createBankAccountFields(container) {
         if (this.bankCountry === 'CA') {
@@ -680,47 +826,93 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         }
     }
     createUSBankAccountFields(container) {
-        this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
-        Object.assign(this.routingNumberEl.style, {
-            flex: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.flex,
-            minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
-        });
-        this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
-        this.routingNumberEl.addEventListener('blur', () => {
-            const isValid = (0, tokenizer_utils_1.validateRoutingNumber)(this.routingNumberEl.value);
-            if (!isValid && this.routingNumberEl.value) {
-                this.applyErrorStyles(this.routingNumberEl);
-            }
-            else {
-                this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
-            }
-            this.updateBankAccountValidation();
-        });
-        container.appendChild(this.routingNumberEl);
-        this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
-        Object.assign(this.accountNumberEl.style, {
-            flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.flex,
-            minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
-        });
-        this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
-        this.accountNumberEl.addEventListener('blur', () => {
-            const isValid = (0, tokenizer_utils_1.validateAccountNumber)(this.accountNumberEl.value);
-            if (!isValid && this.accountNumberEl.value) {
-                this.applyErrorStyles(this.accountNumberEl);
-            }
-            else {
-                this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
-            }
-            this.updateBankAccountValidation();
-        });
-        container.appendChild(this.accountNumberEl);
-        this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
-        Object.assign(this.accountTypeEl.style, {
-            flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.flex,
-            minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
-        });
-        this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
-        container.appendChild(this.accountTypeEl);
+        if (this.layout === 'two-line') {
+            this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: '1',
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
+            container.appendChild(this.accountTypeEl);
+            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            Object.assign(this.routingNumberEl.style, {
+                flex: '1',
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
+            });
+            this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'right');
+            this.routingNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateRoutingNumber)(this.routingNumberEl.value);
+                if (!isValid && this.routingNumberEl.value) {
+                    this.applyErrorStyles(this.routingNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'right');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.routingNumberEl);
+            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            Object.assign(this.accountNumberEl.style, {
+                flex: '1',
+                flexBasis: '100%',
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
+            this.accountNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateAccountNumber)(this.accountNumberEl.value);
+                if (!isValid && this.accountNumberEl.value) {
+                    this.applyErrorStyles(this.accountNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.accountNumberEl);
+        }
+        else {
+            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            Object.assign(this.routingNumberEl.style, {
+                flex: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.flex,
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
+            });
+            this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
+            this.routingNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateRoutingNumber)(this.routingNumberEl.value);
+                if (!isValid && this.routingNumberEl.value) {
+                    this.applyErrorStyles(this.routingNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.routingNumberEl);
+            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            Object.assign(this.accountNumberEl.style, {
+                flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.flex,
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+            this.accountNumberEl.addEventListener('blur', () => {
+                const isValid = (0, tokenizer_utils_1.validateAccountNumber)(this.accountNumberEl.value);
+                if (!isValid && this.accountNumberEl.value) {
+                    this.applyErrorStyles(this.accountNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.accountNumberEl);
+            this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.flex,
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
+            container.appendChild(this.accountTypeEl);
+        }
     }
     updateBankAccountValidation() {
         if (this.bankCountry === 'CA') {