@idonatedev/idonate-sdk 1.2.0-dev2 → 1.2.0-dev20

package/dist/esm/tokenize/CardConnectTokenizer.js

@@ -9,17 +9,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 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';
+import { INIT_TIMEOUT, TOKENIZE_TIMEOUT, BANK_FIELD_FLEX, RESPONSIVE_BREAKPOINT, } from './tokenizer-constants';
+import { createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, wrapFieldWithLabel, cssLengthToPixels, } from './tokenizer-utils';
 export class CardConnectTokenizer extends Tokenizer {
-    constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false, layout = 'single-line') {
+    constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false, layout = 'single-line', customPlaceholders) {
         super();
         this.iframeUrl = iframeUrl;
         this.containerId = containerId;
         this.layout = layout;
+        this.customPlaceholders = customPlaceholders;
         this.enableTestMode = false;
+        this.acceptAutoToken = true;
         this.mode = mode;
         this.enableTestMode = enableTestMode;
         this.iframe = iframe;
@@ -34,17 +35,28 @@ export class CardConnectTokenizer extends Tokenizer {
     }
     static create(gateway, container, config) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a;
+            var _a, _b;
             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;
+            let effectiveLayout = 'single-line';
+            if (container.layout === 'responsive') {
+                const containerEl = document.getElementById(container.containerId);
+                const containerWidth = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.offsetWidth) || 0;
+                const breakpoint = (_a = container.responsiveBreakpoint) !== null && _a !== void 0 ? _a : RESPONSIVE_BREAKPOINT;
+                effectiveLayout =
+                    containerWidth < breakpoint ? 'two-line' : 'single-line';
+            }
+            else if (container.layout === 'two-line') {
+                effectiveLayout = 'two-line';
+            }
+            const resolvedContainer = Object.assign(Object.assign({}, container), { layout: effectiveLayout });
+            const baseUrl = ((_b = gateway.config) === null || _b === void 0 ? void 0 : _b.baseUrl) || config.clientConfig.cardConnectBaseUrl;
             const mergedStyles = mergeStyles(DEFAULT_UNIFIED_STYLES, container.styling);
-            const iframeUrl = CardConnectTokenizer.generateIframeUrl(baseUrl, container);
+            const iframeUrl = CardConnectTokenizer.generateIframeUrl(baseUrl, resolvedContainer);
             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);
+            const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false, effectiveLayout, container.placeholders);
+            tokenizer.createInternalElements(resolvedContainer);
             yield tokenizer.init();
             return tokenizer;
         });
@@ -66,19 +78,32 @@ export class CardConnectTokenizer extends Tokenizer {
         }
     }
     createCreditCardFields(containerEl, mergedStyles) {
+        var _a;
         this.iframe.style.width = '100%';
-        if (this.layout === 'two-line') {
-            const inputHeight = mergedStyles.input.height || '40px';
-            this.iframe.style.height = `calc((${inputHeight}) * 2 + 10px)`;
+        const hasLabels = ((_a = mergedStyles.label) === null || _a === void 0 ? void 0 : _a.show) &&
+            (this.layout === 'two-line' || this.layout === 'responsive');
+        const inputHeight = mergedStyles.input.height || '40px';
+        if (this.layout === 'two-line' || this.layout === 'responsive') {
+            if (hasLabels) {
+                const labelFontPx = cssLengthToPixels(mergedStyles.label.fontSize);
+                const labelMarginPx = parseFloat(mergedStyles.label.marginBottom) || 0;
+                const labelRowHeight = Math.ceil(labelFontPx * 1.2) + labelMarginPx;
+                const extraHeight = Math.ceil(labelRowHeight * 2) + 34;
+                this.iframe.style.height = `calc(${inputHeight} * 2 + ${extraHeight}px)`;
+            }
+            else {
+                this.iframe.style.height = `calc((${inputHeight}) * 2 + 10px)`;
+            }
         }
         else {
-            this.iframe.style.height = mergedStyles.input.height || '40px';
+            this.iframe.style.height = inputHeight;
         }
         this.iframe.style.border = 'none';
         this.iframe.style.display = 'block';
         containerEl.appendChild(this.iframe);
     }
     createBankAccountFields(containerEl, mergedStyles) {
+        var _a, _b, _c, _d;
         this.iframe.style.display = 'none';
         if (this.layout === 'two-line') {
             this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
@@ -87,47 +112,115 @@ export class CardConnectTokenizer extends Tokenizer {
                 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);
+            containerEl.appendChild(wrapFieldWithLabel(this.accountTypeEl, 'Account Type', mergedStyles));
+            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.routingNumber) || '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);
+            containerEl.appendChild(wrapFieldWithLabel(this.routingNumberEl, 'Routing Number', mergedStyles));
+            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.accountNumber) || '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);
+            containerEl.appendChild(wrapFieldWithLabel(this.accountNumberEl, 'Account Number', mergedStyles));
         }
         else {
-            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', ((_c = this.customPlaceholders) === null || _c === void 0 ? void 0 : _c.routingNumber) || '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);
+            containerEl.appendChild(wrapFieldWithLabel(this.routingNumberEl, 'Routing Number', mergedStyles));
+            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', ((_d = this.customPlaceholders) === null || _d === void 0 ? void 0 : _d.accountNumber) || '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);
+            containerEl.appendChild(wrapFieldWithLabel(this.accountNumberEl, 'Account Number', mergedStyles));
             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);
+            containerEl.appendChild(wrapFieldWithLabel(this.accountTypeEl, 'Account Type', mergedStyles));
+        }
+        this.mergedStyles = mergedStyles;
+        this.currentValidationState = {
+            isValid: false,
+            routingNumber: { isValid: false, isEmpty: true },
+            accountNumber: { isValid: false, isEmpty: true },
+        };
+        this.addBankAccountValidationListeners(mergedStyles);
+    }
+    addBankAccountValidationListeners(styles) {
+        if (this.routingNumberEl) {
+            this.routingNumberEl.addEventListener('blur', () => {
+                this.updateBankAccountValidation(styles);
+            });
+            this.routingNumberEl.addEventListener('input', () => {
+                this.updateBankAccountValidation(styles);
+            });
+        }
+        if (this.accountNumberEl) {
+            this.accountNumberEl.addEventListener('blur', () => {
+                this.updateBankAccountValidation(styles);
+            });
+            this.accountNumberEl.addEventListener('input', () => {
+                this.updateBankAccountValidation(styles);
+            });
         }
     }
+    updateBankAccountValidation(styles) {
+        var _a, _b;
+        const routingValue = ((_a = this.routingNumberEl) === null || _a === void 0 ? void 0 : _a.value) || '';
+        const accountValue = ((_b = this.accountNumberEl) === null || _b === void 0 ? void 0 : _b.value) || '';
+        const routingValid = routingValue.length > 0 && validateRoutingNumber(routingValue);
+        const accountValid = accountValue.length > 0 && validateAccountNumber(accountValue);
+        if (this.routingNumberEl) {
+            if (routingValue.length > 0 && !routingValid) {
+                this.routingNumberEl.style.border = `1px solid ${styles.error.borderColor}`;
+                if (styles.error.backgroundColor) {
+                    this.routingNumberEl.style.backgroundColor =
+                        styles.error.backgroundColor;
+                }
+            }
+            else {
+                this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
+            }
+        }
+        if (this.accountNumberEl) {
+            if (accountValue.length > 0 && !accountValid) {
+                this.accountNumberEl.style.border = `1px solid ${styles.error.borderColor}`;
+                if (styles.error.backgroundColor) {
+                    this.accountNumberEl.style.backgroundColor =
+                        styles.error.backgroundColor;
+                }
+            }
+            else {
+                this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'right');
+            }
+        }
+        this.currentValidationState = {
+            isValid: routingValid && accountValid,
+            routingNumber: {
+                isValid: routingValid,
+                isEmpty: routingValue.length === 0,
+            },
+            accountNumber: {
+                isValid: accountValid,
+                isEmpty: accountValue.length === 0,
+            },
+        };
+        this.emit('validation', this.currentValidationState);
+    }
     init() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.mode === 'bank_account') {
@@ -163,8 +256,6 @@ export class CardConnectTokenizer extends Tokenizer {
                 window.addEventListener('message', this.messageHandler);
                 this.iframe.onload = () => {
                     clearTimeout(timeout);
-                    if (this.enableTestMode && this.mode === 'credit_card') {
-                    }
                     this.emit('ready');
                     resolve();
                 };
@@ -196,31 +287,39 @@ export class CardConnectTokenizer extends Tokenizer {
     }
     tokenizeCardInternal(cardData) {
         return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
             if (this.cachedTokenResult && this.cachedTokenResult.errorCode === '0') {
+                const cardType = this.cachedTokenResult.cardType
+                    ? this.normalizeCardType(this.cachedTokenResult.cardType)
+                    : this.normalizeCardType('unknown');
                 return {
                     token: this.cachedTokenResult.token,
-                    lastFour: this.cachedTokenResult.token.slice(-4),
-                    cardType: this.normalizeCardType('unknown'),
+                    lastFour: this.cachedTokenResult.last4 ||
+                        this.cachedTokenResult.token.slice(-4),
+                    cardType,
+                    paymentMethodType: 'credit_card',
                     provider: 'cardconnect',
                 };
             }
             if (this.tokenizationPromise) {
                 return this.tokenizationPromise;
             }
+            if (!this.currentValidationState.isValid &&
+                (((_a = this.currentValidationState.cardNumber) === null || _a === void 0 ? void 0 : _a.isEmpty) ||
+                    ((_b = this.currentValidationState.cvv) === null || _b === void 0 ? void 0 : _b.isEmpty) ||
+                    ((_c = this.currentValidationState.expiry) === null || _c === void 0 ? void 0 : _c.isEmpty))) {
+                throw new TokenizationError('Card fields are incomplete', 'VALIDATION_ERROR');
+            }
             this.tokenizationPromise = new Promise((resolve, reject) => {
                 this.tokenizationResolve = resolve;
                 this.tokenizationReject = reject;
-                const timeout = setTimeout(() => {
+                this.tokenizationTimeout = setTimeout(() => {
+                    this.tokenizationTimeout = undefined;
                     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;
         });
@@ -242,16 +341,16 @@ export class CardConnectTokenizer extends Tokenizer {
                 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 {
+            const result = yield CardConnectTokenizer.tokenizeBankAccount(routingNumber, accountNumber, baseUrl);
+            const paymentToken = {
                 token: result.token,
                 lastFour: accountNumber.slice(-4),
                 accountType: accountType,
                 paymentMethodType: 'bank_account',
                 provider: 'cardconnect',
             };
+            this.emit('tokenReady', paymentToken);
+            return paymentToken;
         });
     }
     validate() {
@@ -388,12 +487,39 @@ export class CardConnectTokenizer extends Tokenizer {
                 action: 'clear',
             }, this.expectedOrigin);
         }
-        this.currentValidationState = {
-            isValid: false,
-            cardNumber: { isValid: false, isEmpty: true },
-            cvv: { isValid: false, isEmpty: true },
-            expiry: { isValid: false, isEmpty: true },
-        };
+        this.cachedTokenResult = undefined;
+        this.acceptAutoToken = false;
+        if (this.tokenizationTimeout) {
+            clearTimeout(this.tokenizationTimeout);
+            this.tokenizationTimeout = undefined;
+        }
+        if (this.tokenizationReject) {
+            const reject = this.tokenizationReject;
+            this.tokenizationPromise = undefined;
+            this.tokenizationResolve = undefined;
+            this.tokenizationReject = undefined;
+            reject(new TokenizationError('Tokenizer cleared', 'CLEARED'));
+        }
+        else {
+            this.tokenizationPromise = undefined;
+            this.tokenizationResolve = undefined;
+            this.tokenizationReject = undefined;
+        }
+        if (this.mode === 'bank_account') {
+            this.currentValidationState = {
+                isValid: false,
+                routingNumber: { isValid: false, isEmpty: true },
+                accountNumber: { isValid: false, isEmpty: true },
+            };
+        }
+        else {
+            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) {
@@ -422,8 +548,22 @@ export class CardConnectTokenizer extends Tokenizer {
         }
     }
     destroy() {
+        this.markDestroyed();
+        if (this.tokenizationTimeout) {
+            clearTimeout(this.tokenizationTimeout);
+            this.tokenizationTimeout = undefined;
+        }
+        if (this.tokenizationReject) {
+            const reject = this.tokenizationReject;
+            this.tokenizationPromise = undefined;
+            this.tokenizationResolve = undefined;
+            this.tokenizationReject = undefined;
+            reject(new TokenizationError('Tokenizer destroyed', 'DESTROYED'));
+        }
+        this.cachedTokenResult = undefined;
         if (this.messageHandler) {
             window.removeEventListener('message', this.messageHandler);
+            this.messageHandler = undefined;
         }
         if (this.containerEl) {
             this.containerEl.innerHTML = '';
@@ -450,6 +590,7 @@ export class CardConnectTokenizer extends Tokenizer {
                 lastFour: this.cachedTokenResult.last4 ||
                     this.cachedTokenResult.token.slice(-4),
                 cardType,
+                paymentMethodType: 'credit_card',
                 provider: 'cardconnect',
             };
         }
@@ -462,8 +603,14 @@ export class CardConnectTokenizer extends Tokenizer {
         try {
             const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
             if (data.token && data.errorCode !== undefined) {
+                if (!this.acceptAutoToken && !this.tokenizationResolve) {
+                    return;
+                }
                 this.cachedTokenResult = data;
-                this.emit('tokenization', data);
+                if (this.tokenizationTimeout) {
+                    clearTimeout(this.tokenizationTimeout);
+                    this.tokenizationTimeout = undefined;
+                }
                 if (data.errorCode === '0') {
                     const cardType = data.cardType
                         ? this.normalizeCardType(data.cardType)
@@ -476,6 +623,7 @@ export class CardConnectTokenizer extends Tokenizer {
                         token: data.token,
                         lastFour: data.last4 || data.token.slice(-4),
                         cardType,
+                        paymentMethodType: 'credit_card',
                         provider: 'cardconnect',
                     };
                     if (this.tokenizationResolve) {
@@ -490,12 +638,14 @@ export class CardConnectTokenizer extends Tokenizer {
                         cvv: { isValid: true, isEmpty: false },
                         expiry: { isValid: true, isEmpty: false },
                     };
-                    this.emit('validation', { isValid: true });
+                    this.emit('validation', this.currentValidationState);
                     this.emit('tokenReady', token);
                 }
                 else {
+                    const error = new TokenizationError(data.errorMessage || 'Tokenization failed', data.errorCode || 'UNKNOWN');
+                    this.emit('error', error);
                     if (this.tokenizationReject) {
-                        this.tokenizationReject(new TokenizationError(data.errorMessage || 'Tokenization failed', data.errorCode || 'UNKNOWN'));
+                        this.tokenizationReject(error);
                         this.tokenizationPromise = undefined;
                         this.tokenizationResolve = undefined;
                         this.tokenizationReject = undefined;
@@ -503,19 +653,16 @@ export class CardConnectTokenizer extends Tokenizer {
                 }
             }
             if (data.event === 'validation' || data.validationError !== undefined) {
+                this.acceptAutoToken = true;
                 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 });
-                if (data.cardType) {
-                    const cardType = this.normalizeCardType(data.cardType);
-                    if (cardType !== this.currentCardType) {
-                        this.currentCardType = cardType;
-                        this.emit('cardTypeChange', { cardType });
-                    }
+            if ((data.event === 'input' || data.event === 'change') &&
+                data.cardType) {
+                this.acceptAutoToken = true;
+                const cardType = this.normalizeCardType(data.cardType);
+                if (cardType !== this.currentCardType) {
+                    this.currentCardType = cardType;
+                    this.emit('cardTypeChange', { cardType });
                 }
             }
         }
@@ -523,7 +670,6 @@ export class CardConnectTokenizer extends Tokenizer {
         }
     }
     handleValidationMessage(data) {
-        var _a, _b, _c, _d, _e, _f;
         if (data.validationError) {
             const errorLower = data.validationError.toLowerCase();
             if (errorLower.includes('card') || errorLower.includes('number')) {
@@ -541,14 +687,48 @@ export class CardConnectTokenizer extends Tokenizer {
                 errorLower.includes('year')) {
                 this.currentValidationState.expiry = { isValid: false, isEmpty: false };
             }
-            this.emit('error', new TokenizationError(data.validationError));
+            this.currentValidationState.isValid = false;
+            this.emit('validation', this.currentValidationState);
+        }
+        else {
+            this.currentValidationState.cardNumber = {
+                isValid: true,
+                isEmpty: false,
+            };
+            this.currentValidationState.cvv = { isValid: true, isEmpty: false };
+            this.currentValidationState.expiry = { isValid: true, isEmpty: false };
+            this.currentValidationState.isValid = true;
+            this.emit('validation', this.currentValidationState);
         }
-        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 measureCvvLabelMarginLeft(monthWidth, yearWidth, cvvMarginLeft) {
+        var _a;
+        const targetCvvX = monthWidth + 4 + 4 + yearWidth + 12 + cvvMarginLeft;
+        const host = document.createElement('div');
+        host.style.cssText =
+            'position:absolute;visibility:hidden;left:0;top:0;width:9999px;height:0;overflow:hidden;';
+        document.body.appendChild(host);
+        const shadow = host.attachShadow({ mode: 'open' });
+        shadow.innerHTML = [
+            '<input type="text" size="2" style="margin-right:4px">',
+            '<label>/</label>',
+            '<input type="text" size="4" style="margin-left:4px;margin-right:12px">',
+            '<input type="tel" size="5">',
+        ].join('');
+        const inputs = shadow.querySelectorAll('input');
+        const hostX = host.getBoundingClientRect().x;
+        const cvvRect = (_a = inputs[2]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const defaultCvvX = cvvRect ? cvvRect.x - hostX : -1;
+        document.body.removeChild(host);
+        if (defaultCvvX <= 0 || defaultCvvX > 500) {
+            console.warn('[CardConnect] CVV measurement out of range, using fallback margin-left:100px');
+            return 100;
+        }
+        const predictedLabelLeft = defaultCvvX + 8;
+        return Math.round(targetCvvX - predictedLabelLeft);
     }
     static generateIframeUrl(baseUrl, container) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const params = new URLSearchParams({
             invalidinputevent: 'true',
             enhancedresponse: 'true',
@@ -557,25 +737,46 @@ export class CardConnectTokenizer extends Tokenizer {
             formatinput: 'true',
             unique: 'true',
             norsa: 'true',
-            placeholder: 'Card Number *',
-            placeholdercvv: 'CVV',
+            placeholder: ((_a = container.placeholders) === null || _a === void 0 ? void 0 : _a.cardNumber) || 'Card Number *',
+            placeholdercvv: ((_b = container.placeholders) === null || _b === void 0 ? void 0 : _b.cvv) || 'CVV',
             invalidcreditcardevent: 'true',
             invalidexpiry: 'true',
             invalidcvv: 'true',
         });
+        const mergedStyles = mergeStyles(DEFAULT_UNIFIED_STYLES, container.styling);
+        const showLabelsInUrl = ((_c = mergedStyles.label) === null || _c === void 0 ? void 0 : _c.show) && container.layout === 'two-line';
+        if (showLabelsInUrl) {
+            params.set('cardlabel', 'Card Number');
+            params.set('expirylabel', 'Expiration');
+            params.set('cvvlabel', 'CVV');
+        }
+        else {
+            params.set('cardlabel', '');
+            params.set('expirylabel', '');
+            params.set('cvvlabel', '');
+        }
         if (container.layout === 'two-line') {
             params.set('useexpiryfield', 'true');
             params.set('orientation', 'horizontal');
-            params.set('placeholdermonth', 'MM');
-            params.set('placeholderyear', 'YYYY');
+            params.set('placeholdermonth', ((_d = container.placeholders) === null || _d === void 0 ? void 0 : _d.expiryMonth) || 'MM');
+            params.set('placeholderyear', ((_e = container.placeholders) === null || _e === void 0 ? void 0 : _e.expiryYear) || 'YYYY');
         }
         else {
             params.set('orientation', 'horizontal');
-            params.set('placeholdermonth', 'MM');
-            params.set('placeholderyear', 'YYYY');
+            params.set('placeholdermonth', ((_f = container.placeholders) === null || _f === void 0 ? void 0 : _f.expiryMonth) || 'MM');
+            params.set('placeholderyear', ((_g = container.placeholders) === null || _g === void 0 ? void 0 : _g.expiryYear) || 'YYYY');
         }
-        const mergedStyles = mergeStyles(DEFAULT_UNIFIED_STYLES, container.styling);
-        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, container.layout || 'single-line');
+        const isDesktopSafari = typeof navigator !== 'undefined' &&
+            /Safari/.test(navigator.userAgent) &&
+            /Apple Computer/.test(navigator.vendor) &&
+            !/Chrome/.test(navigator.userAgent) &&
+            !/Mobile/.test(navigator.userAgent);
+        const showLabels = ((_h = mergedStyles.label) === null || _h === void 0 ? void 0 : _h.show) && container.layout === 'two-line';
+        let cvvLabelMarginLeft;
+        if (showLabels && typeof document !== 'undefined') {
+            cvvLabelMarginLeft = CardConnectTokenizer.measureCvvLabelMarginLeft(60, 80, 40);
+        }
+        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, (container.layout || 'single-line'), isDesktopSafari, cvvLabelMarginLeft);
         const queryPairs = [];
         params.forEach((value, key) => {
             queryPairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
@@ -590,7 +791,7 @@ export class CardConnectTokenizer extends Tokenizer {
         iframe.style.width = '100%';
         iframe.style.height = styles.input.height;
         iframe.style.border = 'none';
-        iframe.style.overflow = 'hidden';
+        iframe.style.overflow = '';
         iframe.style.display = 'block';
         iframe.style.minWidth = '0';
         if (styles.container) {
@@ -608,18 +809,30 @@ export class CardConnectTokenizer extends Tokenizer {
         iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
         return iframe;
     }
-    static generateCardConnectCss(styles, layout = 'single-line') {
-        var _a, _b, _c, _d;
+    static generateCardConnectCss(styles, layout = 'single-line', isDesktopSafari = false, cvvLabelMarginLeft) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const css = [];
-        if (layout === 'two-line') {
-            css.push('html,form,body{margin:0;padding:0;}');
+        const showLabelsInIframe = ((_a = styles.label) === null || _a === void 0 ? void 0 : _a.show) && layout === 'two-line';
+        if (showLabelsInIframe) {
+            const labelCss = `font-size:${styles.label.fontSize};font-weight:${styles.label.fontWeight};font-family:${styles.label.fontFamily};color:${styles.label.color};margin-bottom:${styles.label.marginBottom}`;
+            css.push(`label{${labelCss};}`);
+            css.push(`label[for="ccexpiryfieldyear"]{display:none;}`);
+            css.push(`br{line-height:0;font-size:0;margin:0;}`);
+            css.push(`input,select{margin-top:0;margin-bottom:0;}`);
+        }
+        else {
             css.push('label{display:none;}');
-            css.push('br{display:none;}');
+        }
+        if (layout === 'two-line') {
+            css.push('html,body{margin:0;padding:0;overflow:hidden;}');
+            css.push('form{margin:0;padding:0;width:100%;box-sizing:border-box;}');
+            if (!showLabelsInIframe) {
+                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';
@@ -643,14 +856,31 @@ export class CardConnectTokenizer extends Tokenizer {
             commonStyles.push('box-sizing:border-box');
             const baseStyles = commonStyles.join(';');
             css.push(`input{${baseStyles};}`);
-            css.push(`select{${baseStyles};}`);
+            if (isDesktopSafari) {
+                css.push(`select{${baseStyles};-webkit-appearance:none;appearance:none;}`);
+            }
+            else {
+                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) {
+            const twoLinePadding = ((_b = styles.twoLine) === null || _b === void 0 ? void 0 : _b.padding) || ((_c = styles.input) === null || _c === void 0 ? void 0 : _c.padding) || '10px';
+            const twoLineFontSize = ((_d = styles.twoLine) === null || _d === void 0 ? void 0 : _d.fontSize) || ((_e = styles.input) === null || _e === void 0 ? void 0 : _e.fontSize) || '14px';
+            const twoLineTextAlign = ((_f = styles.twoLine) === null || _f === void 0 ? void 0 : _f.textAlign) || 'left';
+            if (showLabelsInIframe) {
+                css.push(`input#ccexpiryfieldmonth{width:60px;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                css.push(`input#ccexpiryfieldyear{width:80px;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                css.push(`input#cccvvfield{width:80px;margin-left:40px;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                const labelMargin = cvvLabelMarginLeft !== null && cvvLabelMarginLeft !== void 0 ? cvvLabelMarginLeft : 100;
+                css.push(`label#cccvvlabel{margin-left:${labelMargin}px;}`);
+            }
+            else {
+                css.push(`input#ccexpiryfieldmonth{min-width:4em;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                css.push(`input#ccexpiryfieldyear{min-width:4em;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                css.push(`input#cccvvfield{min-width:4em;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+            }
+            if ((_g = styles.input) === null || _g === void 0 ? void 0 : _g.borderRadius) {
                 css.push(`input{border-radius:${styles.input.borderRadius};}`);
             }
         }
@@ -659,16 +889,16 @@ export class CardConnectTokenizer extends Tokenizer {
             css.push('select#ccexpirymonth{width:16%;margin:0;margin-right:-12px;}');
             css.push('select#ccexpiryyear{width:20%;}');
             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;}');
+            if ((_h = styles.input) === null || _h === void 0 ? void 0 : _h.borderRadius) {
+                css.push(`input#ccnumfield{border-radius:${styles.input.borderRadius} 0 0 ${styles.input.borderRadius};border-right-color:transparent;}`);
+                css.push('select#ccexpirymonth{border-radius:0;border-right-color:transparent;}');
+                css.push('select#ccexpiryyear{border-radius:0;border-right-color:transparent;}');
                 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;}');
+                css.push('input#ccnumfield{border-right-color:transparent;}');
+                css.push('select#ccexpirymonth{border-right-color:transparent;}');
+                css.push('select#ccexpiryyear{border-right-color:transparent;}');
             }
         }
         else {
@@ -677,7 +907,7 @@ export class CardConnectTokenizer extends Tokenizer {
             css.push(`select#ccexpirymonth{width:15%;margin-right:${marginRight};}`);
             css.push(`select#ccexpiryyear{width:20%;margin-right:${marginRight};}`);
             css.push('input#cccvvfield{width:15%;}');
-            if ((_c = styles.input) === null || _c === void 0 ? void 0 : _c.borderRadius) {
+            if ((_j = styles.input) === null || _j === void 0 ? void 0 : _j.borderRadius) {
                 css.push(`input,select{border-radius:${styles.input.borderRadius};}`);
             }
         }
@@ -693,7 +923,7 @@ export class CardConnectTokenizer extends Tokenizer {
             if (focusStyles.length > 0) {
                 css.push(`input:focus{${focusStyles.join(';')};}`);
                 css.push(`select:focus{${focusStyles.join(';')};}`);
-                if (isConnected && ((_d = styles.input) === null || _d === void 0 ? void 0 : _d.border)) {
+                if (isConnected && ((_k = styles.input) === null || _k === void 0 ? void 0 : _k.border)) {
                     css.push(`input#ccnumfield:focus{border:${styles.input.border};${focusStyles.join(';')};}`);
                     css.push(`select#ccexpirymonth:focus{border:${styles.input.border};${focusStyles.join(';')};}`);
                     css.push(`select#ccexpiryyear:focus{border:${styles.input.border};${focusStyles.join(';')};}`);
@@ -708,20 +938,39 @@ export class CardConnectTokenizer extends Tokenizer {
                 errorStyles.push(`background-color:${styles.error.backgroundColor}`);
             if (errorStyles.length > 0) {
                 css.push(`.error{${errorStyles.join(';')};}`);
+                if (isConnected && styles.error.borderColor) {
+                    const ec = styles.error.borderColor;
+                    css.push(`#ccnumfield.error{border-right-color:${ec};}`);
+                    css.push(`#ccexpirymonth.error{border-right-color:${ec};}`);
+                    css.push(`#ccexpiryyear.error{border-right-color:${ec};}`);
+                }
             }
         }
         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());
+    static tokenizeBankAccount(routingNumber, accountNumber, configOrBaseUrl) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const baseUrl = typeof configOrBaseUrl === 'string'
+                ? configOrBaseUrl
+                : configOrBaseUrl.cardConnectBaseUrl;
+            const response = yield fetch(`${baseUrl}/cardsecure/api/v1/ccn/tokenize`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    account: `${routingNumber}/${accountNumber}`,
+                    unique: true,
+                }),
+            });
+            if (!response.ok) {
+                throw new TokenizationError(`Bank account tokenization failed: HTTP ${response.status}`, 'API_ERROR');
+            }
+            const result = yield response.json();
+            if (!result.token) {
+                throw new TokenizationError(result.message || 'Bank account tokenization failed: no token returned', 'API_ERROR');
+            }
+            return result;
+        });
     }
 }