@idonatedev/idonate-sdk 1.0.16 → 1.1.0-dev1

package/dist/tokenize/SpreedlyTokenizer.js

@@ -0,0 +1,952 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpreedlyTokenizer = void 0;
+const Tokenizer_1 = require("./Tokenizer");
+const types_1 = require("./types");
+const constants_1 = require("../constants");
+const typeAdapters_1 = require("../typeAdapters");
+const config_handler_1 = __importDefault(require("../config-handler"));
+const spreedly_secure_1 = require("./spreedly-secure");
+const styles_1 = require("./styles");
+const tokenizer_constants_1 = require("./tokenizer-constants");
+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) {
+        super();
+        this.environmentKey = environmentKey;
+        this.containerId = containerId;
+        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 },
+            };
+        }
+        this.mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, styles);
+        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();
+            }
+            const environmentKey = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.environment_key;
+            if (!environmentKey) {
+                throw new Error('Spreedly environment key not configured');
+            }
+            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false);
+            tokenizer.organizationId = config === null || config === void 0 ? void 0 : config.organizationId;
+            tokenizer.embedId = config === null || config === void 0 ? void 0 : config.embedId;
+            tokenizer.createInternalElements();
+            let securityArgs;
+            if (container.mode === 'credit_card' &&
+                (config === null || config === void 0 ? void 0 : config.organizationId) &&
+                (config === null || config === void 0 ? void 0 : config.embedId)) {
+                try {
+                    const configHandler = new config_handler_1.default({});
+                    securityArgs = yield (0, spreedly_secure_1.fetchSpreedlySecurityArgs)(configHandler, config.organizationId, config.embedId);
+                }
+                catch (error) {
+                    console.warn('Failed to fetch security args, using standard tokenization');
+                }
+            }
+            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'));
+                }, tokenizer_constants_1.INIT_TIMEOUT);
+                this.spreedly.on('ready', () => {
+                    clearTimeout(timeout);
+                    this.isReady = true;
+                    this.spreedly.setPlaceholder('number', 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.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 types_1.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(() => {
+                    this.spreedly.removeHandlers();
+                    reject(new types_1.TokenizationError('Tokenization timeout', 'TIMEOUT'));
+                }, tokenizer_constants_1.TOKENIZE_TIMEOUT);
+                const cleanup = () => {
+                    clearTimeout(timeout);
+                    this.spreedly.removeHandlers();
+                };
+                this.spreedly.on('paymentMethod', (token, pmData) => {
+                    cleanup();
+                    resolve({
+                        token,
+                        lastFour: pmData.last_four_digits,
+                        cardType: this.normalizeCardType(pmData.card_type),
+                        provider: 'spreedly',
+                    });
+                });
+                this.spreedly.on('errors', (errors) => {
+                    cleanup();
+                    reject(new types_1.TokenizationError(errors));
+                });
+                let expiryMonth = cardData.expiryMonth || '';
+                let expiryYear = cardData.expiryYear || '';
+                if (!expiryMonth || !expiryYear) {
+                    const expiry = this.parseExpiry(this.expiryEl);
+                    if (expiry) {
+                        expiryMonth = expiry.month;
+                        expiryYear = expiry.year;
+                    }
+                    else {
+                        cleanup();
+                        reject(new types_1.TokenizationError('Expiration date is required', 'VALIDATION_ERROR'));
+                        return;
+                    }
+                }
+                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) {
+        this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
+        Object.assign(this.institutionNumberEl.style, {
+            flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.flex,
+            minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.minWidth,
+        });
+        this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
+        this.institutionNumberEl.addEventListener('blur', () => {
+            const isValid = (0, tokenizer_utils_1.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 = (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,
+            minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.minWidth,
+        });
+        this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
+        this.transitNumberEl.addEventListener('blur', () => {
+            const isValid = (0, tokenizer_utils_1.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 = (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,
+            minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.minWidth,
+        });
+        this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+        this.accountNumberEl.addEventListener('blur', () => {
+            const isValid = (0, tokenizer_utils_1.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 = (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);
+    }
+    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) || bankData.accountType;
+            const accountHolderType = 'personal';
+            if (this.bankCountry === 'CA') {
+                const institutionNumber = ((_b = this.institutionNumberEl) === null || _b === void 0 ? void 0 : _b.value) || bankData.institutionNumber;
+                const transitNumber = ((_c = this.transitNumberEl) === null || _c === void 0 ? void 0 : _c.value) || bankData.transitNumber;
+                accountNumber = ((_d = this.accountNumberEl) === null || _d === void 0 ? void 0 : _d.value) || bankData.accountNumber;
+                if (!institutionNumber || !transitNumber || !accountNumber) {
+                    throw new types_1.TokenizationError('Institution number, transit number, and account number are required', 'VALIDATION_ERROR');
+                }
+                if (!(0, tokenizer_utils_1.validateInstitutionNumber)(institutionNumber)) {
+                    throw new types_1.TokenizationError('Institution number must be 3 digits', 'VALIDATION_ERROR');
+                }
+                if (!(0, tokenizer_utils_1.validateTransitNumber)(transitNumber)) {
+                    throw new types_1.TokenizationError('Transit number must be 5 digits', 'VALIDATION_ERROR');
+                }
+                if (!(0, tokenizer_utils_1.validateCanadianAccountNumber)(accountNumber)) {
+                    throw new types_1.TokenizationError('Invalid account number', 'VALIDATION_ERROR');
+                }
+                routingNumber = (0, tokenizer_utils_1.formatCanadianRoutingNumber)(institutionNumber, transitNumber);
+            }
+            else {
+                routingNumber = ((_e = this.routingNumberEl) === null || _e === void 0 ? void 0 : _e.value) || bankData.routingNumber;
+                accountNumber = ((_f = this.accountNumberEl) === null || _f === void 0 ? void 0 : _f.value) || bankData.accountNumber;
+                if (!routingNumber || !accountNumber) {
+                    throw new types_1.TokenizationError('Routing number and account number are required', 'VALIDATION_ERROR');
+                }
+                if (!(0, tokenizer_utils_1.validateRoutingNumber)(routingNumber)) {
+                    throw new types_1.TokenizationError('Invalid routing number', 'VALIDATION_ERROR');
+                }
+                if (!(0, tokenizer_utils_1.validateAccountNumber)(accountNumber)) {
+                    throw new types_1.TokenizationError('Invalid account number', 'VALIDATION_ERROR');
+                }
+            }
+            const 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,
+                },
+            }, new config_handler_1.default({ spreedlyEnvironmentKey: this.environmentKey }));
+            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* () {
+            return new Promise((resolve) => {
+                this.spreedly.on('validation', (isValid, validationData) => {
+                    this.spreedly.removeHandlers();
+                    const errors = [];
+                    if (!validationData.validNumber) {
+                        errors.push({
+                            field: 'cardNumber',
+                            message: 'Invalid card number',
+                        });
+                    }
+                    if (!validationData.validCvv) {
+                        errors.push({
+                            field: 'cvv',
+                            message: 'Invalid CVV',
+                        });
+                    }
+                    resolve({
+                        isValid: isValid && errors.length === 0,
+                        errors,
+                    });
+                });
+                this.spreedly.validate();
+            });
+        });
+    }
+    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 (!(0, tokenizer_utils_1.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 (!(0, tokenizer_utils_1.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 (!(0, tokenizer_utils_1.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 (!(0, tokenizer_utils_1.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 (!(0, tokenizer_utils_1.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() {
+        this.spreedly.removeHandlers();
+        this.eventHandlers.clear();
+        if (this.expiryEl) {
+        }
+    }
+    handleFieldEvent(fieldName, eventType, inputProperties) {
+        var _a, _b, _c, _d;
+        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.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);
+        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 });
+            this.emit('validation', this.currentValidationState);
+        }
+    }
+    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) {
+        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);
+        Object.assign(this.expiryEl.style, {
+            flex: tokenizer_constants_1.FIELD_FLEX.expiry.flex,
+            minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
+        });
+        this.applyInputStyles(this.expiryEl, this.mergedStyles, 'middle');
+        this.addExpiryFormatter(this.expiryEl);
+        container.appendChild(this.expiryEl);
+        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);
+    }
+    createBankAccountFields(container) {
+        if (this.bankCountry === 'CA') {
+            this.createCanadianBankAccountFields(container);
+        }
+        else {
+            this.createUSBankAccountFields(container);
+        }
+    }
+    createUSBankAccountFields(container) {
+        this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+        Object.assign(this.routingNumberEl.style, {
+            flex: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.flex,
+            minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
+        });
+        this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
+        this.routingNumberEl.addEventListener('blur', () => {
+            const isValid = (0, tokenizer_utils_1.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 = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+        Object.assign(this.accountNumberEl.style, {
+            flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.flex,
+            minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
+        });
+        this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
+        this.accountNumberEl.addEventListener('blur', () => {
+            const isValid = (0, tokenizer_utils_1.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 = (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);
+    }
+    updateBankAccountValidation() {
+        if (this.bankCountry === 'CA') {
+            if (!this.institutionNumberEl ||
+                !this.transitNumberEl ||
+                !this.accountNumberEl)
+                return;
+            const institutionValid = (0, tokenizer_utils_1.validateInstitutionNumber)(this.institutionNumberEl.value);
+            const transitValid = (0, tokenizer_utils_1.validateTransitNumber)(this.transitNumberEl.value);
+            const accountValid = (0, tokenizer_utils_1.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 = (0, tokenizer_utils_1.validateRoutingNumber)(this.routingNumberEl.value);
+            const accountValid = (0, tokenizer_utils_1.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(constants_1.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(typeAdapters_1.unpackSpreedlyResponse)
+            .then(typeAdapters_1.extractSpreedlyToken);
+    }
+    static tokenizeCreditCard(data, config) {
+        if (config.spreedlyEnvironmentKey === undefined) {
+            return Promise.reject(new Error('Spreedly is not configured.'));
+        }
+        return fetch(constants_1.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(typeAdapters_1.unpackSpreedlyResponse)
+            .then(typeAdapters_1.extractSpreedlyToken);
+    }
+    static tokenizePayPal(data, config) {
+        if (config.spreedlyEnvironmentKey === undefined) {
+            throw new Error('Spreedly is not configured.');
+        }
+        return fetch(constants_1.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(typeAdapters_1.unpackSpreedlyResponse)
+            .then(typeAdapters_1.extractSpreedlyToken);
+    }
+}
+exports.SpreedlyTokenizer = SpreedlyTokenizer;