How to add credit card form using swipe card reader in magento 2

The following steps help you to add credit card form using swipe card reader in Magento 2:

  1. Template file :example of credit card form
  2. Swiper lib file (jquery.cardswipe.js)

It is simple when create credit card form in magento 2 but its difficult when creating swipe card.

Template file: example of credit card form

<span style="font-weight: 400;">           </span>

<div class="input-actions-credit">

<div class="wrap-swiper">

<label id="webpos-swiper-status" for="webpos-swiper-data">Click here to swipe</label>

<div class="wrap-input"><input type="text" style="height: 1px; width: 1px; border: 0 none; color: #FFF; font-size: 1px;"

title="Swiper" class="input-text" id="webpos-swiper-data"

name="webpos-swiper-data" value="    "/></div>

</div>

<form id="form-checkout-creditcard">

<div class="col-sm-12">

<form id="form-checkout-creditcard">

<div class="input-box">

<select id="checkout_cc_type"> </select><!-- Credit card type -->

</div>

<div class="input-box">

<input type=”text” id="checkout_cc_number">  <!-- Credit card number -->

</div>

<div class="input-box">

<select id="checkout_cc_exp_month"> </select> <!-- Credit card date time →

<select id="checkout_cc_exp_year> </select> <!-- Credit card date time -->

</div>

<div class="input-box">

<input type=”text” id="checkout_cc_number"> <!-- Credit card CVV -->

</div>

</form>

<button data-bind="click: placeOrder()">

<label>Place Order</label>

</button>

</div>

</form>

</div>

</div>

define(

[

'jquery',

'ko',

'uiComponent',

‘'Webnexs_Webpos/js/view/checkout/checkout/swipe/jquery.cardswipe',

],

function ($,ko, Component, Swiper) {

"use strict";

return Component.extend({

defaults: {

template: 'Webnexs_Webpos/checkout/checkout/payment_creditcard'

},

initialize: function () {

Swiper().initSwipe('webpos');

this._super();

}

});

}

);

Swiper lib file (jquery.cardswipe.js)  

define(

  [

     'jquery',

     'uiComponent',

  ],

  function (jQuery, Component) {

     "use strict";

     return Component.extend({

        swipeParserObj: function (strParse) {

           this.input_trackdata_str = strParse;

           this.account_name = null;

           this.surname = null;

           this.firstname = null;

           this.account = null;

           this.exp_month = null;

           this.exp_year = null;

           this.track1 = null;

           this.track2 = null;

           this.hasTrack1 = false;

           this.hasTrack2 = false;

var sTrackData = this.input_trackdata_str;

           if (strParse != '') {

              var nHasTrack1 = strParse.indexOf("^");

              var nHasTrack2 = strParse.indexOf("=");

 var bHasTrack1 = this.hasTrack1 = false;

              var bHasTrack2 = this.hasTrack2 = false;

              if (nHasTrack1 > 0) {

                 this.hasTrack1 = bHasTrack1 = true;

              }

              if (nHasTrack2 > 0) {

                 this.hasTrack2 = bHasTrack2 = true;

              }

  var bTrack1_2 = false;

              var bTrack1 = false;

              var bTrack2 = false;



              if (( bHasTrack1) && ( bHasTrack2)) {

                 bTrack1_2 = true;

              }

              if (( bHasTrack1) && (!bHasTrack2)) {

                 bTrack1 = true;

              }

              if ((!bHasTrack1) && ( bHasTrack2)) {

                 bTrack2 = true;

              }

              var bShowAlert = false;

 if (bTrack1_2) {

                 var strCutUpSwipe = '' + strParse + ' ';

                 var arrayStrSwipe = new Array(4);

                 var arrayStrSwipe = strCutUpSwipe.split("^");

                 var sAccountNumber, sName, sShipToName, sMonth, sYear;

                 if (arrayStrSwipe.length > 2) {

                    this.account = stripAlpha(arrayStrSwipe[0].substring(1, arrayStrSwipe[0].length));

                    this.account_name = arrayStrSwipe[1];

                    this.exp_month = arrayStrSwipe[2].substring(2, 4);

                    this.exp_year = '20' + arrayStrSwipe[2].substring(0, 2);

                    if (sTrackData.substring(0, 1) == '%') {

                       sTrackData = sTrackData.substring(1, sTrackData.length);

                    }

                    var track2sentinel = sTrackData.indexOf(";");

                    if (track2sentinel != -1) {

                       this.track1 = sTrackData.substring(0, track2sentinel);

                       this.track2 = sTrackData.substring(track2sentinel);

                    }

                    var nameDelim = this.account_name.indexOf("/");

                    if (nameDelim != -1) {

                       this.surname = this.account_name.substring(0, nameDelim);

                       this.firstname = this.account_name.substring(nameDelim + 1);

                    }

                 } else {

                    bShowAlert = true;

                 }

              }

              if (bTrack1) {

                 strCutUpSwipe = '' + strParse + ' ';

                 arrayStrSwipe = new Array(4);

                 arrayStrSwipe = strCutUpSwipe.split("^");

 var sAccountNumber, sName, sShipToName, sMonth, sYear;

 if (arrayStrSwipe.length > 2) {

                    this.account = sAccountNumber = stripAlpha(arrayStrSwipe[0].substring(1, arrayStrSwipe[0].length));

                    this.account_name = sName = arrayStrSwipe[1];

                    this.exp_month = sMonth = arrayStrSwipe[2].substring(2, 4);

                    this.exp_year = sYear = '20' + arrayStrSwipe[2].substring(0, 2);

                    if (sTrackData.substring(0, 1) == '%') {

                       this.track1 = sTrackData = sTrackData.substring(1, sTrackData.length);

                    }

                    this.track2 = ';' + sAccountNumber + '=' + sYear.substring(2, 4) + sMonth + '111111111111?';

                    sTrackData = sTrackData + this.track2;

                    var nameDelim = this.account_name.indexOf("/");

                    if (nameDelim != -1) {

                       this.surname = this.account_name.substring(0, nameDelim);

                       this.firstname = this.account_name.substring(nameDelim + 1);

                    }

    } else {

                    bShowAlert = true;

                 }

              }

              if (bTrack2) {

                 var nSeperator = strParse.indexOf("=");

                 var sCardNumber = strParse.substring(1, nSeperator);

                 sYear = strParse.substr(nSeperator + 1, 2);

                 sMonth = strParse.substr(nSeperator + 3, 2);

                 this.account = sAccountNumber = stripAlpha(sCardNumber);

                 this.exp_month = sMonth = sMonth;

                 this.exp_year = sYear = '20' + sYear;

                 if (sTrackData.substring(0, 1) == '%') {

                    sTrackData = sTrackData.substring(1, sTrackData.length);

                 }

    }

              if (((!bTrack1_2) && (!bTrack1) && (!bTrack2)) || (bShowAlert)) {

                 //alert('Difficulty Reading Card Information.\n\nPlease Swipe Card Again.');

              }

 }

           this.dump = function () {

              var s = "";

              var sep = "\r"; // line separator

              s += "Name: " + this.account_name + sep;

              s += "Surname: " + this.surname + sep;

              s += "first name: " + this.firstname + sep;

              s += "account: " + this.account + sep;

              s += "exp_month: " + this.exp_month + sep;

              s += "exp_year: " + this.exp_year + sep;

              s += "has track1: " + this.hasTrack1 + sep;

              s += "has track2: " + this.hasTrack2 + sep;

              s += "TRACK 1: " + this.track1 + sep;

              s += "TRACK 2: " + this.track2 + sep;

              s += "Raw Input Str: " + this.input_trackdata_str + sep;

 return s;

           }

function stripAlpha(sInput) {

              if (sInput == null)    return '';

              return sInput.replace(/[^0-9]/g, '');

           }

  return this;

 },

        trimNumber: function (s) {

           while (s.substr(0, 1) == '0' && s.length > 1) {

              s = s.substr(1, 9999);

           }

           return s;

        },

        parseSwiperData: function (value) {

           if (value.charAt(0) !== '%') {

              return -1;

           }

           var p = this.swipeParserObj(value);

           var result = new Array();

           if (p.hasTrack1) {

              if (p.account_name != null)

                 result[0] = p.account_name;

              else

                 result[0] = p.surname + ' ' + p.firstname;               

              result[1] = p.account;

              result[2] = p.exp_month;

              result[3] = p.exp_year;

           }

           return result;

        },

        swipeNow: function (method) {

           if (jQuery('input#' + method + '-swiper-data')) {

              jQuery('input#' + method + '-swiper-data').focus();

              jQuery('input#' + method + '-swiper-data').val(' ');

              jQuery('input#' + method + '-swiper-data').select();

           }

        },

        initSwipe: function (method) {

           var self = this;

           jQuery('input#' + method + '-swiper-data').focus(function (event) {

              jQuery('#' + method + '-swiper-status').html('Ready to swipe');

              jQuery('#' + method + '-swiper-status').addClass('active');

              jQuery('#' + method + '-swiper-status').select();

           });

           jQuery('input#' + method + '-swiper-data').blur(function (event) {

              jQuery('#' + method + '-swiper-status').html('Click here to swipe');

              jQuery('#' + method + '-swiper-status').removeClass('active');

           });

 jQuery('div.input-box input').blur(function (event) {

              //swipeNow(method);

           });

           jQuery('#' + method + '-swiper-status').click(function (event) {

              self.swipeNow(method);

           });

  jQuery('input#' + method + '-swiper-data').keyup(function (event) {

              if (event.keyCode == 13) {

                 var ccinfo = self.parseSwiperData(jQuery(this).val());

                 if (ccinfo === -1) return;

                 if (jQuery('input#' + method + '-swiper-data').val().length > 0) {

                    jQuery('#loading-mask').show();

                    jQuery('input#' + method + '_cc_owner').val('');

                    jQuery('input#' + method + '_cc_number').val('');

                    jQuery('select#' + method + '_cc_type').val('');

                    jQuery('select#' + method + '_cc_exp_month').val('');

                    jQuery('select#' + method + '_cc_exp_year').val('');

                    jQuery('input#' + method + '_cc_cid').val('');

                 }

                 if (ccinfo != null && ccinfo.length > 0) {

                    jQuery('input#' + method + '_cc_owner').val(ccinfo[0]);

                    if (ccinfo[1] == null) {

                       alert('Card number not detected!');

                    } else {

                       jQuery('input#' + method + '_cc_number').val(ccinfo[1]);

                       jQuery('input#' + method + '_cc_number_label').val(ccinfo[1].replace(/.*(\d{4})$/, "xxxx xxxx xxxx $1"));

                       var startdigit = parseInt(ccinfo[1].charAt(0));

                       if (startdigit == 3)

                          jQuery('select#' + method + '_cc_type').val('AE');

                       if (startdigit == 4)

                          jQuery('select#' + method + '_cc_type').val('VI');

                       if (startdigit == 5)

                          jQuery('select#' + method + '_cc_type').val('MC');

                       if (startdigit == 6)

                          jQuery('select#' + method + '_cc_type').val('DI');

                       if (jQuery('select#' + method + '_cc_type').val() == "")

                          alert('Card type not detected!');

                    }

                    if (ccinfo[2] == null) {

                       alert('Expiration month not detected!');

                    } else {

                       jQuery('select#' + method + '_cc_exp_month').val(self.trimNumber(ccinfo[2]));

                    }

                    if (ccinfo[3] == null) {

                       alert('Expiration year not detected!');

                    } else {

                       jQuery('select#' + method + '_cc_exp_year').val(ccinfo[3]);

                       if (jQuery('select#' + method + '_cc_exp_year').val() == "")

                          alert("The card might be expired!");

                    }

                 } else {

                    alert("Cannot read the data!");

                 }

                 jQuery(this).val('');

              }

           });

 self.swipeNow(method);

        }

     });

  }

);

I hope this information will be helpful you to add credit card form and swipe card in magento 2

Last Update: April 9, 2018  

February 5, 2018   124   Nandini R    Payment    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Google+
http://www.webnexs.com/blog/kb/add-credit-card-form-using-swipe-card-reader-magento-2
Twitter
LinkedIn