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

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.

Man Is Using Credit Card And Computer For  On Line Payment. Inte

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:

Costum Credit Card in nopCommerce with JQuery 1

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:

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

Empty Credit Card Form

Costum Credit Card in nopCommerce with JQuery 2

Filled Credit Card Form

Costum Credit Card in nopCommerce with JQuery 3

Invalid Data in Credit Card Form

Costum Credit Card in nopCommerce with JQuery 4

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