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

package/dist/tokenize/SpreedlyTokenizer.js

@@ -21,16 +21,26 @@ const tokenizer_utils_1 = require("./tokenizer-utils");
 const SPREEDLY_SCRIPT_URL = 'https://core.spreedly.com/iframe/iframe-v1.min.js';
 const SPREEDLY_SCRIPT_ID = 'spreedly-iframe-script';
 class SpreedlyTokenizer extends Tokenizer_1.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 = tokenizer_constants_1.RESPONSIVE_BREAKPOINT, customPlaceholders) {
         super();
         this.environmentKey = environmentKey;
         this.containerId = containerId;
         this.layout = layout;
+        this.customPlaceholders = customPlaceholders;
         this.bankCountry = 'US';
         this.enableTestMode = false;
+        this.numberBaseCss = '';
+        this.cvvBaseCss = '';
+        this.numberErrorCss = '';
+        this.cvvErrorCss = '';
+        this.numberHasError = false;
+        this.cvvHasError = false;
+        this.effectiveLayout = 'single-line';
+        this.responsiveBreakpoint = tokenizer_constants_1.RESPONSIVE_BREAKPOINT;
         this.mode = mode;
         this.bankCountry = bankCountry;
         this.enableTestMode = enableTestMode;
+        this.responsiveBreakpoint = responsiveBreakpoint;
         if (mode === 'credit_card') {
             const SpreedlyFrame = window.SpreedlyPaymentFrame;
             if (SpreedlyFrame) {
@@ -66,40 +76,33 @@ class SpreedlyTokenizer extends Tokenizer_1.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 : tokenizer_constants_1.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 (0, spreedly_secure_1.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') {
@@ -143,11 +146,12 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                     reject(new Error('Spreedly initialization timeout'));
                 }, tokenizer_constants_1.INIT_TIMEOUT);
                 this.spreedly.on('ready', () => {
+                    var _a, _b;
                     clearTimeout(timeout);
-                    this.spreedly.setPlaceholder('number', tokenizer_constants_1.PLACEHOLDERS.cardNumber);
+                    this.spreedly.setPlaceholder('number', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.cardNumber) || tokenizer_constants_1.PLACEHOLDERS.cardNumber);
                     this.spreedly.setFieldType('number', 'text');
                     this.spreedly.setNumberFormat('prettyFormat');
-                    this.spreedly.setPlaceholder('cvv', tokenizer_constants_1.PLACEHOLDERS.cvv);
+                    this.spreedly.setPlaceholder('cvv', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.cvv) || tokenizer_constants_1.PLACEHOLDERS.cvv);
                     this.spreedly.setFieldType('cvv', 'text');
                     this.applyUnifiedStyles();
                     if (this.enableTestMode &&
@@ -165,23 +169,37 @@ class SpreedlyTokenizer extends Tokenizer_1.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 types_1.TokenizationError(errors));
+                    const error = new types_1.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);
+                });
             });
         });
     }
@@ -199,58 +217,45 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         });
     }
     tokenizeCardInternal(cardData) {
+        if (this.tokenizationPromise) {
+            return this.tokenizationPromise;
+        }
+        const expiry = this.parseExpiry(this.expiryEl);
+        if (!expiry) {
+            return Promise.reject(new types_1.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 (0, spreedly_secure_1.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 types_1.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 types_1.TokenizationError('Tokenization timeout', 'TIMEOUT'));
                 }, tokenizer_constants_1.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 types_1.TokenizationError(errors));
-                });
-                const expiry = this.parseExpiry(this.expiryEl);
-                if (!expiry) {
-                    cleanup();
-                    reject(new types_1.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));
             });
         });
     }
@@ -262,7 +267,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 minWidth: tokenizer_constants_1.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 = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
             Object.assign(this.institutionNumberEl.style, {
                 flex: '1',
@@ -279,7 +284,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.institutionNumberEl);
+            this.appendField(container, this.institutionNumberEl, 'Institution');
             this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
             Object.assign(this.transitNumberEl.style, {
                 flex: '2',
@@ -296,7 +301,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.transitNumberEl);
+            this.appendField(container, this.transitNumberEl, 'Transit');
             this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
             Object.assign(this.accountNumberEl.style, {
                 flex: '1',
@@ -314,7 +319,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
         }
         else {
             this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
@@ -333,7 +338,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.institutionNumberEl);
+            this.appendField(container, this.institutionNumberEl, 'Institution');
             this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
             Object.assign(this.transitNumberEl.style, {
                 flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.flex,
@@ -350,7 +355,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.transitNumberEl);
+            this.appendField(container, this.transitNumberEl, 'Transit');
             this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
             Object.assign(this.accountNumberEl.style, {
                 flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.flex,
@@ -367,14 +372,14 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
             this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
                 flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.flex,
                 minWidth: tokenizer_constants_1.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) {
@@ -442,18 +447,23 @@ class SpreedlyTokenizer extends Tokenizer_1.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();
             }
@@ -588,19 +598,21 @@ class SpreedlyTokenizer extends Tokenizer_1.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);
-                this.spreedly.setStyle('number', numberCss);
+                this.numberBaseCss = this.stylesToCssString(numberStyles);
+                this.spreedly.setStyle('number', this.numberBaseCss);
                 const cvvStyles = Object.assign(Object.assign({}, this.mergedStyles.input), { borderRadius: this.mergedStyles.input.borderRadius
                         ? `0 ${this.mergedStyles.input.borderRadius} ${this.mergedStyles.input.borderRadius} 0`
                         : '0' });
-                const cvvCss = this.stylesToCssString(cvvStyles);
-                this.spreedly.setStyle('cvv', cvvCss);
+                this.cvvBaseCss = this.stylesToCssString(cvvStyles);
+                this.spreedly.setStyle('cvv', this.cvvBaseCss);
             }
             else {
                 const baseCss = this.stylesToCssString(this.mergedStyles.input);
+                this.numberBaseCss = baseCss;
+                this.cvvBaseCss = baseCss;
                 this.spreedly.setStyle('number', baseCss);
                 this.spreedly.setStyle('cvv', baseCss);
             }
@@ -611,9 +623,20 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             this.spreedly.setStyle('cvv:focus', focusCss);
         }
         if (this.mergedStyles.error) {
-            const errorCss = this.stylesToCssString(this.mergedStyles.error);
-            this.spreedly.setStyle('number.invalid', errorCss);
-            this.spreedly.setStyle('cvv.invalid', errorCss);
+            const errorOverrides = {};
+            if (this.mergedStyles.error.borderColor) {
+                errorOverrides.border = `1px solid ${this.mergedStyles.error.borderColor}`;
+            }
+            if (this.mergedStyles.error.backgroundColor) {
+                errorOverrides.backgroundColor =
+                    this.mergedStyles.error.backgroundColor;
+            }
+            if (this.mergedStyles.error.color) {
+                errorOverrides.color = this.mergedStyles.error.color;
+            }
+            const errorCss = this.stylesToCssString(errorOverrides);
+            this.numberErrorCss = this.numberBaseCss + '; ' + errorCss;
+            this.cvvErrorCss = this.cvvBaseCss + '; ' + errorCss;
         }
     }
     stylesToCssString(styles) {
@@ -641,13 +664,41 @@ class SpreedlyTokenizer extends Tokenizer_1.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 = '';
             }
+            if (this.numberHasError && this.numberBaseCss) {
+                this.spreedly.setStyle('number', this.numberBaseCss);
+                this.numberHasError = false;
+            }
+            if (this.cvvHasError && this.cvvBaseCss) {
+                this.spreedly.setStyle('cvv', this.cvvBaseCss);
+                this.cvvHasError = false;
+            }
+            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 types_1.TokenizationError('Tokenizer cleared', 'CLEARED'));
         }
+        else {
+            this.clearTokenizationState();
+        }
+        this.emit('validation', this.currentValidationState);
     }
     focus(field) {
         if (this.mode === 'bank_account') {
@@ -683,12 +734,84 @@ class SpreedlyTokenizer extends Tokenizer_1.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 = tokenizer_constants_1.FIELD_FLEX.cardNumber.flex;
+            }
+            if (this.expiryEl) {
+                this.expiryEl.style.flex = tokenizer_constants_1.FIELD_FLEX.expiry.flex;
+            }
+            if (this.cvvDiv) {
+                this.cvvDiv.style.flex = tokenizer_constants_1.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 types_1.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() {
@@ -716,10 +839,9 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
     handleFieldEvent(fieldName, eventType, inputProperties) {
         if (eventType === 'input') {
             if (fieldName === 'number') {
-                this.currentValidationState.cardNumber = {
-                    isValid: inputProperties.validNumber || false,
-                    isEmpty: inputProperties.numberLength === 0,
-                };
+                const isEmpty = inputProperties.numberLength === 0;
+                const isValid = inputProperties.validNumber || false;
+                this.currentValidationState.cardNumber = { isValid, isEmpty };
                 if (inputProperties.cardType &&
                     inputProperties.cardType !== 'unknown') {
                     this.emit('cardTypeChange', {
@@ -728,21 +850,37 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
             }
             else if (fieldName === 'cvv') {
-                this.currentValidationState.cvv = {
-                    isValid: inputProperties.validCvv || false,
-                    isEmpty: inputProperties.cvvLength === 0,
-                };
+                const isEmpty = inputProperties.cvvLength === 0;
+                const isValid = inputProperties.validCvv || false;
+                this.currentValidationState.cvv = { isValid, isEmpty };
             }
             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 });
+        if (eventType === 'blur') {
+            if (fieldName === 'number') {
+                const state = this.currentValidationState.cardNumber;
+                const shouldShowError = state
+                    ? !state.isEmpty && !state.isValid
+                    : false;
+                if (shouldShowError !== this.numberHasError) {
+                    this.numberHasError = shouldShowError;
+                    if (this.numberErrorCss) {
+                        this.spreedly.setStyle('number', shouldShowError ? this.numberErrorCss : this.numberBaseCss);
+                    }
+                }
+            }
+            else if (fieldName === 'cvv') {
+                const state = this.currentValidationState.cvv;
+                const shouldShowError = state
+                    ? !state.isEmpty && !state.isValid
+                    : false;
+                if (shouldShowError !== this.cvvHasError) {
+                    this.cvvHasError = shouldShowError;
+                    if (this.cvvErrorCss) {
+                        this.spreedly.setStyle('cvv', shouldShowError ? this.cvvErrorCss : this.cvvBaseCss);
+                    }
+                }
+            }
         }
     }
     createInternalElements() {
@@ -759,13 +897,25 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             this.createCreditCardFields(container);
         }
     }
+    appendField(container, field, labelText) {
+        container.appendChild((0, tokenizer_utils_1.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 = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, '1', tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
             cardNumberDiv.style.flexBasis = '100%';
-            container.appendChild(cardNumberDiv);
-            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
+            this.cardNumberDiv = cardNumberDiv;
+            this.appendField(container, cardNumberDiv, 'Card Number');
+            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.expiry) || tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
                 flex: '1',
                 minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
@@ -781,16 +931,22 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 };
                 this.updateOverallValidation();
             });
-            container.appendChild(this.expiryEl);
+            this.expiryEl.addEventListener('blur', () => {
+                this.validateExpiry();
+                this.updateOverallValidation();
+            });
+            this.appendField(container, this.expiryEl, 'Expiration');
             const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, '1', tokenizer_constants_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 = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, tokenizer_constants_1.FIELD_FLEX.cardNumber.flex, tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
-            container.appendChild(cardNumberDiv);
-            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
+            this.cardNumberDiv = cardNumberDiv;
+            this.appendField(container, cardNumberDiv, 'Card Number');
+            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.expiry) || tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
                 flex: tokenizer_constants_1.FIELD_FLEX.expiry.flex,
                 minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
@@ -806,10 +962,19 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 };
                 this.updateOverallValidation();
             });
-            container.appendChild(this.expiryEl);
+            this.expiryEl.addEventListener('blur', () => {
+                this.validateExpiry();
+                this.updateOverallValidation();
+            });
+            this.appendField(container, this.expiryEl, 'Expiration');
             const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, tokenizer_constants_1.FIELD_FLEX.cvv.flex, tokenizer_constants_1.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) {
@@ -821,6 +986,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         }
     }
     createUSBankAccountFields(container) {
+        var _a, _b, _c, _d;
         if (this.layout === 'two-line') {
             this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
@@ -828,8 +994,8 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
-            container.appendChild(this.accountTypeEl);
-            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
+            this.routingNumberEl = (0, tokenizer_utils_1.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: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
@@ -845,8 +1011,8 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.routingNumberEl);
-            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            this.appendField(container, this.routingNumberEl, 'Routing Number');
+            this.accountNumberEl = (0, tokenizer_utils_1.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%',
@@ -863,10 +1029,10 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
         }
         else {
-            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', ((_c = this.customPlaceholders) === null || _c === void 0 ? void 0 : _c.routingNumber) || '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,
@@ -882,8 +1048,8 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.routingNumberEl);
-            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            this.appendField(container, this.routingNumberEl, 'Routing Number');
+            this.accountNumberEl = (0, tokenizer_utils_1.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: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.flex,
                 minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
@@ -899,14 +1065,14 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
             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, this.mergedStyles, 'right');
-            container.appendChild(this.accountTypeEl);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
         }
     }
     updateBankAccountValidation() {
@@ -963,30 +1129,42 @@ class SpreedlyTokenizer extends Tokenizer_1.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() {
@@ -1033,13 +1211,14 @@ class SpreedlyTokenizer extends Tokenizer_1.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(constants_1.SPREEDLY_TOKENIZER_URL +
             '?' +
-            new URLSearchParams({ environment_key: config.spreedlyEnvironmentKey }), {
+            new URLSearchParams({ environment_key: environmentKey }), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',