ectoflow/vue-stripe-elements

Nuxt not working ?

thinguyennam4059605 opened this issue · 8 comments

thinguyennam4059605 commented

✖ 2 problems (0 errors, 2 warnings)
client.js:196
Stripe V3 library not loaded! breadcrumbs.js:64
TypeError: "s.instance is null"
r index.js:1
o index.js:1
beforeMount index.js:1
VueJS 39
breadcrumbs.js:64
TypeError: "this._element is undefined"
mounted index.js:1
VueJS 12
breadcrumbs.js:64
TypeError: "this._element is undefined"
beforeDestroy index.js:1
VueJS 33

elliottross23 commented

it worked for me by adding the script tag to the body and not the head. Also when you refresh the page it may not work in dev mode but once i deployed to netlify that was fixed.

connecteev commented

@elliottross23 any chance you can share your code to integrate this package with nuxt? That would be really helpful

elliottross23 commented

@connecteev unfortunately i can't share the code. But all I did was add the stripe library to and not . Also I was still having issues with it locally when running npm run dev but i deployed it to netlify and it ran just fine. I didn't solve the dev mode issue completely, but moving the script to helped out.

connecteev commented

@elliottross23 not a problem. Thank you for the tip.

roupen commented

@connecteev not sure if you still need it but I found this issue while trying to fix something else and thought I'd help. First you want to add the stripe js to the head in your pages vue file like:

head() {
  return {
    script: [{ src: 'https://js.stripe.com/v3/' }],
  }
},

then you can import the stripe elements components into your billing form just fine. The issue I was having is the stripe JS doesn't load fast enough if you're planning on showing the elements right away so I had to add a check for it in mounted:

mounted() {
  this.stripeCheckInterval = setInterval(() => {
    if (window.Stripe) this.stripeLoaded = true
    clearInterval(this.stripeCheckInterval)
  }, 200)
},

And you can use this stripeLoaded value to hide the billing form until you can access stripe. Hope that helps anyone else that might be having problems getting it to work on nuxt

  • 👍3
connecteev commented

@roupen thanks for responding! I did get it working, and I think my solution is quite similar to yours. Really appreciate your generosity.

softbeehive commented

Hey folks, one improvement in these regards is loading stripe.js on demand instead of using a script tag. This will probably come in version for Vue 3.