Vue-cardswipe NPM

vue-cardswipe

A Vue plugin for reading credit card data from magnetic swipe readers.

This plugin is a port from the CarlRaymond/jquery.cardswipe. Please view the repo for more detailed documentation.

Note: Demo requires a magnetic card reader to use.

Installation

yarn add vue-cardswipe
- OR -
npm install vue-cardswipe

Using this plugin

Adding vue-cardswipe to your application requires a few additional steps vs. other Vue plugins as it requires (at the very minimum) a success callback.

import Vue from 'vue';

import VueCardSwipe from 'vue-cardswipe';

Vue.use(VueCardSwipe);

new Vue({
  el: '#app',
  ...
  methods{
    handleSwipeSuccess(cardData){
        this.number = cardData.account;
        this.expiry = cardData.expMonth + '/' + cardData.expYear.slice(-2);  
    },
    cardSwipeInit: function(){
      this.$cardSwipe.init({
        success: this.handleSwipeSuccess
      });
    },
  },
  mounted(){
    this.cardSwipeInit();
  }
});

After installing, when you component is mounted a document listener for credit card input is added, then any resulting data is sent to your success callback.

View the advanced example to see a working implementation.