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

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;

package/dist/tokenize/SpreedlyTokenizer.js

@@ -21,11 +21,12 @@ const tokenizer_utils_1 = require("./tokenizer-utils");
 const SPREEDLY_SCRIPT_URL = 'https://core.spreedly.com/iframe/iframe-v1.min.js';
 const SPREEDLY_SCRIPT_ID = 'spreedly-iframe-script';
 class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
-    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line', responsiveBreakpoint = tokenizer_constants_1.RESPONSIVE_BREAKPOINT) {
+    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line', responsiveBreakpoint = tokenizer_constants_1.RESPONSIVE_BREAKPOINT, customPlaceholders) {
         super();
         this.environmentKey = environmentKey;
         this.containerId = containerId;
         this.layout = layout;
+        this.customPlaceholders = customPlaceholders;
         this.bankCountry = 'US';
         this.enableTestMode = false;
         this.effectiveLayout = 'single-line';
@@ -80,7 +81,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             if (!environmentKey) {
                 throw new Error('Spreedly environment key is required. Provide it via gateway.config.environmentKey or client config.');
             }
-            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line', (_b = container.responsiveBreakpoint) !== null && _b !== void 0 ? _b : tokenizer_constants_1.RESPONSIVE_BREAKPOINT);
+            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line', (_b = container.responsiveBreakpoint) !== null && _b !== void 0 ? _b : tokenizer_constants_1.RESPONSIVE_BREAKPOINT, container.placeholders);
             tokenizer.organizationId = config.organizationId;
             tokenizer.embedId = config.embedId;
             tokenizer.clientConfig = config.clientConfig;
@@ -139,11 +140,12 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                     reject(new Error('Spreedly initialization timeout'));
                 }, tokenizer_constants_1.INIT_TIMEOUT);
                 this.spreedly.on('ready', () => {
+                    var _a, _b;
                     clearTimeout(timeout);
-                    this.spreedly.setPlaceholder('number', tokenizer_constants_1.PLACEHOLDERS.cardNumber);
+                    this.spreedly.setPlaceholder('number', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.cardNumber) || tokenizer_constants_1.PLACEHOLDERS.cardNumber);
                     this.spreedly.setFieldType('number', 'text');
                     this.spreedly.setNumberFormat('prettyFormat');
-                    this.spreedly.setPlaceholder('cvv', tokenizer_constants_1.PLACEHOLDERS.cvv);
+                    this.spreedly.setPlaceholder('cvv', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.cvv) || tokenizer_constants_1.PLACEHOLDERS.cvv);
                     this.spreedly.setFieldType('cvv', 'text');
                     this.applyUnifiedStyles();
                     if (this.enableTestMode &&
@@ -259,7 +261,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
-            container.appendChild(this.accountTypeEl);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
             this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
             Object.assign(this.institutionNumberEl.style, {
                 flex: '1',
@@ -276,7 +278,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.institutionNumberEl);
+            this.appendField(container, this.institutionNumberEl, 'Institution');
             this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
             Object.assign(this.transitNumberEl.style, {
                 flex: '2',
@@ -293,7 +295,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.transitNumberEl);
+            this.appendField(container, this.transitNumberEl, 'Transit');
             this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
             Object.assign(this.accountNumberEl.style, {
                 flex: '1',
@@ -311,7 +313,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
         }
         else {
             this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
@@ -330,7 +332,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.institutionNumberEl);
+            this.appendField(container, this.institutionNumberEl, 'Institution');
             this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
             Object.assign(this.transitNumberEl.style, {
                 flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.flex,
@@ -347,7 +349,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.transitNumberEl);
+            this.appendField(container, this.transitNumberEl, 'Transit');
             this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
             Object.assign(this.accountNumberEl.style, {
                 flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.flex,
@@ -364,14 +366,14 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
             this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
                 flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.flex,
                 minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
-            container.appendChild(this.accountTypeEl);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
         }
     }
     tokenizeBankAccountInternal(bankData) {
@@ -844,7 +846,11 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             this.createCreditCardFields(container);
         }
     }
+    appendField(container, field, labelText) {
+        container.appendChild((0, tokenizer_utils_1.wrapFieldWithLabel)(field, labelText, this.mergedStyles));
+    }
     createCreditCardFields(container) {
+        var _a, _b;
         if (this.layout === 'responsive') {
             this.effectiveLayout = this.determineLayout(container.offsetWidth);
         }
@@ -857,8 +863,8 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             cardNumberDiv.style.height = this.mergedStyles.input.height;
             cardNumberDiv.style.flexBasis = '100%';
             this.cardNumberDiv = cardNumberDiv;
-            container.appendChild(cardNumberDiv);
-            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
+            this.appendField(container, cardNumberDiv, 'Card Number');
+            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.expiry) || tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
                 flex: '1',
                 minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
@@ -878,18 +884,18 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 this.validateExpiry();
                 this.updateOverallValidation();
             });
-            container.appendChild(this.expiryEl);
+            this.appendField(container, this.expiryEl, 'Expiration');
             const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, '1', tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
             this.cvvDiv = cvvDiv;
-            container.appendChild(cvvDiv);
+            this.appendField(container, cvvDiv, 'CVV');
         }
         else {
             const cardNumberDiv = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, tokenizer_constants_1.FIELD_FLEX.cardNumber.flex, tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
             this.cardNumberDiv = cardNumberDiv;
-            container.appendChild(cardNumberDiv);
-            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
+            this.appendField(container, cardNumberDiv, 'Card Number');
+            this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.expiry) || tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
                 flex: tokenizer_constants_1.FIELD_FLEX.expiry.flex,
                 minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
@@ -909,11 +915,11 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 this.validateExpiry();
                 this.updateOverallValidation();
             });
-            container.appendChild(this.expiryEl);
+            this.appendField(container, this.expiryEl, 'Expiration');
             const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, tokenizer_constants_1.FIELD_FLEX.cvv.flex, tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
             this.cvvDiv = cvvDiv;
-            container.appendChild(cvvDiv);
+            this.appendField(container, cvvDiv, 'CVV');
             if (this.layout === 'responsive') {
                 this.applyLayoutStyles(this.effectiveLayout);
                 this.setupResizeObserver();
@@ -929,6 +935,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         }
     }
     createUSBankAccountFields(container) {
+        var _a, _b, _c, _d;
         if (this.layout === 'two-line') {
             this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
@@ -936,8 +943,8 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
-            container.appendChild(this.accountTypeEl);
-            this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
+            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,
@@ -953,8 +960,8 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.routingNumberEl);
-            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            this.appendField(container, this.routingNumberEl, 'Routing Number');
+            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%',
@@ -971,10 +978,10 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
         }
         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,
@@ -990,8 +997,8 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.routingNumberEl);
-            this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            this.appendField(container, this.routingNumberEl, 'Routing Number');
+            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,
@@ -1007,14 +1014,14 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
             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, this.mergedStyles, 'right');
-            container.appendChild(this.accountTypeEl);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
         }
     }
     updateBankAccountValidation() {

package/dist/tokenize/styles.js

@@ -37,17 +37,30 @@ exports.DEFAULT_UNIFIED_STYLES = {
         fontSize: '',
         textAlign: '',
     },
+    label: {
+        show: false,
+        fontSize: '0.875rem',
+        fontWeight: 'bold',
+        fontFamily: '',
+        color: '#333',
+        marginBottom: '0.25rem',
+    },
 };
 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;
 }
 function getContainerStylesForLayout(baseStyles, layout = 'single-line') {
     if (layout === 'two-line') {

package/dist/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;