@idonatedev/idonate-sdk 1.2.0-dev18 → 1.2.0-dev19

package/dist/esm/tokenize/styles.js

@@ -32,17 +32,30 @@ export const DEFAULT_UNIFIED_STYLES = {
         fontSize: '',
         textAlign: '',
     },
+    label: {
+        show: false,
+        fontSize: '0.875rem',
+        fontWeight: 'bold',
+        fontFamily: '',
+        color: '#333',
+        marginBottom: '0.25rem',
+    },
 };
 export function mergeStyles(defaults, userStyles) {
     if (!userStyles)
         return defaults;
-    return {
+    const merged = {
         input: Object.assign(Object.assign({}, defaults.input), userStyles.input),
         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),
+        label: Object.assign(Object.assign({}, defaults.label), userStyles.label),
     };
+    if (!merged.label.fontFamily) {
+        merged.label.fontFamily = merged.input.fontFamily;
+    }
+    return merged;
 }
 export function getContainerStylesForLayout(baseStyles, layout = 'single-line') {
     if (layout === 'two-line') {

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

@@ -7,6 +7,8 @@ export declare function formatExpiryInput(value: string): string;
 export declare function withTimeout<T>(promise: Promise<T>, timeoutMs: number, errorMessage: string): Promise<T>;
 export declare function getConnectedBorderRadius(baseRadius: string, position: 'left' | 'middle' | 'right', isConnected: boolean): string;
 export declare function addFocusHandlers(element: HTMLElement, styles: TokenizerStylingComplete, position?: 'left' | 'middle' | 'right', onFocus?: () => void, onBlur?: () => void): void;
+export declare function createFieldLabel(text: string, forId: string, styles: TokenizerStylingComplete): HTMLLabelElement;
+export declare function wrapFieldWithLabel(field: HTMLElement, labelText: string, styles: TokenizerStylingComplete): HTMLElement;
 export declare function createFieldContainer(id: string, flex: string, minWidth?: string, maxWidth?: string): HTMLDivElement;
 export declare function createInputElement(id: string, type: string, placeholder: string, maxLength?: number): HTMLInputElement;
 export declare function validateRoutingNumber(routingNumber: string): boolean;
@@ -17,3 +19,4 @@ export declare function validateInstitutionNumber(institutionNumber: string): bo
 export declare function validateTransitNumber(transitNumber: string): boolean;
 export declare function validateCanadianAccountNumber(accountNumber: string): boolean;
 export declare function formatCanadianRoutingNumber(institutionNumber: string, transitNumber: string): string;
+export declare function cssLengthToPixels(value: string): number;

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

@@ -74,6 +74,43 @@ export function addFocusHandlers(element, styles, position, onFocus, onBlur) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
     });
 }
+export function createFieldLabel(text, forId, styles) {
+    const label = document.createElement('label');
+    label.htmlFor = forId;
+    label.textContent = text;
+    label.style.display = styles.label.show ? 'block' : 'none';
+    label.style.fontSize = styles.label.fontSize;
+    label.style.fontWeight = styles.label.fontWeight;
+    label.style.fontFamily = styles.label.fontFamily;
+    label.style.color = styles.label.color;
+    label.style.marginBottom = styles.label.marginBottom;
+    return label;
+}
+export function wrapFieldWithLabel(field, labelText, styles) {
+    if (!styles.label.show)
+        return field;
+    const wrapper = document.createElement('div');
+    wrapper.style.display = 'flex';
+    wrapper.style.flexDirection = 'column';
+    if (field.style.flex) {
+        wrapper.style.flex = field.style.flex;
+        field.style.flex = '';
+    }
+    if (field.style.minWidth) {
+        wrapper.style.minWidth = field.style.minWidth;
+    }
+    if (field.style.maxWidth) {
+        wrapper.style.maxWidth = field.style.maxWidth;
+    }
+    if (field.style.flexBasis) {
+        wrapper.style.flexBasis = field.style.flexBasis;
+        field.style.flexBasis = '';
+    }
+    const label = createFieldLabel(labelText, field.id, styles);
+    wrapper.appendChild(label);
+    wrapper.appendChild(field);
+    return wrapper;
+}
 export function createFieldContainer(id, flex, minWidth, maxWidth) {
     const div = document.createElement('div');
     div.id = id;
@@ -158,3 +195,19 @@ export function formatCanadianRoutingNumber(institutionNumber, transitNumber) {
     const transit = transitNumber.replace(/\D/g, '').padStart(5, '0');
     return '0' + institution + transit;
 }
+export function cssLengthToPixels(value) {
+    const num = parseFloat(value);
+    if (isNaN(num)) {
+        console.warn(`[cssLengthToPixels] Cannot parse "${value}", defaulting to 14px`);
+        return 14;
+    }
+    if (value.endsWith('rem'))
+        return num * 16;
+    if (value.endsWith('pt'))
+        return num * 1.333;
+    if (value.endsWith('px') || !value.match(/[a-z%]/i))
+        return num;
+    console.warn(`[cssLengthToPixels] Unsupported unit in "${value}". ` +
+        `Only px, rem, and pt are supported. Using ${num}px as approximation.`);
+    return num;
+}

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

@@ -21,6 +21,15 @@ export interface TokenizerContainer {
     enableTestMode?: boolean;
     layout?: 'single-line' | 'two-line' | 'responsive';
     responsiveBreakpoint?: number;
+    placeholders?: {
+        cardNumber?: string;
+        expiry?: string;
+        expiryMonth?: string;
+        expiryYear?: string;
+        cvv?: string;
+        routingNumber?: string;
+        accountNumber?: string;
+    };
 }
 export interface TokenizerStylingComplete {
     input: {
@@ -59,6 +68,14 @@ export interface TokenizerStylingComplete {
         fontSize: string;
         textAlign: string;
     };
+    label: {
+        show: boolean;
+        fontSize: string;
+        fontWeight: string;
+        fontFamily: string;
+        color: string;
+        marginBottom: string;
+    };
 }
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;

package/dist/tokenize/CardConnectTokenizer.d.ts

@@ -6,6 +6,7 @@ export declare class CardConnectTokenizer extends Tokenizer {
     private iframeUrl;
     private containerId;
     private layout;
+    private customPlaceholders?;
     private iframe;
     private messageHandler?;
     private expectedOrigin;
@@ -49,6 +50,7 @@ export declare class CardConnectTokenizer extends Tokenizer {
     get tokenizationMode(): 'auto' | 'manual';
     private handleMessage;
     private handleValidationMessage;
+    private static measureCvvLabelMarginLeft;
     private static generateIframeUrl;
     private static createIframe;
     private static generateCardConnectCss;

package/dist/tokenize/CardConnectTokenizer.js

@@ -16,11 +16,12 @@ 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, layout = 'single-line') {
+    constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false, layout = 'single-line', customPlaceholders) {
         super();
         this.iframeUrl = iframeUrl;
         this.containerId = containerId;
         this.layout = layout;
+        this.customPlaceholders = customPlaceholders;
         this.enableTestMode = false;
         this.acceptAutoToken = true;
         this.mode = mode;
@@ -57,7 +58,7 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
             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, effectiveLayout);
+            const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false, effectiveLayout, container.placeholders);
             tokenizer.createInternalElements(resolvedContainer);
             yield tokenizer.init();
             return tokenizer;
@@ -80,19 +81,32 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         }
     }
     createCreditCardFields(containerEl, mergedStyles) {
+        var _a;
         this.iframe.style.width = '100%';
+        const hasLabels = ((_a = mergedStyles.label) === null || _a === void 0 ? void 0 : _a.show) &&
+            (this.layout === 'two-line' || this.layout === 'responsive');
+        const inputHeight = mergedStyles.input.height || '40px';
         if (this.layout === 'two-line' || this.layout === 'responsive') {
-            const inputHeight = mergedStyles.input.height || '40px';
-            this.iframe.style.height = `calc((${inputHeight}) * 2 + 10px)`;
+            if (hasLabels) {
+                const labelFontPx = (0, tokenizer_utils_1.cssLengthToPixels)(mergedStyles.label.fontSize);
+                const labelMarginPx = parseFloat(mergedStyles.label.marginBottom) || 0;
+                const labelRowHeight = Math.ceil(labelFontPx * 1.2) + labelMarginPx;
+                const extraHeight = Math.ceil(labelRowHeight * 2) + 34;
+                this.iframe.style.height = `calc(${inputHeight} * 2 + ${extraHeight}px)`;
+            }
+            else {
+                this.iframe.style.height = `calc((${inputHeight}) * 2 + 10px)`;
+            }
         }
         else {
-            this.iframe.style.height = mergedStyles.input.height || '40px';
+            this.iframe.style.height = inputHeight;
         }
         this.iframe.style.border = 'none';
         this.iframe.style.display = 'block';
         containerEl.appendChild(this.iframe);
     }
     createBankAccountFields(containerEl, mergedStyles) {
+        var _a, _b, _c, _d;
         this.iframe.style.display = 'none';
         if (this.layout === 'two-line') {
             this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
@@ -101,45 +115,45 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                 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);
+            containerEl.appendChild((0, tokenizer_utils_1.wrapFieldWithLabel)(this.accountTypeEl, 'Account Type', mergedStyles));
+            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.routingNumber) || '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);
+            containerEl.appendChild((0, tokenizer_utils_1.wrapFieldWithLabel)(this.routingNumberEl, 'Routing Number', mergedStyles));
+            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.accountNumber) || '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);
+            containerEl.appendChild((0, tokenizer_utils_1.wrapFieldWithLabel)(this.accountNumberEl, 'Account Number', mergedStyles));
         }
         else {
-            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', ((_c = this.customPlaceholders) === null || _c === void 0 ? void 0 : _c.routingNumber) || '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);
+            containerEl.appendChild((0, tokenizer_utils_1.wrapFieldWithLabel)(this.routingNumberEl, 'Routing Number', mergedStyles));
+            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', ((_d = this.customPlaceholders) === null || _d === void 0 ? void 0 : _d.accountNumber) || '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);
+            containerEl.appendChild((0, tokenizer_utils_1.wrapFieldWithLabel)(this.accountNumberEl, 'Account Number', mergedStyles));
             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);
+            containerEl.appendChild((0, tokenizer_utils_1.wrapFieldWithLabel)(this.accountTypeEl, 'Account Type', mergedStyles));
         }
         this.mergedStyles = mergedStyles;
         this.currentValidationState = {
@@ -237,8 +251,6 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
                 window.addEventListener('message', this.messageHandler);
                 this.iframe.onload = () => {
                     clearTimeout(timeout);
-                    if (this.enableTestMode && this.mode === 'credit_card') {
-                    }
                     this.emit('ready');
                     resolve();
                 };
@@ -684,7 +696,34 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             this.emit('validation', this.currentValidationState);
         }
     }
+    static measureCvvLabelMarginLeft(monthWidth, yearWidth, cvvMarginLeft) {
+        var _a;
+        const targetCvvX = monthWidth + 4 + 4 + yearWidth + 12 + cvvMarginLeft;
+        const host = document.createElement('div');
+        host.style.cssText =
+            'position:absolute;visibility:hidden;left:0;top:0;width:9999px;height:0;overflow:hidden;';
+        document.body.appendChild(host);
+        const shadow = host.attachShadow({ mode: 'open' });
+        shadow.innerHTML = [
+            '<input type="text" size="2" style="margin-right:4px">',
+            '<label>/</label>',
+            '<input type="text" size="4" style="margin-left:4px;margin-right:12px">',
+            '<input type="tel" size="5">',
+        ].join('');
+        const inputs = shadow.querySelectorAll('input');
+        const hostX = host.getBoundingClientRect().x;
+        const cvvRect = (_a = inputs[2]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const defaultCvvX = cvvRect ? cvvRect.x - hostX : -1;
+        document.body.removeChild(host);
+        if (defaultCvvX <= 0 || defaultCvvX > 500) {
+            console.warn('[CardConnect] CVV measurement out of range, using fallback margin-left:100px');
+            return 100;
+        }
+        const predictedLabelLeft = defaultCvvX + 8;
+        return Math.round(targetCvvX - predictedLabelLeft);
+    }
     static generateIframeUrl(baseUrl, container) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const params = new URLSearchParams({
             invalidinputevent: 'true',
             enhancedresponse: 'true',
@@ -693,30 +732,46 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
             formatinput: 'true',
             unique: 'true',
             norsa: 'true',
-            placeholder: 'Card Number *',
-            placeholdercvv: 'CVV',
+            placeholder: ((_a = container.placeholders) === null || _a === void 0 ? void 0 : _a.cardNumber) || 'Card Number *',
+            placeholdercvv: ((_b = container.placeholders) === null || _b === void 0 ? void 0 : _b.cvv) || 'CVV',
             invalidcreditcardevent: 'true',
             invalidexpiry: 'true',
             invalidcvv: 'true',
         });
+        const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
+        const showLabelsInUrl = ((_c = mergedStyles.label) === null || _c === void 0 ? void 0 : _c.show) && container.layout === 'two-line';
+        if (showLabelsInUrl) {
+            params.set('cardlabel', 'Card Number');
+            params.set('expirylabel', 'Expiration');
+            params.set('cvvlabel', 'CVV');
+        }
+        else {
+            params.set('cardlabel', '');
+            params.set('expirylabel', '');
+            params.set('cvvlabel', '');
+        }
         if (container.layout === 'two-line') {
             params.set('useexpiryfield', 'true');
             params.set('orientation', 'horizontal');
-            params.set('placeholdermonth', 'MM');
-            params.set('placeholderyear', 'YYYY');
+            params.set('placeholdermonth', ((_d = container.placeholders) === null || _d === void 0 ? void 0 : _d.expiryMonth) || 'MM');
+            params.set('placeholderyear', ((_e = container.placeholders) === null || _e === void 0 ? void 0 : _e.expiryYear) || 'YYYY');
         }
         else {
             params.set('orientation', 'horizontal');
-            params.set('placeholdermonth', 'MM');
-            params.set('placeholderyear', 'YYYY');
+            params.set('placeholdermonth', ((_f = container.placeholders) === null || _f === void 0 ? void 0 : _f.expiryMonth) || 'MM');
+            params.set('placeholderyear', ((_g = container.placeholders) === null || _g === void 0 ? void 0 : _g.expiryYear) || 'YYYY');
         }
-        const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
         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 showLabels = ((_h = mergedStyles.label) === null || _h === void 0 ? void 0 : _h.show) && container.layout === 'two-line';
+        let cvvLabelMarginLeft;
+        if (showLabels && typeof document !== 'undefined') {
+            cvvLabelMarginLeft = CardConnectTokenizer.measureCvvLabelMarginLeft(60, 80, 40);
+        }
+        const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, (container.layout || 'single-line'), isDesktopSafari, cvvLabelMarginLeft);
         const queryPairs = [];
         params.forEach((value, key) => {
             queryPairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
@@ -731,7 +786,7 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         iframe.style.width = '100%';
         iframe.style.height = styles.input.height;
         iframe.style.border = 'none';
-        iframe.style.overflow = 'hidden';
+        iframe.style.overflow = '';
         iframe.style.display = 'block';
         iframe.style.minWidth = '0';
         if (styles.container) {
@@ -749,18 +804,30 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
         return iframe;
     }
-    static generateCardConnectCss(styles, layout = 'single-line', isDesktopSafari = false) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    static generateCardConnectCss(styles, layout = 'single-line', isDesktopSafari = false, cvvLabelMarginLeft) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const css = [];
-        if (layout === 'two-line') {
-            css.push('html,form,body{margin:0;padding:0;}');
+        const showLabelsInIframe = ((_a = styles.label) === null || _a === void 0 ? void 0 : _a.show) && layout === 'two-line';
+        if (showLabelsInIframe) {
+            const labelCss = `font-size:${styles.label.fontSize};font-weight:${styles.label.fontWeight};font-family:${styles.label.fontFamily};color:${styles.label.color};margin-bottom:${styles.label.marginBottom}`;
+            css.push(`label{${labelCss};}`);
+            css.push(`label[for="ccexpiryfieldyear"]{display:none;}`);
+            css.push(`br{line-height:0;font-size:0;margin:0;}`);
+            css.push(`input,select{margin-top:0;margin-bottom:0;}`);
+        }
+        else {
             css.push('label{display:none;}');
-            css.push('br{display:none;}');
+        }
+        if (layout === 'two-line') {
+            css.push('html,body{margin:0;padding:0;overflow:hidden;}');
+            css.push('form{margin:0;padding:0;width:100%;box-sizing:border-box;}');
+            if (!showLabelsInIframe) {
+                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';
@@ -793,13 +860,22 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
         }
         if (layout === 'two-line') {
             css.push('input#ccnumfield{width:100%;display:block;margin-bottom:8px;}');
-            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) {
+            const twoLinePadding = ((_b = styles.twoLine) === null || _b === void 0 ? void 0 : _b.padding) || ((_c = styles.input) === null || _c === void 0 ? void 0 : _c.padding) || '10px';
+            const twoLineFontSize = ((_d = styles.twoLine) === null || _d === void 0 ? void 0 : _d.fontSize) || ((_e = styles.input) === null || _e === void 0 ? void 0 : _e.fontSize) || '14px';
+            const twoLineTextAlign = ((_f = styles.twoLine) === null || _f === void 0 ? void 0 : _f.textAlign) || 'left';
+            if (showLabelsInIframe) {
+                css.push(`input#ccexpiryfieldmonth{width:60px;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                css.push(`input#ccexpiryfieldyear{width:80px;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                css.push(`input#cccvvfield{width:80px;margin-left:40px;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                const labelMargin = cvvLabelMarginLeft !== null && cvvLabelMarginLeft !== void 0 ? cvvLabelMarginLeft : 100;
+                css.push(`label#cccvvlabel{margin-left:${labelMargin}px;}`);
+            }
+            else {
+                css.push(`input#ccexpiryfieldmonth{min-width:4em;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                css.push(`input#ccexpiryfieldyear{min-width:4em;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+                css.push(`input#cccvvfield{min-width:4em;padding:${twoLinePadding};font-size:${twoLineFontSize};text-align:${twoLineTextAlign};}`);
+            }
+            if ((_g = styles.input) === null || _g === void 0 ? void 0 : _g.borderRadius) {
                 css.push(`input{border-radius:${styles.input.borderRadius};}`);
             }
         }
@@ -808,7 +884,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 ((_g = styles.input) === null || _g === void 0 ? void 0 : _g.borderRadius) {
+            if ((_h = styles.input) === null || _h === void 0 ? void 0 : _h.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;}');
@@ -826,7 +902,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 ((_h = styles.input) === null || _h === void 0 ? void 0 : _h.borderRadius) {
+            if ((_j = styles.input) === null || _j === void 0 ? void 0 : _j.borderRadius) {
                 css.push(`input,select{border-radius:${styles.input.borderRadius};}`);
             }
         }
@@ -842,7 +918,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 && ((_j = styles.input) === null || _j === void 0 ? void 0 : _j.border)) {
+                if (isConnected && ((_k = styles.input) === null || _k === void 0 ? void 0 : _k.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/tokenize/SpreedlyTokenizer.d.ts

@@ -6,6 +6,7 @@ export declare class SpreedlyTokenizer extends Tokenizer {
     private environmentKey;
     private containerId;
     private layout;
+    private customPlaceholders?;
     private spreedly;
     private currentValidationState;
     private mergedStyles;
@@ -63,6 +64,7 @@ export declare class SpreedlyTokenizer extends Tokenizer {
     private updateOverallValidation;
     private handleFieldEvent;
     private createInternalElements;
+    private appendField;
     private createCreditCardFields;
     private createBankAccountFields;
     private createUSBankAccountFields;