fix: hydration issue

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>

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">

src/module.ts

@@ -10,7 +10,7 @@ export interface ServerStripeOptions {
 } 
 
 export interface ClientStripeOptions  {
-  key?: string | null; 
+  key?: string | null;
   options?: StripeConstructorOptions;
 }
 

src/runtime/composables/useClientStripe.ts

@@ -1,13 +1,25 @@
-import { useNuxtApp } from "#imports"
-
+import { onBeforeMount, useNuxtApp, useState } from "#imports"
+import { Stripe } from '@stripe/stripe-js'
 /**
  * useClientStripe function
  *
  * This function is a helper to easily access the Stripe instance provided by the Nuxt plugin.
  * 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 
 }

src/runtime/plugins/stripe.client.ts

@@ -29,7 +29,9 @@ export default defineNuxtPlugin(async(nuxtApp) => {
 
   return {
     provide: {
-      stripe: _loadStripe,
+      stripe: {
+        _loadStripe
+      },
     }
   }
 })