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

package/dist/esm/tokenize/SpreedlyTokenizer.js

@@ -13,22 +13,24 @@ 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 { INIT_TIMEOUT, TOKENIZE_TIMEOUT, FIELD_FLEX, BANK_FIELD_FLEX, CANADIAN_BANK_FIELD_FLEX, PLACEHOLDERS, FIELD_CONSTRAINTS, RESPONSIVE_BREAKPOINT, } from './tokenizer-constants';
 import { createFieldContainer, createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, validateInstitutionNumber, validateTransitNumber, validateCanadianAccountNumber, formatCanadianRoutingNumber, } from './tokenizer-utils';
 const SPREEDLY_SCRIPT_URL = 'https://core.spreedly.com/iframe/iframe-v1.min.js';
 const SPREEDLY_SCRIPT_ID = 'spreedly-iframe-script';
 export class SpreedlyTokenizer extends Tokenizer {
-    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line') {
+    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line', responsiveBreakpoint = RESPONSIVE_BREAKPOINT) {
         super();
         this.environmentKey = environmentKey;
         this.containerId = containerId;
         this.layout = layout;
-        this.isReady = false;
         this.bankCountry = 'US';
         this.enableTestMode = false;
+        this.effectiveLayout = 'single-line';
+        this.responsiveBreakpoint = RESPONSIVE_BREAKPOINT;
         this.mode = mode;
         this.bankCountry = bankCountry;
         this.enableTestMode = enableTestMode;
+        this.responsiveBreakpoint = responsiveBreakpoint;
         if (mode === 'credit_card') {
             const SpreedlyFrame = window.SpreedlyPaymentFrame;
             if (SpreedlyFrame) {
@@ -75,7 +77,7 @@ export class SpreedlyTokenizer extends Tokenizer {
             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');
+            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line', container.responsiveBreakpoint || RESPONSIVE_BREAKPOINT);
             tokenizer.organizationId = config.organizationId;
             tokenizer.embedId = config.embedId;
             tokenizer.clientConfig = config.clientConfig;
@@ -101,7 +103,6 @@ export class SpreedlyTokenizer extends Tokenizer {
         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') {
@@ -143,7 +144,6 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }, 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');
@@ -244,11 +244,11 @@ export class SpreedlyTokenizer extends Tokenizer {
                     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,
+                    address1: (_a = cardData.address) === null || _a === void 0 ? void 0 : _a.address1,
+                    address2: (_b = cardData.address) === null || _b === void 0 ? void 0 : _b.address2,
                     city: (_c = cardData.address) === null || _c === void 0 ? void 0 : _c.city,
                     state: (_d = cardData.address) === null || _d === void 0 ? void 0 : _d.state,
-                    zip: (_e = cardData.address) === null || _e === void 0 ? void 0 : _e.postalCode,
+                    zip: (_e = cardData.address) === null || _e === void 0 ? void 0 : _e.zip,
                     country: (_f = cardData.address) === null || _f === void 0 ? void 0 : _f.country,
                 });
             });
@@ -429,11 +429,11 @@ export class SpreedlyTokenizer extends Tokenizer {
                     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,
+                    address1: (_g = bankData.address) === null || _g === void 0 ? void 0 : _g.address1,
+                    address2: (_h = bankData.address) === null || _h === void 0 ? void 0 : _h.address2,
                     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,
+                    zip: (_l = bankData.address) === null || _l === void 0 ? void 0 : _l.zip,
                     country: (_m = bankData.address) === null || _m === void 0 ? void 0 : _m.country,
                 },
                 account: {
@@ -442,7 +442,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                     accountType: accountType,
                     accountHolderType: accountHolderType,
                 },
-            }, this.clientConfig);
+            }, this.clientConfig, this.environmentKey);
             return {
                 token: result,
                 lastFour: accountNumber.slice(-4),
@@ -585,8 +585,6 @@ export class SpreedlyTokenizer extends Tokenizer {
     }
     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) {
@@ -685,7 +683,64 @@ export class SpreedlyTokenizer extends Tokenizer {
             element === null || element === void 0 ? void 0 : element.focus();
         }
     }
+    determineLayout(width) {
+        return width < this.responsiveBreakpoint ? 'two-line' : 'single-line';
+    }
+    setupResizeObserver() {
+        if (this.layout !== 'responsive')
+            return;
+        const container = document.getElementById(this.containerId);
+        if (!container)
+            return;
+        let debounceTimer;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                const newWidth = entries[0].contentRect.width;
+                const newLayout = this.determineLayout(newWidth);
+                if (newLayout !== this.effectiveLayout) {
+                    this.applyLayoutStyles(newLayout);
+                }
+            }, 100);
+        });
+        this.resizeObserver.observe(container);
+    }
+    applyLayoutStyles(newLayout) {
+        this.effectiveLayout = newLayout;
+        const container = document.getElementById(this.containerId);
+        if (!container)
+            return;
+        if (newLayout === 'two-line') {
+            container.style.flexWrap = 'wrap';
+            if (this.cardNumberDiv) {
+                this.cardNumberDiv.style.flex = '1';
+                this.cardNumberDiv.style.flexBasis = '100%';
+            }
+            if (this.expiryEl) {
+                this.expiryEl.style.flex = '1';
+                this.expiryEl.style.flexBasis = 'auto';
+            }
+            if (this.cvvDiv) {
+                this.cvvDiv.style.flex = '1';
+                this.cvvDiv.style.flexBasis = 'auto';
+            }
+        }
+        else {
+            container.style.flexWrap = 'nowrap';
+            if (this.cardNumberDiv) {
+                this.cardNumberDiv.style.flex = FIELD_FLEX.cardNumber.flex;
+            }
+            if (this.expiryEl) {
+                this.expiryEl.style.flex = FIELD_FLEX.expiry.flex;
+            }
+            if (this.cvvDiv) {
+                this.cvvDiv.style.flex = FIELD_FLEX.cvv.flex;
+            }
+        }
+    }
     destroy() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         if (this.spreedly && this.spreedly.removeHandlers) {
             this.spreedly.removeHandlers();
         }
@@ -762,10 +817,18 @@ export class SpreedlyTokenizer extends Tokenizer {
         }
     }
     createCreditCardFields(container) {
-        if (this.layout === 'two-line') {
+        if (this.layout === 'responsive') {
+            this.effectiveLayout = this.determineLayout(container.offsetWidth);
+        }
+        else {
+            this.effectiveLayout =
+                this.layout === 'two-line' ? 'two-line' : 'single-line';
+        }
+        if (this.effectiveLayout === 'two-line' && this.layout !== 'responsive') {
             const cardNumberDiv = createFieldContainer(this.numberEl, '1', FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
             cardNumberDiv.style.flexBasis = '100%';
+            this.cardNumberDiv = cardNumberDiv;
             container.appendChild(cardNumberDiv);
             this.expiryEl = createInputElement(this.expiryId, 'text', PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
@@ -786,11 +849,13 @@ export class SpreedlyTokenizer extends Tokenizer {
             container.appendChild(this.expiryEl);
             const cvvDiv = createFieldContainer(this.cvvEl, '1', FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
+            this.cvvDiv = cvvDiv;
             container.appendChild(cvvDiv);
         }
         else {
             const cardNumberDiv = createFieldContainer(this.numberEl, FIELD_FLEX.cardNumber.flex, FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
+            this.cardNumberDiv = cardNumberDiv;
             container.appendChild(cardNumberDiv);
             this.expiryEl = createInputElement(this.expiryId, 'text', PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
@@ -811,7 +876,12 @@ export class SpreedlyTokenizer extends Tokenizer {
             container.appendChild(this.expiryEl);
             const cvvDiv = createFieldContainer(this.cvvEl, FIELD_FLEX.cvv.flex, FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
+            this.cvvDiv = cvvDiv;
             container.appendChild(cvvDiv);
+            if (this.layout === 'responsive') {
+                this.applyLayoutStyles(this.effectiveLayout);
+                this.setupResizeObserver();
+            }
         }
     }
     createBankAccountFields(container) {
@@ -1035,13 +1105,14 @@ export class SpreedlyTokenizer extends Tokenizer {
             throw new Error(`Timeout waiting for global: ${globalName}`);
         });
     }
-    static tokenizeBankAccount(data, config) {
-        if (config.spreedlyEnvironmentKey === undefined) {
+    static tokenizeBankAccount(data, config, environmentKeyOverride) {
+        const environmentKey = environmentKeyOverride || config.spreedlyEnvironmentKey;
+        if (!environmentKey) {
             return Promise.reject(new Error('Spreedly is not configured.'));
         }
         return fetch(SPREEDLY_TOKENIZER_URL +
             '?' +
-            new URLSearchParams({ environment_key: config.spreedlyEnvironmentKey }), {
+            new URLSearchParams({ environment_key: environmentKey }), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',

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

@@ -3,6 +3,8 @@ import ConfigHandler from '../config-handler';
 export declare abstract class Tokenizer {
     protected mode: PaymentMethodMode;
     protected eventHandlers: Map<TokenizerEvent, Set<(data?: any) => void>>;
+    private _isReady;
+    get isReady(): boolean;
     abstract tokenize(paymentData: PaymentData): Promise<PaymentToken>;
     abstract validate(): Promise<ValidationResult>;
     abstract clear(): void;

package/dist/esm/tokenize/Tokenizer.js

@@ -12,6 +12,10 @@ export class Tokenizer {
     constructor() {
         this.mode = 'credit_card';
         this.eventHandlers = new Map();
+        this._isReady = false;
+    }
+    get isReady() {
+        return this._isReady;
     }
     getMode() {
         return this.mode;
@@ -21,6 +25,13 @@ export class Tokenizer {
             this.eventHandlers.set(event, new Set());
         }
         this.eventHandlers.get(event).add(handler);
+        if (event === 'ready' && this._isReady) {
+            try {
+                handler();
+            }
+            catch (error) {
+            }
+        }
     }
     off(event, handler) {
         const handlers = this.eventHandlers.get(event);
@@ -29,6 +40,9 @@ export class Tokenizer {
         }
     }
     emit(event, data) {
+        if (event === 'ready') {
+            this._isReady = true;
+        }
         const handlers = this.eventHandlers.get(event);
         if (handlers) {
             handlers.forEach((handler) => {

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

@@ -2,6 +2,6 @@ import * as iats from './iats';
 export { Tokenizer } from './Tokenizer';
 export { SpreedlyTokenizer } from './SpreedlyTokenizer';
 export { CardConnectTokenizer } from './CardConnectTokenizer';
-export { PayPalTokenizer } from './PayPalTokenizer';
+export { PayPalTokenizer, PayPalCreateOrderData } from './PayPalTokenizer';
 export { PaymentMethodType, PaymentGateway, TokenizerContainer, TokenizerStyling, CardData, PaymentData, PaymentToken, CardType, TokenizerEvent, ValidationState, ValidationResult, ValidationError, TokenizationError, } from './types';
 export { iats };

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

@@ -1,4 +1,4 @@
 import { TokenizerStyling, TokenizerStylingComplete } from './types';
 export declare const DEFAULT_UNIFIED_STYLES: TokenizerStylingComplete;
 export declare function mergeStyles(defaults: TokenizerStylingComplete, userStyles?: TokenizerStyling): TokenizerStylingComplete;
-export declare function getContainerStylesForLayout(baseStyles: TokenizerStylingComplete, layout?: 'single-line' | 'two-line'): TokenizerStylingComplete;
+export declare function getContainerStylesForLayout(baseStyles: TokenizerStylingComplete, layout?: 'single-line' | 'two-line' | 'responsive'): TokenizerStylingComplete;

package/dist/esm/tokenize/styles.js

@@ -27,6 +27,11 @@ export const DEFAULT_UNIFIED_STYLES = {
         flexWrap: 'nowrap',
         rowGap: '1rem',
     },
+    twoLine: {
+        padding: '',
+        fontSize: '',
+        textAlign: '',
+    },
 };
 export function mergeStyles(defaults, userStyles) {
     if (!userStyles)
@@ -36,6 +41,7 @@ export function mergeStyles(defaults, userStyles) {
         focus: Object.assign(Object.assign({}, defaults.focus), userStyles.focus),
         error: Object.assign(Object.assign({}, defaults.error), userStyles.error),
         container: Object.assign(Object.assign({}, defaults.container), userStyles.container),
+        twoLine: Object.assign(Object.assign({}, defaults.twoLine), userStyles.twoLine),
     };
 }
 export function getContainerStylesForLayout(baseStyles, layout = 'single-line') {

package/dist/esm/tokenize/tokenizer-constants.d.ts

@@ -60,3 +60,4 @@ export declare const FIELD_CONSTRAINTS: {
         readonly maxLength: 4;
     };
 };
+export declare const RESPONSIVE_BREAKPOINT = 400;

package/dist/esm/tokenize/tokenizer-constants.js

@@ -60,3 +60,4 @@ export const FIELD_CONSTRAINTS = {
         maxLength: 4,
     },
 };
+export const RESPONSIVE_BREAKPOINT = 400;

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

@@ -18,7 +18,8 @@ export interface TokenizerContainer {
     mode?: PaymentMethodMode;
     bankCountry?: 'US' | 'CA';
     enableTestMode?: boolean;
-    layout?: 'single-line' | 'two-line';
+    layout?: 'single-line' | 'two-line' | 'responsive';
+    responsiveBreakpoint?: number;
 }
 export interface TokenizerStylingComplete {
     input: {
@@ -52,6 +53,11 @@ export interface TokenizerStylingComplete {
         flexWrap?: string;
         rowGap?: string;
     };
+    twoLine: {
+        padding: string;
+        fontSize: string;
+        textAlign: string;
+    };
 }
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
@@ -63,11 +69,11 @@ export interface CardData {
     email?: string;
     phone?: string;
     address?: {
-        line1?: string;
-        line2?: string;
+        address1?: string;
+        address2?: string;
         city?: string;
         state?: string;
-        postalCode?: string;
+        zip?: string;
         country?: string;
     };
 }
@@ -77,11 +83,11 @@ export interface BankAccountData {
     email?: string;
     phone?: string;
     address?: {
-        line1?: string;
-        line2?: string;
+        address1?: string;
+        address2?: string;
         city?: string;
         state?: string;
-        postalCode?: string;
+        zip?: string;
         country?: string;
     };
 }

package/dist/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/recaptcha.js

@@ -1,8 +1,18 @@
 "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());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RecaptchaElement = void 0;
 exports.injectScript = injectScript;
 exports.wrapElement = wrapElement;
+exports.wrapElementWithThrow = wrapElementWithThrow;
 function resolveLib() {
     const startWait = new Date();
     return new Promise((resolve, reject) => {
@@ -93,3 +103,11 @@ function wrapElement(container, sitekey, extraParams) {
     captcha.render();
     return captcha;
 }
+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/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/tokenize/CardConnectTokenizer.js

@@ -25,7 +25,6 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         this.iframeUrl = iframeUrl;
         this.containerId = containerId;
         this.layout = layout;
-        this.isReady = false;
         this.enableTestMode = false;
         this.mode = mode;
         this.enableTestMode = enableTestMode;
@@ -45,13 +44,25 @@ class CardConnectTokenizer extends Tokenizer_1.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 || tokenizer_constants_1.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 = (0, styles_1.mergeStyles)(styles_1.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;
         });
@@ -74,7 +85,7 @@ class CardConnectTokenizer extends Tokenizer_1.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)`;
         }
@@ -138,7 +149,6 @@ class CardConnectTokenizer extends Tokenizer_1.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) {
@@ -171,7 +181,6 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                 window.addEventListener('message', this.messageHandler);
                 this.iframe.onload = () => {
                     clearTimeout(timeout);
-                    this.isReady = true;
                     if (this.enableTestMode && this.mode === 'credit_card') {
                     }
                     this.emit('ready');
@@ -451,10 +460,14 @@ class CardConnectTokenizer extends Tokenizer_1.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',
             };
         }
@@ -470,10 +483,17 @@ class CardConnectTokenizer extends Tokenizer_1.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) {
@@ -508,6 +528,13 @@ class CardConnectTokenizer extends Tokenizer_1.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) {
@@ -532,12 +559,15 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                 errorLower.includes('year')) {
                 this.currentValidationState.expiry = { isValid: false, isEmpty: false };
             }
-            this.emit('error', new types_1.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({
@@ -566,7 +596,12 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             params.set('placeholderyear', 'YYYY');
         }
         const mergedStyles = (0, styles_1.mergeStyles)(styles_1.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)}`);
@@ -599,8 +634,8 @@ class CardConnectTokenizer extends Tokenizer_1.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;}');
@@ -634,14 +669,22 @@ class CardConnectTokenizer extends Tokenizer_1.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};}`);
             }
         }
@@ -650,7 +693,7 @@ class CardConnectTokenizer extends Tokenizer_1.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;}');
@@ -668,7 +711,7 @@ class CardConnectTokenizer extends Tokenizer_1.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};}`);
             }
         }
@@ -684,7 +727,7 @@ class CardConnectTokenizer extends Tokenizer_1.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(';')};}`);