nopCommerce 3.60 Hosting Tutorial – How to Create a Costum User-friendly Credit Card Form

How to Create a Costum User-friendly Credit Card Form – For those who are familiar with nopCommerceforms, credit card forms is one of the part that allows a lot of room for user experience enhancement. You know that default nopCommerce’s credit card form looks very 90-ish. In this tutorial, we will learn how to create costum user-friendly credit card form in nopCommerce.

Below is how a typical credit card form in nopCommerce looks like:

There are a few things that maybe we don’t like about the default credit card form in nopCommerce:

Credit card type should be inferred, instead of forcing users to choose
Card number should be formatted. Basic verification should also be done on client side
Expiry date should be implemented as input, drop-down list is too cumbersome
Basic CVV / CVC format validation should be done on client side

Luckily, we have a few useful jQuery libraries on client-side credit card validation such as jQuery.payment. We will integrate jQuery.payment into the Payments.AuthorizeNet payment plugins that comes originally with nopCommerce to create a costum user-friendly credit card form. Just follow this steps:

Step 1: Setting up jQuery.payment

The first thing you need to do is to download the package from “jQuery.payment” project page. Once downloaded, you can copy “jquery.payment.js” into the appropriate folder as shown below:

You need to mark the file as “Copy if newer”.

Step 2: Integrating jQuery.payment into nopCommerce credit card form

Now, open “PaymentInfo.cshtml” from “Payments.Authorizenet”. There are a few places you need to change. We will paste the full source code of “PaymentInfo.cshtml” as below:

@{
Layout = "";
}
@model Nop.Plugin.Payments.AuthorizeNet.Models.PaymentInfoModel
@using Nop.Web.Framework;

<table width="100%" cellspacing="2" cellpadding="1" border="0">
<tr>
<td>
@Html.NopLabelFor(model => model.CreditCardType, false):
</td>
<td>
<span class="cc-brand"></span>
@Html.HiddenFor(model => model.CreditCardType)
</td>
</tr>
<tr>
<td>
@Html.NopLabelFor(model => model.CardholderName, false):
</td>
<td>
@Html.TextBoxFor(model => model.CardholderName, new { style = "Width: 165px;", autocomplete = "off" })
@Html.ValidationMessageFor(model => model.CardholderName)
</td>
</tr>
<tr>
<td>
@Html.NopLabelFor(model => model.CardNumber, false):
</td>
<td>
@Html.TextBoxFor(model => model.CardNumber, new { style = "Width: 165px;", autocomplete = "off", maxlength = 22 })
@Html.ValidationMessageFor(model => model.CardNumber)
</td>
</tr>
<tr>
<td>
@Html.NopLabelFor(model => model.ExpireMonth, false):
</td>
<td>
<input type="text" class="cc-exp" placeholder="MM / YY" />
@Html.HiddenFor(model => model.ExpireMonth)
@Html.HiddenFor(model => model.ExpireYear)
</td>
</tr>
<tr>
<td>
@Html.NopLabelFor(model => model.CardCode, false):
</td>
<td>
@Html.TextBoxFor(model => model.CardCode, new { style = "Width: 60px;", autocomplete = "off", maxlength = 4 })
@Html.ValidationMessageFor(model => model.CardCode)
</td>
</tr>
</table>

<script type="text/javascript" src="~/Plugins/Payments.AuthorizeNet/Content/jquery.payment.js"></script>
<script type="text/javascript">
document.ready(function () {
$('#@Html.FieldIdFor(m => m.CardNumber)').payment('formatCardNumber');
$('.cc-exp').payment('formatCardExpiry');
$('#@Html.FieldIdFor(m => m.CardCode)').payment('formatCardCVC');

$('#@Html.FieldIdFor(m => m.CardNumber)').change(function () {
var cardType = $.payment.cardType($('#@Html.FieldIdFor(m => m.CardNumber)').val());

$('.cc-brand').text(cardType);
$('#@Html.FieldIdFor(m => m.CreditCardType)').val(cardType);
});

$('.cc-exp').change(function () {
$('#@Html.FieldIdFor(m => m.ExpireMonth)').val($(this).val().substring(0, 2));
$('#@Html.FieldIdFor(m => m.ExpireYear)').val('20' + $(this).val().substring(5));
});

$('.payment-info-next-step-button').removeAttr('onclick');
$('.payment-info-next-step-button').click(function (e) {
e.preventDefault();
var valid = true;

if (!$.payment.validateCardNumber($('#@Html.FieldIdFor(m => m.CardNumber)').val())) {
alert('Invalid card number');
valid = false;
}

if (!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal'))) {
alert('Invalid card expiry');
valid = false;
}

var cardType = $.payment.cardType($('#@Html.FieldIdFor(m => m.CardNumber)').val());
if (!$.payment.validateCardCVC($('#@Html.FieldIdFor(m => m.CardCode)').val(), cardType)) {
alert('Invalid card CVC');
valid = false;
}

if (valid)
PaymentInfo.save();
});
});
</script>

100

Layout = "";

}

@model Nop.Plugin.Payments.AuthorizeNet.Models.PaymentInfoModel

@using Nop.Web.Framework;

<tr>

<td>

@Html.NopLabelFor(model => model.CreditCardType, false):

</td>

<td>

@Html.HiddenFor(model => model.CreditCardType)

</td>

</tr>

<tr>

<td>

@Html.NopLabelFor(model => model.CardholderName, false):

</td>

<td>

@Html.TextBoxFor(model => model.CardholderName, new { style = "Width: 165px;", autocomplete = "off" })

@Html.ValidationMessageFor(model => model.CardholderName)

</td>

</tr>

<tr>

<td>

@Html.NopLabelFor(model => model.CardNumber, false):

</td>

<td>

@Html.TextBoxFor(model => model.CardNumber, new { style = "Width: 165px;", autocomplete = "off", maxlength = 22 })

@Html.ValidationMessageFor(model => model.CardNumber)

</td>

</tr>

<tr>

<td>

@Html.NopLabelFor(model => model.ExpireMonth, false):

</td>

<td>

@Html.HiddenFor(model => model.ExpireMonth)

@Html.HiddenFor(model => model.ExpireYear)

</td>

</tr>

<tr>

<td>

@Html.NopLabelFor(model => model.CardCode, false):

</td>

<td>

@Html.TextBoxFor(model => model.CardCode, new { style = "Width: 60px;", autocomplete = "off", maxlength = 4 })

@Html.ValidationMessageFor(model => model.CardCode)

</td>

</tr>

</table>

document.ready(function () {

$('#@Html.FieldIdFor(m => m.CardNumber)').payment('formatCardNumber');

$('.cc-exp').payment('formatCardExpiry');

$('#@Html.FieldIdFor(m => m.CardCode)').payment('formatCardCVC');

$('#@Html.FieldIdFor(m => m.CardNumber)').change(function () {

var cardType = $.payment.cardType($('#@Html.FieldIdFor(m => m.CardNumber)').val());

$('.cc-brand').text(cardType);

$('#@Html.FieldIdFor(m => m.CreditCardType)').val(cardType);

});

$('.cc-exp').change(function () {

$('#@Html.FieldIdFor(m => m.ExpireMonth)').val($(this).val().substring(0, 2));

$('#@Html.FieldIdFor(m => m.ExpireYear)').val('20' + $(this).val().substring(5));

});

$('.payment-info-next-step-button').removeAttr('onclick');

$('.payment-info-next-step-button').click(function (e) {

e.preventDefault();

var valid = true;

if (!$.payment.validateCardNumber($('#@Html.FieldIdFor(m => m.CardNumber)').val())) {

alert('Invalid card number');

valid = false;

}

if (!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal'))) {

alert('Invalid card expiry');

valid = false;

}

var cardType = $.payment.cardType($('#@Html.FieldIdFor(m => m.CardNumber)').val());

if (!$.payment.validateCardCVC($('#@Html.FieldIdFor(m => m.CardCode)').val(), cardType)) {

alert('Invalid card CVC');

valid = false;

}

if (valid)

PaymentInfo.save();

});

</script>

Below are the screenshots that show how the form looks like after integration with “jQuery.payment”:

Empty Credit Card Form

Filled Credit Card Form

Invalid Data in Credit Card Form

Good luck! If you need the best and cheap nopCommerce 3.60 hosting, we recommend you to read this review.

Step 1: Setting up jQuery.payment

Step 2: Integrating jQuery.payment into nopCommerce credit card form

Related Posts