Создайте токен с помощью настраиваемой формы

    <template>

        <form class = "cardInputForm" id = "cardInputForm" @submit.prevent = "addCard">
          <div class = "cardnum">
            <p class = "cardText">Card number</p>
            <div id = "stripeCardNumber" class = "ca" ref = "stripeCardNumber"></div>
          </div>

          <div class = "expiry">
          <p class = "expiryText">Expiry date</p>
          <div name = "cardExpiry" class = "ex" id = "stripeCardExpire" ref = "stripeCardExpire"></div>
          </div>

          <div class = "cvc">
          <p class = "cvcText">CVC</p>
          <div name = "cardCvc" class = "cv" id = "stripeCardCvc" ref = "stripeCardCvc"></div>


        </form>
        <buttons-vue type = "buttonGreenBackground buttonForInsetShadow buttonForInsetShadow:hover" form = "cardInputForm" class = "addCardButton" text = "add card"></buttons-vue>

      </div>  
    </template>


    <script>

    data() {

      return: {
          stripeElements: {},
          stripe: null,
          elements: null,
       },

    methods: { 
      addCard: function(){
      this.stripe.createToken(this.stripeElements.cardNumber).then(result => {

      do something here...
}

   }
}

       mounted: function(){
          this.stripe = Stripe(process.env.stripe_key);
        this.elements = this.stripe.elements();
        this.stripeElements.cardNumber = this.elements.create('cardNumber', {
          style: {
            base: {
              'fontSize': '16px',
              'lineHeight': '28px',
              '::placeholder': {
                color: '#CCC',
              },
            }
          }
        });
        this.stripeElements.cardExpiry = this.elements.create('cardExpiry', {
          style: {
            base: {
              'fontSize': '16px',
              'lineHeight': '28px',
              '::placeholder': {
                color: '#CCC',
              },
            }
          }
        });
        this.stripeElements.cardCvc = this.elements.create('cardCvc', {
          style: {
            base: {
              'fontSize': '16px',
              'lineHeight': '28px',
              '::placeholder': {
                color: '#CCC',
              },
            }
          }
        });

        this.$nextTick(() => {
          this.stripeElements.cardNumber.mount('#stripeCardNumber');
          this.stripeElements.cardExpiry.mount('#stripeCardExpire');
          this.stripeElements.cardCvc.mount('#stripeCardCvc');
        });

       }
    }
    </script>