@idonatedev/idonate-sdk 1.0.16 → 1.1.0-dev1

package/dist/tokenize/CardConnectTokenizer.js

@@ -0,0 +1,620 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardConnectTokenizer = void 0;
+const Tokenizer_1 = require("./Tokenizer");
+const types_1 = require("./types");
+const config_handler_1 = __importDefault(require("../config-handler"));
+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) {
+        super();
+        this.iframeUrl = iframeUrl;
+        this.containerId = containerId;
+        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');
+            }
+            const baseUrl = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.base_url;
+            if (!baseUrl) {
+                throw new Error('CardConnect base URL not configured');
+            }
+            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);
+            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 = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
+        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%';
+        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);
+    }
+    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'));
+                }, tokenizer_constants_1.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') {
+                        console.log('CardConnect test mode enabled - manual entry required for card fields');
+                    }
+                    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 === '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',
+                };
+            }
+            return new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    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);
+            });
+        });
+    }
+    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 accountHolderType = 'personal';
+            if (!routingNumber || !accountNumber) {
+                throw new types_1.TokenizationError('Routing number and account number are required', 'VALIDATION_ERROR');
+            }
+            if (!(0, tokenizer_utils_1.validateRoutingNumber)(routingNumber)) {
+                throw new types_1.TokenizationError('Invalid routing number', 'VALIDATION_ERROR');
+            }
+            if (!(0, tokenizer_utils_1.validateAccountNumber)(accountNumber)) {
+                throw new types_1.TokenizationError('Invalid account number', 'VALIDATION_ERROR');
+            }
+            const baseUrl = new URL(this.iframeUrl).origin;
+            const config = new config_handler_1.default({});
+            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 &&
+                !this.currentValidationState.cardNumber.isValid &&
+                !this.currentValidationState.cardNumber.isEmpty) {
+                errors.push({
+                    field: 'cardNumber',
+                    message: 'Invalid card number',
+                });
+            }
+            if (this.currentValidationState.expiry &&
+                !this.currentValidationState.expiry.isValid &&
+                !this.currentValidationState.expiry.isEmpty) {
+                errors.push({
+                    field: 'expiry',
+                    message: 'Invalid expiry date',
+                });
+            }
+            if (this.currentValidationState.cvv &&
+                !this.currentValidationState.cvv.isValid &&
+                !this.currentValidationState.cvv.isEmpty) {
+                errors.push({
+                    field: 'cvv',
+                    message: 'Invalid CVV',
+                });
+            }
+            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 (!(0, tokenizer_utils_1.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 (!(0, tokenizer_utils_1.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();
+    }
+    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.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,
+                    error: data.validationError,
+                };
+            }
+            else if (errorLower.includes('cvv') ||
+                errorLower.includes('security')) {
+                this.currentValidationState.cvv = {
+                    isValid: false,
+                    isEmpty: false,
+                    error: data.validationError,
+                };
+            }
+            else if (errorLower.includes('expir') ||
+                errorLower.includes('exp') ||
+                errorLower.includes('month') ||
+                errorLower.includes('year')) {
+                this.currentValidationState.expiry = {
+                    isValid: false,
+                    isEmpty: false,
+                    error: data.validationError,
+                };
+            }
+        }
+        else if (data.event === 'validation') {
+        }
+        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({
+            invalidinputevent: 'true',
+            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',
+        });
+        const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
+        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles);
+        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) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        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;}');
+        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 (isConnected) {
+            const cardNumStyles = ['width:60%', 'margin:0'];
+            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(';')};}`);
+        }
+        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(';')};}`);
+        }
+        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.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());
+    }
+}
+exports.CardConnectTokenizer = CardConnectTokenizer;