@ozura/elements 1.2.0-next.38 → 1.2.0-next.39

package/README.md

@@ -796,8 +796,25 @@ Must be called from inside an `<OzElements>` provider tree.
 
 ### Quick start
 
+`useOzElements()` calls Vue's `inject()` under the hood, so it must be called from a **child** of `<OzElements>`, not from the same component that renders it. Use two components — an outer wrapper that provides `<OzElements>`, and an inner form component that calls the composable:
+
+**CheckoutPage.vue** — renders the provider
+
     <script setup lang="ts">
-    import { OzElements, OzCardNumber, OzExpiry, OzCvv, useOzElements } from '@ozura/elements/vue';
+    import { OzElements } from '@ozura/elements/vue';
+    import CheckoutForm from './CheckoutForm.vue';
+    </script>
+
+    <template>
+      <OzElements pub-key="pk_live_..." session-url="/api/oz-session">
+        <CheckoutForm />
+      </OzElements>
+    </template>
+
+**CheckoutForm.vue** — child component, calls the composable
+
+    <script setup lang="ts">
+    import { OzCardNumber, OzExpiry, OzCvv, useOzElements } from '@ozura/elements/vue';
 
     const { createToken, ready } = useOzElements();
 
@@ -810,12 +827,10 @@ Must be called from inside an `<OzElements>` provider tree.
     </script>
 
     <template>
-      <OzElements pub-key="pk_live_..." session-url="/api/oz-session">
-        <OzCardNumber @change="(e) => console.log(e.cardBrand)" />
-        <OzExpiry />
-        <OzCvv />
-        <button :disabled="!ready" @click="handlePay">Pay</button>
-      </OzElements>
+      <OzCardNumber @change="(e) => console.log(e.cardBrand)" />
+      <OzExpiry />
+      <OzCvv />
+      <button :disabled="!ready" @click="handlePay">Pay</button>
     </template>
 
 ### Individual fields

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozura/elements",
-  "version": "1.2.0-next.38",
+  "version": "1.2.0-next.39",
   "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",