npm - @ozura/elements - Versions diffs - 1.3.1 → 1.4.0 - Mend

@ozura/elements 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/dist/frame/element-frame.html +1 -1
package/dist/frame/element-frame.js +7 -4
package/dist/frame/tokenizer-frame.html +1 -1
package/dist/frame/tokenizer-frame.js +5 -6
package/dist/oz-elements.esm.js +70 -22
package/dist/oz-elements.umd.js +70 -22
package/dist/react/index.cjs.js +114 -38
package/dist/react/index.esm.js +114 -38
package/dist/react/react/index.d.ts +29 -1
package/dist/react/sdk/OzVault.d.ts +33 -0
package/dist/react/types/index.d.ts +30 -5
package/dist/react/vue/index.d.ts +56 -1
package/dist/server/sdk/OzVault.d.ts +33 -0
package/dist/server/types/index.d.ts +30 -5
package/dist/server/vue/index.d.ts +56 -1
package/dist/types/sdk/OzVault.d.ts +33 -0
package/dist/types/types/index.d.ts +30 -5
package/dist/types/vue/index.d.ts +56 -1
package/dist/vue/index.cjs.js +135 -35
package/dist/vue/index.esm.js +135 -35
package/dist/vue/sdk/OzVault.d.ts +33 -0
package/dist/vue/types/index.d.ts +30 -5
package/dist/vue/vue/index.d.ts +56 -1
package/package.json +1 -1
package/dist/react/index.cjs.js.map +0 -1
package/dist/react/index.esm.js.map +0 -1
package/dist/vue/index.cjs.js.map +0 -1
package/dist/vue/index.esm.js.map +0 -1

package/dist/frame/element-frame.html CHANGED Viewed

@@ -17,6 +17,6 @@
   </style>
 </head>
 <body>
-  <script src="./element-frame.js" integrity="sha384-xpV1wS1ZIxuDGHUg8WQAbQr94m8oGwI4CutCvD37d7sacy9sRmi4CA/EU62Mrd2I" crossorigin="anonymous"></script>
+  <script src="./element-frame.js" integrity="sha384-cIulRhFy1VmJOkAhGUL37LXgMI2dlGiy0XbrrqeZ/IvsXlcq7U+Z1+KLIKb4Ty1G" crossorigin="anonymous"></script>
 </body>
 </html>

package/dist/frame/element-frame.js CHANGED Viewed

@@ -588,10 +588,13 @@ var _OzElementFrame = (function (exports) {
             const msg = event.data;
             if (!msg || msg.__oz !== true || msg.vaultId !== this.vaultId)
                 return;
-            if (!this.hostOrigin) {
-                this.hostOrigin = event.origin;
-            }
-            else if (event.origin !== this.hostOrigin) {
+            // Reject messages when parentOrigin was absent/invalid, and messages from
+            // any origin that doesn't match the validated parentOrigin. Never adopt an
+            // unknown sender as the host — that would let any page that guesses the
+            // vaultId hijack the frame's postMessage target. The SDK always supplies
+            // parentOrigin in the hash; if it's missing, the frame is non-functional
+            // by design rather than open to the first sender.
+            if (!this.hostOrigin || event.origin !== this.hostOrigin) {
                 return;
             }
             switch (msg.type) {

package/dist/frame/tokenizer-frame.html CHANGED Viewed

@@ -6,6 +6,6 @@
   <title>Ozura Tokenizer</title>
 </head>
 <body>
-  <script src="./tokenizer-frame.js" integrity="sha384-jKzyFta4CjrMb8YW6wX9/MzSUp55uqUytZeya/g55SgF9IvsJ39Jveh4AhwszApc" crossorigin="anonymous"></script>
+  <script src="./tokenizer-frame.js" integrity="sha384-n3WeN859wcdlVjR0zCrcbTWEtfZyxw682z21vn2OGkjLOtPfrDa9IqywSkLhNh3e" crossorigin="anonymous"></script>
 </body>
 </html>

package/dist/frame/tokenizer-frame.js CHANGED Viewed

@@ -143,15 +143,14 @@ var _OzTokenizerFrame = (function (exports) {
                 return;
             switch (msg.type) {
                 case 'OZ_INIT':
-                    if (!this.hostOrigin) {
-                        this.hostOrigin = event.origin;
-                    }
+                    // Never adopt an unknown sender as the host. If parentOrigin was absent
+                    // or failed safeParentOrigin() validation, hostOrigin is "" and this
+                    // frame is non-functional by design — rejecting all messages is safer
+                    // than trusting the first sender. The SDK always supplies parentOrigin.
                     // Origin-validated wax key store. Accepts both the initial delivery and
                     // subsequent refresh deliveries (sent by OzVault.refreshWaxKey() after
                     // minting a new key). Origin validation is the security boundary —
-                    // messages from any origin other than the one that sent the first
-                    // OZ_INIT are rejected. The previous write-once guard blocked refreshes
-                    // and made the auto-refresh feature non-functional.
+                    // messages from any origin other than hostOrigin are silently dropped.
                     if (event.origin === this.hostOrigin && typeof msg.waxKey === 'string' && msg.waxKey) {
                         this.waxKey = msg.waxKey;
                     }

package/dist/oz-elements.esm.js CHANGED Viewed

@@ -1167,7 +1167,7 @@ class OzVault {
             this.loadErrorTimeoutId = setTimeout(() => {
                 this.loadErrorTimeoutId = null;
                 if (!this._destroyed && !this.tokenizerReady) {
-                    options.onLoadError();
+                    options.onLoadError({ source: 'tokenizer' });
                 }
             }, timeout);
         }
@@ -1300,6 +1300,49 @@ class OzVault {
     get tokenizeCount() {
         return this._tokenizeSuccessCount;
     }
+    /**
+     * `true` when every mounted field has reported `complete && valid` via its
+     * last `change` event. `false` if no fields have been created, or if any
+     * field is incomplete or invalid.
+     *
+     * Use this to gate the pay button in vanilla JS integrations without having
+     * to wire up individual `change` event listeners:
+     *
+     * @example
+     * vault.getElement('cardNumber')!.on('change', () => {
+     *   payBtn.disabled = !vault.isComplete;
+     * });
+     */
+    get isComplete() {
+        return this.allComplete([...this.elementsByType.values()]);
+    }
+    /**
+     * Like {@link isComplete}, but for bank-account elements created via
+     * {@link createBankElement}. Card and bank fields are tracked separately so a
+     * card-only checkout is never gated on bank fields (and vice versa), matching
+     * the `createToken()` / `createBankToken()` split. A vault with both card and
+     * bank elements exposes each completion state independently.
+     */
+    get isBankComplete() {
+        return this.allComplete([...this.bankElementsByType.values()]);
+    }
+    /** True iff the set is non-empty and every element has reported complete-and-valid. */
+    allComplete(els) {
+        if (els.length === 0)
+            return false;
+        return els.every(el => this.completionState.get(el.frameId) === true);
+    }
+    /**
+     * `true` while a `createToken()` or `createBankToken()` call is in progress
+     * (including the transparent wax-key refresh phase). Use this to keep the pay
+     * button disabled during tokenization to prevent double-submission.
+     *
+     * @example
+     * payBtn.disabled = vault.isTokenizing;
+     */
+    get isTokenizing() {
+        return this._tokenizing !== null;
+    }
     /**
      * Creates a new OzElement of the given type. Call `.mount(selector)` on the
      * returned element to attach it to the DOM.
@@ -1382,17 +1425,29 @@ class OzVault {
                 ? 'A card tokenization is already in progress. Wait for it to complete before calling createBankToken().'
                 : 'A bank tokenization is already in progress. Wait for it to complete before calling createBankToken() again.');
         }
-        if (!((_a = options.firstName) === null || _a === void 0 ? void 0 : _a.trim())) {
-            throw new OzError('firstName is required for bank account tokenization.');
-        }
-        if (!((_b = options.lastName) === null || _b === void 0 ? void 0 : _b.trim())) {
-            throw new OzError('lastName is required for bank account tokenization.');
-        }
-        if (options.firstName.trim().length > 50) {
-            throw new OzError('firstName must be 50 characters or fewer.');
+        // Validate billing details if provided — billing.firstName/lastName take
+        // precedence over the top-level params (mirrors createToken() behaviour).
+        let normalizedBankBilling;
+        let bankFirstName = ((_a = options.firstName) !== null && _a !== void 0 ? _a : '').trim();
+        let bankLastName = ((_b = options.lastName) !== null && _b !== void 0 ? _b : '').trim();
+        if (options.billing) {
+            const result = validateBilling(options.billing);
+            if (!result.valid) {
+                throw new OzError(`Invalid billing details: ${result.errors.join('; ')}`);
+            }
+            normalizedBankBilling = result.normalized;
+            bankFirstName = normalizedBankBilling.firstName;
+            bankLastName = normalizedBankBilling.lastName;
         }
-        if (options.lastName.trim().length > 50) {
-            throw new OzError('lastName must be 50 characters or fewer.');
+        else {
+            if (!bankFirstName)
+                throw new OzError('firstName is required for bank account tokenization.');
+            if (!bankLastName)
+                throw new OzError('lastName is required for bank account tokenization.');
+            if (bankFirstName.length > 50)
+                throw new OzError('firstName must be 50 characters or fewer.');
+            if (bankLastName.length > 50)
+                throw new OzError('lastName must be 50 characters or fewer.');
         }
         const accountEl = this.bankElementsByType.get('accountNumber');
         const routingEl = this.bankElementsByType.get('routingNumber');
@@ -1418,14 +1473,7 @@ class OzVault {
                 if (this._resetCount === resetCountAtStart)
                     this._tokenizing = null;
             };
-            this.bankTokenizeResolvers.set(requestId, {
-                resolve: (v) => { cleanup(); resolve(v); },
-                reject: (e) => { cleanup(); reject(e); },
-                firstName: options.firstName.trim(),
-                lastName: options.lastName.trim(),
-                readyElements: readyBankElements,
-                fieldCount: readyBankElements.length,
-            });
+            this.bankTokenizeResolvers.set(requestId, Object.assign(Object.assign({ resolve: (v) => { cleanup(); resolve(v); }, reject: (e) => { cleanup(); reject(e); }, firstName: bankFirstName, lastName: bankLastName }, (normalizedBankBilling ? { billing: normalizedBankBilling } : {})), { readyElements: readyBankElements, fieldCount: readyBankElements.length }));
             try {
                 const bankChannels = readyBankElements.map(() => new MessageChannel());
                 const bankTokenizeStartMs = Date.now();
@@ -1434,8 +1482,8 @@ class OzVault {
                     requestId,
                     tokenizationSessionId: this.tokenizationSessionId,
                     pubKey: (_a = this.pubKey) !== null && _a !== void 0 ? _a : '',
-                    firstName: options.firstName.trim(),
-                    lastName: options.lastName.trim(),
+                    firstName: bankFirstName,
+                    lastName: bankLastName,
                     fieldCount: readyBankElements.length,
                 }, bankChannels.map(ch => ch.port1));
                 this.log('OZ_BANK_TOKENIZE sent', { requestIdPrefix: `${requestId.slice(0, 12)}...`, fieldCount: readyBankElements.length });
@@ -2157,7 +2205,7 @@ class OzVault {
                         break;
                     }
                     const bank = isBankAccountMetadata(msg.bank) ? msg.bank : undefined;
-                    pending.resolve(Object.assign({ token }, (bank ? { bank } : {})));
+                    pending.resolve(Object.assign(Object.assign({ token }, (bank ? { bank } : {})), (pending.billing ? { billing: pending.billing } : {})));
                     this.log('bank token received', {
                         elapsedMs: pending.tokenizeStartMs != null ? Date.now() - pending.tokenizeStartMs : null,
                         tokenPresent: true,

package/dist/oz-elements.umd.js CHANGED Viewed

@@ -1173,7 +1173,7 @@
                 this.loadErrorTimeoutId = setTimeout(() => {
                     this.loadErrorTimeoutId = null;
                     if (!this._destroyed && !this.tokenizerReady) {
-                        options.onLoadError();
+                        options.onLoadError({ source: 'tokenizer' });
                     }
                 }, timeout);
             }
@@ -1306,6 +1306,49 @@
         get tokenizeCount() {
             return this._tokenizeSuccessCount;
         }
+        /**
+         * `true` when every mounted field has reported `complete && valid` via its
+         * last `change` event. `false` if no fields have been created, or if any
+         * field is incomplete or invalid.
+         *
+         * Use this to gate the pay button in vanilla JS integrations without having
+         * to wire up individual `change` event listeners:
+         *
+         * @example
+         * vault.getElement('cardNumber')!.on('change', () => {
+         *   payBtn.disabled = !vault.isComplete;
+         * });
+         */
+        get isComplete() {
+            return this.allComplete([...this.elementsByType.values()]);
+        }
+        /**
+         * Like {@link isComplete}, but for bank-account elements created via
+         * {@link createBankElement}. Card and bank fields are tracked separately so a
+         * card-only checkout is never gated on bank fields (and vice versa), matching
+         * the `createToken()` / `createBankToken()` split. A vault with both card and
+         * bank elements exposes each completion state independently.
+         */
+        get isBankComplete() {
+            return this.allComplete([...this.bankElementsByType.values()]);
+        }
+        /** True iff the set is non-empty and every element has reported complete-and-valid. */
+        allComplete(els) {
+            if (els.length === 0)
+                return false;
+            return els.every(el => this.completionState.get(el.frameId) === true);
+        }
+        /**
+         * `true` while a `createToken()` or `createBankToken()` call is in progress
+         * (including the transparent wax-key refresh phase). Use this to keep the pay
+         * button disabled during tokenization to prevent double-submission.
+         *
+         * @example
+         * payBtn.disabled = vault.isTokenizing;
+         */
+        get isTokenizing() {
+            return this._tokenizing !== null;
+        }
         /**
          * Creates a new OzElement of the given type. Call `.mount(selector)` on the
          * returned element to attach it to the DOM.
@@ -1388,17 +1431,29 @@
                     ? 'A card tokenization is already in progress. Wait for it to complete before calling createBankToken().'
                     : 'A bank tokenization is already in progress. Wait for it to complete before calling createBankToken() again.');
             }
-            if (!((_a = options.firstName) === null || _a === void 0 ? void 0 : _a.trim())) {
-                throw new OzError('firstName is required for bank account tokenization.');
-            }
-            if (!((_b = options.lastName) === null || _b === void 0 ? void 0 : _b.trim())) {
-                throw new OzError('lastName is required for bank account tokenization.');
-            }
-            if (options.firstName.trim().length > 50) {
-                throw new OzError('firstName must be 50 characters or fewer.');
+            // Validate billing details if provided — billing.firstName/lastName take
+            // precedence over the top-level params (mirrors createToken() behaviour).
+            let normalizedBankBilling;
+            let bankFirstName = ((_a = options.firstName) !== null && _a !== void 0 ? _a : '').trim();
+            let bankLastName = ((_b = options.lastName) !== null && _b !== void 0 ? _b : '').trim();
+            if (options.billing) {
+                const result = validateBilling(options.billing);
+                if (!result.valid) {
+                    throw new OzError(`Invalid billing details: ${result.errors.join('; ')}`);
+                }
+                normalizedBankBilling = result.normalized;
+                bankFirstName = normalizedBankBilling.firstName;
+                bankLastName = normalizedBankBilling.lastName;
             }
-            if (options.lastName.trim().length > 50) {
-                throw new OzError('lastName must be 50 characters or fewer.');
+            else {
+                if (!bankFirstName)
+                    throw new OzError('firstName is required for bank account tokenization.');
+                if (!bankLastName)
+                    throw new OzError('lastName is required for bank account tokenization.');
+                if (bankFirstName.length > 50)
+                    throw new OzError('firstName must be 50 characters or fewer.');
+                if (bankLastName.length > 50)
+                    throw new OzError('lastName must be 50 characters or fewer.');
             }
             const accountEl = this.bankElementsByType.get('accountNumber');
             const routingEl = this.bankElementsByType.get('routingNumber');
@@ -1424,14 +1479,7 @@
                     if (this._resetCount === resetCountAtStart)
                         this._tokenizing = null;
                 };
-                this.bankTokenizeResolvers.set(requestId, {
-                    resolve: (v) => { cleanup(); resolve(v); },
-                    reject: (e) => { cleanup(); reject(e); },
-                    firstName: options.firstName.trim(),
-                    lastName: options.lastName.trim(),
-                    readyElements: readyBankElements,
-                    fieldCount: readyBankElements.length,
-                });
+                this.bankTokenizeResolvers.set(requestId, Object.assign(Object.assign({ resolve: (v) => { cleanup(); resolve(v); }, reject: (e) => { cleanup(); reject(e); }, firstName: bankFirstName, lastName: bankLastName }, (normalizedBankBilling ? { billing: normalizedBankBilling } : {})), { readyElements: readyBankElements, fieldCount: readyBankElements.length }));
                 try {
                     const bankChannels = readyBankElements.map(() => new MessageChannel());
                     const bankTokenizeStartMs = Date.now();
@@ -1440,8 +1488,8 @@
                         requestId,
                         tokenizationSessionId: this.tokenizationSessionId,
                         pubKey: (_a = this.pubKey) !== null && _a !== void 0 ? _a : '',
-                        firstName: options.firstName.trim(),
-                        lastName: options.lastName.trim(),
+                        firstName: bankFirstName,
+                        lastName: bankLastName,
                         fieldCount: readyBankElements.length,
                     }, bankChannels.map(ch => ch.port1));
                     this.log('OZ_BANK_TOKENIZE sent', { requestIdPrefix: `${requestId.slice(0, 12)}...`, fieldCount: readyBankElements.length });
@@ -2163,7 +2211,7 @@
                             break;
                         }
                         const bank = isBankAccountMetadata(msg.bank) ? msg.bank : undefined;
-                        pending.resolve(Object.assign({ token }, (bank ? { bank } : {})));
+                        pending.resolve(Object.assign(Object.assign({ token }, (bank ? { bank } : {})), (pending.billing ? { billing: pending.billing } : {})));
                         this.log('bank token received', {
                             elapsedMs: pending.tokenizeStartMs != null ? Date.now() - pending.tokenizeStartMs : null,
                             tokenPresent: true,

package/dist/react/index.cjs.js CHANGED Viewed

@@ -1117,7 +1117,7 @@ class OzVault {
             this.loadErrorTimeoutId = setTimeout(() => {
                 this.loadErrorTimeoutId = null;
                 if (!this._destroyed && !this.tokenizerReady) {
-                    options.onLoadError();
+                    options.onLoadError({ source: 'tokenizer' });
                 }
             }, timeout);
         }
@@ -1250,6 +1250,49 @@ class OzVault {
     get tokenizeCount() {
         return this._tokenizeSuccessCount;
     }
+    /**
+     * `true` when every mounted field has reported `complete && valid` via its
+     * last `change` event. `false` if no fields have been created, or if any
+     * field is incomplete or invalid.
+     *
+     * Use this to gate the pay button in vanilla JS integrations without having
+     * to wire up individual `change` event listeners:
+     *
+     * @example
+     * vault.getElement('cardNumber')!.on('change', () => {
+     *   payBtn.disabled = !vault.isComplete;
+     * });
+     */
+    get isComplete() {
+        return this.allComplete([...this.elementsByType.values()]);
+    }
+    /**
+     * Like {@link isComplete}, but for bank-account elements created via
+     * {@link createBankElement}. Card and bank fields are tracked separately so a
+     * card-only checkout is never gated on bank fields (and vice versa), matching
+     * the `createToken()` / `createBankToken()` split. A vault with both card and
+     * bank elements exposes each completion state independently.
+     */
+    get isBankComplete() {
+        return this.allComplete([...this.bankElementsByType.values()]);
+    }
+    /** True iff the set is non-empty and every element has reported complete-and-valid. */
+    allComplete(els) {
+        if (els.length === 0)
+            return false;
+        return els.every(el => this.completionState.get(el.frameId) === true);
+    }
+    /**
+     * `true` while a `createToken()` or `createBankToken()` call is in progress
+     * (including the transparent wax-key refresh phase). Use this to keep the pay
+     * button disabled during tokenization to prevent double-submission.
+     *
+     * @example
+     * payBtn.disabled = vault.isTokenizing;
+     */
+    get isTokenizing() {
+        return this._tokenizing !== null;
+    }
     /**
      * Creates a new OzElement of the given type. Call `.mount(selector)` on the
      * returned element to attach it to the DOM.
@@ -1332,17 +1375,29 @@ class OzVault {
                 ? 'A card tokenization is already in progress. Wait for it to complete before calling createBankToken().'
                 : 'A bank tokenization is already in progress. Wait for it to complete before calling createBankToken() again.');
         }
-        if (!((_a = options.firstName) === null || _a === void 0 ? void 0 : _a.trim())) {
-            throw new OzError('firstName is required for bank account tokenization.');
-        }
-        if (!((_b = options.lastName) === null || _b === void 0 ? void 0 : _b.trim())) {
-            throw new OzError('lastName is required for bank account tokenization.');
-        }
-        if (options.firstName.trim().length > 50) {
-            throw new OzError('firstName must be 50 characters or fewer.');
+        // Validate billing details if provided — billing.firstName/lastName take
+        // precedence over the top-level params (mirrors createToken() behaviour).
+        let normalizedBankBilling;
+        let bankFirstName = ((_a = options.firstName) !== null && _a !== void 0 ? _a : '').trim();
+        let bankLastName = ((_b = options.lastName) !== null && _b !== void 0 ? _b : '').trim();
+        if (options.billing) {
+            const result = validateBilling(options.billing);
+            if (!result.valid) {
+                throw new OzError(`Invalid billing details: ${result.errors.join('; ')}`);
+            }
+            normalizedBankBilling = result.normalized;
+            bankFirstName = normalizedBankBilling.firstName;
+            bankLastName = normalizedBankBilling.lastName;
         }
-        if (options.lastName.trim().length > 50) {
-            throw new OzError('lastName must be 50 characters or fewer.');
+        else {
+            if (!bankFirstName)
+                throw new OzError('firstName is required for bank account tokenization.');
+            if (!bankLastName)
+                throw new OzError('lastName is required for bank account tokenization.');
+            if (bankFirstName.length > 50)
+                throw new OzError('firstName must be 50 characters or fewer.');
+            if (bankLastName.length > 50)
+                throw new OzError('lastName must be 50 characters or fewer.');
         }
         const accountEl = this.bankElementsByType.get('accountNumber');
         const routingEl = this.bankElementsByType.get('routingNumber');
@@ -1368,14 +1423,7 @@ class OzVault {
                 if (this._resetCount === resetCountAtStart)
                     this._tokenizing = null;
             };
-            this.bankTokenizeResolvers.set(requestId, {
-                resolve: (v) => { cleanup(); resolve(v); },
-                reject: (e) => { cleanup(); reject(e); },
-                firstName: options.firstName.trim(),
-                lastName: options.lastName.trim(),
-                readyElements: readyBankElements,
-                fieldCount: readyBankElements.length,
-            });
+            this.bankTokenizeResolvers.set(requestId, Object.assign(Object.assign({ resolve: (v) => { cleanup(); resolve(v); }, reject: (e) => { cleanup(); reject(e); }, firstName: bankFirstName, lastName: bankLastName }, (normalizedBankBilling ? { billing: normalizedBankBilling } : {})), { readyElements: readyBankElements, fieldCount: readyBankElements.length }));
             try {
                 const bankChannels = readyBankElements.map(() => new MessageChannel());
                 const bankTokenizeStartMs = Date.now();
@@ -1384,8 +1432,8 @@ class OzVault {
                     requestId,
                     tokenizationSessionId: this.tokenizationSessionId,
                     pubKey: (_a = this.pubKey) !== null && _a !== void 0 ? _a : '',
-                    firstName: options.firstName.trim(),
-                    lastName: options.lastName.trim(),
+                    firstName: bankFirstName,
+                    lastName: bankLastName,
                     fieldCount: readyBankElements.length,
                 }, bankChannels.map(ch => ch.port1));
                 this.log('OZ_BANK_TOKENIZE sent', { requestIdPrefix: `${requestId.slice(0, 12)}...`, fieldCount: readyBankElements.length });
@@ -2107,7 +2155,7 @@ class OzVault {
                         break;
                     }
                     const bank = isBankAccountMetadata(msg.bank) ? msg.bank : undefined;
-                    pending.resolve(Object.assign({ token }, (bank ? { bank } : {})));
+                    pending.resolve(Object.assign(Object.assign({ token }, (bank ? { bank } : {})), (pending.billing ? { billing: pending.billing } : {})));
                     this.log('bank token received', {
                         elapsedMs: pending.tokenizeStartMs != null ? Date.now() - pending.tokenizeStartMs : null,
                         tokenPresent: true,
@@ -2237,9 +2285,11 @@ const OzContext = react.createContext({
     notifyUnmount: () => { },
     notifyMount: () => { },
     notifyTokenize: () => { },
+    notifyChange: () => { },
     mountedCount: 0,
     readyCount: 0,
     tokenizeCount: 0,
+    changeTick: 0,
 });
 /**
  * Creates and owns an OzVault instance for the lifetime of this component.
@@ -2252,6 +2302,7 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
     const [mountedCount, setMountedCount] = react.useState(0);
     const [readyCount, setReadyCount] = react.useState(0);
     const [tokenizeCount, setTokenizeCount] = react.useState(0);
+    const [changeTick, setChangeTick] = react.useState(0);
     const onLoadErrorRef = react.useRef(onLoadError);
     onLoadErrorRef.current = onLoadError;
     const onWaxRefreshRef = react.useRef(onSessionRefresh !== null && onSessionRefresh !== void 0 ? onSessionRefresh : onWaxRefresh);
@@ -2290,7 +2341,7 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
             if (loadErrorFired)
                 return;
             loadErrorFired = true;
-            (_a = onLoadErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadErrorRef);
+            (_a = onLoadErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadErrorRef, { source: 'tokenizer' });
         };
         // AbortController passed to create() so that if this effect's cleanup runs
         // while fetchWaxKey is still in-flight (React StrictMode double-invoke or
@@ -2374,7 +2425,8 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
         setReadyCount(n => Math.max(0, n - 1));
     }, []);
     const notifyTokenize = react.useCallback(() => setTokenizeCount(n => n + 1), []);
-    const value = react.useMemo(() => ({ vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, mountedCount, readyCount, tokenizeCount }), [vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, mountedCount, readyCount, tokenizeCount]);
+    const notifyChange = react.useCallback(() => setChangeTick(n => n + 1), []);
+    const value = react.useMemo(() => ({ vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, notifyChange, mountedCount, readyCount, tokenizeCount, changeTick }), [vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, notifyChange, mountedCount, readyCount, tokenizeCount, changeTick]);
     return jsxRuntime.jsx(OzContext.Provider, { value: value, children: children });
 }
 /**
@@ -2382,28 +2434,53 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
  * an `<OzElements>` provider tree.
  */
 function useOzElements() {
-    const { vault, initError, mountedCount, readyCount, notifyTokenize, tokenizeCount } = react.useContext(OzContext);
+    var _a, _b, _c;
+    const { vault, initError, mountedCount, readyCount, notifyTokenize, notifyChange, tokenizeCount } = react.useContext(OzContext);
     const createToken = react.useCallback(async (options) => {
         if (!vault) {
             return Promise.reject(new OzError('useOzElements must be called inside an <OzElements> provider.'));
         }
-        const result = await vault.createToken(options);
-        notifyTokenize();
-        return result;
-    }, [vault, notifyTokenize]);
+        // Start the call so vault._tokenizing flips synchronously, then notify so
+        // `isTokenizing` re-renders as `true`. Notify again on settle so it returns
+        // to `false`. (vault.isTokenizing is a plain getter — nothing else would
+        // trigger a render while the call is in flight.)
+        const promise = vault.createToken(options);
+        notifyChange();
+        try {
+            const result = await promise;
+            notifyTokenize();
+            return result;
+        }
+        finally {
+            notifyChange();
+        }
+    }, [vault, notifyTokenize, notifyChange]);
     const createBankToken = react.useCallback(async (options) => {
         if (!vault) {
             return Promise.reject(new OzError('useOzElements must be called inside an <OzElements> provider.'));
         }
-        const result = await vault.createBankToken(options);
-        notifyTokenize();
-        return result;
-    }, [vault, notifyTokenize]);
+        const promise = vault.createBankToken(options);
+        notifyChange();
+        try {
+            const result = await promise;
+            notifyTokenize();
+            return result;
+        }
+        finally {
+            notifyChange();
+        }
+    }, [vault, notifyTokenize, notifyChange]);
     const reset = react.useCallback(() => {
         vault === null || vault === void 0 ? void 0 : vault.reset();
-    }, [vault]);
+        // reset() clears completion state and cancels any in-flight tokenization, so
+        // re-render to refresh the derived isComplete / isTokenizing getters below.
+        notifyChange();
+    }, [vault, notifyChange]);
     const ready = vault !== null && vault.isReady && mountedCount > 0 && readyCount >= mountedCount;
-    return { createToken, createBankToken, reset, ready, initError, tokenizeCount };
+    const isComplete = (_a = vault === null || vault === void 0 ? void 0 : vault.isComplete) !== null && _a !== void 0 ? _a : false;
+    const isBankComplete = (_b = vault === null || vault === void 0 ? void 0 : vault.isBankComplete) !== null && _b !== void 0 ? _b : false;
+    const isTokenizing = (_c = vault === null || vault === void 0 ? void 0 : vault.isTokenizing) !== null && _c !== void 0 ? _c : false;
+    return { createToken, createBankToken, reset, ready, initError, tokenizeCount, isComplete, isBankComplete, isTokenizing };
 }
 const SKELETON_STYLE = {
     height: 46,
@@ -2438,7 +2515,7 @@ function OzFieldBase({ type, variant, style, placeholder, disabled, loadTimeoutM
     const elementRef = react.useRef(null);
     const [loaded, setLoaded] = react.useState(false);
     const [loadError, setLoadError] = react.useState(null);
-    const { vault, notifyMount, notifyReady, notifyUnmount } = react.useContext(OzContext);
+    const { vault, notifyMount, notifyReady, notifyUnmount, notifyChange } = react.useContext(OzContext);
     const onChangeRef = react.useRef(onChange);
     const onFocusRef = react.useRef(onFocus);
     const onBlurRef = react.useRef(onBlur);
@@ -2470,7 +2547,7 @@ function OzFieldBase({ type, variant, style, placeholder, disabled, loadTimeoutM
             notifyReady();
             (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
         });
-        element.on('change', (e) => { var _a; return (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, e); });
+        element.on('change', (e) => { var _a; (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, e); notifyChange(); });
         element.on('focus', () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef); });
         element.on('blur', () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef); });
         element.on('loaderror', (e) => {
@@ -2713,4 +2790,3 @@ exports.OzExpiry = OzExpiry;
 exports.createFetchWaxKey = createSessionFetcher;
 exports.createSessionFetcher = createSessionFetcher;
 exports.useOzElements = useOzElements;
-//# sourceMappingURL=index.cjs.js.map