Update _CreditCardInput.cshtml

HotcakesCommerce · Sep 4, 2024 · dbe44bc · dbe44bc
1 parent bbc75cc
commit dbe44bc
Showing 1 changed file with 32 additions and 25 deletions.
diff --git a/Website/Portals/_default/HotcakesViews/SocialSpokes/Views/Checkout/_CreditCardInput.cshtml b/Website/Portals/_default/HotcakesViews/SocialSpokes/Views/Checkout/_CreditCardInput.cshtml
@@ -8,6 +8,10 @@
     <input type="hidden" id="PaymentIntentClientSecret" name="PaymentIntentClientSecret" value="@Model.PaymentIntentClientSecret" />
     <input type="hidden" id="StripePublicKey" name="StripePublicKey" value="@Model.StripePublicKey" />
     <input type="hidden" id="PaymentMethodId" name="PaymentMethodId" />
+    <input type="hidden" name="cccardnumber" id="cccardnumber" />
+    <input type="hidden" id="ccexpmonth" name="ccexpmonth" />
+    <input type="hidden" id="ccexpyear" name="ccexpyear" />
+    <input type="hidden" id="StripeCardType" name="StripeCardType" />
 
     <style>
         .StripeElement {
@@ -74,8 +78,11 @@
                         var errorElement = document.getElementById('card-errors');
                         errorElement.textContent = result.error.message;
                     } else {
-                        // Get the value of PaimentMethodId
                         document.getElementById('PaymentMethodId').value = result.paymentMethod.id;
+                        document.getElementById('cccardnumber').value = result.paymentMethod.card.last4;
+                        document.getElementById('ccexpmonth').value = result.paymentMethod.card.exp_month;
+                        document.getElementById('ccexpyear').value = result.paymentMethod.card.exp_year;
+                        document.getElementById('StripeCardType').value = result.paymentMethod.card.display_brand;
                     }
                 });
             }
@@ -89,23 +96,23 @@ else
         int baseYear = DateTime.Now.Year;
         for (int i = 0; i < 10; i++)
         {
-        <option value="@(baseYear + i)" 
-                @if (Model.PaymentViewModel.DataCreditCard.ExpirationYear == (baseYear + i))
-                {<text>selected="selected"</text>} 
-            >@(baseYear + i)</option>
+            <option value="@(baseYear + i)"
+                    @if (Model.PaymentViewModel.DataCreditCard.ExpirationYear == (baseYear + i)) { <text> selected="selected" </text> }>
+                @(baseYear + i)
+            </option>
         }
     }
     @helper Months()
     {
         for (int i = 1; i <= 12; i++)
         {
-        <option value="@i" 
-                @if (Model.PaymentViewModel.DataCreditCard.ExpirationMonth == i)
-                { <text>selected="selected"</text>} 
-            >@i</option>
-        }
+            <option value="@i"
+                    @if (Model.PaymentViewModel.DataCreditCard.ExpirationMonth == i) { <text> selected="selected" </text> }>
+                @i
+                </option>
+            }
     }
-    @functions 
+    @functions
     {
         public bool IsAccepted(CardType ctype)
         {
@@ -114,35 +121,35 @@ else
                 return true;
             }
             return false;
-        }  
+        }
     }
     <div class="hc-creditcard-form">
         <input type="hidden" id="aesInitVector" name="aesInitVector" value="@Model.AESEncryptInitVector" />
         <input type="hidden" id="aesKey" name="aesKey" value="@Model.AESEncryptKey" />
-    
+
         <div class="dnnFormItem">
             <label class="dnnLabel">&nbsp;</label>
             <span class="hc-card-icons">
                 @if (IsAccepted(CardType.Visa))
-                { <span class="cc-visa"></span> }
+                {<span class="cc-visa"></span>}
                 @if (IsAccepted(CardType.MasterCard))
-                { <span class="cc-mastercard"></span> }
+                {<span class="cc-mastercard"></span>}
                 @if (IsAccepted(CardType.Amex))
-                { <span class="cc-amex"></span> }
+                {<span class="cc-amex"></span>}
                 @if (IsAccepted(CardType.Discover))
-                { <span class="cc-discover"></span> }
+                {<span class="cc-discover"></span>}
                 @if (IsAccepted(CardType.DinersClub))
-                { <span class="cc-diners"></span> }
+                {<span class="cc-diners"></span>}
                 @if (IsAccepted(CardType.JCB))
-                { <span class="cc-jcb"></span> }
+                {<span class="cc-jcb"></span>}
             </span>
         </div>
         <div class="dnnFormItem dnnFormRequired">
             <label class="dnnLabel">@Localization.GetString("CardNumber")</label>
             <input type="text" name="cccardnumber" id="cccardnumber" size="20" maxlength="20"
-                    tabindex="501"
-                    value="@Model.PaymentViewModel.DataCreditCard.CardNumber"                    
-                    class="@Model.IsErr("cccardnumber")" autocomplete="cc-csc" />
+                   tabindex="501"
+                   value="@Model.PaymentViewModel.DataCreditCard.CardNumber"
+                   class="@Model.IsErr("cccardnumber")" autocomplete="cc-csc" />
         </div>
         <div class="dnnFormItem">
             <label class="dnnLabel">@Localization.GetString("ExpDate")</label>
@@ -158,13 +165,13 @@ else
         <div class="dnnFormItem">
             <label class="dnnLabel">@Localization.GetString("SecurityCode")</label>
             <input type="text" id="ccsecuritycode" name="ccsecuritycode" size="5" tabindex="504"
-                    maxlength="4" class="hc-cc-seccode @Model.IsErr("ccsecuritycode")" autocomplete="off" />
+                   maxlength="4" class="hc-cc-seccode @Model.IsErr("ccsecuritycode")" autocomplete="off" />
         </div>
         <div class="dnnFormItem">
             <label class="dnnLabel">@Localization.GetString("NameOnCard")</label>
             <input type="text" name="cccardholder" size="20" tabindex="505"
-                    value="@Model.PaymentViewModel.DataCreditCard.CardHolderName"
-                    class="@Model.IsErr("cccardholder")" autocomplete="off" />
+                   value="@Model.PaymentViewModel.DataCreditCard.CardHolderName"
+                   class="@Model.IsErr("cccardholder")" autocomplete="off" />
         </div>
     </div>
 }