@ozura/elements 1.0.2 → 1.1.0

package/dist/oz-elements.umd.js

@@ -413,7 +413,7 @@
          * (useful when integrating with React refs).
          */
         mount(target) {
-            var _a;
+            var _a, _b;
             if (this._destroyed)
                 throw new OzError('Cannot mount a destroyed element.');
             if (this.iframe)
@@ -430,7 +430,13 @@
             iframe.setAttribute('scrolling', 'no');
             iframe.setAttribute('allowtransparency', 'true');
             iframe.style.cssText = 'border:none;width:100%;height:46px;display:block;overflow:hidden;';
-            iframe.title = `Secure ${this.elementType} input`;
+            iframe.title = `Secure ${(_a = {
+            cardNumber: 'card number',
+            expirationDate: 'expiration date',
+            cvv: 'CVV',
+            accountNumber: 'account number',
+            routingNumber: 'routing number',
+        }[this.elementType]) !== null && _a !== void 0 ? _a : this.elementType} input`;
             // Note: the `sandbox` attribute is intentionally NOT set. Field values are
             // delivered to the tokenizer iframe via a MessageChannel port (transferred
             // in OZ_BEGIN_COLLECT), so no window.parent named-frame lookup is needed.
@@ -444,7 +450,7 @@
             container.appendChild(iframe);
             this.iframe = iframe;
             this._frameWindow = iframe.contentWindow;
-            const timeout = (_a = this.options.loadTimeoutMs) !== null && _a !== void 0 ? _a : 10000;
+            const timeout = (_b = this.options.loadTimeoutMs) !== null && _b !== void 0 ? _b : 10000;
             this._loadTimer = setTimeout(() => {
                 if (!this._ready && !this._destroyed) {
                     this.emit('loaderror', { elementType: this.elementType, error: `${this.elementType} iframe failed to load within ${timeout}ms` });
@@ -877,6 +883,19 @@
         return { valid: errors.length === 0, errors, normalized };
     }
 
+    /**
+     * Shared postMessage protocol constants.
+     *
+     * PROTOCOL_VERSION must be incremented any time a breaking change is made to
+     * the postMessage message shape (new required fields, renamed types, removed
+     * fields, changed semantics). The SDK reads this value from OZ_FRAME_READY
+     * messages and warns when the frame and SDK are out of sync.
+     *
+     * Non-breaking additions (new optional fields, new message types that old
+     * frames can safely ignore) do NOT require a version bump.
+     */
+    const PROTOCOL_VERSION = 1;
+
     function isCardMetadata(v) {
         return !!v && typeof v === 'object' && typeof v.last4 === 'string';
     }
@@ -916,7 +935,7 @@
          * @internal
          */
         constructor(options, waxKey, tokenizationSessionId) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             this.elements = new Map();
             this.elementsByType = new Map();
             this.bankElementsByType = new Map();
@@ -929,6 +948,9 @@
             this.tokenizerReady = false;
             this._tokenizing = null;
             this._destroyed = false;
+            // Incremented every time reset() cancels an active tokenization so that
+            // any in-flight wax-key refresh retry can detect it was superseded.
+            this._resetCount = 0;
             // Tracks successful tokenizations against the per-key call budget so the SDK
             // can proactively refresh the wax key after it has been consumed rather than
             // waiting for the next createToken() call to fail.
@@ -948,13 +970,14 @@
             this.resolvedAppearance = resolveAppearance(options.appearance);
             this.vaultId = `vault-${uuid()}`;
             this._maxTokenizeCalls = (_b = options.maxTokenizeCalls) !== null && _b !== void 0 ? _b : 3;
+            this._debug = (_c = options.debug) !== null && _c !== void 0 ? _c : false;
             this.boundHandleMessage = this.handleMessage.bind(this);
             window.addEventListener('message', this.boundHandleMessage);
             this.boundHandleVisibility = this.handleVisibilityChange.bind(this);
             document.addEventListener('visibilitychange', this.boundHandleVisibility);
             this.mountTokenizerFrame();
             if (options.onLoadError) {
-                const timeout = (_c = options.loadTimeoutMs) !== null && _c !== void 0 ? _c : 10000;
+                const timeout = (_d = options.loadTimeoutMs) !== null && _d !== void 0 ? _d : 10000;
                 this.loadErrorTimeoutId = setTimeout(() => {
                     this.loadErrorTimeoutId = null;
                     if (!this._destroyed && !this.tokenizerReady) {
@@ -964,6 +987,7 @@
             }
             this._onWaxRefresh = options.onWaxRefresh;
             this._onReady = options.onReady;
+            this.log('vault created', { vaultId: this.vaultId, frameBaseUrl: this.frameBaseUrl, maxTokenizeCalls: this._maxTokenizeCalls });
         }
         /**
          * Creates and returns a ready `OzVault` instance.
@@ -1033,6 +1057,7 @@
             if (vault.tokenizerReady) {
                 vault.sendToTokenizer({ type: 'OZ_INIT', frameId: '__tokenizer__', waxKey });
             }
+            vault.log('wax key received — vault ready');
             return vault;
         }
         /**
@@ -1174,8 +1199,13 @@
             const readyBankElements = [accountEl, routingEl];
             this._tokenizing = 'bank';
             const requestId = `req-${uuid()}`;
+            this.log('createBankToken() called');
             return new Promise((resolve, reject) => {
-                const cleanup = () => { this._tokenizing = null; };
+                const resetCountAtStart = this._resetCount;
+                const cleanup = () => {
+                    if (this._resetCount === resetCountAtStart)
+                        this._tokenizing = null;
+                };
                 this.bankTokenizeResolvers.set(requestId, {
                     resolve: (v) => { cleanup(); resolve(v); },
                     reject: (e) => { cleanup(); reject(e); },
@@ -1186,6 +1216,7 @@
                 });
                 try {
                     const bankChannels = readyBankElements.map(() => new MessageChannel());
+                    const bankTokenizeStartMs = Date.now();
                     this.sendToTokenizer({
                         type: 'OZ_BANK_TOKENIZE',
                         requestId,
@@ -1196,6 +1227,7 @@
                         lastName: options.lastName.trim(),
                         fieldCount: readyBankElements.length,
                     }, bankChannels.map(ch => ch.port1));
+                    this.log('OZ_BANK_TOKENIZE sent', { requestIdPrefix: `${requestId.slice(0, 12)}...`, fieldCount: readyBankElements.length });
                     readyBankElements.forEach((el, i) => el.beginCollect(requestId, bankChannels[i].port2));
                     const bankTimeoutId = setTimeout(() => {
                         if (this.bankTokenizeResolvers.has(requestId)) {
@@ -1206,8 +1238,10 @@
                         }
                     }, 30000);
                     const bankPendingEntry = this.bankTokenizeResolvers.get(requestId);
-                    if (bankPendingEntry)
+                    if (bankPendingEntry) {
                         bankPendingEntry.timeoutId = bankTimeoutId;
+                        bankPendingEntry.tokenizeStartMs = bankTokenizeStartMs;
+                    }
                 }
                 catch (err) {
                     this.bankTokenizeResolvers.delete(requestId);
@@ -1278,8 +1312,15 @@
             }
             this._tokenizing = 'card';
             const requestId = `req-${uuid()}`;
+            this.log('createToken() called');
             return new Promise((resolve, reject) => {
-                const cleanup = () => { this._tokenizing = null; };
+                // 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.
+                const resetCountAtStart = this._resetCount;
+                const cleanup = () => {
+                    if (this._resetCount === resetCountAtStart)
+                        this._tokenizing = null;
+                };
                 this.tokenizeResolvers.set(requestId, {
                     resolve: (v) => { cleanup(); resolve(v); },
                     reject: (e) => { cleanup(); reject(e); },
@@ -1292,6 +1333,7 @@
                 try {
                     // Tell tokenizer frame to expect N field values, then tokenize
                     const cardChannels = readyElements.map(() => new MessageChannel());
+                    const tokenizeStartMs = Date.now();
                     this.sendToTokenizer({
                         type: 'OZ_TOKENIZE',
                         requestId,
@@ -1302,6 +1344,11 @@
                         lastName,
                         fieldCount: readyElements.length,
                     }, cardChannels.map(ch => ch.port1));
+                    this.log('OZ_TOKENIZE sent', { requestIdPrefix: `${requestId.slice(0, 12)}...`, fieldCount: readyElements.length });
+                    // Store start time for elapsed-ms logging on result
+                    const cardEntry = this.tokenizeResolvers.get(requestId);
+                    if (cardEntry)
+                        cardEntry.tokenizeStartMs = tokenizeStartMs;
                     // Tell each ready element frame to send its raw value to the tokenizer
                     readyElements.forEach((el, i) => el.beginCollect(requestId, cardChannels[i].port2));
                     const cardTimeoutId = setTimeout(() => {
@@ -1323,6 +1370,63 @@
                 }
             });
         }
+        /**
+         * Clears all mounted element fields without tearing down the vault.
+         *
+         * Call this after a failed payment (e.g. card declined) to let the customer
+         * re-enter their details. The vault instance, tokenizer iframe, wax key, and
+         * tokenization budget counter are all preserved — no network calls are made.
+         *
+         * **Wax key session model:** by design, one wax key covers the full checkout
+         * session. The default `max_tokenize_calls: 3` supports two declined attempts
+         * and one final attempt on the same key. Do not call `vault.destroy()` and
+         * recreate the vault between declines — that unnecessarily re-mints the key
+         * and discards the remaining budget.
+         *
+         * @example
+         * try {
+         *   const { token, cvcSession } = await vault.createToken({ billing });
+         *   await chargeCard(token, cvcSession);
+         * } catch (err) {
+         *   vault.reset();       // clear fields; let customer re-enter
+         *   showError(err.message);
+         * }
+         */
+        reset() {
+            if (this._destroyed)
+                return;
+            const cancelling = Boolean(this._tokenizing);
+            this.log('reset() called', { tokenizing: this._tokenizing, cancelling });
+            if (this._tokenizing) {
+                this._tokenizing = null;
+                this._resetCount++;
+                this.tokenizeResolvers.forEach(({ reject, timeoutId }, requestId) => {
+                    if (timeoutId != null)
+                        clearTimeout(timeoutId);
+                    this.sendToTokenizer({ type: 'OZ_TOKENIZE_CANCEL', requestId });
+                    reject(new OzError('Vault was reset while tokenization was in progress.'));
+                });
+                this.tokenizeResolvers.clear();
+                this.bankTokenizeResolvers.forEach(({ reject, timeoutId }, requestId) => {
+                    if (timeoutId != null)
+                        clearTimeout(timeoutId);
+                    this.sendToTokenizer({ type: 'OZ_TOKENIZE_CANCEL', requestId });
+                    reject(new OzError('Vault was reset while tokenization was in progress.'));
+                });
+                this.bankTokenizeResolvers.clear();
+            }
+            // Clear field values in all mounted element iframes
+            this.elementsByType.forEach(el => el.clear());
+            this.bankElementsByType.forEach(el => el.clear());
+            // Reset per-element completion state so auto-advance starts fresh on re-entry
+            for (const frameId of this.completionState.keys()) {
+                this.completionState.set(frameId, false);
+            }
+            // NOTE: _tokenizeSuccessCount is intentionally NOT reset.
+            // It reflects real server-side wax key budget consumption. Zeroing it
+            // would desync the proactive refresh logic from the vault's state and
+            // risk triggering a mid-session re-mint on what should be a clean retry.
+        }
         /**
          * Tears down the vault: removes all element iframes, the tokenizer iframe,
          * and the global message listener. Call this when the checkout component
@@ -1333,6 +1437,7 @@
             if (this._destroyed)
                 return;
             this._destroyed = true;
+            this.log('destroy() called');
             window.removeEventListener('message', this.boundHandleMessage);
             document.removeEventListener('visibilitychange', this.boundHandleVisibility);
             if (this._pendingMount) {
@@ -1387,13 +1492,17 @@
             const REFRESH_THRESHOLD_MS = 20 * 60 * 1000; // 20 minutes
             if (document.hidden) {
                 this._hiddenAt = Date.now();
+                this.log('tab hidden');
             }
             else {
-                if (this._hiddenAt !== null &&
-                    Date.now() - this._hiddenAt >= REFRESH_THRESHOLD_MS &&
-                    this._storedFetchWaxKey &&
+                const hiddenMs = this._hiddenAt !== null ? Date.now() - this._hiddenAt : 0;
+                const willRefresh = (this._hiddenAt !== null &&
+                    hiddenMs >= REFRESH_THRESHOLD_MS &&
+                    Boolean(this._storedFetchWaxKey) &&
                     !this._tokenizing &&
-                    !this._waxRefreshing) {
+                    !this._waxRefreshing);
+                this.log('tab visible', { hiddenMs, willRefresh });
+                if (willRefresh) {
                     this.refreshWaxKey().catch((err) => {
                         // Proactive refresh failure is non-fatal — the reactive path on the
                         // next createToken() call will handle it, including the auth retry.
@@ -1403,6 +1512,56 @@
                 this._hiddenAt = null;
             }
         }
+        // ─── Debug ───────────────────────────────────────────────────────────────
+        /**
+         * Emits a `[OzVault]`-prefixed entry to `console.log`. No-op when `debug` is
+         * not set. Never called with sensitive values — callers use presence flags only.
+         */
+        log(message, data) {
+            if (!this._debug)
+                return;
+            if (data !== undefined) {
+                console.log(`[OzVault] ${message}`, data);
+            }
+            else {
+                console.log(`[OzVault] ${message}`);
+            }
+        }
+        /**
+         * Returns a plain-object snapshot of the vault's current internal state.
+         * Safe to attach to bug reports — no wax keys, tokens, or billing data included.
+         *
+         * Available on all vault instances regardless of whether `debug` was enabled.
+         *
+         * @example
+         * console.log(vault.debugState());
+         * // {
+         * //   vaultId: 'vault-abc123',
+         * //   isReady: true,
+         * //   tokenizing: null,
+         * //   destroyed: false,
+         * //   waxKeyPresent: true,
+         * //   elements: ['cardNumber', 'expirationDate', 'cvv'],
+         * //   ...
+         * // }
+         */
+        debugState() {
+            return {
+                vaultId: this.vaultId,
+                isReady: this.tokenizerReady,
+                tokenizing: this._tokenizing,
+                destroyed: this._destroyed,
+                waxKeyPresent: Boolean(this.waxKey),
+                tokenizeSuccessCount: this._tokenizeSuccessCount,
+                maxTokenizeCalls: this._maxTokenizeCalls,
+                resetCount: this._resetCount,
+                elements: [...this.elementsByType.keys()],
+                bankElements: [...this.bankElementsByType.keys()],
+                completionState: Object.fromEntries([...this.completionState.entries()].map(([id, v]) => [id.slice(0, 8), v])),
+                pendingTokenizations: this.tokenizeResolvers.size,
+                pendingBankTokenizations: this.bankTokenizeResolvers.size,
+            };
+        }
         mountTokenizerFrame() {
             const mount = () => {
                 this._pendingMount = null;
@@ -1414,6 +1573,7 @@
                 iframe.src = `${this.frameBaseUrl}/frame/tokenizer-frame.html#vaultId=${encodeURIComponent(this.vaultId)}${parentOrigin ? `&parentOrigin=${encodeURIComponent(parentOrigin)}` : ''}`;
                 document.body.appendChild(iframe);
                 this.tokenizerFrame = iframe;
+                this.log('mounting tokenizer iframe');
             };
             if (document.readyState === 'loading') {
                 this._pendingMount = mount;
@@ -1449,6 +1609,12 @@
                     // the previous session and justCompleted never fires, breaking auto-advance.
                     if (msg.type === 'OZ_FRAME_READY') {
                         this.completionState.set(frameId, false);
+                        if (msg.__ozVersion !== PROTOCOL_VERSION) {
+                            console.warn(`[OzVault] Protocol version mismatch on element frame "${frameId}" — ` +
+                                `SDK expects v${PROTOCOL_VERSION}, frame reported v${typeof msg.__ozVersion === 'number' ? msg.__ozVersion : '(none)'}. ` +
+                                'Deploy the matching frame assets to elements.ozura.com and purge the Azure CDN cache.');
+                        }
+                        this.log('element iframe ready', { type: el.type, frameIdPrefix: frameId.slice(0, 8) });
                     }
                     // Intercept OZ_CHANGE before forwarding — handle auto-advance and CVV sync
                     if (msg.type === 'OZ_CHANGE') {
@@ -1472,6 +1638,7 @@
             // Require valid too — avoids advancing at 13 digits for unknown-brand cards
             // where isComplete() fires before the user has finished typing.
             const justCompleted = complete && valid && !wasComplete;
+            this.log('field changed', { type: el.type, complete, valid, justCompleted });
             // Sync CVV length when card brand changes
             if (el.type === 'cardNumber') {
                 const brand = msg.cardBrand;
@@ -1483,17 +1650,25 @@
             // Auto-advance focus on completion
             if (justCompleted) {
                 if (el.type === 'cardNumber') {
+                    this.log('auto-advance', { from: 'cardNumber', to: 'expirationDate' });
                     (_b = this.elementsByType.get('expirationDate')) === null || _b === void 0 ? void 0 : _b.focus();
                 }
                 else if (el.type === 'expirationDate') {
+                    this.log('auto-advance', { from: 'expirationDate', to: 'cvv' });
                     (_c = this.elementsByType.get('cvv')) === null || _c === void 0 ? void 0 : _c.focus();
                 }
             }
         }
         handleTokenizerMessage(msg) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             switch (msg.type) {
                 case 'OZ_FRAME_READY':
+                    if (msg.__ozVersion !== PROTOCOL_VERSION) {
+                        console.warn(`[OzVault] Protocol version mismatch — SDK expects v${PROTOCOL_VERSION}, ` +
+                            `tokenizer frame reported v${typeof msg.__ozVersion === 'number' ? msg.__ozVersion : '(none)'}. ` +
+                            'This usually means the deployed frame files are stale. ' +
+                            'Deploy the matching frame assets to elements.ozura.com and purge the Azure CDN cache.');
+                    }
                     this.tokenizerReady = true;
                     if (this.loadErrorTimeoutId != null) {
                         clearTimeout(this.loadErrorTimeoutId);
@@ -1505,6 +1680,7 @@
                     // sent again from create() once the key is available.
                     this.sendToTokenizer(Object.assign({ type: 'OZ_INIT', frameId: '__tokenizer__' }, (this.waxKey ? { waxKey: this.waxKey } : {})));
                     (_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 });
                     break;
                 case 'OZ_TOKEN_RESULT': {
                     if (typeof msg.requestId !== 'string' || !msg.requestId) {
@@ -1529,11 +1705,18 @@
                         }
                         pending.resolve(Object.assign(Object.assign({ token,
                             cvcSession }, (card ? { card } : {})), (pending.billing ? { billing: pending.billing } : {})));
+                        this.log('token received', {
+                            elapsedMs: pending.tokenizeStartMs != null ? Date.now() - pending.tokenizeStartMs : null,
+                            tokenPresent: true,
+                            cvcSessionPresent: true,
+                            cardMetadataPresent: Boolean(card),
+                        });
                         // Increment the per-key success counter and proactively refresh once
                         // the budget is exhausted so the next createToken() call uses a fresh
                         // key without waiting for a vault rejection.
                         this._tokenizeSuccessCount++;
                         if (this._tokenizeSuccessCount >= this._maxTokenizeCalls) {
+                            this.log('proactive wax key refresh triggered', { tokenizeSuccessCount: this._tokenizeSuccessCount, maxTokenizeCalls: this._maxTokenizeCalls });
                             this.refreshWaxKey().catch((err) => {
                                 console.warn('[OzVault] Post-budget wax key refresh failed:', err instanceof Error ? err.message : err);
                             });
@@ -1553,14 +1736,25 @@
                         this.tokenizeResolvers.delete(msg.requestId);
                         if (pending.timeoutId != null)
                             clearTimeout(pending.timeoutId);
+                        const willRefresh = this.isRefreshableAuthError(errorCode, raw) && !pending.retried && Boolean(this._storedFetchWaxKey);
+                        this.log('token error', { 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 (this.isRefreshableAuthError(errorCode, raw) && !pending.retried && this._storedFetchWaxKey) {
+                        if (willRefresh) {
+                            const resetCountAtRetry = this._resetCount;
                             this.refreshWaxKey().then(() => {
                                 if (this._destroyed) {
                                     pending.reject(new OzError('Vault destroyed during wax key refresh.'));
                                     return;
                                 }
+                                if (this._resetCount !== resetCountAtRetry) {
+                                    // reset() was called while the wax key was refreshing — the fields
+                                    // have been cleared and _tokenizing was zeroed. Reject the original
+                                    // promise so it doesn't stay pending, and bail out without starting
+                                    // a new retry (which would tokenize against empty fields).
+                                    pending.reject(new OzError('Vault was reset while tokenization was in progress.'));
+                                    return;
+                                }
                                 const newRequestId = `req-${uuid()}`;
                                 // _tokenizing is still 'card' (cleanup() hasn't been called yet)
                                 this.tokenizeResolvers.set(newRequestId, Object.assign(Object.assign({}, pending), { retried: true }));
@@ -1607,11 +1801,16 @@
                         if (bankPending.timeoutId != null)
                             clearTimeout(bankPending.timeoutId);
                         if (this.isRefreshableAuthError(errorCode, raw) && !bankPending.retried && this._storedFetchWaxKey) {
+                            const resetCountAtRetry = this._resetCount;
                             this.refreshWaxKey().then(() => {
                                 if (this._destroyed) {
                                     bankPending.reject(new OzError('Vault destroyed during wax key refresh.'));
                                     return;
                                 }
+                                if (this._resetCount !== resetCountAtRetry) {
+                                    bankPending.reject(new OzError('Vault was reset while tokenization was in progress.'));
+                                    return;
+                                }
                                 const newRequestId = `req-${uuid()}`;
                                 this.bankTokenizeResolvers.set(newRequestId, Object.assign(Object.assign({}, bankPending), { retried: true }));
                                 try {
@@ -1669,9 +1868,15 @@
                         }
                         const bank = isBankAccountMetadata(msg.bank) ? msg.bank : undefined;
                         pending.resolve(Object.assign({ token }, (bank ? { bank } : {})));
+                        this.log('bank token received', {
+                            elapsedMs: pending.tokenizeStartMs != null ? Date.now() - pending.tokenizeStartMs : null,
+                            tokenPresent: true,
+                            bankMetadataPresent: Boolean(bank),
+                        });
                         // Same proactive refresh logic as card tokenization.
                         this._tokenizeSuccessCount++;
                         if (this._tokenizeSuccessCount >= this._maxTokenizeCalls) {
+                            this.log('proactive wax key refresh triggered', { tokenizeSuccessCount: this._tokenizeSuccessCount, maxTokenizeCalls: this._maxTokenizeCalls });
                             this.refreshWaxKey().catch((err) => {
                                 console.warn('[OzVault] Post-budget wax key refresh failed:', err instanceof Error ? err.message : err);
                             });
@@ -1727,6 +1932,7 @@
             }
             const newSessionId = uuid();
             (_a = this._onWaxRefresh) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.log('wax key refresh started');
             this._waxRefreshing = this._storedFetchWaxKey(newSessionId)
                 .then(newWaxKey => {
                 if (typeof newWaxKey !== 'string' || !newWaxKey.trim()) {
@@ -1740,6 +1946,11 @@
                 if (!this._destroyed && this.tokenizerReady) {
                     this.sendToTokenizer({ type: 'OZ_INIT', frameId: '__tokenizer__', waxKey: newWaxKey });
                 }
+                this.log('wax key refresh succeeded');
+            })
+                .catch((err) => {
+                this.log('wax key refresh failed', { error: err instanceof Error ? err.message : String(err) });
+                throw err;
             })
                 .finally(() => {
                 this._waxRefreshing = null;