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

package/dist/esm/tokenize/SpreedlyTokenizer.js

@@ -11,23 +11,27 @@ import { Tokenizer } from './Tokenizer';
 import { TokenizationError, } from './types';
 import { SPREEDLY_TOKENIZER_URL } from '../constants';
 import { extractSpreedlyToken, unpackSpreedlyResponse } from '../typeAdapters';
-import { fetchSpreedlySecurityArgs, } from './spreedly-secure';
+import { fetchSpreedlySecurityArgs } from './spreedly-secure';
 import { DEFAULT_UNIFIED_STYLES, mergeStyles, getContainerStylesForLayout, } from './styles';
-import { INIT_TIMEOUT, TOKENIZE_TIMEOUT, FIELD_FLEX, BANK_FIELD_FLEX, CANADIAN_BANK_FIELD_FLEX, PLACEHOLDERS, FIELD_CONSTRAINTS, } from './tokenizer-constants';
-import { createFieldContainer, createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, validateInstitutionNumber, validateTransitNumber, validateCanadianAccountNumber, formatCanadianRoutingNumber, } from './tokenizer-utils';
+import { INIT_TIMEOUT, TOKENIZE_TIMEOUT, FIELD_FLEX, BANK_FIELD_FLEX, CANADIAN_BANK_FIELD_FLEX, PLACEHOLDERS, FIELD_CONSTRAINTS, RESPONSIVE_BREAKPOINT, } from './tokenizer-constants';
+import { createFieldContainer, createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, validateInstitutionNumber, validateTransitNumber, validateCanadianAccountNumber, formatCanadianRoutingNumber, wrapFieldWithLabel, } from './tokenizer-utils';
 const SPREEDLY_SCRIPT_URL = 'https://core.spreedly.com/iframe/iframe-v1.min.js';
 const SPREEDLY_SCRIPT_ID = 'spreedly-iframe-script';
 export class SpreedlyTokenizer extends Tokenizer {
-    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line') {
+    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line', responsiveBreakpoint = RESPONSIVE_BREAKPOINT, customPlaceholders) {
         super();
         this.environmentKey = environmentKey;
         this.containerId = containerId;
         this.layout = layout;
+        this.customPlaceholders = customPlaceholders;
         this.bankCountry = 'US';
         this.enableTestMode = false;
+        this.effectiveLayout = 'single-line';
+        this.responsiveBreakpoint = RESPONSIVE_BREAKPOINT;
         this.mode = mode;
         this.bankCountry = bankCountry;
         this.enableTestMode = enableTestMode;
+        this.responsiveBreakpoint = responsiveBreakpoint;
         if (mode === 'credit_card') {
             const SpreedlyFrame = window.SpreedlyPaymentFrame;
             if (SpreedlyFrame) {
@@ -63,40 +67,33 @@ export class SpreedlyTokenizer 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') {
                 yield SpreedlyTokenizer.ensureSpreedlyLoaded();
             }
-            let environmentKey = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.environment_key;
+            let environmentKey = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.environmentKey;
             if (!environmentKey && config.clientConfig.spreedlyEnvironmentKey) {
                 environmentKey = config.clientConfig.spreedlyEnvironmentKey;
             }
             if (!environmentKey) {
-                environmentKey = '';
+                throw new Error('Spreedly environment key is required. Provide it via gateway.config.environmentKey or client config.');
             }
-            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line');
+            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line', (_b = container.responsiveBreakpoint) !== null && _b !== void 0 ? _b : RESPONSIVE_BREAKPOINT, container.placeholders);
             tokenizer.organizationId = config.organizationId;
             tokenizer.embedId = config.embedId;
             tokenizer.clientConfig = config.clientConfig;
             tokenizer.createInternalElements();
-            let securityArgs;
             if (container.mode === 'credit_card' &&
                 config.clientConfig.enableSpreedlySecureTokenization) {
                 if (!config.organizationId || !config.embedId) {
                     throw new Error('Secure tokenization is enabled but organizationId and embedId are required');
                 }
-                try {
-                    securityArgs = yield fetchSpreedlySecurityArgs(config.clientConfig, config.organizationId, config.embedId);
-                }
-                catch (error) {
-                    throw new Error(`Secure tokenization is enabled but failed to initialize: ${error instanceof Error ? error.message : 'Unknown error'}`);
-                }
             }
-            yield tokenizer.init(securityArgs);
+            yield tokenizer.init();
             return tokenizer;
         });
     }
-    init(securityArgs) {
+    init() {
         return __awaiter(this, void 0, void 0, function* () {
             this.containerEl = document.getElementById(this.containerId);
             if (this.mode === 'bank_account') {
@@ -140,11 +137,12 @@ export class SpreedlyTokenizer extends Tokenizer {
                     reject(new Error('Spreedly initialization timeout'));
                 }, INIT_TIMEOUT);
                 this.spreedly.on('ready', () => {
+                    var _a, _b;
                     clearTimeout(timeout);
-                    this.spreedly.setPlaceholder('number', PLACEHOLDERS.cardNumber);
+                    this.spreedly.setPlaceholder('number', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.cardNumber) || PLACEHOLDERS.cardNumber);
                     this.spreedly.setFieldType('number', 'text');
                     this.spreedly.setNumberFormat('prettyFormat');
-                    this.spreedly.setPlaceholder('cvv', PLACEHOLDERS.cvv);
+                    this.spreedly.setPlaceholder('cvv', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.cvv) || PLACEHOLDERS.cvv);
                     this.spreedly.setFieldType('cvv', 'text');
                     this.applyUnifiedStyles();
                     if (this.enableTestMode &&
@@ -162,23 +160,37 @@ export class SpreedlyTokenizer extends Tokenizer {
                     this.emit('ready');
                     resolve();
                 });
+                this.spreedly.on('paymentMethod', (token, pmData) => {
+                    const paymentToken = {
+                        token,
+                        lastFour: pmData.last_four_digits,
+                        cardType: this.normalizeCardType(pmData.card_type),
+                        paymentMethodType: 'credit_card',
+                        provider: 'spreedly',
+                    };
+                    if (this.tokenizationResolve) {
+                        const resolveTokenization = this.tokenizationResolve;
+                        this.clearTokenizationState();
+                        this.emit('tokenReady', paymentToken);
+                        resolveTokenization(paymentToken);
+                    }
+                });
                 this.spreedly.on('errors', (errors) => {
-                    this.emit('error', new TokenizationError(errors));
+                    const error = new TokenizationError(errors);
+                    this.emit('error', error);
+                    if (this.tokenizationReject) {
+                        const rejectTokenization = this.tokenizationReject;
+                        this.clearTokenizationState();
+                        rejectTokenization(error);
+                    }
                 });
                 this.spreedly.on('fieldEvent', (fieldName, eventType, activeEl, inputProperties) => {
                     this.handleFieldEvent(fieldName, eventType, inputProperties);
                 });
-                const initOptions = {
+                this.spreedly.init(this.environmentKey, {
                     numberEl: this.numberEl,
                     cvvEl: this.cvvEl,
-                };
-                if (securityArgs) {
-                    initOptions.certificateToken = securityArgs.certificate_token;
-                    initOptions.signature = securityArgs.signature;
-                    initOptions.timestamp = securityArgs.timestamp;
-                    initOptions.nonce = securityArgs.nonce;
-                }
-                this.spreedly.init(this.environmentKey, initOptions);
+                });
             });
         });
     }
@@ -196,58 +208,45 @@ export class SpreedlyTokenizer extends Tokenizer {
         });
     }
     tokenizeCardInternal(cardData) {
+        if (this.tokenizationPromise) {
+            return this.tokenizationPromise;
+        }
+        const expiry = this.parseExpiry(this.expiryEl);
+        if (!expiry) {
+            return Promise.reject(new TokenizationError('Expiration date is required', 'VALIDATION_ERROR'));
+        }
+        this.tokenizationPromise = this.executeCardTokenization(cardData, expiry).finally(() => {
+            this.tokenizationPromise = undefined;
+        });
+        return this.tokenizationPromise;
+    }
+    executeCardTokenization(cardData, expiry) {
         return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            let securityFields = {};
+            if ((_a = this.clientConfig) === null || _a === void 0 ? void 0 : _a.enableSpreedlySecureTokenization) {
+                try {
+                    const args = yield fetchSpreedlySecurityArgs(this.clientConfig, this.organizationId, this.embedId);
+                    securityFields = {
+                        nonce: args.nonce,
+                        timestamp: args.timestamp,
+                        certificateToken: args.certificate_token,
+                        signature: args.signature,
+                    };
+                }
+                catch (error) {
+                    throw new TokenizationError(`Secure tokenization failed: ${error instanceof Error ? error.message : 'Unknown error'}`, 'SECURE_TOKENIZATION_ERROR');
+                }
+            }
             return new Promise((resolve, reject) => {
                 var _a, _b, _c, _d, _e, _f;
-                const timeout = setTimeout(() => {
-                    if (this.spreedly && this.spreedly.removeHandlers) {
-                        this.spreedly.removeHandlers();
-                    }
+                this.tokenizationResolve = resolve;
+                this.tokenizationReject = reject;
+                this.tokenizationTimeout = setTimeout(() => {
+                    this.clearTokenizationState();
                     reject(new TokenizationError('Tokenization timeout', 'TIMEOUT'));
                 }, TOKENIZE_TIMEOUT);
-                const cleanup = () => {
-                    clearTimeout(timeout);
-                    if (this.spreedly && this.spreedly.removeHandlers) {
-                        this.spreedly.removeHandlers();
-                    }
-                };
-                this.spreedly.on('paymentMethod', (token, pmData) => {
-                    cleanup();
-                    const paymentToken = {
-                        token,
-                        lastFour: pmData.last_four_digits,
-                        cardType: this.normalizeCardType(pmData.card_type),
-                        provider: 'spreedly',
-                    };
-                    this.emit('tokenReady', paymentToken);
-                    resolve(paymentToken);
-                });
-                this.spreedly.on('errors', (errors) => {
-                    cleanup();
-                    reject(new TokenizationError(errors));
-                });
-                const expiry = this.parseExpiry(this.expiryEl);
-                if (!expiry) {
-                    cleanup();
-                    reject(new TokenizationError('Expiration date is required', 'VALIDATION_ERROR'));
-                    return;
-                }
-                const expiryMonth = expiry.month;
-                const expiryYear = expiry.year;
-                this.spreedly.tokenizeCreditCard({
-                    first_name: cardData.firstName,
-                    last_name: cardData.lastName,
-                    month: expiryMonth,
-                    year: expiryYear,
-                    email: cardData.email,
-                    phone_number: cardData.phone,
-                    address1: (_a = cardData.address) === null || _a === void 0 ? void 0 : _a.address1,
-                    address2: (_b = cardData.address) === null || _b === void 0 ? void 0 : _b.address2,
-                    city: (_c = cardData.address) === null || _c === void 0 ? void 0 : _c.city,
-                    state: (_d = cardData.address) === null || _d === void 0 ? void 0 : _d.state,
-                    zip: (_e = cardData.address) === null || _e === void 0 ? void 0 : _e.zip,
-                    country: (_f = cardData.address) === null || _f === void 0 ? void 0 : _f.country,
-                });
+                this.spreedly.tokenizeCreditCard(Object.assign({ first_name: cardData.firstName, last_name: cardData.lastName, month: expiry.month, year: expiry.year, email: cardData.email, phone_number: cardData.phone, address1: (_a = cardData.address) === null || _a === void 0 ? void 0 : _a.address1, address2: (_b = cardData.address) === null || _b === void 0 ? void 0 : _b.address2, city: (_c = cardData.address) === null || _c === void 0 ? void 0 : _c.city, state: (_d = cardData.address) === null || _d === void 0 ? void 0 : _d.state, zip: (_e = cardData.address) === null || _e === void 0 ? void 0 : _e.zip, country: (_f = cardData.address) === null || _f === void 0 ? void 0 : _f.country }, securityFields));
             });
         });
     }
@@ -259,7 +258,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 minWidth: CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
-            container.appendChild(this.accountTypeEl);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
             this.institutionNumberEl = createInputElement(`${this.containerId}-institution`, 'text', 'Inst *', 3);
             Object.assign(this.institutionNumberEl.style, {
                 flex: '1',
@@ -276,7 +275,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.institutionNumberEl);
+            this.appendField(container, this.institutionNumberEl, 'Institution');
             this.transitNumberEl = createInputElement(`${this.containerId}-transit`, 'text', 'Transit *', 5);
             Object.assign(this.transitNumberEl.style, {
                 flex: '2',
@@ -293,7 +292,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.transitNumberEl);
+            this.appendField(container, this.transitNumberEl, 'Transit');
             this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *');
             Object.assign(this.accountNumberEl.style, {
                 flex: '1',
@@ -311,7 +310,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
         }
         else {
             this.institutionNumberEl = createInputElement(`${this.containerId}-institution`, 'text', 'Inst *', 3);
@@ -330,7 +329,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.institutionNumberEl);
+            this.appendField(container, this.institutionNumberEl, 'Institution');
             this.transitNumberEl = createInputElement(`${this.containerId}-transit`, 'text', 'Transit *', 5);
             Object.assign(this.transitNumberEl.style, {
                 flex: CANADIAN_BANK_FIELD_FLEX.transitNumber.flex,
@@ -347,7 +346,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.transitNumberEl);
+            this.appendField(container, this.transitNumberEl, 'Transit');
             this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *');
             Object.assign(this.accountNumberEl.style, {
                 flex: CANADIAN_BANK_FIELD_FLEX.accountNumber.flex,
@@ -364,14 +363,14 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
             this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
                 flex: CANADIAN_BANK_FIELD_FLEX.accountType.flex,
                 minWidth: CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
-            container.appendChild(this.accountTypeEl);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
         }
     }
     tokenizeBankAccountInternal(bankData) {
@@ -439,18 +438,23 @@ export class SpreedlyTokenizer extends Tokenizer {
                     accountType: accountType,
                     accountHolderType: accountHolderType,
                 },
-            }, this.clientConfig);
-            return {
+            }, this.clientConfig, this.environmentKey);
+            const paymentToken = {
                 token: result,
                 lastFour: accountNumber.slice(-4),
                 accountType: accountType,
                 paymentMethodType: 'bank_account',
                 provider: 'spreedly',
             };
+            this.emit('tokenReady', paymentToken);
+            return paymentToken;
         });
     }
     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();
             }
@@ -585,7 +589,7 @@ export class SpreedlyTokenizer extends Tokenizer {
         const isConnected = ((_a = this.mergedStyles.container) === null || _a === void 0 ? void 0 : _a.gap) === '0';
         if (this.mergedStyles.input) {
             if (isConnected) {
-                const numberStyles = Object.assign(Object.assign({}, this.mergedStyles.input), { borderRight: 'none', borderRadius: this.mergedStyles.input.borderRadius
+                const numberStyles = Object.assign(Object.assign({}, this.mergedStyles.input), { borderRight: '1px solid transparent', borderRadius: this.mergedStyles.input.borderRadius
                         ? `${this.mergedStyles.input.borderRadius} 0 0 ${this.mergedStyles.input.borderRadius}`
                         : '0' });
                 const numberCss = this.stylesToCssString(numberStyles);
@@ -608,7 +612,11 @@ export class SpreedlyTokenizer extends Tokenizer {
             this.spreedly.setStyle('cvv:focus', focusCss);
         }
         if (this.mergedStyles.error) {
-            const errorCss = this.stylesToCssString(this.mergedStyles.error);
+            const errorStyles = Object.assign({}, this.mergedStyles.error);
+            if (errorStyles.borderColor) {
+                errorStyles.borderRightColor = errorStyles.borderColor;
+            }
+            const errorCss = this.stylesToCssString(errorStyles);
             this.spreedly.setStyle('number.invalid', errorCss);
             this.spreedly.setStyle('cvv.invalid', errorCss);
         }
@@ -638,13 +646,33 @@ export class SpreedlyTokenizer extends Tokenizer {
                 this.accountNumberEl.value = '';
             if (this.accountTypeEl)
                 this.accountTypeEl.selectedIndex = 0;
+            this.currentValidationState = {
+                isValid: false,
+                routingNumber: { isValid: false, isEmpty: true },
+                accountNumber: { isValid: false, isEmpty: true },
+            };
         }
         else {
             this.spreedly.reload();
             if (this.expiryEl) {
                 this.expiryEl.value = '';
             }
+            this.currentValidationState = {
+                isValid: false,
+                cardNumber: { isValid: false, isEmpty: true },
+                cvv: { isValid: false, isEmpty: true },
+                expiry: { isValid: false, isEmpty: true },
+            };
         }
+        if (this.tokenizationReject) {
+            const reject = this.tokenizationReject;
+            this.clearTokenizationState();
+            reject(new TokenizationError('Tokenizer cleared', 'CLEARED'));
+        }
+        else {
+            this.clearTokenizationState();
+        }
+        this.emit('validation', this.currentValidationState);
     }
     focus(field) {
         if (this.mode === 'bank_account') {
@@ -680,12 +708,84 @@ export class SpreedlyTokenizer extends Tokenizer {
             element === null || element === void 0 ? void 0 : element.focus();
         }
     }
+    determineLayout(width) {
+        return width < this.responsiveBreakpoint ? 'two-line' : 'single-line';
+    }
+    setupResizeObserver() {
+        if (this.layout !== 'responsive')
+            return;
+        const container = document.getElementById(this.containerId);
+        if (!container)
+            return;
+        let debounceTimer;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                const newWidth = entries[0].contentRect.width;
+                const newLayout = this.determineLayout(newWidth);
+                if (newLayout !== this.effectiveLayout) {
+                    this.applyLayoutStyles(newLayout);
+                }
+            }, 100);
+        });
+        this.resizeObserver.observe(container);
+    }
+    applyLayoutStyles(newLayout) {
+        this.effectiveLayout = newLayout;
+        const container = document.getElementById(this.containerId);
+        if (!container)
+            return;
+        if (newLayout === 'two-line') {
+            container.style.flexWrap = 'wrap';
+            if (this.cardNumberDiv) {
+                this.cardNumberDiv.style.flex = '1';
+                this.cardNumberDiv.style.flexBasis = '100%';
+            }
+            if (this.expiryEl) {
+                this.expiryEl.style.flex = '1';
+                this.expiryEl.style.flexBasis = 'auto';
+            }
+            if (this.cvvDiv) {
+                this.cvvDiv.style.flex = '1';
+                this.cvvDiv.style.flexBasis = 'auto';
+            }
+        }
+        else {
+            container.style.flexWrap = 'nowrap';
+            if (this.cardNumberDiv) {
+                this.cardNumberDiv.style.flex = FIELD_FLEX.cardNumber.flex;
+            }
+            if (this.expiryEl) {
+                this.expiryEl.style.flex = FIELD_FLEX.expiry.flex;
+            }
+            if (this.cvvDiv) {
+                this.cvvDiv.style.flex = FIELD_FLEX.cvv.flex;
+            }
+        }
+    }
+    clearTokenizationState() {
+        if (this.tokenizationTimeout) {
+            clearTimeout(this.tokenizationTimeout);
+            this.tokenizationTimeout = undefined;
+        }
+        this.tokenizationResolve = undefined;
+        this.tokenizationReject = undefined;
+    }
     destroy() {
+        var _a;
+        this.markDestroyed();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.tokenizationReject) {
+            const reject = this.tokenizationReject;
+            this.clearTokenizationState();
+            reject(new TokenizationError('Tokenizer destroyed', 'DESTROYED'));
+        }
         if (this.spreedly && this.spreedly.removeHandlers) {
             this.spreedly.removeHandlers();
         }
         this.eventHandlers.clear();
-        if (this.expiryEl) {
+        if (this.containerEl) {
+            this.containerEl.innerHTML = '';
         }
     }
     hasToken() {
@@ -732,15 +832,6 @@ export class SpreedlyTokenizer extends Tokenizer {
             }
             this.updateOverallValidation();
         }
-        if (eventType === 'focus') {
-            this.emit('focus', { field: fieldName });
-        }
-        else if (eventType === 'blur') {
-            this.emit('blur', { field: fieldName });
-        }
-        else if (eventType === 'input') {
-            this.emit('change', { field: fieldName });
-        }
     }
     createInternalElements() {
         const container = document.getElementById(this.containerId);
@@ -756,13 +847,25 @@ export class SpreedlyTokenizer extends Tokenizer {
             this.createCreditCardFields(container);
         }
     }
+    appendField(container, field, labelText) {
+        container.appendChild(wrapFieldWithLabel(field, labelText, this.mergedStyles));
+    }
     createCreditCardFields(container) {
-        if (this.layout === 'two-line') {
+        var _a, _b;
+        if (this.layout === 'responsive') {
+            this.effectiveLayout = this.determineLayout(container.offsetWidth);
+        }
+        else {
+            this.effectiveLayout =
+                this.layout === 'two-line' ? 'two-line' : 'single-line';
+        }
+        if (this.effectiveLayout === 'two-line' && this.layout !== 'responsive') {
             const cardNumberDiv = createFieldContainer(this.numberEl, '1', FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
             cardNumberDiv.style.flexBasis = '100%';
-            container.appendChild(cardNumberDiv);
-            this.expiryEl = createInputElement(this.expiryId, 'text', PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
+            this.cardNumberDiv = cardNumberDiv;
+            this.appendField(container, cardNumberDiv, 'Card Number');
+            this.expiryEl = createInputElement(this.expiryId, 'text', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.expiry) || PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
                 flex: '1',
                 minWidth: FIELD_FLEX.expiry.minWidth,
@@ -778,16 +881,22 @@ export class SpreedlyTokenizer extends Tokenizer {
                 };
                 this.updateOverallValidation();
             });
-            container.appendChild(this.expiryEl);
+            this.expiryEl.addEventListener('blur', () => {
+                this.validateExpiry();
+                this.updateOverallValidation();
+            });
+            this.appendField(container, this.expiryEl, 'Expiration');
             const cvvDiv = createFieldContainer(this.cvvEl, '1', FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
-            container.appendChild(cvvDiv);
+            this.cvvDiv = cvvDiv;
+            this.appendField(container, cvvDiv, 'CVV');
         }
         else {
             const cardNumberDiv = createFieldContainer(this.numberEl, FIELD_FLEX.cardNumber.flex, FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
-            container.appendChild(cardNumberDiv);
-            this.expiryEl = createInputElement(this.expiryId, 'text', PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
+            this.cardNumberDiv = cardNumberDiv;
+            this.appendField(container, cardNumberDiv, 'Card Number');
+            this.expiryEl = createInputElement(this.expiryId, 'text', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.expiry) || PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
                 flex: FIELD_FLEX.expiry.flex,
                 minWidth: FIELD_FLEX.expiry.minWidth,
@@ -803,10 +912,19 @@ export class SpreedlyTokenizer extends Tokenizer {
                 };
                 this.updateOverallValidation();
             });
-            container.appendChild(this.expiryEl);
+            this.expiryEl.addEventListener('blur', () => {
+                this.validateExpiry();
+                this.updateOverallValidation();
+            });
+            this.appendField(container, this.expiryEl, 'Expiration');
             const cvvDiv = createFieldContainer(this.cvvEl, FIELD_FLEX.cvv.flex, FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
-            container.appendChild(cvvDiv);
+            this.cvvDiv = cvvDiv;
+            this.appendField(container, cvvDiv, 'CVV');
+            if (this.layout === 'responsive') {
+                this.applyLayoutStyles(this.effectiveLayout);
+                this.setupResizeObserver();
+            }
         }
     }
     createBankAccountFields(container) {
@@ -818,6 +936,7 @@ export class SpreedlyTokenizer extends Tokenizer {
         }
     }
     createUSBankAccountFields(container) {
+        var _a, _b, _c, _d;
         if (this.layout === 'two-line') {
             this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
@@ -825,8 +944,8 @@ export class SpreedlyTokenizer extends Tokenizer {
                 minWidth: BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
-            container.appendChild(this.accountTypeEl);
-            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
+            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,
@@ -842,8 +961,8 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.routingNumberEl);
-            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            this.appendField(container, this.routingNumberEl, 'Routing Number');
+            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%',
@@ -860,10 +979,10 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
         }
         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,
@@ -879,8 +998,8 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.routingNumberEl);
-            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            this.appendField(container, this.routingNumberEl, 'Routing Number');
+            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,
@@ -896,14 +1015,14 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
             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, this.mergedStyles, 'right');
-            container.appendChild(this.accountTypeEl);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
         }
     }
     updateBankAccountValidation() {
@@ -960,30 +1079,42 @@ export class SpreedlyTokenizer extends Tokenizer {
         if (!this.expiryEl)
             return;
         const expiry = this.parseExpiry(this.expiryEl);
+        const isEmpty = !this.expiryEl.value;
+        let isValid = false;
         if (!expiry) {
-            this.applyErrorStyles(this.expiryEl);
-            return;
-        }
-        const month = parseInt(expiry.month, 10);
-        const year = parseInt(expiry.year, 10);
-        if (month < 1 || month > 12) {
-            this.applyErrorStyles(this.expiryEl);
-            return;
+            if (!isEmpty)
+                this.applyErrorStyles(this.expiryEl);
         }
-        const now = new Date();
-        const expiryDate = new Date(year, month - 1);
-        if (expiryDate < now) {
-            this.applyErrorStyles(this.expiryEl);
-            return;
+        else {
+            const month = parseInt(expiry.month, 10);
+            const year = parseInt(expiry.year, 10);
+            if (month < 1 || month > 12) {
+                this.applyErrorStyles(this.expiryEl);
+            }
+            else {
+                const now = new Date();
+                const expiryEndDate = new Date(year, month);
+                if (expiryEndDate <= now) {
+                    this.applyErrorStyles(this.expiryEl);
+                }
+                else {
+                    isValid = true;
+                    const expiryPosition = this.effectiveLayout === 'two-line' ? 'left' : 'middle';
+                    this.applyInputStyles(this.expiryEl, this.mergedStyles, expiryPosition);
+                }
+            }
         }
-        this.applyInputStyles(this.expiryEl, this.mergedStyles, 'middle');
+        this.currentValidationState.expiry = { isValid, isEmpty };
     }
     applyErrorStyles(element) {
-        if (this.mergedStyles.error) {
-            Object.assign(element.style, this.mergedStyles.error);
+        var _a, _b, _c;
+        const errorColor = ((_a = this.mergedStyles.error) === null || _a === void 0 ? void 0 : _a.borderColor) || '#dc3545';
+        element.style.border = `1px solid ${errorColor}`;
+        if ((_b = this.mergedStyles.error) === null || _b === void 0 ? void 0 : _b.backgroundColor) {
+            element.style.backgroundColor = this.mergedStyles.error.backgroundColor;
         }
-        else {
-            element.style.borderColor = '#dc3545';
+        if ((_c = this.mergedStyles.error) === null || _c === void 0 ? void 0 : _c.color) {
+            element.style.color = this.mergedStyles.error.color;
         }
     }
     static ensureSpreedlyLoaded() {
@@ -1030,13 +1161,14 @@ export class SpreedlyTokenizer extends Tokenizer {
             throw new Error(`Timeout waiting for global: ${globalName}`);
         });
     }
-    static tokenizeBankAccount(data, config) {
-        if (config.spreedlyEnvironmentKey === undefined) {
+    static tokenizeBankAccount(data, config, environmentKeyOverride) {
+        const environmentKey = environmentKeyOverride || config.spreedlyEnvironmentKey;
+        if (!environmentKey) {
             return Promise.reject(new Error('Spreedly is not configured.'));
         }
         return fetch(SPREEDLY_TOKENIZER_URL +
             '?' +
-            new URLSearchParams({ environment_key: config.spreedlyEnvironmentKey }), {
+            new URLSearchParams({ environment_key: environmentKey }), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',