@ozura/elements 1.2.0-next.29 → 1.2.0-next.31

package/dist/react/index.esm.js

@@ -201,7 +201,7 @@ function normalizeCommonVaultError(msg) {
     if (msg.includes('timeout') || msg.includes('timed out')) {
         return 'The request timed out. Please try again.';
     }
-    if (msg.includes('http 5') || msg.includes('500') || msg.includes('502') || msg.includes('503')) {
+    if (msg.includes('http 5') || /\b5\d{2}\b/.test(msg)) {
         return 'A server error occurred. Please try again shortly.';
     }
     return null;
@@ -221,7 +221,7 @@ function normalizeVaultError(raw) {
     if (msg.includes('cvv') || msg.includes('cvc') || msg.includes('security code')) {
         return 'The CVV code is invalid. Please check and try again.';
     }
-    if (msg.includes('insufficient') || msg.includes('funds')) {
+    if (msg.includes('insufficient funds')) {
         return 'Your card has insufficient funds. Please use a different card.';
     }
     if (msg.includes('declined') || msg.includes('do not honor')) {
@@ -324,7 +324,7 @@ function sanitizeOptions(options) {
  * it never holds raw card data — all sensitive values live in the iframe.
  */
 class OzElement {
-    constructor(elementType, options, vaultId, frameBaseUrl, fonts = [], appearanceStyle, onDestroy) {
+    constructor(elementType, options, vaultId, frameBaseUrl, fonts = [], appearanceStyle, onDestroy, debug = false) {
         this.iframe = null;
         this._frameWindow = null;
         this._ready = false;
@@ -332,6 +332,7 @@ class OzElement {
         this._loadTimer = null;
         this.pendingMessages = [];
         this.handlers = new Map();
+        this.debug = false;
         this.elementType = elementType;
         this.options = sanitizeOptions(options);
         this.vaultId = vaultId;
@@ -341,6 +342,7 @@ class OzElement {
         this.appearanceStyle = appearanceStyle;
         this.frameId = `oz-${elementType}-${uuid()}`;
         this._onDestroy = onDestroy;
+        this.debug = debug;
     }
     /** The element type this proxy represents. */
     get type() {
@@ -540,7 +542,7 @@ class OzElement {
                 }
                 this._frameWindow = (_b = (_a = this.iframe) === null || _a === void 0 ? void 0 : _a.contentWindow) !== null && _b !== void 0 ? _b : null;
                 const mergedOptions = Object.assign(Object.assign({}, this.options), { style: mergeAppearanceWithElementStyle(this.appearanceStyle, this.options.style) });
-                this.post(Object.assign({ type: 'OZ_INIT', elementType: this.elementType, options: sanitizeOptions(mergedOptions), frameId: this.frameId }, (this.fonts.length > 0 ? { fonts: this.fonts } : {})));
+                this.post(Object.assign({ type: 'OZ_INIT', elementType: this.elementType, options: sanitizeOptions(mergedOptions), frameId: this.frameId, debug: this.debug }, (this.fonts.length > 0 ? { fonts: this.fonts } : {})));
                 this.pendingMessages.forEach(m => this.send(m));
                 this.pendingMessages = [];
                 this.emit('ready', undefined);
@@ -654,13 +656,14 @@ function validateEmail(email) {
 // ─── Phone ───────────────────────────────────────────────────────────────────
 /**
  * Validates E.164 phone format: starts with +, 1–3 digit country code,
- * followed by 7–12 digits, total ≤50 characters.
+ * followed by 7–12 digits, max 15 digits total (E.164 spec cap = 16 chars
+ * including the leading +).
  *
  * Matches the output of checkout's formatPhoneForAPI() function.
  * Examples: "+15551234567", "+447911123456", "+61412345678"
  */
 function validateE164Phone(phone) {
-    return /^\+[1-9]\d{6,49}$/.test(phone) && phone.length <= 50;
+    return /^\+[1-9]\d{6,14}$/.test(phone);
 }
 // ─── Field length ─────────────────────────────────────────────────────────────
 /** Returns true when the string is non-empty and ≤50 characters (cardSale schema). */
@@ -1118,7 +1121,7 @@ class OzVault {
         // the OZ_INIT sent at that point had an empty waxKey. Send a follow-up now
         // so the tokenizer has the key stored before any createToken() call.
         if (vault.tokenizerReady) {
-            vault.sendToTokenizer({ type: 'OZ_INIT', frameId: '__tokenizer__', waxKey });
+            vault.sendToTokenizer({ type: 'OZ_INIT', frameId: '__tokenizer__', waxKey, debug: vault._debug });
         }
         vault.log('wax key received — vault ready');
         return vault;
@@ -1205,7 +1208,7 @@ class OzVault {
             // don't grow unboundedly in SPA scenarios with repeated mount/unmount cycles.
             this.elements.delete(el.frameId);
             this.completionState.delete(el.frameId);
-        });
+        }, this._debug);
         this.elements.set(el.frameId, el);
         typeMap.set(type, el);
         return el;
@@ -1380,7 +1383,11 @@ class OzVault {
         }
         this._tokenizing = 'card';
         const requestId = `req-${uuid()}`;
-        this.log('createToken() called');
+        this.log('createToken() called', {
+            requestIdPrefix: requestId.slice(0, 12),
+            fields: readyElements.map(el => el.type),
+            billingPresent: Boolean(options.billing),
+        });
         return new Promise((resolve, reject) => {
             // Capture the reset generation so cleanup() only zeros _tokenizing when it
             // still belongs to this invocation — not a newer one that started after a reset.
@@ -1652,7 +1659,7 @@ class OzVault {
         }
     }
     handleMessage(event) {
-        var _a;
+        var _a, _b;
         if (this._destroyed)
             return;
         // Only accept messages from our frame origin (defense in depth; prevents
@@ -1684,6 +1691,20 @@ class OzVault {
                     }
                     this.log('element iframe ready', { type: el.type, frameIdPrefix: frameId.slice(0, 8) });
                 }
+                // Relay debug/warning messages from element iframes into the parent
+                // DevTools console. Element frames run in cross-origin iframes whose
+                // console context is invisible to developers without a frame selector switch.
+                if (msg.type === 'OZ_DEBUG_LOG') {
+                    const level = typeof msg.level === 'string' ? msg.level : 'warn';
+                    const message = typeof msg.message === 'string' ? msg.message : String((_b = msg.message) !== null && _b !== void 0 ? _b : '');
+                    if (level === 'error') {
+                        console.error(`[OzVault:${el.type}] ${message}`);
+                    }
+                    else {
+                        console.warn(`[OzVault:${el.type}] ${message}`);
+                    }
+                    return;
+                }
                 // Intercept OZ_CHANGE before forwarding — handle auto-advance and CVV sync
                 if (msg.type === 'OZ_CHANGE') {
                     this.handleElementChange(msg, el);
@@ -1728,7 +1749,7 @@ class OzVault {
         }
     }
     handleTokenizerMessage(msg) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         switch (msg.type) {
             case 'OZ_FRAME_READY':
                 if (msg.__ozVersion !== PROTOCOL_VERSION) {
@@ -1746,9 +1767,10 @@ class OzVault {
                 // Deliver the wax key via OZ_INIT so the tokenizer stores it internally.
                 // If waxKey is still empty (fetchWaxKey hasn't resolved yet), it will be
                 // sent again from create() once the key is available.
-                this.sendToTokenizer(Object.assign({ type: 'OZ_INIT', frameId: '__tokenizer__' }, (this.waxKey ? { waxKey: this.waxKey } : {})));
+                this.sendToTokenizer(Object.assign(Object.assign({ type: 'OZ_INIT', frameId: '__tokenizer__' }, (this.waxKey ? { waxKey: this.waxKey } : {})), { debug: this._debug }));
                 (_c = this._onReady) === null || _c === void 0 ? void 0 : _c.call(this);
                 this.log('tokenizer iframe ready', { protocolVersion: (_d = msg.__ozVersion) !== null && _d !== void 0 ? _d : null });
+                this.log('vault state', this.debugState());
                 break;
             case 'OZ_TOKEN_RESULT': {
                 if (typeof msg.requestId !== 'string' || !msg.requestId) {
@@ -1774,6 +1796,7 @@ class OzVault {
                     pending.resolve(Object.assign(Object.assign({ token,
                         cvcSession }, (card ? { card } : {})), (pending.billing ? { billing: pending.billing } : {})));
                     this.log('token received', {
+                        requestIdPrefix: msg.requestId.slice(0, 12),
                         elapsedMs: pending.tokenizeStartMs != null ? Date.now() - pending.tokenizeStartMs : null,
                         tokenPresent: true,
                         cvcSessionPresent: true,
@@ -1805,7 +1828,7 @@ class OzVault {
                     if (pending.timeoutId != null)
                         clearTimeout(pending.timeoutId);
                     const willRefresh = this.isRefreshableAuthError(errorCode, raw) && !pending.retried && Boolean(this._storedFetchWaxKey);
-                    this.log('token error', { errorCode, willRefresh });
+                    this.log('token error', { requestIdPrefix: msg.requestId.slice(0, 12), errorCode, willRefresh });
                     // Auto-refresh: if the wax key expired or was consumed and we haven't
                     // already retried for this request, transparently re-mint and retry.
                     if (willRefresh) {
@@ -1956,6 +1979,21 @@ class OzVault {
                 }
                 break;
             }
+            case 'OZ_DEBUG_LOG': {
+                // Relay warnings/errors from the tokenizer iframe into the parent page's
+                // DevTools console. The tokenizer runs in a cross-origin iframe whose
+                // console context is invisible to most developers unless they manually
+                // switch the DevTools frame selector.
+                const level = typeof msg.level === 'string' ? msg.level : 'warn';
+                const message = typeof msg.message === 'string' ? msg.message : String((_e = msg.message) !== null && _e !== void 0 ? _e : '');
+                if (level === 'error') {
+                    console.error(`[OzVault:tokenizer] ${message}`);
+                }
+                else {
+                    console.warn(`[OzVault:tokenizer] ${message}`);
+                }
+                break;
+            }
         }
     }
     /**
@@ -2004,6 +2042,7 @@ class OzVault {
         }
         const newSessionId = uuid();
         (_a = this._onWaxRefresh) === null || _a === void 0 ? void 0 : _a.call(this);
+        const refreshStartMs = Date.now();
         this.log('wax key refresh started');
         this._waxRefreshing = this._storedFetchWaxKey(newSessionId)
             .then(newWaxKey => {
@@ -2016,12 +2055,12 @@ class OzVault {
                 this._tokenizeSuccessCount = 0;
             }
             if (!this._destroyed && this.tokenizerReady) {
-                this.sendToTokenizer({ type: 'OZ_INIT', frameId: '__tokenizer__', waxKey: newWaxKey });
+                this.sendToTokenizer({ type: 'OZ_INIT', frameId: '__tokenizer__', waxKey: newWaxKey, debug: this._debug });
             }
-            this.log('wax key refresh succeeded');
+            this.log('wax key refresh succeeded', { durationMs: Date.now() - refreshStartMs });
         })
             .catch((err) => {
-            this.log('wax key refresh failed', { error: err instanceof Error ? err.message : String(err) });
+            this.log('wax key refresh failed', { error: err instanceof Error ? err.message : String(err), durationMs: Date.now() - refreshStartMs });
             throw err;
         })
             .finally(() => {