[Vuejs]-Tab order broken with stripe card-element and vue.js

You just need to change the order of your Javascript. Mounting the card element does a lot of crazy stuff to the dom.

var stripe = Stripe("somestripepublickey");
var vue_test = new Vue({
  el: '#stripeDiv'
});
var card = stripe.elements().create('card').mount('#card-element');

That should fix your problem though.

I am not using Vue, but the solution I found may apply to your situation as well. In my case, the code to mount #card-element was being called before the DOM was loaded. I fixed by wrapping it in code that waits until the DOM is fully loaded before initializing all the Stripe stuff. Here’s an example:

window.addEventListener('load',function() {
    var stripe = Stripe("somestripepublickey");
    var card = stripe.elements().create('card').mount('#card-element');

    var vue_test = new Vue({
        el: '#stripeDiv'
    });
});