@idonatedev/idonate-sdk 1.2.0-dev0 → 1.2.0-dev10

package/dist/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CLIENT_HEADERS = exports.CARD_CONNECT_DEFAULT_STYLE = exports.DEFAULT_APP_NAME = exports.DEFAULT_CF_TURNSTILE_CDN_EXPLICIT_URL = exports.FALLBACK_CF_TURNSTILE_SITE_KEY = exports.FALLBACK_PC_SCRIPT_ID = exports.FALLBACK_PC_SCRIPT_URL = exports.SANDBOX_APPLE_PAY_URL = exports.APPLE_PAY_URL = exports.SPREEDLY_TOKENIZER_URL = exports.SANDBOX_CARD_CONNECT_BASE_URL = exports.PRODUCTION_CARD_CONNECT_BASE_URL = exports.SANDBOX_BASE_URL = exports.PRODUCTION_BASE_URL = exports.SDK_VERSION = void 0;
-exports.SDK_VERSION = '1.2.0-dev0';
+exports.SDK_VERSION = '1.2.0-dev9';
 exports.PRODUCTION_BASE_URL = 'https://secure-api.idonate.com';
 exports.SANDBOX_BASE_URL = 'https://api.qa-idonate.com';
 exports.PRODUCTION_CARD_CONNECT_BASE_URL = 'https://boltgw.cardconnect.com:8443';
@@ -78,7 +78,16 @@ input#cccvvfield {
     color: #8b959d;
 }
 `.replace(/\s+/gi, ' ');
+function getUserAgent() {
+    if (typeof navigator !== 'undefined') {
+        return navigator.userAgent;
+    }
+    if (typeof process !== 'undefined' && process.version) {
+        return `Node.js/${process.version} (${process.platform})`;
+    }
+    return 'unknown-runtime';
+}
 exports.CLIENT_HEADERS = {
-    'User-Agent': navigator.userAgent + ` idonate-sdk@${exports.SDK_VERSION}`,
+    'User-Agent': getUserAgent() + ` idonate-sdk@${exports.SDK_VERSION}`,
     'Content-Type': 'application/json',
 };

package/dist/esm/constants.js

@@ -1,4 +1,4 @@
-export const SDK_VERSION = '1.2.0-dev0';
+export const SDK_VERSION = '1.2.0-dev9';
 export const PRODUCTION_BASE_URL = 'https://secure-api.idonate.com';
 export const SANDBOX_BASE_URL = 'https://api.qa-idonate.com';
 export const PRODUCTION_CARD_CONNECT_BASE_URL = 'https://boltgw.cardconnect.com:8443';
@@ -75,7 +75,16 @@ input#cccvvfield {
     color: #8b959d;
 }
 `.replace(/\s+/gi, ' ');
+function getUserAgent() {
+    if (typeof navigator !== 'undefined') {
+        return navigator.userAgent;
+    }
+    if (typeof process !== 'undefined' && process.version) {
+        return `Node.js/${process.version} (${process.platform})`;
+    }
+    return 'unknown-runtime';
+}
 export const CLIENT_HEADERS = {
-    'User-Agent': navigator.userAgent + ` idonate-sdk@${SDK_VERSION}`,
+    'User-Agent': getUserAgent() + ` idonate-sdk@${SDK_VERSION}`,
     'Content-Type': 'application/json',
 };

package/dist/esm/recaptcha.d.ts

@@ -10,3 +10,4 @@ export declare class RecaptchaElement {
     resolveToken(): Promise<string>;
 }
 export declare function wrapElement(container: string, sitekey: string, extraParams?: any): RecaptchaElement;
+export declare function wrapElementWithThrow(container: string, sitekey: string, extraParams?: any): Promise<RecaptchaElement>;

package/dist/esm/recaptcha.js

@@ -1,3 +1,12 @@
+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());
+    });
+};
 function resolveLib() {
     const startWait = new Date();
     return new Promise((resolve, reject) => {
@@ -87,3 +96,11 @@ export function wrapElement(container, sitekey, extraParams) {
     captcha.render();
     return captcha;
 }
+export function wrapElementWithThrow(container, sitekey, extraParams) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const params = Object.assign(Object.assign({}, (extraParams || {})), { sitekey });
+        const captcha = new RecaptchaElement(container, params);
+        yield captcha.render();
+        return captcha;
+    });
+}

package/dist/esm/tokenize/CardConnectTokenizer.d.ts

@@ -9,7 +9,6 @@ export declare class CardConnectTokenizer extends Tokenizer {
     private iframe;
     private messageHandler?;
     private expectedOrigin;
-    private isReady;
     private currentValidationState;
     private containerEl?;
     private routingNumberEl?;
@@ -20,6 +19,7 @@ export declare class CardConnectTokenizer extends Tokenizer {
     private tokenizationPromise?;
     private tokenizationResolve?;
     private tokenizationReject?;
+    private currentCardType?;
     private constructor();
     static create(gateway: PaymentGateway, container: TokenizerContainer, config: {
         organizationId: string;

package/dist/esm/tokenize/CardConnectTokenizer.js

@@ -11,7 +11,7 @@ import { Tokenizer } from './Tokenizer';
 import { TokenizationError, } from './types';
 import ConfigHandler from '../config-handler';
 import { DEFAULT_UNIFIED_STYLES, mergeStyles, getContainerStylesForLayout, } from './styles';
-import { INIT_TIMEOUT, TOKENIZE_TIMEOUT, BANK_FIELD_FLEX, } from './tokenizer-constants';
+import { INIT_TIMEOUT, TOKENIZE_TIMEOUT, BANK_FIELD_FLEX, RESPONSIVE_BREAKPOINT, } from './tokenizer-constants';
 import { createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, } from './tokenizer-utils';
 export class CardConnectTokenizer extends Tokenizer {
     constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false, layout = 'single-line') {
@@ -19,7 +19,6 @@ export class CardConnectTokenizer extends Tokenizer {
         this.iframeUrl = iframeUrl;
         this.containerId = containerId;
         this.layout = layout;
-        this.isReady = false;
         this.enableTestMode = false;
         this.mode = mode;
         this.enableTestMode = enableTestMode;
@@ -39,13 +38,25 @@ export class CardConnectTokenizer extends Tokenizer {
             if (container.mode === 'bank_account' && container.bankCountry === 'CA') {
                 throw new Error('CardConnect does not support Canadian bank accounts');
             }
+            let effectiveLayout = 'single-line';
+            if (container.layout === 'responsive') {
+                const containerEl = document.getElementById(container.containerId);
+                const containerWidth = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.offsetWidth) || 0;
+                const breakpoint = container.responsiveBreakpoint || RESPONSIVE_BREAKPOINT;
+                effectiveLayout =
+                    containerWidth < breakpoint ? 'two-line' : 'single-line';
+            }
+            else if (container.layout === 'two-line') {
+                effectiveLayout = 'two-line';
+            }
+            const resolvedContainer = Object.assign(Object.assign({}, container), { layout: effectiveLayout });
             let baseUrl = ((_a = gateway.config) === null || _a === void 0 ? void 0 : _a.base_url) || config.clientConfig.cardConnectBaseUrl;
             config.cardConnectBaseUrl = baseUrl;
             const mergedStyles = mergeStyles(DEFAULT_UNIFIED_STYLES, container.styling);
-            const iframeUrl = CardConnectTokenizer.generateIframeUrl(baseUrl, container);
+            const iframeUrl = CardConnectTokenizer.generateIframeUrl(baseUrl, resolvedContainer);
             const iframe = CardConnectTokenizer.createIframe(iframeUrl, mergedStyles);
-            const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false, container.layout || 'single-line');
-            tokenizer.createInternalElements(container);
+            const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false, effectiveLayout);
+            tokenizer.createInternalElements(resolvedContainer);
             yield tokenizer.init();
             return tokenizer;
         });
@@ -68,7 +79,7 @@ export class CardConnectTokenizer extends Tokenizer {
     }
     createCreditCardFields(containerEl, mergedStyles) {
         this.iframe.style.width = '100%';
-        if (this.layout === 'two-line') {
+        if (this.layout === 'two-line' || this.layout === 'responsive') {
             const inputHeight = mergedStyles.input.height || '40px';
             this.iframe.style.height = `calc((${inputHeight}) * 2 + 10px)`;
         }
@@ -132,7 +143,6 @@ export class CardConnectTokenizer extends Tokenizer {
     init() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.mode === 'bank_account') {
-                this.isReady = true;
                 if (this.enableTestMode) {
                     setTimeout(() => {
                         if (this.routingNumberEl) {
@@ -165,7 +175,6 @@ export class CardConnectTokenizer extends Tokenizer {
                 window.addEventListener('message', this.messageHandler);
                 this.iframe.onload = () => {
                     clearTimeout(timeout);
-                    this.isReady = true;
                     if (this.enableTestMode && this.mode === 'credit_card') {
                     }
                     this.emit('ready');
@@ -445,10 +454,14 @@ export class CardConnectTokenizer extends Tokenizer {
         var _a;
         if (this.mode === 'credit_card' &&
             ((_a = this.cachedTokenResult) === null || _a === void 0 ? void 0 : _a.errorCode) === '0') {
+            const cardType = this.cachedTokenResult.cardType
+                ? this.normalizeCardType(this.cachedTokenResult.cardType)
+                : this.normalizeCardType('unknown');
             return {
                 token: this.cachedTokenResult.token,
-                lastFour: this.cachedTokenResult.token.slice(-4),
-                cardType: this.normalizeCardType('unknown'),
+                lastFour: this.cachedTokenResult.last4 ||
+                    this.cachedTokenResult.token.slice(-4),
+                cardType,
                 provider: 'cardconnect',
             };
         }
@@ -464,10 +477,17 @@ export class CardConnectTokenizer extends Tokenizer {
                 this.cachedTokenResult = data;
                 this.emit('tokenization', data);
                 if (data.errorCode === '0') {
+                    const cardType = data.cardType
+                        ? this.normalizeCardType(data.cardType)
+                        : this.normalizeCardType('unknown');
+                    if (data.cardType && cardType !== this.currentCardType) {
+                        this.currentCardType = cardType;
+                        this.emit('cardTypeChange', { cardType });
+                    }
                     const token = {
                         token: data.token,
-                        lastFour: data.token.slice(-4),
-                        cardType: this.normalizeCardType('unknown'),
+                        lastFour: data.last4 || data.token.slice(-4),
+                        cardType,
                         provider: 'cardconnect',
                     };
                     if (this.tokenizationResolve) {
@@ -502,6 +522,13 @@ export class CardConnectTokenizer extends Tokenizer {
             }
             if (data.event === 'input' || data.event === 'change') {
                 this.emit('change', { field: data.data });
+                if (data.cardType) {
+                    const cardType = this.normalizeCardType(data.cardType);
+                    if (cardType !== this.currentCardType) {
+                        this.currentCardType = cardType;
+                        this.emit('cardTypeChange', { cardType });
+                    }
+                }
             }
         }
         catch (error) {
@@ -526,12 +553,15 @@ export class CardConnectTokenizer extends Tokenizer {
                 errorLower.includes('year')) {
                 this.currentValidationState.expiry = { isValid: false, isEmpty: false };
             }
-            this.emit('error', new TokenizationError(data.validationError));
+            this.currentValidationState.isValid = false;
+            this.emit('validation', this.currentValidationState);
+        }
+        else {
+            this.currentValidationState.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);
         }
-        this.currentValidationState.isValid =
-            ((_b = (_a = this.currentValidationState.cardNumber) === null || _a === void 0 ? void 0 : _a.isValid) !== null && _b !== void 0 ? _b : false) &&
-                ((_d = (_c = this.currentValidationState.cvv) === null || _c === void 0 ? void 0 : _c.isValid) !== null && _d !== void 0 ? _d : false) &&
-                ((_f = (_e = this.currentValidationState.expiry) === null || _e === void 0 ? void 0 : _e.isValid) !== null && _f !== void 0 ? _f : false);
     }
     static generateIframeUrl(baseUrl, container) {
         const params = new URLSearchParams({
@@ -560,7 +590,12 @@ export class CardConnectTokenizer extends Tokenizer {
             params.set('placeholderyear', 'YYYY');
         }
         const mergedStyles = mergeStyles(DEFAULT_UNIFIED_STYLES, container.styling);
-        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, container.layout || 'single-line');
+        const isDesktopSafari = typeof navigator !== 'undefined' &&
+            /Safari/.test(navigator.userAgent) &&
+            /Apple Computer/.test(navigator.vendor) &&
+            !/Chrome/.test(navigator.userAgent) &&
+            !/Mobile/.test(navigator.userAgent);
+        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, (container.layout || 'single-line'), isDesktopSafari);
         const queryPairs = [];
         params.forEach((value, key) => {
             queryPairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
@@ -593,8 +628,8 @@ export class CardConnectTokenizer extends Tokenizer {
         iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
         return iframe;
     }
-    static generateCardConnectCss(styles, layout = 'single-line') {
-        var _a, _b, _c, _d;
+    static generateCardConnectCss(styles, layout = 'single-line', isDesktopSafari = false) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const css = [];
         if (layout === 'two-line') {
             css.push('html,form,body{margin:0;padding:0;}');
@@ -628,14 +663,22 @@ export class CardConnectTokenizer extends Tokenizer {
             commonStyles.push('box-sizing:border-box');
             const baseStyles = commonStyles.join(';');
             css.push(`input{${baseStyles};}`);
-            css.push(`select{${baseStyles};}`);
+            if (isDesktopSafari) {
+                css.push(`select{${baseStyles};-webkit-appearance:none;appearance:none;}`);
+            }
+            else {
+                css.push(`select{${baseStyles};}`);
+            }
         }
         if (layout === 'two-line') {
             css.push('input#ccnumfield{width:100%;display:block;margin-bottom:8px;}');
-            css.push('input#ccexpiryfieldmonth{width:20%;}');
-            css.push('input#ccexpiryfieldyear{width:24%;}');
-            css.push('input#cccvvfield{width:calc(56% - 20px);}');
-            if ((_a = styles.input) === null || _a === void 0 ? void 0 : _a.borderRadius) {
+            const twoLinePadding = ((_a = styles.twoLine) === null || _a === void 0 ? void 0 : _a.padding) || ((_b = styles.input) === null || _b === void 0 ? void 0 : _b.padding) || '10px';
+            const twoLineFontSize = ((_c = styles.twoLine) === null || _c === void 0 ? void 0 : _c.fontSize) || ((_d = styles.input) === null || _d === void 0 ? void 0 : _d.fontSize) || '14px';
+            const twoLineTextAlign = ((_e = styles.twoLine) === null || _e === void 0 ? void 0 : _e.textAlign) || 'left';
+            css.push(`input#ccexpiryfieldmonth{width:25%;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+            css.push(`input#ccexpiryfieldyear{width:35%;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+            css.push(`input#cccvvfield{width:calc(40% - 16px);padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};margin-left:-4px;}`);
+            if ((_f = styles.input) === null || _f === void 0 ? void 0 : _f.borderRadius) {
                 css.push(`input{border-radius:${styles.input.borderRadius};}`);
             }
         }
@@ -644,7 +687,7 @@ export class CardConnectTokenizer extends Tokenizer {
             css.push('select#ccexpirymonth{width:16%;margin:0;margin-right:-12px;}');
             css.push('select#ccexpiryyear{width:20%;}');
             css.push('input#cccvvfield{width:20%;margin:0;margin-left:-12px;}');
-            if ((_b = styles.input) === null || _b === void 0 ? void 0 : _b.borderRadius) {
+            if ((_g = styles.input) === null || _g === void 0 ? void 0 : _g.borderRadius) {
                 css.push(`input#ccnumfield{border-radius:${styles.input.borderRadius} 0 0 ${styles.input.borderRadius};border-right:none;}`);
                 css.push('select#ccexpirymonth{border-radius:0;border-right:none;}');
                 css.push('select#ccexpiryyear{border-radius:0;border-right:none;}');
@@ -662,7 +705,7 @@ export class CardConnectTokenizer extends Tokenizer {
             css.push(`select#ccexpirymonth{width:15%;margin-right:${marginRight};}`);
             css.push(`select#ccexpiryyear{width:20%;margin-right:${marginRight};}`);
             css.push('input#cccvvfield{width:15%;}');
-            if ((_c = styles.input) === null || _c === void 0 ? void 0 : _c.borderRadius) {
+            if ((_h = styles.input) === null || _h === void 0 ? void 0 : _h.borderRadius) {
                 css.push(`input,select{border-radius:${styles.input.borderRadius};}`);
             }
         }
@@ -678,7 +721,7 @@ export class CardConnectTokenizer extends Tokenizer {
             if (focusStyles.length > 0) {
                 css.push(`input:focus{${focusStyles.join(';')};}`);
                 css.push(`select:focus{${focusStyles.join(';')};}`);
-                if (isConnected && ((_d = styles.input) === null || _d === void 0 ? void 0 : _d.border)) {
+                if (isConnected && ((_j = styles.input) === null || _j === void 0 ? void 0 : _j.border)) {
                     css.push(`input#ccnumfield:focus{border:${styles.input.border};${focusStyles.join(';')};}`);
                     css.push(`select#ccexpirymonth:focus{border:${styles.input.border};${focusStyles.join(';')};}`);
                     css.push(`select#ccexpiryyear:focus{border:${styles.input.border};${focusStyles.join(';')};}`);

package/dist/esm/tokenize/PayPalTokenizer.d.ts

@@ -31,11 +31,14 @@ interface PayPalApproveData {
     payerID?: string;
     facilitatorAccessToken?: string;
 }
+export interface PayPalCreateOrderData {
+    amount: number;
+    currency?: string;
+}
 export declare class PayPalTokenizer extends Tokenizer {
     private gateway;
     private containerId;
     private configContext;
-    private isReady;
     private containerEl?;
     private paypalButtonContainer?;
     private cachedToken?;
@@ -50,6 +53,7 @@ export declare class PayPalTokenizer extends Tokenizer {
     private clientConfig;
     private paymentTransactionId?;
     private paymentMethodId?;
+    private onCreateOrder?;
     private constructor();
     static create(gateway: PaymentGateway, container: TokenizerContainer, config: {
         organizationId: string;

package/dist/esm/tokenize/PayPalTokenizer.js

@@ -19,7 +19,6 @@ export class PayPalTokenizer extends Tokenizer {
         this.gateway = gateway;
         this.containerId = containerId;
         this.configContext = configContext;
-        this.isReady = false;
         this.mode = 'credit_card';
         const gatewayConfig = gateway.config;
         if (!(gatewayConfig === null || gatewayConfig === void 0 ? void 0 : gatewayConfig.client_id)) {
@@ -31,6 +30,7 @@ export class PayPalTokenizer extends Tokenizer {
         this.amount = config.amount;
         this.enableVenmo = (_b = config.enableVenmo) !== null && _b !== void 0 ? _b : true;
         this.locale = config.locale || 'en_US';
+        this.onCreateOrder = config.onCreateOrder;
         this.organizationId = configContext.organizationId;
         this.embedId = configContext.embedId;
         this.clientConfig = configContext.clientConfig;
@@ -65,17 +65,13 @@ export class PayPalTokenizer extends Tokenizer {
                     return this.renderButtons();
                 })
                     .then(() => {
-                    this.isReady = true;
                     this.emit('ready');
+                    this.emit('validation', { isValid: true });
                     resolve();
                 })
                     .catch((error) => {
                     clearTimeout(timeout);
-                    this.emit('error', {
-                        message: 'Failed to initialize PayPal',
-                        code: 'INIT_FAILED',
-                        details: error,
-                    });
+                    this.emit('error', new TokenizationError('Failed to initialize PayPal', 'INIT_FAILED'));
                     reject(error);
                 });
             });
@@ -165,13 +161,26 @@ export class PayPalTokenizer extends Tokenizer {
     }
     createOrder() {
         const endpoint = `${this.clientConfig.embedApiBaseUrl}/payment/paypal/create-order`;
+        let orderAmount;
+        let orderCurrency = this.currency;
+        if (this.onCreateOrder) {
+            const orderData = this.onCreateOrder();
+            orderAmount = orderData.amount;
+            orderCurrency = orderData.currency || this.currency;
+        }
+        else {
+            orderAmount = this.amount;
+        }
+        if (orderAmount === undefined || orderAmount <= 0) {
+            const error = new Error('Amount is required to create PayPal order');
+            this.handleError(error, 'Order creation failed');
+            return Promise.reject(error);
+        }
         const requestBody = {
             payment_gateway_id: this.gateway.id,
-            currency: this.currency,
+            currency: orderCurrency,
+            amount: orderAmount,
         };
-        if (this.amount !== undefined) {
-            requestBody.amount = this.amount;
-        }
         return fetch(endpoint, {
             method: 'POST',
             headers: {
@@ -208,22 +217,16 @@ export class PayPalTokenizer extends Tokenizer {
                 paymentTransactionId: this.paymentTransactionId,
             };
             this.cachedToken = token;
+            this.emit('validation', { isValid: true, hasToken: true });
             this.emit('tokenReady', token);
         });
     }
     handleCancel(data) {
-        this.emit('error', {
-            message: 'Payment cancelled by user',
-            code: 'USER_CANCELLED',
-        });
+        this.emit('error', new TokenizationError('Payment cancelled by user', 'USER_CANCELLED'));
     }
     handleError(error, context) {
         const errorMessage = (error === null || error === void 0 ? void 0 : error.message) || (error === null || error === void 0 ? void 0 : error.toString()) || 'Unknown error';
-        this.emit('error', {
-            message: `${context}: ${errorMessage}`,
-            code: (error === null || error === void 0 ? void 0 : error.code) || 'PAYPAL_ERROR',
-            details: error,
-        });
+        this.emit('error', new TokenizationError(`${context}: ${errorMessage}`, (error === null || error === void 0 ? void 0 : error.code) || 'PAYPAL_ERROR'));
     }
     tokenize(paymentData) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -246,6 +249,7 @@ export class PayPalTokenizer extends Tokenizer {
     }
     clear() {
         this.cachedToken = undefined;
+        this.emit('validation', { isValid: true, hasToken: false });
     }
     focus(field) {
     }

package/dist/esm/tokenize/SpreedlyTokenizer.d.ts

@@ -7,7 +7,6 @@ export declare class SpreedlyTokenizer extends Tokenizer {
     private containerId;
     private layout;
     private spreedly;
-    private isReady;
     private currentValidationState;
     private mergedStyles;
     private expiryEl?;
@@ -25,6 +24,11 @@ export declare class SpreedlyTokenizer extends Tokenizer {
     private institutionNumberEl?;
     private transitNumberEl?;
     private enableTestMode;
+    private resizeObserver?;
+    private effectiveLayout;
+    private cardNumberDiv?;
+    private cvvDiv?;
+    private responsiveBreakpoint;
     private constructor();
     static create(gateway: PaymentGateway, container: TokenizerContainer, config: {
         organizationId: string;
@@ -43,6 +47,9 @@ export declare class SpreedlyTokenizer extends Tokenizer {
     private stylesToCssString;
     clear(): void;
     focus(field: 'cardNumber' | 'cvv' | 'expiry' | 'routingNumber' | 'accountNumber'): void;
+    private determineLayout;
+    private setupResizeObserver;
+    private applyLayoutStyles;
     destroy(): void;
     hasToken(): boolean;
     getToken(): PaymentToken | null;
@@ -68,7 +75,7 @@ export declare class SpreedlyTokenizer extends Tokenizer {
         });
         address: Partial<Address>;
         account: Partial<ACHAccount> & Pick<ACHAccount, 'accountNumber' | 'routingNumber'>;
-    }, config: ConfigHandler): Promise<string>;
+    }, config: ConfigHandler, environmentKeyOverride?: string): Promise<string>;
     static tokenizeCreditCard(data: {
         contact: Partial<Contact> & ({
             firstName: string;