@ozura/elements 1.3.1-next.69 → 1.3.1-next.71

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

@@ -356,15 +356,22 @@ export interface TokenizeOptions {
 }
 /** Options for `vault.createBankToken()`. */
 export interface BankTokenizeOptions {
-    /** Account holder first name. Required. */
-    firstName: string;
-    /** Account holder last name. Required. */
-    lastName: string;
     /**
-     * Optional billing details for the account holder.
-     * When provided, firstName and lastName inside `billing` take precedence
-     * over the top-level fields. The normalized details are echoed back in
-     * `BankTokenResponse.billing` for convenience.
+     * Account holder first name.
+     * Required when `billing` is not provided.
+     * @deprecated Pass firstName inside `billing` instead.
+     */
+    firstName?: string;
+    /**
+     * Account holder last name.
+     * Required when `billing` is not provided.
+     * @deprecated Pass lastName inside `billing` instead.
+     */
+    lastName?: string;
+    /**
+     * Billing details for the account holder. When provided, `billing.firstName`
+     * and `billing.lastName` take precedence over the top-level fields.
+     * The normalized details are echoed back in `BankTokenResponse.billing`.
      */
     billing?: BillingDetails;
 }

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

@@ -103,7 +103,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         default: undefined;
     };
     onLoadError: {
-        type: PropType<() => void>;
+        type: PropType<(info?: {
+            source: "tokenizer";
+        }) => void>;
         default: undefined;
     };
     sessionLimit: {
@@ -158,7 +160,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         default: undefined;
     };
     onLoadError: {
-        type: PropType<() => void>;
+        type: PropType<(info?: {
+            source: "tokenizer";
+        }) => void>;
         default: undefined;
     };
     sessionLimit: {
@@ -180,7 +184,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
     maxTokenizeCalls: number;
     sessionUrl: string;
     getSessionKey: (sessionId: string) => Promise<string>;
-    onLoadError: () => void;
+    onLoadError: (info?: {
+        source: "tokenizer";
+    }) => void;
     onSessionRefresh: () => void;
     onReady: () => void;
     appearance: Appearance;
@@ -213,6 +219,26 @@ export interface UseOzElementsReturn {
      * Clears all mounted element fields without destroying the vault.
      */
     reset: () => void;
+    /**
+     * `true` when every mounted field has reported `complete && valid`.
+     * Use this to gate the pay button without wiring individual `@change`
+     * listeners — reacts in real time as the customer fills in fields.
+     *
+     * @example
+     * const { ready, isComplete, createToken } = useOzElements();
+     * // <button :disabled="!ready || !isComplete" @click="createToken()">Pay</button>
+     */
+    isComplete: ComputedRef<boolean>;
+    /**
+     * `true` while `createToken()` or `createBankToken()` is in progress,
+     * including the transparent wax-key refresh phase. Use this to keep the
+     * pay button disabled and prevent double-submission.
+     *
+     * @example
+     * const { isTokenizing, createToken } = useOzElements();
+     * // <button :disabled="isTokenizing" @click="createToken()">Pay</button>
+     */
+    isTokenizing: ComputedRef<boolean>;
 }
 /**
  * Returns createToken, createBankToken, ready, initError, tokenizeCount, and reset.

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

@@ -356,15 +356,22 @@ export interface TokenizeOptions {
 }
 /** Options for `vault.createBankToken()`. */
 export interface BankTokenizeOptions {
-    /** Account holder first name. Required. */
-    firstName: string;
-    /** Account holder last name. Required. */
-    lastName: string;
     /**
-     * Optional billing details for the account holder.
-     * When provided, firstName and lastName inside `billing` take precedence
-     * over the top-level fields. The normalized details are echoed back in
-     * `BankTokenResponse.billing` for convenience.
+     * Account holder first name.
+     * Required when `billing` is not provided.
+     * @deprecated Pass firstName inside `billing` instead.
+     */
+    firstName?: string;
+    /**
+     * Account holder last name.
+     * Required when `billing` is not provided.
+     * @deprecated Pass lastName inside `billing` instead.
+     */
+    lastName?: string;
+    /**
+     * Billing details for the account holder. When provided, `billing.firstName`
+     * and `billing.lastName` take precedence over the top-level fields.
+     * The normalized details are echoed back in `BankTokenResponse.billing`.
      */
     billing?: BillingDetails;
 }

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

@@ -103,7 +103,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         default: undefined;
     };
     onLoadError: {
-        type: PropType<() => void>;
+        type: PropType<(info?: {
+            source: "tokenizer";
+        }) => void>;
         default: undefined;
     };
     sessionLimit: {
@@ -158,7 +160,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         default: undefined;
     };
     onLoadError: {
-        type: PropType<() => void>;
+        type: PropType<(info?: {
+            source: "tokenizer";
+        }) => void>;
         default: undefined;
     };
     sessionLimit: {
@@ -184,7 +188,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
     appearance: Appearance;
     onSessionRefresh: () => void;
     onReady: () => void;
-    onLoadError: () => void;
+    onLoadError: (info?: {
+        source: "tokenizer";
+    }) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export interface UseOzElementsReturn {
     /**
@@ -213,6 +219,26 @@ export interface UseOzElementsReturn {
      * Clears all mounted element fields without destroying the vault.
      */
     reset: () => void;
+    /**
+     * `true` when every mounted field has reported `complete && valid`.
+     * Use this to gate the pay button without wiring individual `@change`
+     * listeners — reacts in real time as the customer fills in fields.
+     *
+     * @example
+     * const { ready, isComplete, createToken } = useOzElements();
+     * // <button :disabled="!ready || !isComplete" @click="createToken()">Pay</button>
+     */
+    isComplete: ComputedRef<boolean>;
+    /**
+     * `true` while `createToken()` or `createBankToken()` is in progress,
+     * including the transparent wax-key refresh phase. Use this to keep the
+     * pay button disabled and prevent double-submission.
+     *
+     * @example
+     * const { isTokenizing, createToken } = useOzElements();
+     * // <button :disabled="isTokenizing" @click="createToken()">Pay</button>
+     */
+    isTokenizing: ComputedRef<boolean>;
 }
 /**
  * Returns createToken, createBankToken, ready, initError, tokenizeCount, and reset.

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

@@ -356,15 +356,22 @@ export interface TokenizeOptions {
 }
 /** Options for `vault.createBankToken()`. */
 export interface BankTokenizeOptions {
-    /** Account holder first name. Required. */
-    firstName: string;
-    /** Account holder last name. Required. */
-    lastName: string;
     /**
-     * Optional billing details for the account holder.
-     * When provided, firstName and lastName inside `billing` take precedence
-     * over the top-level fields. The normalized details are echoed back in
-     * `BankTokenResponse.billing` for convenience.
+     * Account holder first name.
+     * Required when `billing` is not provided.
+     * @deprecated Pass firstName inside `billing` instead.
+     */
+    firstName?: string;
+    /**
+     * Account holder last name.
+     * Required when `billing` is not provided.
+     * @deprecated Pass lastName inside `billing` instead.
+     */
+    lastName?: string;
+    /**
+     * Billing details for the account holder. When provided, `billing.firstName`
+     * and `billing.lastName` take precedence over the top-level fields.
+     * The normalized details are echoed back in `BankTokenResponse.billing`.
      */
     billing?: BillingDetails;
 }

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

@@ -103,7 +103,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         default: undefined;
     };
     onLoadError: {
-        type: PropType<() => void>;
+        type: PropType<(info?: {
+            source: "tokenizer";
+        }) => void>;
         default: undefined;
     };
     sessionLimit: {
@@ -158,7 +160,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
         default: undefined;
     };
     onLoadError: {
-        type: PropType<() => void>;
+        type: PropType<(info?: {
+            source: "tokenizer";
+        }) => void>;
         default: undefined;
     };
     sessionLimit: {
@@ -184,7 +188,9 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
     appearance: Appearance;
     onSessionRefresh: () => void;
     onReady: () => void;
-    onLoadError: () => void;
+    onLoadError: (info?: {
+        source: "tokenizer";
+    }) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export interface UseOzElementsReturn {
     /**
@@ -213,6 +219,26 @@ export interface UseOzElementsReturn {
      * Clears all mounted element fields without destroying the vault.
      */
     reset: () => void;
+    /**
+     * `true` when every mounted field has reported `complete && valid`.
+     * Use this to gate the pay button without wiring individual `@change`
+     * listeners — reacts in real time as the customer fills in fields.
+     *
+     * @example
+     * const { ready, isComplete, createToken } = useOzElements();
+     * // <button :disabled="!ready || !isComplete" @click="createToken()">Pay</button>
+     */
+    isComplete: ComputedRef<boolean>;
+    /**
+     * `true` while `createToken()` or `createBankToken()` is in progress,
+     * including the transparent wax-key refresh phase. Use this to keep the
+     * pay button disabled and prevent double-submission.
+     *
+     * @example
+     * const { isTokenizing, createToken } = useOzElements();
+     * // <button :disabled="isTokenizing" @click="createToken()">Pay</button>
+     */
+    isTokenizing: ComputedRef<boolean>;
 }
 /**
  * Returns createToken, createBankToken, ready, initError, tokenizeCount, and reset.

package/dist/vue/index.cjs.js

@@ -2357,7 +2357,20 @@ 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(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: props.onLoadError } : {})), (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
@@ -2380,7 +2393,7 @@ const OzElements = vue.defineComponent({
                     return;
                 initError.value = err instanceof Error ? err : new Error('OzVault.create() failed.');
                 if (props.onLoadError) {
-                    props.onLoadError({ source: 'tokenizer' });
+                    fireLoadError();
                 }
                 else {
                     console.error('[OzElements] OzVault.create() failed. Provide an `onLoadError` prop to handle this gracefully.', err);
@@ -2428,7 +2441,9 @@ function useOzElements() {
         return result;
     };
     const reset = () => { var _a; (_a = vault.value) === null || _a === void 0 ? void 0 : _a.reset(); };
-    return { createToken, createBankToken, ready, initError, tokenizeCount, reset };
+    const isComplete = vue.computed(() => { var _a, _b; return (_b = (_a = vault.value) === null || _a === void 0 ? void 0 : _a.isComplete) !== null && _b !== void 0 ? _b : false; });
+    const isTokenizing = vue.computed(() => { var _a, _b; return (_b = (_a = vault.value) === null || _a === void 0 ? void 0 : _a.isTokenizing) !== null && _b !== void 0 ? _b : false; });
+    return { createToken, createBankToken, ready, initError, tokenizeCount, reset, isComplete, isTokenizing };
 }
 function createFieldComponent(displayName, mountElement) {
     return vue.defineComponent({