@idonatedev/idonate-sdk 1.1.0-dev12 → 1.1.0-dev14

package/dist/esm/tokenize/CardConnectTokenizer.js

@@ -0,0 +1,706 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Tokenizer } from './Tokenizer';
+import { TokenizationError, } from './types';
+import ConfigHandler from '../config-handler';
+import { DEFAULT_UNIFIED_STYLES, mergeStyles, getContainerStylesForLayout, } from './styles';
+import { INIT_TIMEOUT, TOKENIZE_TIMEOUT, BANK_FIELD_FLEX, } from './tokenizer-constants';
+import { createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, } from './tokenizer-utils';
+export class CardConnectTokenizer extends Tokenizer {
+    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;
+        this.enableTestMode = enableTestMode;
+        this.iframe = iframe;
+        const url = new URL(iframeUrl);
+        this.expectedOrigin = `${url.protocol}//${url.host}`;
+        this.currentValidationState = {
+            isValid: false,
+            cardNumber: { isValid: false, isEmpty: true },
+            cvv: { isValid: false, isEmpty: true },
+            expiry: { isValid: false, isEmpty: true },
+        };
+    }
+    static create(gateway, container, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (container.mode === 'bank_account' && container.bankCountry === 'CA') {
+                throw new Error('CardConnect does not support Canadian bank accounts');
+            }
+            let baseUrl = ((_a = gateway.config) === null || _a === void 0 ? void 0 : _a.base_url) || config.clientConfig.cardConnectBaseUrl;
+            config.cardConnectBaseUrl = baseUrl;
+            const mergedStyles = mergeStyles(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, container.layout || 'single-line');
+            tokenizer.createInternalElements(container);
+            yield tokenizer.init();
+            return tokenizer;
+        });
+    }
+    createInternalElements(container) {
+        const containerEl = document.getElementById(container.containerId);
+        if (!containerEl) {
+            throw new Error(`Container element not found: ${container.containerId}`);
+        }
+        this.containerEl = containerEl;
+        containerEl.innerHTML = '';
+        const mergedStyles = getContainerStylesForLayout(mergeStyles(DEFAULT_UNIFIED_STYLES, container.styling), this.layout);
+        Object.assign(containerEl.style, mergedStyles.container);
+        if (this.mode === 'bank_account') {
+            this.createBankAccountFields(containerEl, mergedStyles);
+        }
+        else {
+            this.createCreditCardFields(containerEl, mergedStyles);
+        }
+    }
+    createCreditCardFields(containerEl, mergedStyles) {
+        this.iframe.style.width = '100%';
+        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';
+        if (this.layout === 'two-line') {
+            this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: '1',
+                minWidth: BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, mergedStyles, 'left');
+            containerEl.appendChild(this.accountTypeEl);
+            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            Object.assign(this.routingNumberEl.style, {
+                flex: '1',
+                minWidth: BANK_FIELD_FLEX.routingNumber.minWidth,
+            });
+            this.applyInputStyles(this.routingNumberEl, mergedStyles, 'right');
+            containerEl.appendChild(this.routingNumberEl);
+            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            Object.assign(this.accountNumberEl.style, {
+                flex: '1',
+                flexBasis: '100%',
+                minWidth: BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, mergedStyles);
+            containerEl.appendChild(this.accountNumberEl);
+        }
+        else {
+            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            Object.assign(this.routingNumberEl.style, {
+                flex: BANK_FIELD_FLEX.routingNumber.flex,
+                minWidth: BANK_FIELD_FLEX.routingNumber.minWidth,
+            });
+            this.applyInputStyles(this.routingNumberEl, mergedStyles, 'left');
+            containerEl.appendChild(this.routingNumberEl);
+            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            Object.assign(this.accountNumberEl.style, {
+                flex: BANK_FIELD_FLEX.accountNumber.flex,
+                minWidth: BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, mergedStyles, 'middle');
+            containerEl.appendChild(this.accountNumberEl);
+            this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: BANK_FIELD_FLEX.accountType.flex,
+                minWidth: BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, mergedStyles, 'right');
+            containerEl.appendChild(this.accountTypeEl);
+        }
+    }
+    init() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.mode === 'bank_account') {
+                this.isReady = true;
+                if (this.enableTestMode) {
+                    setTimeout(() => {
+                        if (this.routingNumberEl) {
+                            this.routingNumberEl.value = '021000021';
+                            this.routingNumberEl.dispatchEvent(new Event('input', { bubbles: true }));
+                        }
+                        if (this.accountNumberEl) {
+                            this.accountNumberEl.value = '9876543210';
+                            this.accountNumberEl.dispatchEvent(new Event('input', { bubbles: true }));
+                        }
+                        if (this.accountTypeEl) {
+                            this.accountTypeEl.value = 'checking';
+                            this.accountTypeEl.dispatchEvent(new Event('change', { bubbles: true }));
+                        }
+                    }, 100);
+                }
+                this.emit('ready');
+                return Promise.resolve();
+            }
+            return new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    reject(new Error('CardConnect initialization timeout'));
+                }, INIT_TIMEOUT);
+                this.messageHandler = (event) => {
+                    if (event.origin !== this.expectedOrigin) {
+                        return;
+                    }
+                    this.handleMessage(event);
+                };
+                window.addEventListener('message', this.messageHandler);
+                this.iframe.onload = () => {
+                    clearTimeout(timeout);
+                    this.isReady = true;
+                    if (this.enableTestMode && this.mode === 'credit_card') {
+                    }
+                    this.emit('ready');
+                    resolve();
+                };
+                this.iframe.onerror = () => {
+                    clearTimeout(timeout);
+                    reject(new Error('Failed to load CardConnect iframe'));
+                };
+            });
+        });
+    }
+    tokenize(paymentData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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);
+            }
+            else {
+                return this.tokenizeCardInternal(paymentData);
+            }
+        });
+    }
+    tokenizeCardInternal(cardData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.cachedTokenResult && this.cachedTokenResult.errorCode === '0') {
+                return {
+                    token: this.cachedTokenResult.token,
+                    lastFour: this.cachedTokenResult.token.slice(-4),
+                    cardType: this.normalizeCardType('unknown'),
+                    provider: 'cardconnect',
+                };
+            }
+            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 TokenizationError('Tokenization timeout - ensure all card fields are filled in iframe', 'TIMEOUT'));
+                }, TOKENIZE_TIMEOUT);
+                const tokenizationHandler = (data) => {
+                    clearTimeout(timeout);
+                    this.off('tokenization', tokenizationHandler);
+                };
+                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;
+            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 TokenizationError('Routing number and account number are required', 'VALIDATION_ERROR');
+            }
+            if (!validateRoutingNumber(routingNumber)) {
+                throw new TokenizationError('Invalid routing number', 'VALIDATION_ERROR');
+            }
+            if (!validateAccountNumber(accountNumber)) {
+                throw new TokenizationError('Invalid account number', 'VALIDATION_ERROR');
+            }
+            const baseUrl = new URL(this.iframeUrl).origin;
+            const config = new ConfigHandler({});
+            config.cardConnectBaseUrl = baseUrl;
+            const result = yield CardConnectTokenizer.tokenizeBankAccount(routingNumber, accountNumber, config);
+            return {
+                token: result.token,
+                lastFour: accountNumber.slice(-4),
+                accountType: accountType,
+                paymentMethodType: 'bank_account',
+                provider: 'cardconnect',
+            };
+        });
+    }
+    validate() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.isReady) {
+                throw new Error('Tokenizer not initialized');
+            }
+            if (this.mode === 'bank_account') {
+                return this.validateBankAccountInternal();
+            }
+            else {
+                return this.validateCardInternal();
+            }
+        });
+    }
+    validateCardInternal() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const errors = [];
+            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: 'Card number is required',
+                });
+            }
+            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: 'Expiry date is required',
+                });
+            }
+            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: 'CVV is required',
+                });
+            }
+            return {
+                isValid: this.currentValidationState.isValid,
+                errors,
+            };
+        });
+    }
+    validateBankAccountInternal() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const errors = [];
+            if (!((_a = this.routingNumberEl) === null || _a === void 0 ? void 0 : _a.value)) {
+                errors.push({
+                    field: 'routingNumber',
+                    message: 'Routing number is required',
+                });
+            }
+            else if (!validateRoutingNumber(this.routingNumberEl.value)) {
+                errors.push({
+                    field: 'routingNumber',
+                    message: 'Invalid routing number',
+                });
+            }
+            if (!((_b = this.accountNumberEl) === null || _b === void 0 ? void 0 : _b.value)) {
+                errors.push({
+                    field: 'accountNumber',
+                    message: 'Account number is required',
+                });
+            }
+            else if (!validateAccountNumber(this.accountNumberEl.value)) {
+                errors.push({
+                    field: 'accountNumber',
+                    message: 'Invalid account number',
+                });
+            }
+            return {
+                isValid: errors.length === 0,
+                errors,
+            };
+        });
+    }
+    clear() {
+        var _a;
+        if (this.mode === 'bank_account') {
+            if (this.routingNumberEl) {
+                this.routingNumberEl.value = '';
+            }
+            if (this.accountNumberEl) {
+                this.accountNumberEl.value = '';
+            }
+            if (this.accountTypeEl) {
+                this.accountTypeEl.value = 'checking';
+            }
+        }
+        else {
+            (_a = this.iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+                action: 'clear',
+            }, this.expectedOrigin);
+        }
+        this.currentValidationState = {
+            isValid: false,
+            cardNumber: { isValid: false, isEmpty: true },
+            cvv: { isValid: false, isEmpty: true },
+            expiry: { isValid: false, isEmpty: true },
+        };
+        this.emit('validation', this.currentValidationState);
+    }
+    focus(field) {
+        var _a;
+        if (this.mode === 'bank_account') {
+            if (field === 'routingNumber' && this.routingNumberEl) {
+                this.routingNumberEl.focus();
+            }
+            else if (field === 'accountNumber' && this.accountNumberEl) {
+                this.accountNumberEl.focus();
+            }
+        }
+        else {
+            const fieldMap = {
+                cardNumber: 'number',
+                cvv: 'cvv',
+                expiry: 'expiry',
+            };
+            const iframeField = fieldMap[field];
+            if (iframeField) {
+                (_a = this.iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+                    action: 'focus',
+                    field: iframeField,
+                }, this.expectedOrigin);
+            }
+        }
+    }
+    destroy() {
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+        }
+        if (this.containerEl) {
+            this.containerEl.innerHTML = '';
+        }
+        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 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);
+            }
+            if (data.event === 'focus' || data.event === 'blur') {
+                this.emit(data.event, { field: data.data });
+            }
+            if (data.event === 'input' || data.event === 'change') {
+                this.emit('change', { field: data.data });
+            }
+        }
+        catch (error) {
+        }
+    }
+    handleValidationMessage(data) {
+        var _a, _b, _c, _d, _e, _f;
+        if (data.validationError) {
+            const errorLower = data.validationError.toLowerCase();
+            if (errorLower.includes('card') || errorLower.includes('number')) {
+                this.currentValidationState.cardNumber = {
+                    isValid: false,
+                    isEmpty: false,
+                };
+            }
+            else if (errorLower.includes('cvv') ||
+                errorLower.includes('security')) {
+                this.currentValidationState.cvv = { isValid: false, isEmpty: false };
+            }
+            else if (errorLower.includes('expir') ||
+                errorLower.includes('month') ||
+                errorLower.includes('year')) {
+                this.currentValidationState.expiry = { isValid: false, isEmpty: false };
+            }
+            this.emit('error', new 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);
+    }
+    static generateIframeUrl(baseUrl, container) {
+        const params = new URLSearchParams({
+            invalidinputevent: 'true',
+            enhancedresponse: 'true',
+            useexpiry: 'true',
+            usecvv: 'true',
+            formatinput: 'true',
+            unique: 'true',
+            norsa: 'true',
+            placeholder: 'Card Number *',
+            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 = mergeStyles(DEFAULT_UNIFIED_STYLES, container.styling);
+        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, container.layout || 'single-line');
+        const queryPairs = [];
+        params.forEach((value, key) => {
+            queryPairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
+        });
+        queryPairs.push(`css=${cssString}`);
+        const tokenizerPath = '/itoke/ajax-tokenizer.html';
+        return `${baseUrl}${tokenizerPath}?${queryPairs.join('&')}`;
+    }
+    static createIframe(url, styles) {
+        const iframe = document.createElement('iframe');
+        iframe.src = url;
+        iframe.style.width = '100%';
+        iframe.style.height = styles.input.height;
+        iframe.style.border = 'none';
+        iframe.style.overflow = 'hidden';
+        iframe.style.display = 'block';
+        iframe.style.minWidth = '0';
+        if (styles.container) {
+            Object.entries(styles.container).forEach(([key, value]) => {
+                if (key !== 'height' && key !== 'width') {
+                    iframe.style[key] = value;
+                }
+            });
+            if (styles.container.width) {
+                iframe.style.width = styles.container.width;
+            }
+        }
+        iframe.setAttribute('scrolling', 'no');
+        iframe.setAttribute('title', 'Secure card input');
+        iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
+        return iframe;
+    }
+    static generateCardConnectCss(styles, layout = 'single-line') {
+        var _a, _b, _c;
+        const css = [];
+        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) {
+            const commonStyles = [];
+            if (styles.input.height)
+                commonStyles.push(`height:${styles.input.height}`);
+            if (styles.input.padding)
+                commonStyles.push(`padding:${styles.input.padding}`);
+            if (styles.input.fontSize)
+                commonStyles.push(`font-size:${styles.input.fontSize}`);
+            if (styles.input.fontFamily)
+                commonStyles.push(`font-family:${styles.input.fontFamily}`);
+            if (styles.input.border)
+                commonStyles.push(`border:${styles.input.border}`);
+            if (styles.input.backgroundColor)
+                commonStyles.push(`background-color:${styles.input.backgroundColor}`);
+            if (styles.input.color)
+                commonStyles.push(`color:${styles.input.color}`);
+            commonStyles.push('box-sizing:border-box');
+            const baseStyles = commonStyles.join(';');
+            css.push(`input{${baseStyles};}`);
+            css.push(`select{${baseStyles};}`);
+        }
+        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) {
+                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 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:none`);
+            }
+            if (styles.focus.boxShadow)
+                focusStyles.push(`box-shadow:${styles.focus.boxShadow}`);
+            if (focusStyles.length > 0) {
+                css.push(`input:focus{${focusStyles.join(';')};}`);
+            }
+        }
+        if (styles.error) {
+            const errorStyles = [];
+            if (styles.error.borderColor)
+                errorStyles.push(`border-color:${styles.error.borderColor}`);
+            if (styles.error.backgroundColor)
+                errorStyles.push(`background-color:${styles.error.backgroundColor}`);
+            if (errorStyles.length > 0) {
+                css.push(`.error{${errorStyles.join(';')};}`);
+            }
+        }
+        return encodeURIComponent(css.join(''));
+    }
+    static tokenizeBankAccount(routingNumber, accountNumber, config) {
+        return fetch(`${config.cardConnectBaseUrl}/cardsecure/api/v1/ccn/tokenize`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                account: `${routingNumber}/${accountNumber}`,
+                unique: true,
+            }),
+        }).then((response) => response.json());
+    }
+}