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

package/dist/config-handler.js

@@ -26,6 +26,9 @@ class ConfigHandler {
         if (options.overrideApplePayUrl) {
             this.applePayUrl = options.overrideApplePayUrl;
         }
+        if (options.overrideCardConnectBaseUrl) {
+            this.cardConnectBaseUrl = options.overrideCardConnectBaseUrl;
+        }
         this.pcScriptBase = options.pcScriptBase || constants_1.FALLBACK_PC_SCRIPT_URL;
         this.pcScriptId = options.pcScriptId || constants_1.FALLBACK_PC_SCRIPT_ID;
         this.turnstileCdnUrl =

package/dist/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const SDK_VERSION = "1.1.0";
+export declare const SDK_VERSION: string;
 export declare const PRODUCTION_BASE_URL = "https://secure-api.idonate.com";
 export declare const SANDBOX_BASE_URL = "https://api.qa-idonate.com";
 export declare const PRODUCTION_CARD_CONNECT_BASE_URL = "https://boltgw.cardconnect.com:8443";

package/dist/constants.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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.1.0';
+const package_json_1 = __importDefault(require("../package.json"));
+exports.SDK_VERSION = package_json_1.default.version;
 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';
@@ -79,6 +83,6 @@ input#cccvvfield {
 }
 `.replace(/\s+/gi, ' ');
 exports.CLIENT_HEADERS = {
-    'User-Agent': navigator.userAgent + ' idonate-sdk@1.0.16',
+    'User-Agent': navigator.userAgent + ` idonate-sdk@${package_json_1.default.version}`,
     'Content-Type': 'application/json',
 };

package/dist/idonate-client.d.ts

@@ -1,4 +1,4 @@
-import { ClientOptions, CreatePaymentMethodRequest, CreatePaymentMethodResult, CreateDonationRequest, CreateDonationResult, TokenizeApplePayResult } from './types';
+import { ClientOptions, Contact, Address, CreatePaymentMethodRequest, CreatePaymentMethodResult, CreateDonationRequest, CreateDonationResult, TokenizeApplePayResult } from './types';
 import ConfigHandler from './config-handler';
 import { Tokenizer, PaymentMethodType, PaymentGateway, TokenizerContainer } from './tokenize';
 export default class iDonateClient {
@@ -20,5 +20,9 @@ export default class iDonateClient {
     waitForDonationResult(donationId: string, afterEachCheck?: () => void): Promise<any>;
     tokenizeCardConnectApplePay(applePayRequest: Partial<ApplePayJS.ApplePayPaymentRequest>): Promise<TokenizeApplePayResult>;
     createTokenizer(gateway: PaymentGateway, container: TokenizerContainer): Promise<Tokenizer>;
+    tokenizeSpreedlyPayPal(data: {
+        contact: Contact;
+        address: Address;
+    }): Promise<string>;
     selectGateway(availableGateways: PaymentGateway[], paymentType: PaymentMethodType, preferredGatewayId?: string): PaymentGateway | undefined;
 }

package/dist/idonate-client.js

@@ -51,6 +51,7 @@ const constants_1 = require("./constants");
 const util_1 = require("./util");
 const apple_pay_1 = __importDefault(require("./apple-pay"));
 const config_handler_1 = __importDefault(require("./config-handler"));
+const SpreedlyTokenizer_1 = require("./tokenize/SpreedlyTokenizer");
 const shared = __importStar(require("./shared"));
 const uuid_1 = require("uuid");
 const cloudflare_challenge_handler_1 = require("./cloudflare-challenge-handler");
@@ -275,9 +276,13 @@ class iDonateClient {
             return tokenize_1.Tokenizer.create(gateway, container, {
                 organizationId: this.organizationId,
                 embedId: this.embedId,
+                clientConfig: this.config,
             });
         });
     }
+    tokenizeSpreedlyPayPal(data) {
+        return SpreedlyTokenizer_1.SpreedlyTokenizer.tokenizePayPal(data, this.config);
+    }
     selectGateway(availableGateways, paymentType, preferredGatewayId) {
         if (preferredGatewayId) {
             const preferred = availableGateways.find((g) => g.id === preferredGatewayId);

package/dist/tokenize/CardConnectTokenizer.d.ts

@@ -5,6 +5,7 @@ import ConfigHandler from '../config-handler';
 export declare class CardConnectTokenizer extends Tokenizer {
     private iframeUrl;
     private containerId;
+    private layout;
     private iframe;
     private messageHandler?;
     private expectedOrigin;
@@ -16,10 +17,14 @@ export declare class CardConnectTokenizer extends Tokenizer {
     private accountTypeEl?;
     private enableTestMode;
     private cachedTokenResult?;
+    private tokenizationPromise?;
+    private tokenizationResolve?;
+    private tokenizationReject?;
     private constructor();
-    static create(gateway: PaymentGateway, container: TokenizerContainer, config?: {
+    static create(gateway: PaymentGateway, container: TokenizerContainer, config: {
         organizationId: string;
         embedId: string;
+        clientConfig: ConfigHandler;
     }): Promise<CardConnectTokenizer>;
     private createInternalElements;
     private createCreditCardFields;
@@ -34,6 +39,9 @@ export declare class CardConnectTokenizer extends Tokenizer {
     clear(): void;
     focus(field: 'cardNumber' | 'cvv' | 'expiry' | 'routingNumber' | 'accountNumber'): void;
     destroy(): void;
+    hasToken(): boolean;
+    getToken(): PaymentToken | null;
+    get tokenizationMode(): 'auto' | 'manual';
     private handleMessage;
     private handleValidationMessage;
     private static generateIframeUrl;

package/dist/tokenize/CardConnectTokenizer.js

@@ -20,10 +20,11 @@ const styles_1 = require("./styles");
 const tokenizer_constants_1 = require("./tokenizer-constants");
 const tokenizer_utils_1 = require("./tokenizer-utils");
 class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
-    constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false) {
+    constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false, layout = 'single-line') {
         super();
         this.iframeUrl = iframeUrl;
         this.containerId = containerId;
+        this.layout = layout;
         this.isReady = false;
         this.enableTestMode = false;
         this.mode = mode;
@@ -44,14 +45,12 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             if (container.mode === 'bank_account' && container.bankCountry === 'CA') {
                 throw new Error('CardConnect does not support Canadian bank accounts');
             }
-            const baseUrl = (_a = gateway.config) === null || _a === void 0 ? void 0 : _a.base_url;
-            if (!baseUrl) {
-                throw new Error('CardConnect base URL not configured');
-            }
+            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 iframe = CardConnectTokenizer.createIframe(iframeUrl, mergedStyles);
-            const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false);
+            const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false, container.layout || 'single-line');
             tokenizer.createInternalElements(container);
             yield tokenizer.init();
             return tokenizer;
@@ -64,7 +63,7 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         }
         this.containerEl = containerEl;
         containerEl.innerHTML = '';
-        const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
+        const mergedStyles = (0, styles_1.getContainerStylesForLayout)((0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling), this.layout);
         Object.assign(containerEl.style, mergedStyles.container);
         if (this.mode === 'bank_account') {
             this.createBankAccountFields(containerEl, mergedStyles);
@@ -75,34 +74,67 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
     }
     createCreditCardFields(containerEl, mergedStyles) {
         this.iframe.style.width = '100%';
-        this.iframe.style.height = mergedStyles.input.height || '40px';
+        if (this.layout === 'two-line') {
+            const inputHeight = mergedStyles.input.height || '40px';
+            const rowGap = mergedStyles.container.rowGap || '1rem';
+            this.iframe.style.height = `calc((${inputHeight}) * 2 + ${rowGap})`;
+        }
+        else {
+            this.iframe.style.height = mergedStyles.input.height || '40px';
+        }
         this.iframe.style.border = 'none';
         this.iframe.style.display = 'block';
         containerEl.appendChild(this.iframe);
     }
     createBankAccountFields(containerEl, mergedStyles) {
         this.iframe.style.display = 'none';
-        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, mergedStyles, 'left');
-        containerEl.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, mergedStyles, 'middle');
-        containerEl.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, mergedStyles, 'right');
-        containerEl.appendChild(this.accountTypeEl);
+        if (this.layout === 'two-line') {
+            this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
+            Object.assign(this.accountTypeEl.style, {
+                flex: '1',
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
+            });
+            this.applyInputStyles(this.accountTypeEl, mergedStyles, 'left');
+            containerEl.appendChild(this.accountTypeEl);
+            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            Object.assign(this.routingNumberEl.style, {
+                flex: '1',
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
+            });
+            this.applyInputStyles(this.routingNumberEl, mergedStyles, 'right');
+            containerEl.appendChild(this.routingNumberEl);
+            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            Object.assign(this.accountNumberEl.style, {
+                flex: '1',
+                flexBasis: '100%',
+                minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
+            });
+            this.applyInputStyles(this.accountNumberEl, mergedStyles);
+            containerEl.appendChild(this.accountNumberEl);
+        }
+        else {
+            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, mergedStyles, 'left');
+            containerEl.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, mergedStyles, 'middle');
+            containerEl.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, mergedStyles, 'right');
+            containerEl.appendChild(this.accountTypeEl);
+        }
     }
     init() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -142,7 +174,6 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                     clearTimeout(timeout);
                     this.isReady = true;
                     if (this.enableTestMode && this.mode === 'credit_card') {
-                        console.log('CardConnect test mode enabled - manual entry required for card fields');
                     }
                     this.emit('ready');
                     resolve();
@@ -159,6 +190,12 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             if (!this.isReady) {
                 throw new Error('Tokenizer not initialized');
             }
+            if (this.mode === 'credit_card' && this.hasToken()) {
+                const cachedToken = this.getToken();
+                if (cachedToken) {
+                    return cachedToken;
+                }
+            }
             if (this.mode === 'bank_account' || this.isBankAccountData(paymentData)) {
                 return this.tokenizeBankAccountInternal(paymentData);
             }
@@ -177,27 +214,25 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                     provider: 'cardconnect',
                 };
             }
-            return new Promise((resolve, reject) => {
+            if (this.tokenizationPromise) {
+                return this.tokenizationPromise;
+            }
+            this.tokenizationPromise = new Promise((resolve, reject) => {
+                this.tokenizationResolve = resolve;
+                this.tokenizationReject = reject;
                 const timeout = setTimeout(() => {
+                    this.tokenizationPromise = undefined;
+                    this.tokenizationResolve = undefined;
+                    this.tokenizationReject = undefined;
                     reject(new types_1.TokenizationError('Tokenization timeout - ensure all card fields are filled in iframe', 'TIMEOUT'));
                 }, tokenizer_constants_1.TOKENIZE_TIMEOUT);
                 const tokenizationHandler = (data) => {
                     clearTimeout(timeout);
                     this.off('tokenization', tokenizationHandler);
-                    if (data.errorCode === '0') {
-                        resolve({
-                            token: data.token,
-                            lastFour: data.token.slice(-4),
-                            cardType: this.normalizeCardType('unknown'),
-                            provider: 'cardconnect',
-                        });
-                    }
-                    else {
-                        reject(new types_1.TokenizationError(data.errorMessage || 'Tokenization failed', data.errorCode || 'UNKNOWN'));
-                    }
                 };
                 this.on('tokenization', tokenizationHandler);
             });
+            return this.tokenizationPromise;
         });
     }
     tokenizeBankAccountInternal(bankData) {
@@ -245,28 +280,64 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
     validateCardInternal() {
         return __awaiter(this, void 0, void 0, function* () {
             const errors = [];
-            if (this.currentValidationState.cardNumber &&
-                !this.currentValidationState.cardNumber.isValid &&
-                !this.currentValidationState.cardNumber.isEmpty) {
+            if (this.currentValidationState.cardNumber) {
+                if (this.currentValidationState.cardNumber.isEmpty) {
+                    errors.push({
+                        field: 'cardNumber',
+                        message: 'Card number is required',
+                    });
+                }
+                else if (!this.currentValidationState.cardNumber.isValid) {
+                    errors.push({
+                        field: 'cardNumber',
+                        message: 'Invalid card number',
+                    });
+                }
+            }
+            else {
                 errors.push({
                     field: 'cardNumber',
-                    message: 'Invalid card number',
+                    message: 'Card number is required',
                 });
             }
-            if (this.currentValidationState.expiry &&
-                !this.currentValidationState.expiry.isValid &&
-                !this.currentValidationState.expiry.isEmpty) {
+            if (this.currentValidationState.expiry) {
+                if (this.currentValidationState.expiry.isEmpty) {
+                    errors.push({
+                        field: 'expiry',
+                        message: 'Expiry date is required',
+                    });
+                }
+                else if (!this.currentValidationState.expiry.isValid) {
+                    errors.push({
+                        field: 'expiry',
+                        message: 'Invalid expiry date',
+                    });
+                }
+            }
+            else {
                 errors.push({
                     field: 'expiry',
-                    message: 'Invalid expiry date',
+                    message: 'Expiry date is required',
                 });
             }
-            if (this.currentValidationState.cvv &&
-                !this.currentValidationState.cvv.isValid &&
-                !this.currentValidationState.cvv.isEmpty) {
+            if (this.currentValidationState.cvv) {
+                if (this.currentValidationState.cvv.isEmpty) {
+                    errors.push({
+                        field: 'cvv',
+                        message: 'CVV is required',
+                    });
+                }
+                else if (!this.currentValidationState.cvv.isValid) {
+                    errors.push({
+                        field: 'cvv',
+                        message: 'Invalid CVV',
+                    });
+                }
+            }
+            else {
                 errors.push({
                     field: 'cvv',
-                    message: 'Invalid CVV',
+                    message: 'CVV is required',
                 });
             }
             return {
@@ -369,12 +440,66 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         }
         this.eventHandlers.clear();
     }
+    hasToken() {
+        var _a, _b;
+        if (this.mode === 'credit_card') {
+            return (((_a = this.cachedTokenResult) === null || _a === void 0 ? void 0 : _a.errorCode) === '0' &&
+                !!((_b = this.cachedTokenResult) === null || _b === void 0 ? void 0 : _b.token));
+        }
+        return false;
+    }
+    getToken() {
+        var _a;
+        if (this.mode === 'credit_card' &&
+            ((_a = this.cachedTokenResult) === null || _a === void 0 ? void 0 : _a.errorCode) === '0') {
+            return {
+                token: this.cachedTokenResult.token,
+                lastFour: this.cachedTokenResult.token.slice(-4),
+                cardType: this.normalizeCardType('unknown'),
+                provider: 'cardconnect',
+            };
+        }
+        return null;
+    }
+    get tokenizationMode() {
+        return this.mode === 'credit_card' ? 'auto' : 'manual';
+    }
     handleMessage(event) {
         try {
             const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
             if (data.token && data.errorCode !== undefined) {
                 this.cachedTokenResult = data;
                 this.emit('tokenization', data);
+                if (data.errorCode === '0') {
+                    const token = {
+                        token: data.token,
+                        lastFour: data.token.slice(-4),
+                        cardType: this.normalizeCardType('unknown'),
+                        provider: 'cardconnect',
+                    };
+                    if (this.tokenizationResolve) {
+                        this.tokenizationResolve(token);
+                        this.tokenizationPromise = undefined;
+                        this.tokenizationResolve = undefined;
+                        this.tokenizationReject = undefined;
+                    }
+                    this.currentValidationState = {
+                        isValid: true,
+                        cardNumber: { isValid: true, isEmpty: false },
+                        cvv: { isValid: true, isEmpty: false },
+                        expiry: { isValid: true, isEmpty: false },
+                    };
+                    this.emit('validation', { isValid: true });
+                    this.emit('tokenReady', token);
+                }
+                else {
+                    if (this.tokenizationReject) {
+                        this.tokenizationReject(new types_1.TokenizationError(data.errorMessage || 'Tokenization failed', data.errorCode || 'UNKNOWN'));
+                        this.tokenizationPromise = undefined;
+                        this.tokenizationResolve = undefined;
+                        this.tokenizationReject = undefined;
+                    }
+                }
             }
             if (data.event === 'validation' || data.validationError !== undefined) {
                 this.handleValidationMessage(data);
@@ -397,38 +522,23 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                 this.currentValidationState.cardNumber = {
                     isValid: false,
                     isEmpty: false,
-                    error: data.validationError,
                 };
             }
             else if (errorLower.includes('cvv') ||
                 errorLower.includes('security')) {
-                this.currentValidationState.cvv = {
-                    isValid: false,
-                    isEmpty: false,
-                    error: data.validationError,
-                };
+                this.currentValidationState.cvv = { isValid: false, isEmpty: false };
             }
             else if (errorLower.includes('expir') ||
-                errorLower.includes('exp') ||
                 errorLower.includes('month') ||
                 errorLower.includes('year')) {
-                this.currentValidationState.expiry = {
-                    isValid: false,
-                    isEmpty: false,
-                    error: data.validationError,
-                };
+                this.currentValidationState.expiry = { isValid: false, isEmpty: false };
             }
-        }
-        else if (data.event === 'validation') {
+            this.emit('error', new types_1.TokenizationError(data.validationError));
         }
         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.emit('validation', this.currentValidationState);
-        if (data.validationError) {
-            this.emit('error', new types_1.TokenizationError(data.validationError));
-        }
     }
     static generateIframeUrl(baseUrl, container) {
         const params = new URLSearchParams({
@@ -436,20 +546,28 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             enhancedresponse: 'true',
             useexpiry: 'true',
             usecvv: 'true',
-            orientation: 'horizontal',
             formatinput: 'true',
             unique: 'true',
             norsa: 'true',
             placeholder: 'Card Number *',
-            placeholdermonth: 'MM',
-            placeholderyear: 'YYYY',
             placeholdercvv: 'CVV',
             invalidcreditcardevent: 'true',
             invalidexpiry: 'true',
             invalidcvv: 'true',
         });
+        if (container.layout === 'two-line') {
+            params.set('useexpiryfield', 'true');
+            params.set('orientation', 'horizontal');
+            params.set('placeholdermonth', 'MM');
+            params.set('placeholderyear', 'YYYY');
+        }
+        else {
+            params.set('orientation', 'horizontal');
+            params.set('placeholdermonth', 'MM');
+            params.set('placeholderyear', 'YYYY');
+        }
         const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
-        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles);
+        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, container.layout || 'single-line');
         const queryPairs = [];
         params.forEach((value, key) => {
             queryPairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
@@ -482,13 +600,20 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
         return iframe;
     }
-    static generateCardConnectCss(styles) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    static generateCardConnectCss(styles, layout = 'single-line') {
+        var _a, _b, _c;
         const css = [];
-        css.push('body{margin:0;padding:0;display:flex;align-items:center;}');
-        css.push('form{margin:0;padding:0;display:flex;width:100%;align-items:center;}');
-        css.push('label{display:none;}');
-        css.push('br{display:none;}');
+        if (layout === 'two-line') {
+            css.push('html,form,body{margin:0;padding:0;}');
+            css.push('label{display:none;}');
+            css.push('br{display:none;}');
+        }
+        else {
+            css.push('body{margin:0;padding:0;display:flex;align-items:center;}');
+            css.push('form{margin:0;padding:0;display:flex;width:100%;align-items:center;}');
+            css.push('label{display:none;}');
+            css.push('br{display:none;}');
+        }
         const isConnected = styles.container.gap === '0';
         const gap = isConnected ? '0' : styles.container.gap || '1rem';
         if (styles.input) {
@@ -512,73 +637,41 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             css.push(`input{${baseStyles};}`);
             css.push(`select{${baseStyles};}`);
         }
-        if (isConnected) {
-            const cardNumStyles = ['width:60%', 'margin:0'];
+        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) {
-                cardNumStyles.push(`border-radius:${styles.input.borderRadius} 0 0 ${styles.input.borderRadius}`);
-            }
-            cardNumStyles.push('border-right:none');
-            css.push(`input#ccnumfield{${cardNumStyles.join(';')};}`);
-            const monthStyles = [
-                'width:10%',
-                'margin:0',
-                'margin-right:-12px',
-                'border-radius:0',
-                `border-left:${((_b = styles.input) === null || _b === void 0 ? void 0 : _b.border) || '1px solid #ccc'}`,
-                'border-right:none',
-            ];
-            css.push(`select#ccexpirymonth{${monthStyles.join(';')};}`);
-            const yearStyles = [
-                'width:10%',
-                'border-radius:0',
-                `border-left:${((_c = styles.input) === null || _c === void 0 ? void 0 : _c.border) || '1px solid #ccc'}`,
-                'border-right:none',
-            ];
-            css.push(`select#ccexpiryyear{${yearStyles.join(';')};}`);
-            const cvvStyles = [
-                'width:20%',
-                'margin:0',
-                'margin-left:-12px',
-            ];
-            if ((_d = styles.input) === null || _d === void 0 ? void 0 : _d.borderRadius) {
-                cvvStyles.push(`border-radius:0 ${styles.input.borderRadius} ${styles.input.borderRadius} 0`);
-            }
-            cvvStyles.push(`border-left:${((_e = styles.input) === null || _e === void 0 ? void 0 : _e.border) || '1px solid #ccc'}`);
-            css.push(`input#cccvvfield{${cvvStyles.join(';')};}`);
+                css.push(`input{border-radius:${styles.input.borderRadius};}`);
+            }
+        }
+        else if (isConnected) {
+            css.push('input#ccnumfield{width:60%;margin:0;}');
+            css.push('select#ccexpirymonth{width:10%;margin:0;margin-right:-12px;}');
+            css.push('select#ccexpiryyear{width:10%;}');
+            css.push('input#cccvvfield{width:20%;margin:0;margin-left:-12px;}');
+            if ((_b = styles.input) === null || _b === void 0 ? void 0 : _b.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;}');
+                css.push(`input#cccvvfield{border-radius:0 ${styles.input.borderRadius} ${styles.input.borderRadius} 0;}`);
+            }
+            else {
+                css.push('input#ccnumfield{border-right:none;}');
+                css.push('select#ccexpirymonth{border-right:none;}');
+                css.push('select#ccexpiryyear{border-right:none;}');
+            }
         }
         else {
-            const gapValue = gap.replace(/[^\d.]/g, '');
-            const gapUnit = gap.replace(/[\d.]/g, '');
-            const halfGapValue = parseFloat(gapValue) / 2;
-            const cardNumStyles = [
-                `width:calc(60% - ${gapValue}${gapUnit})`,
-                `margin-right:${gap}`,
-            ];
-            if ((_f = styles.input) === null || _f === void 0 ? void 0 : _f.borderRadius) {
-                cardNumStyles.push(`border-radius:${styles.input.borderRadius}`);
-            }
-            css.push(`input#ccnumfield{${cardNumStyles.join(';')};}`);
-            const monthStyles = [
-                `width:calc(10% - ${halfGapValue}${gapUnit})`,
-                `margin-right:calc(${gap} / 2)`,
-            ];
-            if ((_g = styles.input) === null || _g === void 0 ? void 0 : _g.borderRadius) {
-                monthStyles.push(`border-radius:${styles.input.borderRadius}`);
-            }
-            css.push(`select#ccexpirymonth{${monthStyles.join(';')};}`);
-            const yearStyles = [
-                `width:calc(10% - ${halfGapValue}${gapUnit})`,
-                `margin-right:${gap}`,
-            ];
-            if ((_h = styles.input) === null || _h === void 0 ? void 0 : _h.borderRadius) {
-                yearStyles.push(`border-radius:${styles.input.borderRadius}`);
-            }
-            css.push(`select#ccexpiryyear{${yearStyles.join(';')};}`);
-            const cvvStyles = ['width:20%'];
-            if ((_j = styles.input) === null || _j === void 0 ? void 0 : _j.borderRadius) {
-                cvvStyles.push(`border-radius:${styles.input.borderRadius}`);
-            }
-            css.push(`input#cccvvfield{${cvvStyles.join(';')};}`);
+            const marginRight = gap === '0' ? '0' : '8px';
+            css.push(`input#ccnumfield{width:60%;margin-right:${marginRight};}`);
+            css.push(`select#ccexpirymonth{width:10%;margin-right:${marginRight};}`);
+            css.push(`select#ccexpiryyear{width:10%;margin-right:${marginRight};}`);
+            css.push('input#cccvvfield{width:20%;}');
+            if ((_c = styles.input) === null || _c === void 0 ? void 0 : _c.borderRadius) {
+                css.push(`input,select{border-radius:${styles.input.borderRadius};}`);
+            }
         }
         if (styles.focus) {
             const focusStyles = [];