Stripe script onLoaded function not being called

[AdamBD]

🐛 The bug

I am trying the basic implementation example from the documentation.

<template>
  <div ref="paymentEl" />
</template>

<script setup>
  const paymentEl = ref(null)
  const { onLoaded } = useScriptStripe()
  onMounted(() => {
    onLoaded(async ({ Stripe }) => {
    alert("Callback was called")
      const stripe = Stripe(
        "pk_live_5....",
      )
    })
  })
</script>

The onLoaded function does not seem to be working as the callback function is never being called

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-wozyte?file=pages%2Findex.vue,pages%2Fjs-confetti.vue

🌈 Expected behavior

I expect my callback function to be called by onLoaded

ℹ️ Additional context

I see these warnings from the stripe SDK, maybe this is causing errors that lead to the callback function not being called?

[harlan-zw]

Hmm the loaded alert appears to be being triggered in the reproduction.

Am I missing something?

It may have been an issue already fixed upstream in Unhead that the demo is now using though 🤔

[AdamBD]

@harlan-zw my bad, it does indeed work in the reproduction environment, but it would never be called in my project. Basic nux3 app.

In the end I had to do the following to get access to the script promise.

  const { $script } = useScript(
  	{
  		src: "https://js.stripe.com/v3/",
  	},
  	{
  		use: () => window.Stripe,
  	},
  )

  const openstore = () => {
  	$script
  		.then((api) => {
  			const s = api(runtimeConfig.public.stripePublicKey)
  			initialize(s)
  		})
  }

[harlan-zw]

Hmm strange, thanks for the details. It should be more stable in v0.8.0 which I just released. I'll close for now but if you have another reproduction i'll re-open.