diff --git a/resources/js/clients/payments/authorize-credit-card-payment.js b/resources/js/clients/payments/authorize-credit-card-payment.js
index 04dcda0468e0..49b2f6fadabb 100644
--- a/resources/js/clients/payments/authorize-credit-card-payment.js
+++ b/resources/js/clients/payments/authorize-credit-card-payment.js
@@ -39,7 +39,9 @@ class AuthorizeAuthorizeCard {
         // send the bankData object instead of the cardData object.
         //
         // secureData.bankData = bankData;
-        processingOverlay(true);
+        document.getElementById('card_button').disabled = true;
+        document.querySelector('#card_button > svg').classList.remove('hidden');
+        document.querySelector('#card_button > span').classList.add('hidden');
 
 		Accept.dispatchData(secureData, this.responseHandler);
         
@@ -55,14 +57,15 @@ class AuthorizeAuthorizeCard {
     }
 
     responseHandler(response) {
-        processingOverlay(false);
-
 	    if (response.messages.resultCode === "Error") {
 	        var i = 0;
 
             var $errors = $('#errors'); // get the reference of the div
             $errors.show().html("<p>" + response.messages.message[i].code + ": " + response.messages.message[i].text + "</p>"); 
-            
+         
+            document.getElementById('card_button').disabled = false;
+            document.querySelector('#card_button > svg').classList.add('hidden');
+            document.querySelector('#card_button > span').classList.remove('hidden');
 	    }
 	    else if(response.messages.resultCode === "Ok"){
             
diff --git a/resources/views/portal/ninja2020/gateways/authorize/credit_card_payment.blade.php b/resources/views/portal/ninja2020/gateways/authorize/credit_card_payment.blade.php
index 661bba3e330e..1dbfcf010178 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/credit_card_payment.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/credit_card_payment.blade.php
@@ -87,7 +87,13 @@
                                 </dd>
                             </div>
                             <div class="bg-white px-4 py-5 flex justify-end">
-                                <button class="button button-primary" id="card_button">{{ ctrans('texts.pay_now') }}</button>
+                                <button class="button button-primary" id="card_button">
+                                    <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                    <span>{{ __('texts.pay_now') }}</span>
+                                </button>
                             </div>
                         </dl>
                         @else
@@ -134,19 +140,6 @@
             </div>
         </div>
     </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
 @endsection
 
 @push('footer')
@@ -158,5 +151,4 @@
     @endif
 
     <script src="{{ asset('js/clients/payments/authorize-credit-card-payment.js') }}"></script>
-    
 @endpush
\ No newline at end of file