feat: add payment information validation messages

nixtus · Jun 13, 2019 · 860ae10 · 860ae10
1 parent 4327d54
commit 860ae10
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/Nixtus.Plugin.Payments.Nmi/Components/NmiViewComponent.cs b/Nixtus.Plugin.Payments.Nmi/Components/NmiViewComponent.cs
@@ -1,5 +1,4 @@
-using System.Net;
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc;
 using Nixtus.Plugin.Payments.Nmi.Models;
 using Nop.Web.Framework.Components;
 
@@ -12,14 +11,6 @@ public IViewComponentResult Invoke()
         {
             var model = new PaymentInfoModel();
 
-            //set postback values (we cannot access "Form" with "GET" requests)
-            if (Request.Method == WebRequestMethods.Http.Get)
-                return View("~/Plugins/Payments.Nmi/Views/PaymentInfo.cshtml", model);
-
-            var form = Request.Form;
-            model.CardNumber = form["CardNumber"];
-            model.CardCode = form["CardCode"];
-
             return View("~/Plugins/Payments.Nmi/Views/PaymentInfo.cshtml", model);
         }
     }

diff --git a/Nixtus.Plugin.Payments.Nmi/Views/PaymentInfo.cshtml b/Nixtus.Plugin.Payments.Nmi/Views/PaymentInfo.cshtml
@@ -8,6 +8,11 @@
 @using Nixtus.Plugin.Payments.Nmi
 @model Nixtus.Plugin.Payments.Nmi.Models.PaymentInfoModel
 
+<style scoped>
+    td.error {
+        color: red;
+    }
+</style>
 
 <table width="100%" cellspacing="2" cellpadding="1" border="0">
     <tr>
@@ -16,18 +21,30 @@
         </td>
         <td id="ccnumber"></td>
     </tr>
+    <tr>
+        <td></td>
+        <td class="error" id="ccnumber-error"></td>
+    </tr>
     <tr>
         <td>
             @Html.LabelFor(model => model.ExpireMonth, false):
         </td>
         <td id="ccexp"></td>
     </tr>
+    <tr>
+        <td></td>
+        <td class="error" id="ccexp-error"></td>
+    </tr>
     <tr>
         <td>
             @Html.LabelFor(model => model.CardCode, false):
         </td>
         <td id="cvv"></td>
     </tr>
+    <tr>
+        <td></td>
+        <td class="error" id="cvv-error"></td>
+    </tr>
 </table>
 <input type="hidden" name="Token" id="Token" asp-for="Token">
 
@@ -51,6 +68,13 @@
                         formSubmitted = true;
 						$("input.payment-info-next-step-button").click();
                     }
+                },
+                validationCallback: (field, status, message) => {
+                    if (!status) {
+                        $("#" + field + "-error").html(message);
+                    } else {
+                        $("#" + field + "-error").html("");
+                    }
                 }
             });
         };
@@ -61,8 +85,6 @@
         //remove handler so we dont validate the form
         $('.payment-info-next-step-button').attr('onclick', null);
 
-        console.log('start');
-
         addScript();
 
         $(".payment-info-next-step-button").on('click', (event) => {