@ozura/elements 1.2.1 → 1.2.3

package/dist/vue/utils/billingUtils.d.ts

@@ -0,0 +1,61 @@
+/**
+ * billingUtils.ts — billing detail validation and normalization.
+ *
+ * Mirrors the validation in checkout/page.tsx (pre-flight checks before cardSale)
+ * so that billing data passed to createToken() is guaranteed schema-compliant and
+ * ready to forward directly to the Ozura Pay API cardSale endpoint.
+ *
+ * All string fields enforced to 1–50 characters (cardSale schema constraint).
+ * State is normalized to 2-letter abbreviation for US and CA.
+ * Phone must be E.164 format (matches checkout's formatPhoneForAPI output).
+ */
+import { BillingDetails } from '../types';
+/** Returns true when the email is syntactically valid and ≤50 characters. */
+export declare function validateEmail(email: string): boolean;
+/**
+ * Validates E.164 phone format: starts with +, 1–3 digit country code,
+ * followed by 7–12 digits, max 15 digits total (E.164 spec cap = 16 chars
+ * including the leading +).
+ *
+ * Matches the output of checkout's formatPhoneForAPI() function.
+ * Examples: "+15551234567", "+447911123456", "+61412345678"
+ */
+export declare function validateE164Phone(phone: string): boolean;
+/** Returns true when the string is non-empty and ≤50 characters (cardSale schema). */
+export declare function isValidBillingField(value: string): boolean;
+/**
+ * Converts a full US state or Canadian province name to its 2-letter abbreviation.
+ * If already a valid abbreviation (case-insensitive), returns it uppercased.
+ * For non-US/CA countries, returns the input uppercased unchanged.
+ *
+ * Matches checkout's convertStateToAbbreviation() behaviour exactly.
+ */
+export declare function normalizeState(state: string, country: string): string;
+/**
+ * Validates a postal/ZIP code against country-specific format rules.
+ * For countries without a specific pattern, falls back to generic 1–50 char check.
+ */
+export declare function validatePostalCode(zip: string, country: string): {
+    valid: boolean;
+    error?: string;
+};
+export interface BillingValidationResult {
+    valid: boolean;
+    /** One entry per failing field, each suitable for display in a thrown OzError message. */
+    errors: string[];
+    /** Trimmed and normalized billing details — state converted, address2 omitted if blank. */
+    normalized: BillingDetails;
+}
+/**
+ * Validates and normalizes billing details against the Ozura cardSale API schema.
+ *
+ * Rules applied (same as checkout's pre-flight validation in page.tsx):
+ * - firstName, lastName: required, 1–50 chars
+ * - email: optional; if provided, must be valid format and ≤50 chars
+ * - phone: optional; if provided, must be E.164 and ≤50 chars
+ * - address fields: if address is provided, line1/city/state/zip/country are
+ *   required (1–50 chars each); line2 is optional and omitted from normalized
+ *   output if blank (cardSale schema: minLength 1 if present)
+ * - state: normalized to 2-letter abbreviation for US and CA
+ */
+export declare function validateBilling(billing: BillingDetails): BillingValidationResult;

package/dist/vue/utils/uuid.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Generates a RFC 4122 v4 UUID.
+ *
+ * Uses `crypto.randomUUID()` when available (Chrome 92+, Firefox 95+,
+ * Safari 15.4+, Node 14.17+) and falls back to `crypto.getRandomValues()`
+ * for older environments (Safari 14, some embedded WebViews, older Node).
+ *
+ * Both paths use the same CSPRNG — the difference is only in API surface.
+ *
+ * @internal
+ */
+export declare function uuid(): string;

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

@@ -0,0 +1,88 @@
+/**
+ * @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 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: 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: any;
+/** Expiry date field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzExpiry: any;
+/** CVV / CVC field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzCvv: any;
+/** Bank account number field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzBankAccountNumber: any;
+/** Bank routing number field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
+export declare const OzBankRoutingNumber: any;
+export type { ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, Appearance, FontSource, } from '../types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozura/elements",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "PCI-compliant card tokenization SDK for the Ozura Vault — collect card data in iframe-isolated fields and tokenize without PCI scope",
   "main": "dist/oz-elements.umd.js",
   "module": "dist/oz-elements.esm.js",
@@ -20,6 +20,11 @@
       "types": "./dist/server/server/index.d.ts",
       "import": "./dist/server/index.esm.js",
       "require": "./dist/server/index.cjs.js"
+    },
+    "./vue": {
+      "types": "./dist/vue/vue/index.d.ts",
+      "import": "./dist/vue/index.esm.js",
+      "require": "./dist/vue/index.cjs.js"
     }
   },
   "files": [
@@ -30,6 +35,7 @@
     "dist/frame",
     "dist/react",
     "dist/server",
+    "dist/vue",
     "dist/types"
   ],
   "scripts": {
@@ -46,7 +52,8 @@
   },
   "peerDependencies": {
     "react": ">=17",
-    "react-dom": ">=17"
+    "react-dom": ">=17",
+    "vue": ">=3.3"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -54,6 +61,9 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "keywords": [
@@ -95,6 +105,8 @@
     "rollup-plugin-copy": "^3.5.0",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
-    "vitest": "^4.0.18"
+    "vitest": "^4.0.18",
+    "vue": "^3.5.0",
+    "@vue/test-utils": "^2.4.0"
   }
 }