diff --git a/resources/views/portal/ninja2020/gateways/authorize/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/authorize/credit_card/pay.blade.php
index 4adcdff52987..9bf4e7e5e9a4 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/credit_card/pay.blade.php
@@ -7,9 +7,6 @@
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <meta name="authnet-require-cvv" content="{{ $gateway->company_gateway->require_cvv }}">
-
-    <script src="{{ asset('build/public/js/card-js.min.js/card-js.min.js') }}"></script>
-    <link href="{{ asset('build/public/css/card-js.min.css/card-js.min.css') }}" rel="stylesheet" type="text/css">
 @endsection
 
 @section('gateway_content')
@@ -77,20 +74,11 @@
 
 @push('footer')
 <script defer>
- 
-$(function() {
-
-    document.getElementsByClassName("expiry")[0].addEventListener('change', function() {
-
-    str = document.getElementsByClassName("expiry")[0].value.replace(/\s/g, '');
-    const expiryArray = str.split("/");
-
-    document.getElementsByName('expiry-month')[0].value = expiryArray[0];
-    document.getElementsByName('expiry-year')[0].value = expiryArray[1];
+    document.querySelector('#date').addEventListener('change', (e) => {
+        const [month, year] = e.target.value.replace(/\s/g, '').split('/');
 
+        document.getElementsByName('expiry-month')[0].value  = month;
+        document.getElementsByName('expiry-year')[0].value = `20${year}`;
     });
-
-});
-
 </script>
-@endpush
\ No newline at end of file
+@endpush
diff --git a/resources/views/portal/ninja2020/gateways/authorize/includes/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/authorize/includes/credit_card.blade.php
index db02d0d77681..abb66b7a3157 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/includes/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/includes/credit_card.blade.php
@@ -3,11 +3,14 @@
      <div class="card-js" id="my-card" data-capture-name="true">
         <input class="input w-full" id="cardholder_name" name="card_holders_name"
             placeholder="{{ ctrans('texts.name')}}">
-        <input type="text" class="input w-full" id="number" placeholder="0000 0000 0000 0000">
+        <input type="text" class="input w-full" id="number" placeholder="0000 0000 0000 0000" name="card_number" />
         <div class="flex items-center gap-2">
         <input type="text" class="input w-1/2" id="date" placeholder="MM/YY">
         <input type="text" class="input w-1/2" id="cvv" placeholder="000">
         </div>
+
+        <input type="hidden" class="expiry-month" name="expiry-month" id="expiration_month" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">
+        <input type="hidden" class="expiry-year" name="expiry-year" id="expiration_year" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year">
     </div>
 
     <div id="errors"></div>
diff --git a/resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php
index 9c2c4c6a78f8..e43710d889ed 100644
--- a/resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php
@@ -5,9 +5,6 @@
     <meta name="instant-payment" content="yes" />
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
-    <script src="{{ asset('js/clients/payments/forte-card-js.min.js') }}"></script>
-
-    <link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
 @endsection
 
 @section('gateway_content')
@@ -86,20 +83,11 @@
 
 @push('footer')
 <script defer>
- 
-$(function() {
-
-    document.getElementsByClassName("expiry")[0].addEventListener('change', function() {
-
-    str = document.getElementsByClassName("expiry")[0].value.replace(/\s/g, '');
-    const expiryArray = str.split("/");
-
-    document.getElementsByName('expiry-month')[0].value = expiryArray[0];
-    document.getElementsByName('expiry-year')[0].value = expiryArray[1];
+    document.querySelector('#date').addEventListener('change', (e) => {
+        const [month, year] = e.target.value.replace(/\s/g, '').split('/');
 
+        document.getElementsByName('expiry-month')[0].value  = month;
+        document.getElementsByName('expiry-year')[0].value = `20${year}`;
     });
-
-});
-
 </script>
-@endpush
\ No newline at end of file
+@endpush
diff --git a/resources/views/portal/ninja2020/gateways/forte/includes/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/forte/includes/credit_card.blade.php
index fa46d3ca7faf..225c767e4da8 100644
--- a/resources/views/portal/ninja2020/gateways/forte/includes/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/forte/includes/credit_card.blade.php
@@ -3,11 +3,14 @@
     <div class="card-js" id="my-card" data-capture-name="true">
         <input class="input w-full" id="cardholder_name" name="card_holders_name"
             placeholder="{{ ctrans('texts.name')}}">
-        <input type="text" class="input w-full" id="number" placeholder="0000 0000 0000 0000">
+        <input type="text" class="input w-full" id="number" placeholder="0000 0000 0000 0000" name="card-number" />
         <div class="flex items-center gap-2">
         <input type="text" class="input w-1/2" id="date" placeholder="MM/YY">
         <input type="text" class="input w-1/2" id="cvv" placeholder="000">
         </div>
+
+        <input type="hidden" class="expiry-month" name="expiry-month" id="expiration_month" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">
+        <input type="hidden" class="expiry-year" name="expiry-year" id="expiration_year" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year">
     </div>
 
     <div id="errors"></div>