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

package/dist/esm/tokenize/SpreedlyTokenizer.js

@@ -0,0 +1,1140 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Tokenizer } from './Tokenizer';
+import { TokenizationError, } from './types';
+import { SPREEDLY_TOKENIZER_URL } from '../constants';
+import { extractSpreedlyToken, unpackSpreedlyResponse } from '../typeAdapters';
+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';
+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') {
+        super();
+        this.environmentKey = environmentKey;
+        this.containerId = containerId;
+        this.layout = layout;
+        this.isReady = false;
+        this.bankCountry = 'US';
+        this.enableTestMode = false;
+        this.mode = mode;
+        this.bankCountry = bankCountry;
+        this.enableTestMode = enableTestMode;
+        if (mode === 'credit_card') {
+            const SpreedlyFrame = window.SpreedlyPaymentFrame;
+            if (SpreedlyFrame) {
+                this.spreedly = new SpreedlyFrame();
+            }
+            else {
+                this.spreedly = window.Spreedly;
+            }
+        }
+        else {
+            this.spreedly = window.Spreedly;
+        }
+        if (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.mergedStyles = getContainerStylesForLayout(mergeStyles(DEFAULT_UNIFIED_STYLES, styles), this.layout);
+        const fieldIds = this.generateFieldIds(containerId);
+        this.numberEl = fieldIds.numberId;
+        this.cvvEl = fieldIds.cvvId;
+        this.expiryId = fieldIds.expiryId;
+    }
+    static create(gateway, container, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (container.mode !== 'bank_account') {
+                yield SpreedlyTokenizer.ensureSpreedlyLoaded();
+            }
+            let environmentKey = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.environment_key;
+            if (!environmentKey && config.clientConfig.spreedlyEnvironmentKey) {
+                environmentKey = config.clientConfig.spreedlyEnvironmentKey;
+            }
+            if (!environmentKey) {
+                environmentKey = '';
+            }
+            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line');
+            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);
+            return tokenizer;
+        });
+    }
+    init(securityArgs) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.containerEl = document.getElementById(this.containerId);
+            if (this.mode === 'bank_account') {
+                this.isReady = true;
+                if (this.enableTestMode) {
+                    setTimeout(() => {
+                        if (this.bankCountry === 'CA') {
+                            if (this.institutionNumberEl) {
+                                this.institutionNumberEl.value = '004';
+                                this.institutionNumberEl.dispatchEvent(new Event('input', { bubbles: true }));
+                            }
+                            if (this.transitNumberEl) {
+                                this.transitNumberEl.value = '12345';
+                                this.transitNumberEl.dispatchEvent(new Event('input', { bubbles: true }));
+                            }
+                            if (this.accountNumberEl) {
+                                this.accountNumberEl.value = '1234567';
+                                this.accountNumberEl.dispatchEvent(new Event('input', { bubbles: true }));
+                            }
+                        }
+                        else {
+                            if (this.routingNumberEl) {
+                                this.routingNumberEl.value = '021000021';
+                                this.routingNumberEl.dispatchEvent(new Event('input', { bubbles: true }));
+                            }
+                            if (this.accountNumberEl) {
+                                this.accountNumberEl.value = '9876543210';
+                                this.accountNumberEl.dispatchEvent(new Event('input', { bubbles: true }));
+                            }
+                            if (this.accountTypeEl) {
+                                this.accountTypeEl.value = 'checking';
+                                this.accountTypeEl.dispatchEvent(new Event('change', { bubbles: true }));
+                            }
+                        }
+                    }, 100);
+                }
+                this.emit('ready');
+                return Promise.resolve();
+            }
+            return new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    reject(new Error('Spreedly initialization timeout'));
+                }, INIT_TIMEOUT);
+                this.spreedly.on('ready', () => {
+                    clearTimeout(timeout);
+                    this.isReady = true;
+                    this.spreedly.setPlaceholder('number', PLACEHOLDERS.cardNumber);
+                    this.spreedly.setFieldType('number', 'text');
+                    this.spreedly.setNumberFormat('prettyFormat');
+                    this.spreedly.setPlaceholder('cvv', PLACEHOLDERS.cvv);
+                    this.spreedly.setFieldType('cvv', 'text');
+                    this.applyUnifiedStyles();
+                    if (this.enableTestMode &&
+                        this.mode === 'credit_card' &&
+                        this.spreedly.setValue) {
+                        this.spreedly.setValue('number', '4111111111111111');
+                        this.spreedly.setValue('cvv', '123');
+                        setTimeout(() => {
+                            if (this.expiryEl) {
+                                this.expiryEl.value = '12/34';
+                                this.expiryEl.dispatchEvent(new Event('input', { bubbles: true }));
+                            }
+                        }, 100);
+                    }
+                    this.emit('ready');
+                    resolve();
+                });
+                this.spreedly.on('errors', (errors) => {
+                    this.emit('error', new TokenizationError(errors));
+                });
+                this.spreedly.on('fieldEvent', (fieldName, eventType, activeEl, inputProperties) => {
+                    this.handleFieldEvent(fieldName, eventType, inputProperties);
+                });
+                const initOptions = {
+                    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);
+            });
+        });
+    }
+    tokenize(paymentData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.isReady) {
+                throw new Error('Tokenizer not initialized');
+            }
+            if (this.mode === 'bank_account' || this.isBankAccountData(paymentData)) {
+                return this.tokenizeBankAccountInternal(paymentData);
+            }
+            else {
+                return this.tokenizeCardInternal(paymentData);
+            }
+        });
+    }
+    tokenizeCardInternal(cardData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                var _a, _b, _c, _d, _e, _f;
+                const timeout = setTimeout(() => {
+                    if (this.spreedly && this.spreedly.removeHandlers) {
+                        this.spreedly.removeHandlers();
+                    }
+                    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.line1,
+                    address2: (_b = cardData.address) === null || _b === void 0 ? void 0 : _b.line2,
+                    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.postalCode,
+                    country: (_f = cardData.address) === null || _f === void 0 ? void 0 : _f.country,
+                });
+            });
+        });
+    }
+    createCanadianBankAccountFields(container) {
+        if (this.layout === 'two-line') {
+            this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: '2',
+                minWidth: CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
+            container.appendChild(this.accountTypeEl);
+            this.institutionNumberEl = createInputElement(`${this.containerId}-institution`, 'text', 'Inst *', 3);
+            Object.assign(this.institutionNumberEl.style, {
+                flex: '1',
+                minWidth: CANADIAN_BANK_FIELD_FLEX.institutionNumber.minWidth,
+            });
+            this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'middle');
+            this.institutionNumberEl.addEventListener('blur', () => {
+                const isValid = validateInstitutionNumber(this.institutionNumberEl.value);
+                if (!isValid && this.institutionNumberEl.value) {
+                    this.applyErrorStyles(this.institutionNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'middle');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.institutionNumberEl);
+            this.transitNumberEl = createInputElement(`${this.containerId}-transit`, 'text', 'Transit *', 5);
+            Object.assign(this.transitNumberEl.style, {
+                flex: '2',
+                minWidth: CANADIAN_BANK_FIELD_FLEX.transitNumber.minWidth,
+            });
+            this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'right');
+            this.transitNumberEl.addEventListener('blur', () => {
+                const isValid = validateTransitNumber(this.transitNumberEl.value);
+                if (!isValid && this.transitNumberEl.value) {
+                    this.applyErrorStyles(this.transitNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'right');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.transitNumberEl);
+            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *');
+            Object.assign(this.accountNumberEl.style, {
+                flex: '1',
+                flexBasis: '100%',
+                minWidth: CANADIAN_BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
+            this.accountNumberEl.addEventListener('blur', () => {
+                const isValid = validateCanadianAccountNumber(this.accountNumberEl.value);
+                if (!isValid && this.accountNumberEl.value) {
+                    this.applyErrorStyles(this.accountNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.accountNumberEl);
+        }
+        else {
+            this.institutionNumberEl = createInputElement(`${this.containerId}-institution`, 'text', 'Inst *', 3);
+            Object.assign(this.institutionNumberEl.style, {
+                flex: CANADIAN_BANK_FIELD_FLEX.institutionNumber.flex,
+                minWidth: CANADIAN_BANK_FIELD_FLEX.institutionNumber.minWidth,
+            });
+            this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
+            this.institutionNumberEl.addEventListener('blur', () => {
+                const isValid = validateInstitutionNumber(this.institutionNumberEl.value);
+                if (!isValid && this.institutionNumberEl.value) {
+                    this.applyErrorStyles(this.institutionNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.institutionNumberEl);
+            this.transitNumberEl = createInputElement(`${this.containerId}-transit`, 'text', 'Transit *', 5);
+            Object.assign(this.transitNumberEl.style, {
+                flex: CANADIAN_BANK_FIELD_FLEX.transitNumber.flex,
+                minWidth: CANADIAN_BANK_FIELD_FLEX.transitNumber.minWidth,
+            });
+            this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
+            this.transitNumberEl.addEventListener('blur', () => {
+                const isValid = validateTransitNumber(this.transitNumberEl.value);
+                if (!isValid && this.transitNumberEl.value) {
+                    this.applyErrorStyles(this.transitNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.transitNumberEl);
+            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *');
+            Object.assign(this.accountNumberEl.style, {
+                flex: CANADIAN_BANK_FIELD_FLEX.accountNumber.flex,
+                minWidth: CANADIAN_BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+            this.accountNumberEl.addEventListener('blur', () => {
+                const isValid = validateCanadianAccountNumber(this.accountNumberEl.value);
+                if (!isValid && this.accountNumberEl.value) {
+                    this.applyErrorStyles(this.accountNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.accountNumberEl);
+            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);
+        }
+    }
+    tokenizeBankAccountInternal(bankData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            if (!this.isReady) {
+                throw new Error('Tokenizer not initialized');
+            }
+            if (this.mode !== 'bank_account') {
+                throw new Error('Tokenizer not in bank account mode');
+            }
+            let routingNumber;
+            let accountNumber;
+            const accountType = ((_a = this.accountTypeEl) === null || _a === void 0 ? void 0 : _a.value) || 'checking';
+            const accountHolderType = 'personal';
+            if (this.bankCountry === 'CA') {
+                const institutionNumber = (_b = this.institutionNumberEl) === null || _b === void 0 ? void 0 : _b.value;
+                const transitNumber = (_c = this.transitNumberEl) === null || _c === void 0 ? void 0 : _c.value;
+                accountNumber = (_d = this.accountNumberEl) === null || _d === void 0 ? void 0 : _d.value;
+                if (!institutionNumber || !transitNumber || !accountNumber) {
+                    throw new TokenizationError('Institution number, transit number, and account number are required', 'VALIDATION_ERROR');
+                }
+                if (!validateInstitutionNumber(institutionNumber)) {
+                    throw new TokenizationError('Institution number must be 3 digits', 'VALIDATION_ERROR');
+                }
+                if (!validateTransitNumber(transitNumber)) {
+                    throw new TokenizationError('Transit number must be 5 digits', 'VALIDATION_ERROR');
+                }
+                if (!validateCanadianAccountNumber(accountNumber)) {
+                    throw new TokenizationError('Invalid account number', 'VALIDATION_ERROR');
+                }
+                routingNumber = formatCanadianRoutingNumber(institutionNumber, transitNumber);
+            }
+            else {
+                routingNumber = (_e = this.routingNumberEl) === null || _e === void 0 ? void 0 : _e.value;
+                accountNumber = (_f = this.accountNumberEl) === null || _f === void 0 ? void 0 : _f.value;
+                if (!routingNumber || !accountNumber) {
+                    throw new TokenizationError('Routing number and account number are required', 'VALIDATION_ERROR');
+                }
+                if (!validateRoutingNumber(routingNumber)) {
+                    throw new TokenizationError('Invalid routing number', 'VALIDATION_ERROR');
+                }
+                if (!validateAccountNumber(accountNumber)) {
+                    throw new TokenizationError('Invalid account number', 'VALIDATION_ERROR');
+                }
+            }
+            const result = yield SpreedlyTokenizer.tokenizeBankAccount({
+                contact: {
+                    firstName: bankData.firstName,
+                    lastName: bankData.lastName,
+                    email: bankData.email,
+                    primaryPhone: bankData.phone,
+                },
+                address: {
+                    address1: (_g = bankData.address) === null || _g === void 0 ? void 0 : _g.line1,
+                    address2: (_h = bankData.address) === null || _h === void 0 ? void 0 : _h.line2,
+                    city: (_j = bankData.address) === null || _j === void 0 ? void 0 : _j.city,
+                    state: (_k = bankData.address) === null || _k === void 0 ? void 0 : _k.state,
+                    zip: (_l = bankData.address) === null || _l === void 0 ? void 0 : _l.postalCode,
+                    country: (_m = bankData.address) === null || _m === void 0 ? void 0 : _m.country,
+                },
+                account: {
+                    accountNumber,
+                    routingNumber,
+                    accountType: accountType,
+                    accountHolderType: accountHolderType,
+                },
+            }, this.clientConfig);
+            return {
+                token: result,
+                lastFour: accountNumber.slice(-4),
+                accountType: accountType,
+                paymentMethodType: 'bank_account',
+                provider: 'spreedly',
+            };
+        });
+    }
+    validate() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.mode === 'bank_account') {
+                return this.validateBankAccountInternal();
+            }
+            else {
+                return this.validateCardInternal();
+            }
+        });
+    }
+    validateCardInternal() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            const errors = [];
+            if ((_a = this.currentValidationState.cardNumber) === null || _a === void 0 ? void 0 : _a.isEmpty) {
+                errors.push({
+                    field: 'cardNumber',
+                    message: 'Card number is required',
+                });
+            }
+            else if (!((_b = this.currentValidationState.cardNumber) === null || _b === void 0 ? void 0 : _b.isValid)) {
+                errors.push({
+                    field: 'cardNumber',
+                    message: 'Invalid card number',
+                });
+            }
+            if ((_c = this.currentValidationState.cvv) === null || _c === void 0 ? void 0 : _c.isEmpty) {
+                errors.push({
+                    field: 'cvv',
+                    message: 'CVV is required',
+                });
+            }
+            else if (!((_d = this.currentValidationState.cvv) === null || _d === void 0 ? void 0 : _d.isValid)) {
+                errors.push({
+                    field: 'cvv',
+                    message: 'Invalid CVV',
+                });
+            }
+            const expiry = this.parseExpiry(this.expiryEl);
+            if (!((_e = this.expiryEl) === null || _e === void 0 ? void 0 : _e.value)) {
+                errors.push({
+                    field: 'expiry',
+                    message: 'Expiration date is required',
+                });
+            }
+            else if (!expiry) {
+                errors.push({
+                    field: 'expiry',
+                    message: 'Invalid expiration date',
+                });
+            }
+            return {
+                isValid: errors.length === 0,
+                errors,
+            };
+        });
+    }
+    validateBankAccountInternal() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            const errors = [];
+            if (this.bankCountry === 'CA') {
+                if (!((_a = this.institutionNumberEl) === null || _a === void 0 ? void 0 : _a.value)) {
+                    errors.push({
+                        field: 'routingNumber',
+                        message: 'Institution number is required',
+                    });
+                }
+                else if (!validateInstitutionNumber(this.institutionNumberEl.value)) {
+                    errors.push({
+                        field: 'routingNumber',
+                        message: 'Institution number must be 3 digits',
+                    });
+                }
+                if (!((_b = this.transitNumberEl) === null || _b === void 0 ? void 0 : _b.value)) {
+                    errors.push({
+                        field: 'routingNumber',
+                        message: 'Transit number is required',
+                    });
+                }
+                else if (!validateTransitNumber(this.transitNumberEl.value)) {
+                    errors.push({
+                        field: 'routingNumber',
+                        message: 'Transit number must be 5 digits',
+                    });
+                }
+                if (!((_c = this.accountNumberEl) === null || _c === void 0 ? void 0 : _c.value)) {
+                    errors.push({
+                        field: 'accountNumber',
+                        message: 'Account number is required',
+                    });
+                }
+                else if (!validateCanadianAccountNumber(this.accountNumberEl.value)) {
+                    errors.push({
+                        field: 'accountNumber',
+                        message: 'Account number must be at least 7 digits',
+                    });
+                }
+            }
+            else {
+                if (!((_d = this.routingNumberEl) === null || _d === void 0 ? void 0 : _d.value)) {
+                    errors.push({
+                        field: 'routingNumber',
+                        message: 'Routing number is required',
+                    });
+                }
+                else if (!validateRoutingNumber(this.routingNumberEl.value)) {
+                    errors.push({
+                        field: 'routingNumber',
+                        message: 'Invalid routing number',
+                    });
+                }
+                if (!((_e = this.accountNumberEl) === null || _e === void 0 ? void 0 : _e.value)) {
+                    errors.push({
+                        field: 'accountNumber',
+                        message: 'Account number is required',
+                    });
+                }
+                else if (!validateAccountNumber(this.accountNumberEl.value)) {
+                    errors.push({
+                        field: 'accountNumber',
+                        message: 'Invalid account number',
+                    });
+                }
+            }
+            return {
+                isValid: errors.length === 0,
+                errors,
+            };
+        });
+    }
+    applyUnifiedStyles() {
+        var _a;
+        if (!this.isReady)
+            return;
+        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
+                        ? `${this.mergedStyles.input.borderRadius} 0 0 ${this.mergedStyles.input.borderRadius}`
+                        : '0' });
+                const numberCss = this.stylesToCssString(numberStyles);
+                this.spreedly.setStyle('number', numberCss);
+                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);
+            }
+            else {
+                const baseCss = this.stylesToCssString(this.mergedStyles.input);
+                this.spreedly.setStyle('number', baseCss);
+                this.spreedly.setStyle('cvv', baseCss);
+            }
+        }
+        if (this.mergedStyles.focus) {
+            const focusCss = this.stylesToCssString(this.mergedStyles.focus);
+            this.spreedly.setStyle('number:focus', focusCss);
+            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);
+        }
+    }
+    stylesToCssString(styles) {
+        return Object.entries(styles)
+            .filter(([_, value]) => value !== undefined && value !== null)
+            .map(([key, value]) => {
+            const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+            return `${cssKey}: ${value}`;
+        })
+            .join('; ');
+    }
+    clear() {
+        if (this.mode === 'bank_account') {
+            if (this.bankCountry === 'CA') {
+                if (this.institutionNumberEl)
+                    this.institutionNumberEl.value = '';
+                if (this.transitNumberEl)
+                    this.transitNumberEl.value = '';
+            }
+            else {
+                if (this.routingNumberEl)
+                    this.routingNumberEl.value = '';
+            }
+            if (this.accountNumberEl)
+                this.accountNumberEl.value = '';
+            if (this.accountTypeEl)
+                this.accountTypeEl.selectedIndex = 0;
+        }
+        else {
+            this.spreedly.reload();
+            if (this.expiryEl) {
+                this.expiryEl.value = '';
+            }
+        }
+    }
+    focus(field) {
+        if (this.mode === 'bank_account') {
+            if (field === 'routingNumber') {
+                if (this.bankCountry === 'CA' && this.institutionNumberEl) {
+                    this.institutionNumberEl.focus();
+                }
+                else if (this.routingNumberEl) {
+                    this.routingNumberEl.focus();
+                }
+                return;
+            }
+            if (field === 'accountNumber' && this.accountNumberEl) {
+                this.accountNumberEl.focus();
+                return;
+            }
+            return;
+        }
+        if (field === 'expiry' && this.expiryEl) {
+            this.expiryEl.focus();
+            return;
+        }
+        const fieldMap = {
+            cardNumber: this.numberEl,
+            cvv: this.cvvEl,
+            expiry: null,
+            routingNumber: null,
+            accountNumber: null,
+        };
+        const elementId = fieldMap[field];
+        if (elementId) {
+            const element = document.getElementById(elementId);
+            element === null || element === void 0 ? void 0 : element.focus();
+        }
+    }
+    destroy() {
+        if (this.spreedly && this.spreedly.removeHandlers) {
+            this.spreedly.removeHandlers();
+        }
+        this.eventHandlers.clear();
+        if (this.expiryEl) {
+        }
+    }
+    hasToken() {
+        return false;
+    }
+    getToken() {
+        return null;
+    }
+    get tokenizationMode() {
+        return 'manual';
+    }
+    updateOverallValidation() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.mode === 'credit_card') {
+            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);
+        }
+        else {
+            this.currentValidationState.isValid = true;
+        }
+        this.emit('validation', this.currentValidationState);
+    }
+    handleFieldEvent(fieldName, eventType, inputProperties) {
+        if (eventType === 'input') {
+            if (fieldName === 'number') {
+                this.currentValidationState.cardNumber = {
+                    isValid: inputProperties.validNumber || false,
+                    isEmpty: inputProperties.numberLength === 0,
+                };
+                if (inputProperties.cardType &&
+                    inputProperties.cardType !== 'unknown') {
+                    this.emit('cardTypeChange', {
+                        cardType: this.normalizeCardType(inputProperties.cardType),
+                    });
+                }
+            }
+            else if (fieldName === 'cvv') {
+                this.currentValidationState.cvv = {
+                    isValid: inputProperties.validCvv || false,
+                    isEmpty: inputProperties.cvvLength === 0,
+                };
+            }
+            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);
+        if (!container) {
+            throw new Error(`Container element not found: ${this.containerId}`);
+        }
+        container.innerHTML = '';
+        Object.assign(container.style, this.mergedStyles.container);
+        if (this.mode === 'bank_account') {
+            this.createBankAccountFields(container);
+        }
+        else {
+            this.createCreditCardFields(container);
+        }
+    }
+    createCreditCardFields(container) {
+        if (this.layout === 'two-line') {
+            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);
+            Object.assign(this.expiryEl.style, {
+                flex: '1',
+                minWidth: FIELD_FLEX.expiry.minWidth,
+            });
+            this.applyInputStyles(this.expiryEl, this.mergedStyles, 'left');
+            this.addExpiryFormatter(this.expiryEl);
+            this.expiryEl.addEventListener('input', () => {
+                var _a;
+                const expiry = this.parseExpiry(this.expiryEl);
+                this.currentValidationState.expiry = {
+                    isValid: !!expiry,
+                    isEmpty: !((_a = this.expiryEl) === null || _a === void 0 ? void 0 : _a.value),
+                };
+                this.updateOverallValidation();
+            });
+            container.appendChild(this.expiryEl);
+            const cvvDiv = createFieldContainer(this.cvvEl, '1', FIELD_FLEX.cvv.minWidth);
+            cvvDiv.style.height = this.mergedStyles.input.height;
+            container.appendChild(cvvDiv);
+        }
+        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);
+            Object.assign(this.expiryEl.style, {
+                flex: FIELD_FLEX.expiry.flex,
+                minWidth: FIELD_FLEX.expiry.minWidth,
+            });
+            this.applyInputStyles(this.expiryEl, this.mergedStyles, 'middle');
+            this.addExpiryFormatter(this.expiryEl);
+            this.expiryEl.addEventListener('input', () => {
+                var _a;
+                const expiry = this.parseExpiry(this.expiryEl);
+                this.currentValidationState.expiry = {
+                    isValid: !!expiry,
+                    isEmpty: !((_a = this.expiryEl) === null || _a === void 0 ? void 0 : _a.value),
+                };
+                this.updateOverallValidation();
+            });
+            container.appendChild(this.expiryEl);
+            const cvvDiv = createFieldContainer(this.cvvEl, FIELD_FLEX.cvv.flex, FIELD_FLEX.cvv.minWidth);
+            cvvDiv.style.height = this.mergedStyles.input.height;
+            container.appendChild(cvvDiv);
+        }
+    }
+    createBankAccountFields(container) {
+        if (this.bankCountry === 'CA') {
+            this.createCanadianBankAccountFields(container);
+        }
+        else {
+            this.createUSBankAccountFields(container);
+        }
+    }
+    createUSBankAccountFields(container) {
+        if (this.layout === 'two-line') {
+            this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: '1',
+                minWidth: BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
+            container.appendChild(this.accountTypeEl);
+            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            Object.assign(this.routingNumberEl.style, {
+                flex: '1',
+                minWidth: BANK_FIELD_FLEX.routingNumber.minWidth,
+            });
+            this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'right');
+            this.routingNumberEl.addEventListener('blur', () => {
+                const isValid = validateRoutingNumber(this.routingNumberEl.value);
+                if (!isValid && this.routingNumberEl.value) {
+                    this.applyErrorStyles(this.routingNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'right');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.routingNumberEl);
+            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            Object.assign(this.accountNumberEl.style, {
+                flex: '1',
+                flexBasis: '100%',
+                minWidth: BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
+            this.accountNumberEl.addEventListener('blur', () => {
+                const isValid = validateAccountNumber(this.accountNumberEl.value);
+                if (!isValid && this.accountNumberEl.value) {
+                    this.applyErrorStyles(this.accountNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.accountNumberEl);
+        }
+        else {
+            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            Object.assign(this.routingNumberEl.style, {
+                flex: BANK_FIELD_FLEX.routingNumber.flex,
+                minWidth: BANK_FIELD_FLEX.routingNumber.minWidth,
+            });
+            this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
+            this.routingNumberEl.addEventListener('blur', () => {
+                const isValid = validateRoutingNumber(this.routingNumberEl.value);
+                if (!isValid && this.routingNumberEl.value) {
+                    this.applyErrorStyles(this.routingNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.routingNumberEl);
+            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            Object.assign(this.accountNumberEl.style, {
+                flex: BANK_FIELD_FLEX.accountNumber.flex,
+                minWidth: BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+            this.accountNumberEl.addEventListener('blur', () => {
+                const isValid = validateAccountNumber(this.accountNumberEl.value);
+                if (!isValid && this.accountNumberEl.value) {
+                    this.applyErrorStyles(this.accountNumberEl);
+                }
+                else {
+                    this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+                }
+                this.updateBankAccountValidation();
+            });
+            container.appendChild(this.accountNumberEl);
+            this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: BANK_FIELD_FLEX.accountType.flex,
+                minWidth: BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
+            container.appendChild(this.accountTypeEl);
+        }
+    }
+    updateBankAccountValidation() {
+        if (this.bankCountry === 'CA') {
+            if (!this.institutionNumberEl ||
+                !this.transitNumberEl ||
+                !this.accountNumberEl)
+                return;
+            const institutionValid = validateInstitutionNumber(this.institutionNumberEl.value);
+            const transitValid = validateTransitNumber(this.transitNumberEl.value);
+            const accountValid = validateCanadianAccountNumber(this.accountNumberEl.value);
+            this.currentValidationState = {
+                isValid: institutionValid && transitValid && accountValid,
+                routingNumber: {
+                    isValid: institutionValid && transitValid,
+                    isEmpty: !this.institutionNumberEl.value && !this.transitNumberEl.value,
+                    error: !institutionValid
+                        ? 'Invalid institution number'
+                        : !transitValid
+                            ? 'Invalid transit number'
+                            : undefined,
+                },
+                accountNumber: {
+                    isValid: accountValid,
+                    isEmpty: !this.accountNumberEl.value,
+                    error: accountValid
+                        ? undefined
+                        : 'Account number must be at least 7 digits',
+                },
+            };
+        }
+        else {
+            if (!this.routingNumberEl || !this.accountNumberEl)
+                return;
+            const routingValid = validateRoutingNumber(this.routingNumberEl.value);
+            const accountValid = validateAccountNumber(this.accountNumberEl.value);
+            this.currentValidationState = {
+                isValid: routingValid && accountValid,
+                routingNumber: {
+                    isValid: routingValid,
+                    isEmpty: !this.routingNumberEl.value,
+                    error: routingValid ? undefined : 'Invalid routing number',
+                },
+                accountNumber: {
+                    isValid: accountValid,
+                    isEmpty: !this.accountNumberEl.value,
+                    error: accountValid ? undefined : 'Invalid account number',
+                },
+            };
+        }
+        this.emit('validation', this.currentValidationState);
+    }
+    validateExpiry() {
+        if (!this.expiryEl)
+            return;
+        const expiry = this.parseExpiry(this.expiryEl);
+        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;
+        }
+        const now = new Date();
+        const expiryDate = new Date(year, month - 1);
+        if (expiryDate < now) {
+            this.applyErrorStyles(this.expiryEl);
+            return;
+        }
+        this.applyInputStyles(this.expiryEl, this.mergedStyles, 'middle');
+    }
+    applyErrorStyles(element) {
+        if (this.mergedStyles.error) {
+            Object.assign(element.style, this.mergedStyles.error);
+        }
+        else {
+            element.style.borderColor = '#dc3545';
+        }
+    }
+    static ensureSpreedlyLoaded() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (window.Spreedly) {
+                return;
+            }
+            yield SpreedlyTokenizer.loadScript(SPREEDLY_SCRIPT_URL, SPREEDLY_SCRIPT_ID);
+            yield SpreedlyTokenizer.waitForGlobal('Spreedly', 5000);
+        });
+    }
+    static loadScript(src, id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (id && document.getElementById(id)) {
+                return;
+            }
+            const existingScript = Array.from(document.getElementsByTagName('script')).find((script) => script.src === src);
+            if (existingScript) {
+                return;
+            }
+            return new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = src;
+                script.async = true;
+                if (id) {
+                    script.id = id;
+                }
+                script.onload = () => resolve();
+                script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+                document.body.appendChild(script);
+            });
+        });
+    }
+    static waitForGlobal(globalName_1) {
+        return __awaiter(this, arguments, void 0, function* (globalName, timeout = 10000) {
+            const startTime = Date.now();
+            while (Date.now() - startTime < timeout) {
+                const global = window[globalName];
+                if (global) {
+                    return global;
+                }
+                yield new Promise((resolve) => setTimeout(resolve, 100));
+            }
+            throw new Error(`Timeout waiting for global: ${globalName}`);
+        });
+    }
+    static tokenizeBankAccount(data, config) {
+        if (config.spreedlyEnvironmentKey === undefined) {
+            return Promise.reject(new Error('Spreedly is not configured.'));
+        }
+        return fetch(SPREEDLY_TOKENIZER_URL +
+            '?' +
+            new URLSearchParams({ environment_key: config.spreedlyEnvironmentKey }), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                payment_method: {
+                    bank_account: {
+                        first_name: data.contact.firstName || undefined,
+                        last_name: data.contact.lastName || undefined,
+                        full_name: data.contact.fullName || undefined,
+                        email: data.contact.email,
+                        address1: data.address.address1,
+                        address2: data.address.address2,
+                        city: data.address.city,
+                        state: data.address.state,
+                        zip: data.address.zip,
+                        country: data.address.country,
+                        bank_account_number: data.account.accountNumber.replace(/\s+/g, ''),
+                        bank_routing_number: data.account.routingNumber.replace(/\s+/g, ''),
+                        bank_account_holder_type: data.account.accountHolderType,
+                        bank_account_type: data.account.accountType,
+                    },
+                },
+                retained: false,
+            }),
+        })
+            .then(unpackSpreedlyResponse)
+            .then(extractSpreedlyToken);
+    }
+    static tokenizeCreditCard(data, config) {
+        if (config.spreedlyEnvironmentKey === undefined) {
+            return Promise.reject(new Error('Spreedly is not configured.'));
+        }
+        return fetch(SPREEDLY_TOKENIZER_URL +
+            '?' +
+            new URLSearchParams({ environment_key: config.spreedlyEnvironmentKey }), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                payment_method: {
+                    credit_card: {
+                        first_name: data.contact.firstName,
+                        last_name: data.contact.lastName,
+                        full_name: data.contact.fullName,
+                        email: data.contact.email,
+                        address1: data.address.address1,
+                        address2: data.address.address2,
+                        city: data.address.city,
+                        state: data.address.state,
+                        zip: data.address.zip,
+                        country: data.address.country,
+                        number: data.card.cardNumber.replace(/\s+/g, ''),
+                        verification_value: data.card.verificationValue,
+                        year: data.card.expirationYear,
+                        month: data.card.expirationMonth,
+                    },
+                },
+                retained: false,
+            }),
+        })
+            .then(unpackSpreedlyResponse)
+            .then(extractSpreedlyToken);
+    }
+    static tokenizePayPal(data, config) {
+        if (config.spreedlyEnvironmentKey === undefined) {
+            throw new Error('Spreedly is not configured.');
+        }
+        return fetch(SPREEDLY_TOKENIZER_URL +
+            '?' +
+            new URLSearchParams({ environment_key: config.spreedlyEnvironmentKey }), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                payment_method: {
+                    payment_method_type: 'paypal',
+                    first_name: data.contact.firstName,
+                    last_name: data.contact.lastName,
+                    email: data.contact.email,
+                    address1: data.address.address1,
+                    address2: data.address.address2,
+                    city: data.address.city,
+                    state: data.address.state,
+                    zip: data.address.zip,
+                    country: data.address.country,
+                },
+                retained: false,
+            }),
+        })
+            .then(unpackSpreedlyResponse)
+            .then(extractSpreedlyToken);
+    }
+}