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

package/dist/tokenize/CardConnectTokenizer.js

@@ -20,10 +20,11 @@ const styles_1 = require("./styles");
 const tokenizer_constants_1 = require("./tokenizer-constants");
 const tokenizer_utils_1 = require("./tokenizer-utils");
 class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
-    constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false) {
+    constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false, layout = 'single-line') {
         super();
         this.iframeUrl = iframeUrl;
         this.containerId = containerId;
+        this.layout = layout;
         this.isReady = false;
         this.enableTestMode = false;
         this.mode = mode;
@@ -44,14 +45,12 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             if (container.mode === 'bank_account' && container.bankCountry === 'CA') {
                 throw new Error('CardConnect does not support Canadian bank accounts');
             }
-            const baseUrl = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.base_url;
-            if (!baseUrl) {
-                throw new Error('CardConnect base URL not configured');
-            }
+            let baseUrl = ((_a = gateway.config) === null || _a === void 0 ? void 0 : _a.base_url) || config.clientConfig.cardConnectBaseUrl;
+            config.cardConnectBaseUrl = baseUrl;
             const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
             const iframeUrl = CardConnectTokenizer.generateIframeUrl(baseUrl, container);
             const iframe = CardConnectTokenizer.createIframe(iframeUrl, mergedStyles);
-            const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false);
+            const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false, container.layout || 'single-line');
             tokenizer.createInternalElements(container);
             yield tokenizer.init();
             return tokenizer;
@@ -64,7 +63,7 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         }
         this.containerEl = containerEl;
         containerEl.innerHTML = '';
-        const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
+        const mergedStyles = (0, styles_1.getContainerStylesForLayout)((0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling), this.layout);
         Object.assign(containerEl.style, mergedStyles.container);
         if (this.mode === 'bank_account') {
             this.createBankAccountFields(containerEl, mergedStyles);
@@ -75,34 +74,66 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
     }
     createCreditCardFields(containerEl, mergedStyles) {
         this.iframe.style.width = '100%';
-        this.iframe.style.height = mergedStyles.input.height || '40px';
+        if (this.layout === 'two-line') {
+            const inputHeight = mergedStyles.input.height || '40px';
+            this.iframe.style.height = `calc((${inputHeight}) * 2 + 10px)`;
+        }
+        else {
+            this.iframe.style.height = mergedStyles.input.height || '40px';
+        }
         this.iframe.style.border = 'none';
         this.iframe.style.display = 'block';
         containerEl.appendChild(this.iframe);
     }
     createBankAccountFields(containerEl, mergedStyles) {
         this.iframe.style.display = 'none';
-        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, mergedStyles, 'left');
-        containerEl.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, mergedStyles, 'middle');
-        containerEl.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, mergedStyles, 'right');
-        containerEl.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, mergedStyles, 'left');
+            containerEl.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, mergedStyles, 'right');
+            containerEl.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, mergedStyles);
+            containerEl.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, mergedStyles, 'left');
+            containerEl.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, mergedStyles, 'middle');
+            containerEl.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, mergedStyles, 'right');
+            containerEl.appendChild(this.accountTypeEl);
+        }
     }
     init() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -142,7 +173,6 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                     clearTimeout(timeout);
                     this.isReady = true;
                     if (this.enableTestMode && this.mode === 'credit_card') {
-                        console.log('CardConnect test mode enabled - manual entry required for card fields');
                     }
                     this.emit('ready');
                     resolve();
@@ -159,6 +189,12 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             if (!this.isReady) {
                 throw new Error('Tokenizer not initialized');
             }
+            if (this.mode === 'credit_card' && this.hasToken()) {
+                const cachedToken = this.getToken();
+                if (cachedToken) {
+                    return cachedToken;
+                }
+            }
             if (this.mode === 'bank_account' || this.isBankAccountData(paymentData)) {
                 return this.tokenizeBankAccountInternal(paymentData);
             }
@@ -177,35 +213,33 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                     provider: 'cardconnect',
                 };
             }
-            return new Promise((resolve, reject) => {
+            if (this.tokenizationPromise) {
+                return this.tokenizationPromise;
+            }
+            this.tokenizationPromise = new Promise((resolve, reject) => {
+                this.tokenizationResolve = resolve;
+                this.tokenizationReject = reject;
                 const timeout = setTimeout(() => {
+                    this.tokenizationPromise = undefined;
+                    this.tokenizationResolve = undefined;
+                    this.tokenizationReject = undefined;
                     reject(new types_1.TokenizationError('Tokenization timeout - ensure all card fields are filled in iframe', 'TIMEOUT'));
                 }, tokenizer_constants_1.TOKENIZE_TIMEOUT);
                 const tokenizationHandler = (data) => {
                     clearTimeout(timeout);
                     this.off('tokenization', tokenizationHandler);
-                    if (data.errorCode === '0') {
-                        resolve({
-                            token: data.token,
-                            lastFour: data.token.slice(-4),
-                            cardType: this.normalizeCardType('unknown'),
-                            provider: 'cardconnect',
-                        });
-                    }
-                    else {
-                        reject(new types_1.TokenizationError(data.errorMessage || 'Tokenization failed', data.errorCode || 'UNKNOWN'));
-                    }
                 };
                 this.on('tokenization', tokenizationHandler);
             });
+            return this.tokenizationPromise;
         });
     }
     tokenizeBankAccountInternal(bankData) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c;
-            const routingNumber = ((_a = this.routingNumberEl) === null || _a === void 0 ? void 0 : _a.value) || bankData.routingNumber;
-            const accountNumber = ((_b = this.accountNumberEl) === null || _b === void 0 ? void 0 : _b.value) || bankData.accountNumber;
-            const accountType = ((_c = this.accountTypeEl) === null || _c === void 0 ? void 0 : _c.value) || bankData.accountType;
+            const routingNumber = (_a = this.routingNumberEl) === null || _a === void 0 ? void 0 : _a.value;
+            const accountNumber = (_b = this.accountNumberEl) === null || _b === void 0 ? void 0 : _b.value;
+            const accountType = ((_c = this.accountTypeEl) === null || _c === void 0 ? void 0 : _c.value) || 'checking';
             const accountHolderType = 'personal';
             if (!routingNumber || !accountNumber) {
                 throw new types_1.TokenizationError('Routing number and account number are required', 'VALIDATION_ERROR');
@@ -245,28 +279,64 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
     validateCardInternal() {
         return __awaiter(this, void 0, void 0, function* () {
             const errors = [];
-            if (this.currentValidationState.cardNumber &&
-                !this.currentValidationState.cardNumber.isValid &&
-                !this.currentValidationState.cardNumber.isEmpty) {
+            if (this.currentValidationState.cardNumber) {
+                if (this.currentValidationState.cardNumber.isEmpty) {
+                    errors.push({
+                        field: 'cardNumber',
+                        message: 'Card number is required',
+                    });
+                }
+                else if (!this.currentValidationState.cardNumber.isValid) {
+                    errors.push({
+                        field: 'cardNumber',
+                        message: 'Invalid card number',
+                    });
+                }
+            }
+            else {
                 errors.push({
                     field: 'cardNumber',
-                    message: 'Invalid card number',
+                    message: 'Card number is required',
                 });
             }
-            if (this.currentValidationState.expiry &&
-                !this.currentValidationState.expiry.isValid &&
-                !this.currentValidationState.expiry.isEmpty) {
+            if (this.currentValidationState.expiry) {
+                if (this.currentValidationState.expiry.isEmpty) {
+                    errors.push({
+                        field: 'expiry',
+                        message: 'Expiry date is required',
+                    });
+                }
+                else if (!this.currentValidationState.expiry.isValid) {
+                    errors.push({
+                        field: 'expiry',
+                        message: 'Invalid expiry date',
+                    });
+                }
+            }
+            else {
                 errors.push({
                     field: 'expiry',
-                    message: 'Invalid expiry date',
+                    message: 'Expiry date is required',
                 });
             }
-            if (this.currentValidationState.cvv &&
-                !this.currentValidationState.cvv.isValid &&
-                !this.currentValidationState.cvv.isEmpty) {
+            if (this.currentValidationState.cvv) {
+                if (this.currentValidationState.cvv.isEmpty) {
+                    errors.push({
+                        field: 'cvv',
+                        message: 'CVV is required',
+                    });
+                }
+                else if (!this.currentValidationState.cvv.isValid) {
+                    errors.push({
+                        field: 'cvv',
+                        message: 'Invalid CVV',
+                    });
+                }
+            }
+            else {
                 errors.push({
                     field: 'cvv',
-                    message: 'Invalid CVV',
+                    message: 'CVV is required',
                 });
             }
             return {
@@ -369,12 +439,66 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         }
         this.eventHandlers.clear();
     }
+    hasToken() {
+        var _a, _b;
+        if (this.mode === 'credit_card') {
+            return (((_a = this.cachedTokenResult) === null || _a === void 0 ? void 0 : _a.errorCode) === '0' &&
+                !!((_b = this.cachedTokenResult) === null || _b === void 0 ? void 0 : _b.token));
+        }
+        return false;
+    }
+    getToken() {
+        var _a;
+        if (this.mode === 'credit_card' &&
+            ((_a = this.cachedTokenResult) === null || _a === void 0 ? void 0 : _a.errorCode) === '0') {
+            return {
+                token: this.cachedTokenResult.token,
+                lastFour: this.cachedTokenResult.token.slice(-4),
+                cardType: this.normalizeCardType('unknown'),
+                provider: 'cardconnect',
+            };
+        }
+        return null;
+    }
+    get tokenizationMode() {
+        return this.mode === 'credit_card' ? 'auto' : 'manual';
+    }
     handleMessage(event) {
         try {
             const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
             if (data.token && data.errorCode !== undefined) {
                 this.cachedTokenResult = data;
                 this.emit('tokenization', data);
+                if (data.errorCode === '0') {
+                    const token = {
+                        token: data.token,
+                        lastFour: data.token.slice(-4),
+                        cardType: this.normalizeCardType('unknown'),
+                        provider: 'cardconnect',
+                    };
+                    if (this.tokenizationResolve) {
+                        this.tokenizationResolve(token);
+                        this.tokenizationPromise = undefined;
+                        this.tokenizationResolve = undefined;
+                        this.tokenizationReject = undefined;
+                    }
+                    this.currentValidationState = {
+                        isValid: true,
+                        cardNumber: { isValid: true, isEmpty: false },
+                        cvv: { isValid: true, isEmpty: false },
+                        expiry: { isValid: true, isEmpty: false },
+                    };
+                    this.emit('validation', { isValid: true });
+                    this.emit('tokenReady', token);
+                }
+                else {
+                    if (this.tokenizationReject) {
+                        this.tokenizationReject(new types_1.TokenizationError(data.errorMessage || 'Tokenization failed', data.errorCode || 'UNKNOWN'));
+                        this.tokenizationPromise = undefined;
+                        this.tokenizationResolve = undefined;
+                        this.tokenizationReject = undefined;
+                    }
+                }
             }
             if (data.event === 'validation' || data.validationError !== undefined) {
                 this.handleValidationMessage(data);
@@ -397,38 +521,23 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                 this.currentValidationState.cardNumber = {
                     isValid: false,
                     isEmpty: false,
-                    error: data.validationError,
                 };
             }
             else if (errorLower.includes('cvv') ||
                 errorLower.includes('security')) {
-                this.currentValidationState.cvv = {
-                    isValid: false,
-                    isEmpty: false,
-                    error: data.validationError,
-                };
+                this.currentValidationState.cvv = { isValid: false, isEmpty: false };
             }
             else if (errorLower.includes('expir') ||
-                errorLower.includes('exp') ||
                 errorLower.includes('month') ||
                 errorLower.includes('year')) {
-                this.currentValidationState.expiry = {
-                    isValid: false,
-                    isEmpty: false,
-                    error: data.validationError,
-                };
+                this.currentValidationState.expiry = { isValid: false, isEmpty: false };
             }
-        }
-        else if (data.event === 'validation') {
+            this.emit('error', new types_1.TokenizationError(data.validationError));
         }
         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);
-        this.emit('validation', this.currentValidationState);
-        if (data.validationError) {
-            this.emit('error', new types_1.TokenizationError(data.validationError));
-        }
     }
     static generateIframeUrl(baseUrl, container) {
         const params = new URLSearchParams({
@@ -436,20 +545,28 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             enhancedresponse: 'true',
             useexpiry: 'true',
             usecvv: 'true',
-            orientation: 'horizontal',
             formatinput: 'true',
             unique: 'true',
             norsa: 'true',
             placeholder: 'Card Number *',
-            placeholdermonth: 'MM',
-            placeholderyear: 'YYYY',
             placeholdercvv: 'CVV',
             invalidcreditcardevent: 'true',
             invalidexpiry: 'true',
             invalidcvv: 'true',
         });
+        if (container.layout === 'two-line') {
+            params.set('useexpiryfield', 'true');
+            params.set('orientation', 'horizontal');
+            params.set('placeholdermonth', 'MM');
+            params.set('placeholderyear', 'YYYY');
+        }
+        else {
+            params.set('orientation', 'horizontal');
+            params.set('placeholdermonth', 'MM');
+            params.set('placeholderyear', 'YYYY');
+        }
         const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
-        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles);
+        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, container.layout || 'single-line');
         const queryPairs = [];
         params.forEach((value, key) => {
             queryPairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
@@ -482,13 +599,20 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
         return iframe;
     }
-    static generateCardConnectCss(styles) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    static generateCardConnectCss(styles, layout = 'single-line') {
+        var _a, _b, _c;
         const css = [];
-        css.push('body{margin:0;padding:0;display:flex;align-items:center;}');
-        css.push('form{margin:0;padding:0;display:flex;width:100%;align-items:center;}');
-        css.push('label{display:none;}');
-        css.push('br{display:none;}');
+        if (layout === 'two-line') {
+            css.push('html,form,body{margin:0;padding:0;}');
+            css.push('label{display:none;}');
+            css.push('br{display:none;}');
+        }
+        else {
+            css.push('body{margin:0;padding:0;display:flex;align-items:center;}');
+            css.push('form{margin:0;padding:0;display:flex;width:100%;align-items:center;}');
+            css.push('label{display:none;}');
+            css.push('br{display:none;}');
+        }
         const isConnected = styles.container.gap === '0';
         const gap = isConnected ? '0' : styles.container.gap || '1rem';
         if (styles.input) {
@@ -512,80 +636,49 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             css.push(`input{${baseStyles};}`);
             css.push(`select{${baseStyles};}`);
         }
-        if (isConnected) {
-            const cardNumStyles = ['width:60%', 'margin:0'];
+        if (layout === 'two-line') {
+            css.push('input#ccnumfield{width:100%;display:block;margin-bottom:8px;}');
+            css.push('input#ccexpiryfieldmonth{width:20%;}');
+            css.push('input#ccexpiryfieldyear{width:24%;}');
+            css.push('input#cccvvfield{width:calc(56% - 20px);}');
             if ((_a = styles.input) === null || _a === void 0 ? void 0 : _a.borderRadius) {
-                cardNumStyles.push(`border-radius:${styles.input.borderRadius} 0 0 ${styles.input.borderRadius}`);
-            }
-            cardNumStyles.push('border-right:none');
-            css.push(`input#ccnumfield{${cardNumStyles.join(';')};}`);
-            const monthStyles = [
-                'width:10%',
-                'margin:0',
-                'margin-right:-12px',
-                'border-radius:0',
-                `border-left:${((_b = styles.input) === null || _b === void 0 ? void 0 : _b.border) || '1px solid #ccc'}`,
-                'border-right:none',
-            ];
-            css.push(`select#ccexpirymonth{${monthStyles.join(';')};}`);
-            const yearStyles = [
-                'width:10%',
-                'border-radius:0',
-                `border-left:${((_c = styles.input) === null || _c === void 0 ? void 0 : _c.border) || '1px solid #ccc'}`,
-                'border-right:none',
-            ];
-            css.push(`select#ccexpiryyear{${yearStyles.join(';')};}`);
-            const cvvStyles = [
-                'width:20%',
-                'margin:0',
-                'margin-left:-12px',
-            ];
-            if ((_d = styles.input) === null || _d === void 0 ? void 0 : _d.borderRadius) {
-                cvvStyles.push(`border-radius:0 ${styles.input.borderRadius} ${styles.input.borderRadius} 0`);
-            }
-            cvvStyles.push(`border-left:${((_e = styles.input) === null || _e === void 0 ? void 0 : _e.border) || '1px solid #ccc'}`);
-            css.push(`input#cccvvfield{${cvvStyles.join(';')};}`);
+                css.push(`input{border-radius:${styles.input.borderRadius};}`);
+            }
+        }
+        else if (isConnected) {
+            css.push('input#ccnumfield{width:60%;margin:0;}');
+            css.push('select#ccexpirymonth{width:10%;margin:0;margin-right:-12px;}');
+            css.push('select#ccexpiryyear{width:10%;}');
+            css.push('input#cccvvfield{width:20%;margin:0;margin-left:-12px;}');
+            if ((_b = styles.input) === null || _b === void 0 ? void 0 : _b.borderRadius) {
+                css.push(`input#ccnumfield{border-radius:${styles.input.borderRadius} 0 0 ${styles.input.borderRadius};border-right:none;}`);
+                css.push('select#ccexpirymonth{border-radius:0;border-right:none;}');
+                css.push('select#ccexpiryyear{border-radius:0;border-right:none;}');
+                css.push(`input#cccvvfield{border-radius:0 ${styles.input.borderRadius} ${styles.input.borderRadius} 0;}`);
+            }
+            else {
+                css.push('input#ccnumfield{border-right:none;}');
+                css.push('select#ccexpirymonth{border-right:none;}');
+                css.push('select#ccexpiryyear{border-right:none;}');
+            }
         }
         else {
-            const gapValue = gap.replace(/[^\d.]/g, '');
-            const gapUnit = gap.replace(/[\d.]/g, '');
-            const halfGapValue = parseFloat(gapValue) / 2;
-            const cardNumStyles = [
-                `width:calc(60% - ${gapValue}${gapUnit})`,
-                `margin-right:${gap}`,
-            ];
-            if ((_f = styles.input) === null || _f === void 0 ? void 0 : _f.borderRadius) {
-                cardNumStyles.push(`border-radius:${styles.input.borderRadius}`);
-            }
-            css.push(`input#ccnumfield{${cardNumStyles.join(';')};}`);
-            const monthStyles = [
-                `width:calc(10% - ${halfGapValue}${gapUnit})`,
-                `margin-right:calc(${gap} / 2)`,
-            ];
-            if ((_g = styles.input) === null || _g === void 0 ? void 0 : _g.borderRadius) {
-                monthStyles.push(`border-radius:${styles.input.borderRadius}`);
-            }
-            css.push(`select#ccexpirymonth{${monthStyles.join(';')};}`);
-            const yearStyles = [
-                `width:calc(10% - ${halfGapValue}${gapUnit})`,
-                `margin-right:${gap}`,
-            ];
-            if ((_h = styles.input) === null || _h === void 0 ? void 0 : _h.borderRadius) {
-                yearStyles.push(`border-radius:${styles.input.borderRadius}`);
-            }
-            css.push(`select#ccexpiryyear{${yearStyles.join(';')};}`);
-            const cvvStyles = ['width:20%'];
-            if ((_j = styles.input) === null || _j === void 0 ? void 0 : _j.borderRadius) {
-                cvvStyles.push(`border-radius:${styles.input.borderRadius}`);
-            }
-            css.push(`input#cccvvfield{${cvvStyles.join(';')};}`);
+            const marginRight = gap === '0' ? '0' : '8px';
+            css.push(`input#ccnumfield{width:60%;margin-right:${marginRight};}`);
+            css.push(`select#ccexpirymonth{width:10%;margin-right:${marginRight};}`);
+            css.push(`select#ccexpiryyear{width:10%;margin-right:${marginRight};}`);
+            css.push('input#cccvvfield{width:20%;}');
+            if ((_c = styles.input) === null || _c === void 0 ? void 0 : _c.borderRadius) {
+                css.push(`input,select{border-radius:${styles.input.borderRadius};}`);
+            }
         }
         if (styles.focus) {
             const focusStyles = [];
             if (styles.focus.borderColor)
                 focusStyles.push(`border-color:${styles.focus.borderColor}`);
-            if (styles.focus.outline)
-                focusStyles.push(`outline:${styles.focus.outline}`);
+            if (styles.focus.outline) {
+                focusStyles.push(`outline:none`);
+            }
             if (styles.focus.boxShadow)
                 focusStyles.push(`box-shadow:${styles.focus.boxShadow}`);
             if (focusStyles.length > 0) {

package/dist/tokenize/SpreedlyTokenizer.d.ts

@@ -5,6 +5,7 @@ import ConfigHandler from '../config-handler';
 export declare class SpreedlyTokenizer extends Tokenizer {
     private environmentKey;
     private containerId;
+    private layout;
     private spreedly;
     private isReady;
     private currentValidationState;
@@ -14,8 +15,9 @@ export declare class SpreedlyTokenizer extends Tokenizer {
     private cvvEl;
     private expiryId;
     private containerEl?;
-    private organizationId?;
-    private embedId?;
+    private organizationId;
+    private embedId;
+    private clientConfig;
     private bankCountry;
     private routingNumberEl?;
     private accountNumberEl?;
@@ -24,9 +26,10 @@ export declare class SpreedlyTokenizer extends Tokenizer {
     private transitNumberEl?;
     private enableTestMode;
     private constructor();
-    static create(gateway: PaymentGateway, container: TokenizerContainer, config?: {
+    static create(gateway: PaymentGateway, container: TokenizerContainer, config: {
         organizationId: string;
         embedId: string;
+        clientConfig: ConfigHandler;
     }): Promise<SpreedlyTokenizer>;
     private init;
     tokenize(paymentData: PaymentData): Promise<PaymentToken>;
@@ -41,6 +44,10 @@ export declare class SpreedlyTokenizer extends Tokenizer {
     clear(): void;
     focus(field: 'cardNumber' | 'cvv' | 'expiry' | 'routingNumber' | 'accountNumber'): void;
     destroy(): void;
+    hasToken(): boolean;
+    getToken(): PaymentToken | null;
+    get tokenizationMode(): 'auto' | 'manual';
+    private updateOverallValidation;
     private handleFieldEvent;
     private createInternalElements;
     private createCreditCardFields;