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

package/dist/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CLIENT_HEADERS = exports.CARD_CONNECT_DEFAULT_STYLE = exports.DEFAULT_APP_NAME = exports.DEFAULT_CF_TURNSTILE_CDN_EXPLICIT_URL = exports.FALLBACK_CF_TURNSTILE_SITE_KEY = exports.FALLBACK_PC_SCRIPT_ID = exports.FALLBACK_PC_SCRIPT_URL = exports.SANDBOX_APPLE_PAY_URL = exports.APPLE_PAY_URL = exports.SPREEDLY_TOKENIZER_URL = exports.SANDBOX_CARD_CONNECT_BASE_URL = exports.PRODUCTION_CARD_CONNECT_BASE_URL = exports.SANDBOX_BASE_URL = exports.PRODUCTION_BASE_URL = exports.SDK_VERSION = void 0;
-exports.SDK_VERSION = '1.2.0-dev17';
+exports.SDK_VERSION = '1.2.0-dev19';
 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';

package/dist/esm/constants.js

@@ -1,4 +1,4 @@
-export const SDK_VERSION = '1.2.0-dev17';
+export const SDK_VERSION = '1.2.0-dev19';
 export const PRODUCTION_BASE_URL = 'https://secure-api.idonate.com';
 export const SANDBOX_BASE_URL = 'https://api.qa-idonate.com';
 export const PRODUCTION_CARD_CONNECT_BASE_URL = 'https://boltgw.cardconnect.com:8443';

package/dist/esm/idonate-client.js

@@ -111,10 +111,10 @@ export default class iDonateClient {
         if (!this.allowTransaction) {
             throw new Error('Wow, that was fast - try again');
         }
-        if (!donation.embedId) {
-            donation.embedId = this.embedId;
-        }
-        const payload = buildCashPaymentPayload(this.organizationId, donation);
+        const donationWithEmbed = donation.embedId
+            ? donation
+            : Object.assign(Object.assign({}, donation), { embedId: this.embedId });
+        const payload = buildCashPaymentPayload(this.organizationId, donationWithEmbed);
         const fetchCall = (clearanceToken) => fetch(`${this.config.embedApiBaseUrl}/donate/cash-payment`, {
             method: 'POST',
             headers: Object.assign(Object.assign(Object.assign({}, CLIENT_HEADERS), (clearanceToken ? { 'cf-validation-token': clearanceToken } : {})), { 'User-Agent': CLIENT_HEADERS['User-Agent'] + ' source:' + this.config.client }),
@@ -142,10 +142,10 @@ export default class iDonateClient {
         });
     }
     createPaymentMethod(paymentMethod) {
-        if (!paymentMethod.embedId) {
-            paymentMethod.embedId = this.embedId;
-        }
-        return shared.createPaymentMethod(paymentMethod, this.config);
+        const pmWithEmbed = paymentMethod.embedId
+            ? paymentMethod
+            : Object.assign(Object.assign({}, paymentMethod), { embedId: this.embedId });
+        return shared.createPaymentMethod(pmWithEmbed, this.config);
     }
     setOrganizationId(organizationId) {
         this.currentOrganizationId = organizationId;
@@ -157,7 +157,16 @@ export default class iDonateClient {
         return new Promise((resolve, reject) => {
             setTimeout(() => {
                 let pollHandle;
+                let attempts = 0;
+                const maxAttempts = 90;
                 pollHandle = setInterval(() => {
+                    attempts++;
+                    if (attempts > maxAttempts) {
+                        clearInterval(pollHandle);
+                        pollHandle = null;
+                        reject(new ClientError('Donation processing timed out. Please check your email for a receipt or contact support.'));
+                        return;
+                    }
                     fetch(`${this.config.embedApiBaseUrl}/donate/cash-payment/${donationId}/payment_status`, {
                         method: 'GET',
                         headers: {
@@ -174,6 +183,7 @@ export default class iDonateClient {
                             }
                             if (response.error) {
                                 reject(new ClientError(response.error));
+                                return;
                             }
                             resolve(buildDonationResult({
                                 _raw_response: Object.assign({ campaign: null, designation: {}, donor: {}, form_data: {}, id: null, schedule: {}, transaction: {} }, response),

package/dist/esm/recaptcha.js

@@ -61,9 +61,16 @@ export class RecaptchaElement {
             this.widgetId = lib.render(this.container, Object.assign(Object.assign({}, this.params), { callback: (token) => {
                     var _a;
                     this.resolvedToken = token;
-                    (_a = this.executeResolveQueue.pop()) === null || _a === void 0 ? void 0 : _a(token);
+                    (_a = this.executeResolveQueue.shift()) === null || _a === void 0 ? void 0 : _a.resolve(token);
                 }, 'expired-callback': () => {
                     this.resolvedToken = undefined;
+                }, 'error-callback': () => {
+                    var _a;
+                    this.resolvedToken = undefined;
+                    const error = new Error('reCAPTCHA encountered an error. Please try again.');
+                    while (this.executeResolveQueue.length > 0) {
+                        (_a = this.executeResolveQueue.shift()) === null || _a === void 0 ? void 0 : _a.reject(error);
+                    }
                 } }));
         });
     }
@@ -77,7 +84,7 @@ export class RecaptchaElement {
                         ? resolve(response)
                         : reject(new Error('checkbox recaptcha is not checked'));
                 }
-                this.executeResolveQueue.push(resolve);
+                this.executeResolveQueue.push({ resolve, reject });
                 if (this.resolvedToken !== undefined) {
                     this.resolvedToken = undefined;
                     lib.reset(this.widgetId);

package/dist/esm/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/esm/tokenize/CardConnectTokenizer.js

@@ -11,13 +11,14 @@ import { Tokenizer } from './Tokenizer';
 import { TokenizationError, } from './types';
 import { DEFAULT_UNIFIED_STYLES, mergeStyles, getContainerStylesForLayout, } from './styles';
 import { INIT_TIMEOUT, TOKENIZE_TIMEOUT, BANK_FIELD_FLEX, RESPONSIVE_BREAKPOINT, } from './tokenizer-constants';
-import { createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, } from './tokenizer-utils';
+import { createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, wrapFieldWithLabel, cssLengthToPixels, } from './tokenizer-utils';
 export class CardConnectTokenizer extends 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;
@@ -54,7 +55,7 @@ export class CardConnectTokenizer extends Tokenizer {
             const mergedStyles = mergeStyles(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;
@@ -77,19 +78,32 @@ export class CardConnectTokenizer extends 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 = 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 = createAccountTypeSelect(`${this.containerId}-account-type`);
@@ -98,45 +112,45 @@ export class CardConnectTokenizer extends Tokenizer {
                 minWidth: BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, mergedStyles, 'left');
-            containerEl.appendChild(this.accountTypeEl);
-            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            containerEl.appendChild(wrapFieldWithLabel(this.accountTypeEl, 'Account Type', mergedStyles));
+            this.routingNumberEl = 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: BANK_FIELD_FLEX.routingNumber.minWidth,
             });
             this.applyInputStyles(this.routingNumberEl, mergedStyles, 'right');
-            containerEl.appendChild(this.routingNumberEl);
-            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            containerEl.appendChild(wrapFieldWithLabel(this.routingNumberEl, 'Routing Number', mergedStyles));
+            this.accountNumberEl = 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: BANK_FIELD_FLEX.accountNumber.minWidth,
             });
             this.applyInputStyles(this.accountNumberEl, mergedStyles);
-            containerEl.appendChild(this.accountNumberEl);
+            containerEl.appendChild(wrapFieldWithLabel(this.accountNumberEl, 'Account Number', mergedStyles));
         }
         else {
-            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', ((_c = this.customPlaceholders) === null || _c === void 0 ? void 0 : _c.routingNumber) || 'Routing *', 9);
             Object.assign(this.routingNumberEl.style, {
                 flex: BANK_FIELD_FLEX.routingNumber.flex,
                 minWidth: BANK_FIELD_FLEX.routingNumber.minWidth,
             });
             this.applyInputStyles(this.routingNumberEl, mergedStyles, 'left');
-            containerEl.appendChild(this.routingNumberEl);
-            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            containerEl.appendChild(wrapFieldWithLabel(this.routingNumberEl, 'Routing Number', mergedStyles));
+            this.accountNumberEl = 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: BANK_FIELD_FLEX.accountNumber.flex,
                 minWidth: BANK_FIELD_FLEX.accountNumber.minWidth,
             });
             this.applyInputStyles(this.accountNumberEl, mergedStyles, 'middle');
-            containerEl.appendChild(this.accountNumberEl);
+            containerEl.appendChild(wrapFieldWithLabel(this.accountNumberEl, 'Account Number', mergedStyles));
             this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
                 flex: BANK_FIELD_FLEX.accountType.flex,
                 minWidth: BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, mergedStyles, 'right');
-            containerEl.appendChild(this.accountTypeEl);
+            containerEl.appendChild(wrapFieldWithLabel(this.accountTypeEl, 'Account Type', mergedStyles));
         }
         this.mergedStyles = mergedStyles;
         this.currentValidationState = {
@@ -234,8 +248,6 @@ export class CardConnectTokenizer extends Tokenizer {
                 window.addEventListener('message', this.messageHandler);
                 this.iframe.onload = () => {
                     clearTimeout(timeout);
-                    if (this.enableTestMode && this.mode === 'credit_card') {
-                    }
                     this.emit('ready');
                     resolve();
                 };
@@ -681,7 +693,34 @@ export class CardConnectTokenizer extends 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',
@@ -690,30 +729,46 @@ export class CardConnectTokenizer extends 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 = mergeStyles(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 = mergeStyles(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)}`);
@@ -728,7 +783,7 @@ export class CardConnectTokenizer extends 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) {
@@ -746,18 +801,30 @@ export class CardConnectTokenizer extends 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';
@@ -790,13 +857,22 @@ export class CardConnectTokenizer extends 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};}`);
             }
         }
@@ -805,7 +881,7 @@ export class CardConnectTokenizer extends Tokenizer {
             css.push('select#ccexpirymonth{width:16%;margin:0;margin-right:-12px;}');
             css.push('select#ccexpiryyear{width:20%;}');
             css.push('input#cccvvfield{width:20%;margin:0;margin-left:-12px;}');
-            if ((_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;}');
@@ -823,7 +899,7 @@ export class CardConnectTokenizer extends Tokenizer {
             css.push(`select#ccexpirymonth{width:15%;margin-right:${marginRight};}`);
             css.push(`select#ccexpiryyear{width:20%;margin-right:${marginRight};}`);
             css.push('input#cccvvfield{width:15%;}');
-            if ((_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};}`);
             }
         }
@@ -839,7 +915,7 @@ export class CardConnectTokenizer extends 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/esm/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;