Tab Order Broken With Stripe Card-element And Vue.js

When using Vue.js and having a stripe card-element inside the Vue main element the tabindex is not working properly. Check the following code:

Solution 1:

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.

Solution 2:

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 = newVue({
        el: '#stripeDiv'
    });
});

Share