diff --git a/resources/js/clients/payment_methods/authorize-authorize-card.js b/resources/js/clients/payment_methods/authorize-authorize-card.js
index 9af8543c825d..c154372f5d1f 100644
--- a/resources/js/clients/payment_methods/authorize-authorize-card.js
+++ b/resources/js/clients/payment_methods/authorize-authorize-card.js
@@ -35,7 +35,9 @@ class AuthorizeAuthorizeCard {
         secureData.authData = authData;
         secureData.cardData = cardData;
 
-        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);
           return false;
@@ -43,8 +45,6 @@ class AuthorizeAuthorizeCard {
     }
 
     responseHandler(response) {
-        processingOverlay(false);
-
 	    if (response.messages.resultCode === "Error") {
 	        var i = 0;
 	        while (i < response.messages.message.length) {
@@ -53,7 +53,11 @@ class AuthorizeAuthorizeCard {
 	                response.messages.message[i].text
 	            );
 	            i = i + 1;
-	        }
+            }
+            
+            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/add_credit_card.blade.php b/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
index 1249b394c48e..62203c115193 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
@@ -59,8 +59,13 @@
                         </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>
+                            <button type="primary" 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.save') }}</span>
+                            </button>
                         </div>
                     </dl>
                 </div>