The following steps help you to add a credit card form using a swipe card reader in Magento 2:
- Template file: example of credit card form
- Swiper lib file (jquery.cardswipe.js)
It is simple when creating a credit card form in Magento 2 but it’s difficult when creating a swipe card.
Need quality Magento 2 website? Click to get started!!!How to add a credit card form using a swipe card reader in Magento 2?
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 for you to add a credit card form and swipe card in Magento 2.
Leave a Reply