`Stripe V3 library not loaded!` error

[Yehuda Neufeld]

I'm using the example code with Gridsome - but I get an error Stripe V3 library not loaded!.
I installed all the dependencies, & put the stripe.js script in the head of the html.

Thanks!

[Yehuda Neufeld]

As I understand, it has to do with this:

Stripe Elements handles and initializes its own UI and so there can be conflicts if Vue.js initializes before Stripe Elements has. To avoid this, setup Stripe Elements after the Vue.js element has been mounted onto the DOM.

The question is - how do I get it to load after Stripe.js has loaded?

[Sarah Drasner]

I haven't seen the exact setup with Gridsome yet, but from what you're describing, but I'll try to give some suggestions in the blind: you should be using the mounted() lifecycle hook. I've found that sometimes it's necessary to also use nextTick() in these cases, example here: https://codepen.io/afontcu/pen/OrdRzy?editors=1111

Let me know if that helps!

[Yehuda Neufeld]

I figured I should be using mounted, but I have not been able to load the card component on mounted.
How would you mount a component in a lifecycle hook?

[Yehuda Neufeld]

OK, I've figured out how to mount it dynamically onMount:

<component
      :is="cc"
      :options="stripeOptions"
      stripe="pk_test_xxxxxxxxxxxxxxxxx"
      @change="complete = $event.complete"
      :class="{ complete }"
      class="stripe-card"
      id="card"
/>

data() {
    return {
      cc: undefined,
    }
}

mounted() {
    this.$nextTick(() => {
      setTimeout(() => this.cc = Card, 1000)
    })
  }

And yes - it only works when I mount the Card in a setTimeout! Without it it still errors Stripe V3 library not loaded!.
Doesn't seem the right way to do things...

Edit:
setTimeout alone works [without the $nextTick], but $nextTick itself doesn't work.

[Eckhardt (Kaizen) Dreyer]

@newgraph I think it's important to maybe use a vue 2 stripe component or make your own that ensures the lifecycle is where you want it. I found this one: https://github.com/matfish2/vue-stripe but it's really old. But maybe you could base off the source. I found that making something a vue component/plugin/instance method, sounds tedious for js libraries, but in the end they are worth it. And could even help others.

[Sarah Drasner]

@newgraph since this isn't really about this project and based on another setup with Gridsome, I'm going to close this out. I didn't mean mount the card component like that, but it's also difficult to advise and debug a whole other project from this repo (and not exactly what I support in these issues, either). I'm going to close this out, but I wish you luck on your project!