@ozura/elements 1.3.1-next.68 → 1.3.1-next.70

package/dist/vue/index.esm.js

@@ -1114,7 +1114,7 @@ class OzVault {
             this.loadErrorTimeoutId = setTimeout(() => {
                 this.loadErrorTimeoutId = null;
                 if (!this._destroyed && !this.tokenizerReady) {
-                    options.onLoadError();
+                    options.onLoadError({ source: 'tokenizer' });
                 }
             }, timeout);
         }
@@ -1247,6 +1247,39 @@ 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() {
+        if (this.elements.size === 0)
+            return false;
+        for (const frameId of this.elements.keys()) {
+            if (this.completionState.get(frameId) !== true)
+                return false;
+        }
+        return 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.
@@ -1329,17 +1362,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');
@@ -1365,14 +1410,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();
@@ -1381,8 +1419,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 });
@@ -2104,7 +2142,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,
@@ -2271,6 +2309,7 @@ const OzElements = defineComponent({
         debug: { type: Boolean, default: undefined },
         onSessionRefresh: { type: Function, default: undefined },
         onReady: { type: Function, default: undefined },
+        onLoadError: { type: Function, default: undefined },
         sessionLimit: { type: Number, default: undefined },
         maxTokenizeCalls: { type: Number, default: undefined },
     },
@@ -2316,7 +2355,20 @@ const OzElements = defineComponent({
         onMounted(() => {
             const ac = new AbortController();
             abortController = ac;
-            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 } : {})), { 
+            // Guard: onLoadError must fire at most once per mount cycle. It can be
+            // triggered by two independent paths — the vault's iframe load timeout
+            // (inside OzVault constructor) and the .catch below when create() rejects
+            // after the timeout has already fired. Without this flag both paths would
+            // call the callback, mirroring the same guard used in the React provider.
+            let loadErrorFired = false;
+            const fireLoadError = () => {
+                var _a;
+                if (loadErrorFired)
+                    return;
+                loadErrorFired = true;
+                (_a = props.onLoadError) === null || _a === void 0 ? void 0 : _a.call(props, { source: 'tokenizer' });
+            };
+            OzVault.create(Object.assign(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.onLoadError ? { onLoadError: fireLoadError } : {})), (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
@@ -2338,6 +2390,12 @@ const OzElements = defineComponent({
                 if (ac.signal.aborted)
                     return;
                 initError.value = err instanceof Error ? err : new Error('OzVault.create() failed.');
+                if (props.onLoadError) {
+                    fireLoadError();
+                }
+                else {
+                    console.error('[OzElements] OzVault.create() failed. Provide an `onLoadError` prop to handle this gracefully.', err);
+                }
             });
         });
         onUnmounted(() => {