diff --git a/public/js/clients/payments/authorize-credit-card-payment.js b/public/js/clients/payments/authorize-credit-card-payment.js
index b260db4968a8..f92194779c41 100644
--- a/public/js/clients/payments/authorize-credit-card-payment.js
+++ b/public/js/clients/payments/authorize-credit-card-payment.js
@@ -117,13 +117,15 @@ var AuthorizeAuthorizeCard = /*#__PURE__*/function () {
     _classCallCheck(this, AuthorizeAuthorizeCard);
 
     _defineProperty(this, "handleAuthorization", function () {
+      var myCard = $('#my-card');
       var authData = {};
       authData.clientKey = _this.publicKey;
       authData.apiLoginID = _this.loginId;
       var cardData = {};
-      cardData.cardNumber = document.getElementById("card_number").value;
-      cardData.month = document.getElementById("expiration_month").value;
-      cardData.year = document.getElementById("expiration_year").value;
+      cardData.cardNumber = myCard.CardJs('cardNumber');
+      cardData.month = myCard.CardJs('expiryMonth');
+      cardData.year = myCard.CardJs('expiryYear');
+      ;
       cardData.cardCode = document.getElementById("cvv").value;
       var secureData = {};
       secureData.authData = authData;
@@ -132,13 +134,12 @@ var AuthorizeAuthorizeCard = /*#__PURE__*/function () {
       //
       // secureData.bankData = bankData;
 
+      console.log(cardData);
       Accept.dispatchData(secureData, _this.responseHandler);
       return false;
     });
 
     _defineProperty(this, "handle", function () {
-      console.log(_this.payNowButton);
-
       if (_this.cardButton) {
         _this.cardButton.addEventListener("click", function () {
           _this.handleAuthorization();
@@ -198,11 +199,16 @@ var AuthorizeAuthorizeCard = /*#__PURE__*/function () {
     value: function responseHandler(response) {
       if (response.messages.resultCode === "Error") {
         var i = 0;
+        var $errors = $('#errors'); // get the reference of the div
 
-        while (i < response.messages.message.length) {
-          console.log(response.messages.message[i].code + ": " + response.messages.message[i].text);
-          i = i + 1;
-        }
+        $errors.show().html("<p>" + response.messages.message[i].code + ": " + response.messages.message[i].text + "</p>"); // while (i < response.messages.message.length) {
+        //     console.log(
+        //         response.messages.message[i].code + ": " +
+        //         response.messages.message[i].text
+        //     );
+        //        document.getElementById('errors').innerHTML = response.messages.message[i].code + ": " + response.messages.message[i].text;
+        //     i = i + 1;
+        // }
       } else if (response.messages.resultCode === "Ok") {
         document.getElementById("dataDescriptor").value = response.opaqueData.dataDescriptor;
         document.getElementById("dataValue").value = response.opaqueData.dataValue;
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 1c18662591fa..8a0c6d53180c 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -7,7 +7,7 @@
     "/js/clients/payment_methods/authorize-authorize-card.js": "/js/clients/payment_methods/authorize-authorize-card.js?id=7f63b5cd48631432a424",
     "/js/clients/payment_methods/authorize-stripe-card.js": "/js/clients/payment_methods/authorize-stripe-card.js?id=420e22ba244289dd75f8",
     "/js/clients/payments/alipay.js": "/js/clients/payments/alipay.js?id=cf114848ef8a3633a51b",
-    "/js/clients/payments/authorize-credit-card-payment.js": "/js/clients/payments/authorize-credit-card-payment.js?id=5061b0587d137f8f5183",
+    "/js/clients/payments/authorize-credit-card-payment.js": "/js/clients/payments/authorize-credit-card-payment.js?id=975ed7bccd115deb306e",
     "/js/clients/payments/card-js.min.js": "/js/clients/payments/card-js.min.js?id=3fe6822360e6c456d1a2",
     "/js/clients/payments/checkout.com.js": "/js/clients/payments/checkout.com.js?id=31df208670107e18f59d",
     "/js/clients/payments/process.js": "/js/clients/payments/process.js?id=f4c4b09d4454070a6db6",
diff --git a/resources/js/clients/payments/authorize-credit-card-payment.js b/resources/js/clients/payments/authorize-credit-card-payment.js
index ae934f9206fb..60f8fdfec57e 100644
--- a/resources/js/clients/payments/authorize-credit-card-payment.js
+++ b/resources/js/clients/payments/authorize-credit-card-payment.js
@@ -20,14 +20,16 @@ class AuthorizeAuthorizeCard {
 
     handleAuthorization = () => {
 
+        var myCard = $('#my-card');
+
     	var authData = {};
         authData.clientKey = this.publicKey;
         authData.apiLoginID = this.loginId;
     
     	var cardData = {};
-        cardData.cardNumber = document.getElementById("card_number").value;
-        cardData.month = document.getElementById("expiration_month").value;
-        cardData.year = document.getElementById("expiration_year").value;
+        cardData.cardNumber = myCard.CardJs('cardNumber');
+        cardData.month = myCard.CardJs('expiryMonth');
+        cardData.year = myCard.CardJs('expiryYear');;
         cardData.cardCode = document.getElementById("cvv").value;
 
     	var secureData = {};
@@ -38,6 +40,8 @@ class AuthorizeAuthorizeCard {
         //
         // secureData.bankData = bankData;
 
+console.log(cardData);
+
 		Accept.dispatchData(secureData, this.responseHandler);
           return false;
 
@@ -54,13 +58,22 @@ class AuthorizeAuthorizeCard {
 
 	    if (response.messages.resultCode === "Error") {
 	        var i = 0;
-	        while (i < response.messages.message.length) {
-	            console.log(
-	                response.messages.message[i].code + ": " +
-	                response.messages.message[i].text
-	            );
-	            i = i + 1;
-	        }
+
+            var $errors = $('#errors'); // get the reference of the div
+            $errors.show().html("<p>" + response.messages.message[i].code + ": " + response.messages.message[i].text + "</p>"); 
+            
+
+	        // while (i < response.messages.message.length) {
+	        //     console.log(
+	        //         response.messages.message[i].code + ": " +
+	        //         response.messages.message[i].text
+	        //     );
+
+         //        document.getElementById('errors').innerHTML = response.messages.message[i].code + ": " + response.messages.message[i].text;
+
+
+	        //     i = i + 1;
+	        // }
 	    }
 	    else if(response.messages.resultCode === "Ok"){
             
@@ -79,8 +92,6 @@ class AuthorizeAuthorizeCard {
     handle = () => {
 
 
-        console.log(this.payNowButton);
-
         if(this.cardButton)
         {
             this.cardButton.addEventListener("click", () => {
diff --git a/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php b/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
index 6fadab92c9c7..9cfcfbbdee1a 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
@@ -8,6 +8,12 @@
     <meta name="year-invalid" content="{{ ctrans('texts.year_invalid') }}">
     <meta name="month-invalid" content="{{ ctrans('texts.month_invalid') }}">
     <meta name="credit-card-invalid" content="{{ ctrans('texts.credit_card_invalid') }}">
+
+
+    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script src="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
+    <link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
+
 @endpush
 
 @section('body')
@@ -45,6 +51,8 @@
                                 </dd>
                             </div>
                             <div class="bg-gray-50 px-4 py-5 flex justify-end">
+                            <div id="errors"></div>
+
                                 <button type="primary" class="button button-primary" id="card_button">{{ ctrans('texts.add_payment_method') }}</button>
                             </div>
                         </dl>
diff --git a/resources/views/portal/ninja2020/gateways/authorize/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/authorize/credit_card.blade.php
index 420a111f1b6e..83ee1f9d0b68 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/credit_card.blade.php
@@ -1,9 +1,10 @@
 <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center flex items-center">
-    <div class="card-js">
+    <div class="card-js" id="my-card" data-capture-name="true">
       <input class="name" id="cardholder_name" name="card-holders-name" placeholder="{{ ctrans('texts.name')}}">
       <input class="card-number my-custom-class" id="card_number" name="card-number">
       <input class="expiry-month" name="expiry-month" id="expiration_month">
       <input class="expiry-year" name="expiry-year" id="expiration_year">
       <input class="cvc" name="cvc" id="cvv">
     </div>
+    <div id="errors"></div>
 </div>
\ No newline at end of file