doesn't work on page reload

[danielthomascarr]

works fine on initial load but when reloading the page get the error, "The selector you specified (#card-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount()." This would normally be fixed by adding the stripe script at the end of the body instead of the head so it loads in the DOM before executing the script, but don't how to do it in mounted()?

[danielthomascarr]

not sure if this is the right way but used $nextTick() https://nuxtjs.org/api/configuration-loading/ to add a set timeout delay until the DOM has a chance to catch up on page reload.

   this.$nextTick(() => {
       this.stripe = this.$stripe.import()
        this.elements = this.stripe.elements()
        this.card = this.elements.create('card', {
          hidePostalCode: true,
          // styles
        });

      setTimeout(() =>   
      this.card.mount('#card-element'),

      this.card.on("change", function (event) {
       // change events
      })
      , 500)
      })

[WilliamDASILVA]

Hey there,

This module now depends on the official Stripe JS integration. Please be aware of the BREAKING CHANGES in v3.0.0 and update your code accordingly. With this version, you shouldn't have this issue anymore (hopefully).

If you have any concerns, please open a new issue!