@ozura/elements 1.2.4-next.52 → 1.2.4-next.54

package/dist/server/vue/index.d.ts

@@ -34,6 +34,18 @@ export interface OzElementsProps {
     appearance?: Appearance;
     loadTimeoutMs?: number;
     debug?: boolean;
+    /** Called when the vault automatically refreshes the session key after exhausting the tokenize budget. */
+    onSessionRefresh?: () => void;
+    /** Called once when the vault tokenizer and all mounted field iframes are ready. */
+    onReady?: () => void;
+    /**
+     * Maximum number of tokenize calls before the vault proactively refreshes the session.
+     * Must match the `sessionLimit` passed to `createSession()` on your server.
+     * Pass `null` to disable the limit. Defaults to 3.
+     */
+    sessionLimit?: number | null;
+    /** @deprecated Use `sessionLimit` instead. */
+    maxTokenizeCalls?: number;
 }
 /**
  * Creates and owns an OzVault instance for the lifetime of this component.
@@ -72,6 +84,22 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         type: BooleanConstructor;
         default: undefined;
     };
+    onSessionRefresh: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onReady: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    sessionLimit: {
+        type: PropType<number | null>;
+        default: undefined;
+    };
+    maxTokenizeCalls: {
+        type: NumberConstructor;
+        default: undefined;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "ready"[], "ready", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -107,6 +135,22 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         type: BooleanConstructor;
         default: undefined;
     };
+    onSessionRefresh: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onReady: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    sessionLimit: {
+        type: PropType<number | null>;
+        default: undefined;
+    };
+    maxTokenizeCalls: {
+        type: NumberConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onReady?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -114,9 +158,13 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
     fonts: FontSource[];
     loadTimeoutMs: number;
     frameBaseUrl: string;
+    maxTokenizeCalls: number;
+    sessionLimit: number | null;
     sessionUrl: string;
     getSessionKey: (sessionId: string) => Promise<string>;
     appearance: Appearance;
+    onSessionRefresh: () => void;
+    onReady: () => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export interface UseOzElementsReturn {
     /**

package/dist/types/sdk/OzVault.d.ts

@@ -19,7 +19,7 @@ import { ElementType, BankElementType, ElementOptions, VaultOptions, TokenizeOpt
  * });
  */
 export declare class OzVault {
-    private waxKey;
+    #private;
     private tokenizationSessionId;
     private pubKey;
     private frameBaseUrl;

package/dist/types/vue/index.d.ts

@@ -34,6 +34,18 @@ export interface OzElementsProps {
     appearance?: Appearance;
     loadTimeoutMs?: number;
     debug?: boolean;
+    /** Called when the vault automatically refreshes the session key after exhausting the tokenize budget. */
+    onSessionRefresh?: () => void;
+    /** Called once when the vault tokenizer and all mounted field iframes are ready. */
+    onReady?: () => void;
+    /**
+     * Maximum number of tokenize calls before the vault proactively refreshes the session.
+     * Must match the `sessionLimit` passed to `createSession()` on your server.
+     * Pass `null` to disable the limit. Defaults to 3.
+     */
+    sessionLimit?: number | null;
+    /** @deprecated Use `sessionLimit` instead. */
+    maxTokenizeCalls?: number;
 }
 /**
  * Creates and owns an OzVault instance for the lifetime of this component.
@@ -72,6 +84,22 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         type: BooleanConstructor;
         default: undefined;
     };
+    onSessionRefresh: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onReady: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    sessionLimit: {
+        type: PropType<number | null>;
+        default: undefined;
+    };
+    maxTokenizeCalls: {
+        type: NumberConstructor;
+        default: undefined;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "ready"[], "ready", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -107,6 +135,22 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         type: BooleanConstructor;
         default: undefined;
     };
+    onSessionRefresh: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onReady: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    sessionLimit: {
+        type: PropType<number | null>;
+        default: undefined;
+    };
+    maxTokenizeCalls: {
+        type: NumberConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onReady?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -114,9 +158,13 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
     fonts: FontSource[];
     loadTimeoutMs: number;
     frameBaseUrl: string;
+    maxTokenizeCalls: number;
+    sessionLimit: number | null;
     sessionUrl: string;
     getSessionKey: (sessionId: string) => Promise<string>;
     appearance: Appearance;
+    onSessionRefresh: () => void;
+    onReady: () => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export interface UseOzElementsReturn {
     /**

package/dist/vue/index.cjs.js

@@ -2,6 +2,41 @@
 
 var vue = require('vue');
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const THEME_DEFAULT = {
     base: {
         color: '#1a1a2e',
@@ -953,6 +988,7 @@ function createSessionFetcher(url) {
     };
 }
 
+var _OzVault_waxKey;
 function isCardMetadata(v) {
     if (!v || typeof v !== 'object')
         return false;
@@ -996,6 +1032,11 @@ class OzVault {
      */
     constructor(options, waxKey, tokenizationSessionId) {
         var _a, _b, _c, _d, _e;
+        // Hard-private: JavaScript WeakMap-based enforcement (not just TypeScript
+        // compile-time). Runtime code cannot read this via vault['waxKey'] or
+        // (vault as any).waxKey — prevents wax key exfiltration if merchant-page
+        // JS were somehow inspected at runtime (e.g. after an XSS).
+        _OzVault_waxKey.set(this, '');
         this.elements = new Map();
         this.elementsByType = new Map();
         this.bankElementsByType = new Map();
@@ -1021,7 +1062,7 @@ class OzVault {
         this.loadErrorTimeoutId = null;
         // Proactive wax refresh on visibility restore after long idle
         this._hiddenAt = null;
-        this.waxKey = waxKey;
+        __classPrivateFieldSet(this, _OzVault_waxKey, waxKey, "f");
         this.tokenizationSessionId = tokenizationSessionId;
         this.pubKey = options.pubKey;
         // Strip trailing slash so URL construction never produces double-slash paths
@@ -1133,8 +1174,8 @@ class OzVault {
             vault.destroy();
             throw new OzError('Session fetch returned an empty key. Check your session endpoint response — it must return { sessionKey: "..." }.');
         }
-        // Static methods can access private fields of instances of the same class.
-        vault.waxKey = waxKey;
+        // Static methods can access hard-private fields of instances of the same class.
+        __classPrivateFieldSet(vault, _OzVault_waxKey, waxKey, "f");
         vault._storedFetchWaxKey = resolvedFetchKey;
         // If the tokenizer iframe fired OZ_FRAME_READY before fetchWaxKey resolved,
         // the OZ_INIT sent at that point had an empty waxKey. Send a follow-up now
@@ -1651,7 +1692,7 @@ class OzVault {
             isReady: this.tokenizerReady,
             tokenizing: this._tokenizing,
             destroyed: this._destroyed,
-            waxKeyPresent: Boolean(this.waxKey),
+            waxKeyPresent: Boolean(__classPrivateFieldGet(this, _OzVault_waxKey, "f")),
             tokenizeSuccessCount: this._tokenizeSuccessCount,
             maxTokenizeCalls: this._maxTokenizeCalls,
             resetCount: this._resetCount,
@@ -1669,6 +1710,17 @@ class OzVault {
             iframe.style.cssText = 'position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;';
             iframe.setAttribute('aria-hidden', 'true');
             iframe.tabIndex = -1;
+            // allow-scripts: JS runs. allow-same-origin: frame keeps its actual origin
+            // (elements.ozura.com) so fetch() CORS requests carry the correct Origin
+            // header. Without allow-same-origin the frame gets a null opaque origin and
+            // the vault API's CORS policy would reject it.
+            // NOT included: allow-top-navigation, allow-popups, allow-forms — prevents
+            // a compromised tokenizer frame from navigating the merchant page or opening
+            // popups even if the CDN bundle were somehow replaced.
+            // Note: allow-scripts + allow-same-origin on a cross-origin iframe does NOT
+            // expose window.parent — Same Origin Policy still applies between
+            // elements.ozura.com and the merchant domain.
+            iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
             const parentOrigin = typeof window !== 'undefined' ? window.location.origin : '';
             iframe.src = `${this.frameBaseUrl}/frame/tokenizer-frame.html#vaultId=${encodeURIComponent(this.vaultId)}${parentOrigin ? `&parentOrigin=${encodeURIComponent(parentOrigin)}` : ''}`;
             document.body.appendChild(iframe);
@@ -1804,7 +1856,7 @@ 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(Object.assign({ type: 'OZ_INIT', frameId: '__tokenizer__' }, (this.waxKey ? { waxKey: this.waxKey } : {})), { debug: this._debug }));
+                this.sendToTokenizer(Object.assign(Object.assign({ type: 'OZ_INIT', frameId: '__tokenizer__' }, (__classPrivateFieldGet(this, _OzVault_waxKey, "f") ? { waxKey: __classPrivateFieldGet(this, _OzVault_waxKey, "f") } : {})), { 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());
@@ -2110,7 +2162,7 @@ class OzVault {
                 throw new OzError('fetchWaxKey returned an empty string during auto-refresh.', undefined, 'auth');
             }
             if (!this._destroyed) {
-                this.waxKey = newWaxKey;
+                __classPrivateFieldSet(this, _OzVault_waxKey, newWaxKey, "f");
                 this.tokenizationSessionId = newSessionId;
                 this._tokenizeSuccessCount = 0;
             }
@@ -2134,6 +2186,7 @@ class OzVault {
         (_a = this.tokenizerWindow) === null || _a === void 0 ? void 0 : _a.postMessage(msg, this.frameOrigin, transfer !== null && transfer !== void 0 ? transfer : []);
     }
 }
+_OzVault_waxKey = new WeakMap();
 
 /**
  * @ozura/elements/vue — Vue 3 wrapper for OzElements.
@@ -2177,6 +2230,10 @@ const OzElements = vue.defineComponent({
         appearance: { type: Object, default: undefined },
         loadTimeoutMs: { type: Number, default: undefined },
         debug: { type: Boolean, default: undefined },
+        onSessionRefresh: { type: Function, default: undefined },
+        onReady: { type: Function, default: undefined },
+        sessionLimit: { type: Number, default: undefined },
+        maxTokenizeCalls: { type: Number, default: undefined },
     },
     emits: ['ready'],
     setup(props, { slots, emit }) {
@@ -2188,15 +2245,20 @@ const OzElements = vue.defineComponent({
         const notifyMount = () => { mountedCount.value++; };
         let readyEmitted = false;
         const notifyReady = () => {
+            var _a;
             readyCount.value++;
             if (!readyEmitted && mountedCount.value > 0 && readyCount.value >= mountedCount.value) {
                 readyEmitted = true;
                 emit('ready');
+                (_a = props.onReady) === null || _a === void 0 ? void 0 : _a.call(props);
             }
         };
         const notifyUnmount = () => {
             mountedCount.value = Math.max(0, mountedCount.value - 1);
             readyCount.value = Math.max(0, readyCount.value - 1);
+            // A field leaving means the form is no longer fully ready. Reset the gate
+            // so 'ready' fires again once all fields are back up.
+            readyEmitted = false;
         };
         const notifyTokenize = () => { tokenizeCount.value++; };
         vue.provide(OZ_KEY, {
@@ -2215,7 +2277,17 @@ const OzElements = vue.defineComponent({
         vue.onMounted(() => {
             const ac = new AbortController();
             abortController = ac;
-            OzVault.create(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ pubKey: props.pubKey }, (props.sessionUrl ? { sessionUrl: props.sessionUrl } : {})), (props.getSessionKey ? { getSessionKey: props.getSessionKey } : {})), (props.frameBaseUrl ? { frameBaseUrl: props.frameBaseUrl } : {})), (props.fonts ? { fonts: props.fonts } : {})), (props.appearance ? { appearance: props.appearance } : {})), (props.loadTimeoutMs !== undefined ? { loadTimeoutMs: props.loadTimeoutMs } : {})), (props.debug ? { debug: props.debug } : {})), ac.signal).then(v => {
+            OzVault.create(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ pubKey: props.pubKey }, (props.sessionUrl ? { sessionUrl: props.sessionUrl } : {})), (props.getSessionKey ? { getSessionKey: props.getSessionKey } : {})), (props.frameBaseUrl ? { frameBaseUrl: props.frameBaseUrl } : {})), (props.fonts ? { fonts: props.fonts } : {})), (props.appearance ? { appearance: props.appearance } : {})), (props.loadTimeoutMs !== undefined ? { loadTimeoutMs: props.loadTimeoutMs } : {})), (props.debug ? { debug: props.debug } : {})), { 
+                // Session lifecycle — wire refresh callback and reset tokenizeCount so the
+                // counter stays accurate across proactive key refreshes (mirrors React provider).
+                // Deferred by one microtask for the same reason as React: notifyTokenize fires
+                // in the same tick as the refresh trigger, so resetting synchronously would
+                // race the increment. The microtask ensures the increment lands first.
+                onSessionRefresh: () => {
+                    var _a;
+                    Promise.resolve().then(() => { tokenizeCount.value = 0; });
+                    (_a = props.onSessionRefresh) === null || _a === void 0 ? void 0 : _a.call(props);
+                } }), (props.sessionLimit !== undefined ? { sessionLimit: props.sessionLimit } : {})), (props.maxTokenizeCalls !== undefined ? { maxTokenizeCalls: props.maxTokenizeCalls } : {})), ac.signal).then(v => {
                 if (ac.signal.aborted) {
                     v.destroy();
                     return;