diff --git a/playground/app.vue b/playground/app.vue
index 5ae1912..2866cbd 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -3,11 +3,9 @@
     <h1>Nuxt - Stripe module playground</h1>
     <section>
       <h2>Stripe client</h2>
-      <client-only>
-        <code>
-          {{ stripeClient ? stripeClient : 'Loading...' }}
-        </code>
-      </client-only>
+      <code>
+        {{ stripeClient ? stripeClient : 'Loading...' }}
+      </code>
     </section>
     <OtherComponent />
   </main>
diff --git a/playground/components/OtherComponent.vue b/playground/components/OtherComponent.vue
index 6d1768a..e7c3be5 100644
--- a/playground/components/OtherComponent.vue
+++ b/playground/components/OtherComponent.vue
@@ -1,13 +1,13 @@
 <template>
-  <div>Other component using stripe</div>
-  <section>
+  <div>
+    <div>Other component using stripe</div>
+    <section>
       <h2>Stripe client</h2>
-      <client-only>
-        <code>
-          {{ stripeClient ? stripeClient : 'Loading...' }}
-        </code>
-      </client-only>
-  </section>
+      <code>
+        {{ stripeClient ? stripeClient : 'Loading...' }}
+      </code>
+    </section>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/module.ts b/src/module.ts
index 20d12d7..6685e59 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -10,7 +10,7 @@ export interface ServerStripeOptions {
 } 
 
 export interface ClientStripeOptions  {
-  key?: string | null; 
+  key?: string | null;
   options?: StripeConstructorOptions;
 }
 
diff --git a/src/runtime/composables/useClientStripe.ts b/src/runtime/composables/useClientStripe.ts
index 59ef8b1..cbc19fd 100644
--- a/src/runtime/composables/useClientStripe.ts
+++ b/src/runtime/composables/useClientStripe.ts
@@ -1,5 +1,5 @@
-import { useNuxtApp } from "#imports"
-
+import { onBeforeMount, useNuxtApp, useState } from "#imports"
+import { Stripe } from '@stripe/stripe-js'
 /**
  * useClientStripe function
  *
@@ -7,7 +7,19 @@ import { useNuxtApp } from "#imports"
  * It can be used in components or pages to interact with the Stripe.js library.
  * 
  */
-export default function useClientStripe() {
-  if (process.server) return null
-  return useNuxtApp().$stripe()
+export default async function useClientStripe() {
+  const nuxtApp = useNuxtApp()
+  const stripe = useState<Stripe>('stripe-client', () => null)
+  const isLoading = useState('stripe-client-loading', () => false)
+
+  onBeforeMount(async () => {
+    if (!isLoading.value) {
+      isLoading.value = true
+      const _stripe = await nuxtApp.$stripe._loadStripe()
+      stripe.value = _stripe
+      isLoading.value = false
+    }
+  })
+
+  return stripe 
 }
diff --git a/src/runtime/plugins/stripe.client.ts b/src/runtime/plugins/stripe.client.ts
index a718ac8..456a88c 100644
--- a/src/runtime/plugins/stripe.client.ts
+++ b/src/runtime/plugins/stripe.client.ts
@@ -29,7 +29,9 @@ export default defineNuxtPlugin(async(nuxtApp) => {
   
   return {
     provide: {
-      stripe: _loadStripe,
+      stripe: {
+        _loadStripe
+      },
     }
   }
 })