@ozura/elements 1.2.0-next.35 → 1.2.0-next.36

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

@@ -0,0 +1,256 @@
+/**
+ * @ozura/elements/vue — Vue 3 wrapper for OzElements.
+ *
+ * Provides a context-based provider that creates and manages an OzVault instance,
+ * five individual field components, and a composable to access createToken +
+ * readiness state from anywhere inside the provider tree.
+ *
+ * Quick start:
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { OzElements, OzCardNumber, OzExpiry, OzCvv, useOzElements } from '@ozura/elements/vue';
+ * const { createToken, ready } = useOzElements();
+ * </script>
+ *
+ * <template>
+ *   <OzElements pub-key="pk_live_..." session-url="/api/oz-session">
+ *     <OzCardNumber />
+ *     <OzExpiry />
+ *     <OzCvv />
+ *     <button :disabled="!ready" @click="createToken()">Pay</button>
+ *   </OzElements>
+ * </template>
+ * ```
+ */
+import { type Ref, type PropType, type ComputedRef } from 'vue';
+import type { TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
+export interface OzElementsProps {
+    pubKey: string;
+    sessionUrl?: string;
+    getSessionKey?: (sessionId: string) => Promise<string>;
+    frameBaseUrl?: string;
+    fonts?: FontSource[];
+    appearance?: Appearance;
+    loadTimeoutMs?: number;
+    debug?: boolean;
+}
+/**
+ * Creates and owns an OzVault instance for the lifetime of this component.
+ * All field components must be rendered inside this provider.
+ */
+export declare const OzElements: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    pubKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    sessionUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    getSessionKey: {
+        type: PropType<(sessionId: string) => Promise<string>>;
+        default: undefined;
+    };
+    frameBaseUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fonts: {
+        type: PropType<FontSource[]>;
+        default: undefined;
+    };
+    appearance: {
+        type: PropType<Appearance>;
+        default: undefined;
+    };
+    loadTimeoutMs: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        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<{
+    pubKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    sessionUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    getSessionKey: {
+        type: PropType<(sessionId: string) => Promise<string>>;
+        default: undefined;
+    };
+    frameBaseUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fonts: {
+        type: PropType<FontSource[]>;
+        default: undefined;
+    };
+    appearance: {
+        type: PropType<Appearance>;
+        default: undefined;
+    };
+    loadTimeoutMs: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+}>, {
+    debug: boolean;
+    fonts: FontSource[];
+    loadTimeoutMs: number;
+    frameBaseUrl: string;
+    sessionUrl: string;
+    getSessionKey: (sessionId: string) => Promise<string>;
+    appearance: Appearance;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface UseOzElementsReturn {
+    /**
+     * Tokenizes all mounted card fields. Resolves with a token and cvcSession
+     * that can be passed to the Ozura Pay API endpoint.
+     */
+    createToken: (options?: TokenizeOptions) => Promise<TokenResponse>;
+    /**
+     * Tokenizes mounted bank account fields (accountNumber + routingNumber).
+     */
+    createBankToken: (options?: BankTokenizeOptions) => Promise<BankTokenResponse>;
+    /**
+     * True when the vault tokenizer and all mounted field iframes are ready.
+     * Gate your submit button on this.
+     */
+    ready: ComputedRef<boolean>;
+    /**
+     * Non-null when OzVault.create() rejected during initialization.
+     */
+    initError: Ref<Error | null>;
+    /**
+     * Number of successful tokenizations since the last session refresh.
+     */
+    tokenizeCount: Ref<number>;
+    /**
+     * Clears all mounted element fields without destroying the vault.
+     */
+    reset: () => void;
+}
+/**
+ * Returns createToken, createBankToken, ready, initError, tokenizeCount, and reset.
+ * Must be called from inside an <OzElements> provider tree.
+ *
+ * @throws {Error} if called outside an <OzElements> provider
+ */
+export declare function useOzElements(): UseOzElementsReturn;
+/** Card number field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzCardNumber: import("vue").DefineComponent<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus")[], "blur" | "change" | "focus", import("vue").PublicProps, Readonly<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+}>, {
+    style: import("../types").ElementStyleConfig | undefined;
+    placeholder: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Expiry date field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzExpiry: import("vue").DefineComponent<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus")[], "blur" | "change" | "focus", import("vue").PublicProps, Readonly<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+}>, {
+    style: import("../types").ElementStyleConfig | undefined;
+    placeholder: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** CVV / CVC field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzCvv: import("vue").DefineComponent<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus")[], "blur" | "change" | "focus", import("vue").PublicProps, Readonly<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+}>, {
+    style: import("../types").ElementStyleConfig | undefined;
+    placeholder: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Bank account number field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzBankAccountNumber: import("vue").DefineComponent<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus")[], "blur" | "change" | "focus", import("vue").PublicProps, Readonly<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+}>, {
+    style: import("../types").ElementStyleConfig | undefined;
+    placeholder: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Bank routing number field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzBankRoutingNumber: import("vue").DefineComponent<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus")[], "blur" | "change" | "focus", import("vue").PublicProps, Readonly<{
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    style?: import("../types").ElementStyleConfig | undefined;
+}> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+}>, {
+    style: import("../types").ElementStyleConfig | undefined;
+    placeholder: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type { ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, Appearance, FontSource, } from '../types';

package/dist/vue/frame/protocol.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+export declare const PROTOCOL_VERSION = 1;