@idonatedev/idonate-sdk 1.2.0-dev18 → 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-dev18';
+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-dev18';
+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/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;

package/dist/esm/tokenize/SpreedlyTokenizer.js

@@ -14,15 +14,16 @@ import { extractSpreedlyToken, unpackSpreedlyResponse } from '../typeAdapters';
 import { fetchSpreedlySecurityArgs } from './spreedly-secure';
 import { DEFAULT_UNIFIED_STYLES, mergeStyles, getContainerStylesForLayout, } from './styles';
 import { INIT_TIMEOUT, TOKENIZE_TIMEOUT, FIELD_FLEX, BANK_FIELD_FLEX, CANADIAN_BANK_FIELD_FLEX, PLACEHOLDERS, FIELD_CONSTRAINTS, RESPONSIVE_BREAKPOINT, } from './tokenizer-constants';
-import { createFieldContainer, createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, validateInstitutionNumber, validateTransitNumber, validateCanadianAccountNumber, formatCanadianRoutingNumber, } from './tokenizer-utils';
+import { createFieldContainer, createInputElement, validateRoutingNumber, validateAccountNumber, createAccountTypeSelect, validateInstitutionNumber, validateTransitNumber, validateCanadianAccountNumber, formatCanadianRoutingNumber, wrapFieldWithLabel, } from './tokenizer-utils';
 const SPREEDLY_SCRIPT_URL = 'https://core.spreedly.com/iframe/iframe-v1.min.js';
 const SPREEDLY_SCRIPT_ID = 'spreedly-iframe-script';
 export class SpreedlyTokenizer extends Tokenizer {
-    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line', responsiveBreakpoint = RESPONSIVE_BREAKPOINT) {
+    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line', responsiveBreakpoint = 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';
@@ -77,7 +78,7 @@ export class SpreedlyTokenizer extends 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 : 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 : RESPONSIVE_BREAKPOINT, container.placeholders);
             tokenizer.organizationId = config.organizationId;
             tokenizer.embedId = config.embedId;
             tokenizer.clientConfig = config.clientConfig;
@@ -136,11 +137,12 @@ export class SpreedlyTokenizer extends Tokenizer {
                     reject(new Error('Spreedly initialization timeout'));
                 }, INIT_TIMEOUT);
                 this.spreedly.on('ready', () => {
+                    var _a, _b;
                     clearTimeout(timeout);
-                    this.spreedly.setPlaceholder('number', PLACEHOLDERS.cardNumber);
+                    this.spreedly.setPlaceholder('number', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.cardNumber) || PLACEHOLDERS.cardNumber);
                     this.spreedly.setFieldType('number', 'text');
                     this.spreedly.setNumberFormat('prettyFormat');
-                    this.spreedly.setPlaceholder('cvv', PLACEHOLDERS.cvv);
+                    this.spreedly.setPlaceholder('cvv', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.cvv) || PLACEHOLDERS.cvv);
                     this.spreedly.setFieldType('cvv', 'text');
                     this.applyUnifiedStyles();
                     if (this.enableTestMode &&
@@ -256,7 +258,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 minWidth: 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 = createInputElement(`${this.containerId}-institution`, 'text', 'Inst *', 3);
             Object.assign(this.institutionNumberEl.style, {
                 flex: '1',
@@ -273,7 +275,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.institutionNumberEl);
+            this.appendField(container, this.institutionNumberEl, 'Institution');
             this.transitNumberEl = createInputElement(`${this.containerId}-transit`, 'text', 'Transit *', 5);
             Object.assign(this.transitNumberEl.style, {
                 flex: '2',
@@ -290,7 +292,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.transitNumberEl);
+            this.appendField(container, this.transitNumberEl, 'Transit');
             this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *');
             Object.assign(this.accountNumberEl.style, {
                 flex: '1',
@@ -308,7 +310,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
         }
         else {
             this.institutionNumberEl = createInputElement(`${this.containerId}-institution`, 'text', 'Inst *', 3);
@@ -327,7 +329,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.institutionNumberEl);
+            this.appendField(container, this.institutionNumberEl, 'Institution');
             this.transitNumberEl = createInputElement(`${this.containerId}-transit`, 'text', 'Transit *', 5);
             Object.assign(this.transitNumberEl.style, {
                 flex: CANADIAN_BANK_FIELD_FLEX.transitNumber.flex,
@@ -344,7 +346,7 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.transitNumberEl);
+            this.appendField(container, this.transitNumberEl, 'Transit');
             this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *');
             Object.assign(this.accountNumberEl.style, {
                 flex: CANADIAN_BANK_FIELD_FLEX.accountNumber.flex,
@@ -361,14 +363,14 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
             this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
                 flex: CANADIAN_BANK_FIELD_FLEX.accountType.flex,
                 minWidth: 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) {
@@ -841,7 +843,11 @@ export class SpreedlyTokenizer extends Tokenizer {
             this.createCreditCardFields(container);
         }
     }
+    appendField(container, field, labelText) {
+        container.appendChild(wrapFieldWithLabel(field, labelText, this.mergedStyles));
+    }
     createCreditCardFields(container) {
+        var _a, _b;
         if (this.layout === 'responsive') {
             this.effectiveLayout = this.determineLayout(container.offsetWidth);
         }
@@ -854,8 +860,8 @@ export class SpreedlyTokenizer extends Tokenizer {
             cardNumberDiv.style.height = this.mergedStyles.input.height;
             cardNumberDiv.style.flexBasis = '100%';
             this.cardNumberDiv = cardNumberDiv;
-            container.appendChild(cardNumberDiv);
-            this.expiryEl = createInputElement(this.expiryId, 'text', PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
+            this.appendField(container, cardNumberDiv, 'Card Number');
+            this.expiryEl = createInputElement(this.expiryId, 'text', ((_a = this.customPlaceholders) === null || _a === void 0 ? void 0 : _a.expiry) || PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
                 flex: '1',
                 minWidth: FIELD_FLEX.expiry.minWidth,
@@ -875,18 +881,18 @@ export class SpreedlyTokenizer extends Tokenizer {
                 this.validateExpiry();
                 this.updateOverallValidation();
             });
-            container.appendChild(this.expiryEl);
+            this.appendField(container, this.expiryEl, 'Expiration');
             const cvvDiv = createFieldContainer(this.cvvEl, '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 = createFieldContainer(this.numberEl, FIELD_FLEX.cardNumber.flex, FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
             this.cardNumberDiv = cardNumberDiv;
-            container.appendChild(cardNumberDiv);
-            this.expiryEl = createInputElement(this.expiryId, 'text', PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
+            this.appendField(container, cardNumberDiv, 'Card Number');
+            this.expiryEl = createInputElement(this.expiryId, 'text', ((_b = this.customPlaceholders) === null || _b === void 0 ? void 0 : _b.expiry) || PLACEHOLDERS.expiry, FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
                 flex: FIELD_FLEX.expiry.flex,
                 minWidth: FIELD_FLEX.expiry.minWidth,
@@ -906,11 +912,11 @@ export class SpreedlyTokenizer extends Tokenizer {
                 this.validateExpiry();
                 this.updateOverallValidation();
             });
-            container.appendChild(this.expiryEl);
+            this.appendField(container, this.expiryEl, 'Expiration');
             const cvvDiv = createFieldContainer(this.cvvEl, FIELD_FLEX.cvv.flex, FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
             this.cvvDiv = cvvDiv;
-            container.appendChild(cvvDiv);
+            this.appendField(container, cvvDiv, 'CVV');
             if (this.layout === 'responsive') {
                 this.applyLayoutStyles(this.effectiveLayout);
                 this.setupResizeObserver();
@@ -926,6 +932,7 @@ export class SpreedlyTokenizer extends Tokenizer {
         }
     }
     createUSBankAccountFields(container) {
+        var _a, _b, _c, _d;
         if (this.layout === 'two-line') {
             this.accountTypeEl = createAccountTypeSelect(`${this.containerId}-account-type`);
             Object.assign(this.accountTypeEl.style, {
@@ -933,8 +940,8 @@ export class SpreedlyTokenizer extends Tokenizer {
                 minWidth: BANK_FIELD_FLEX.accountType.minWidth,
             });
             this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
-            container.appendChild(this.accountTypeEl);
-            this.routingNumberEl = createInputElement(`${this.containerId}-routing`, 'text', 'Routing *', 9);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
+            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,
@@ -950,8 +957,8 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.routingNumberEl);
-            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            this.appendField(container, this.routingNumberEl, 'Routing Number');
+            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%',
@@ -968,10 +975,10 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
         }
         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,
@@ -987,8 +994,8 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.routingNumberEl);
-            this.accountNumberEl = createInputElement(`${this.containerId}-account`, 'text', 'Account Number *', 17);
+            this.appendField(container, this.routingNumberEl, 'Routing Number');
+            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,
@@ -1004,14 +1011,14 @@ export class SpreedlyTokenizer extends Tokenizer {
                 }
                 this.updateBankAccountValidation();
             });
-            container.appendChild(this.accountNumberEl);
+            this.appendField(container, this.accountNumberEl, 'Account Number');
             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, this.mergedStyles, 'right');
-            container.appendChild(this.accountTypeEl);
+            this.appendField(container, this.accountTypeEl, 'Account Type');
         }
     }
     updateBankAccountValidation() {