diff --git a/resources/js/clients/payments/process.js b/resources/js/clients/payments/process.js
index d4510cc4187c..9ae033b8d84d 100644
--- a/resources/js/clients/payments/process.js
+++ b/resources/js/clients/payments/process.js
@@ -34,7 +34,11 @@ class ProcessStripePayment {
     }
 
     completePaymentUsingToken() {
-        let payNowButton = document.getElementById("pay-now-with-token");
+        let payNowButton = document.getElementById('pay-now-with-token');
+        this.payNowButton = payNowButton;
+
+        payNowButton.querySelector('svg').classList.remove('hidden');
+        payNowButton.disabled = true;
 
         this.stripe
             .handleCardPayment(payNowButton.dataset.secret, {
@@ -82,6 +86,8 @@ class ProcessStripePayment {
                 tokenBillingCheckbox.checked;
         }
 
+        this.payNowButton.querySelector('svg').classList.add('hidden');
+
         document.getElementById("server-response").submit();
     }
 
@@ -91,6 +97,9 @@ class ProcessStripePayment {
         errors.textContent = "";
         errors.textContent = message;
         errors.hidden = false;
+
+        this.payNowButton.querySelector('svg').classList.add('hidden');
+        this.payNowButton.disabled = false;
     }
 
     handle() {
diff --git a/resources/sass/components/buttons.scss b/resources/sass/components/buttons.scss
index 88b8e378adbb..fb0242416452 100644
--- a/resources/sass/components/buttons.scss
+++ b/resources/sass/components/buttons.scss
@@ -2,6 +2,10 @@
     @apply rounded py-3 px-4 text-sm leading-4 transition duration-150 ease-in-out font-semibold;
 }
 
+button:disabled {
+    @apply opacity-50 cursor-not-allowed;
+}
+
 .button-primary {
     @apply bg-blue-500 text-white;
 
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
index 8b8a5e1fd223..b3df4b2759c2 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
@@ -47,7 +47,11 @@
                                         data-secret="{{ $intent->client_secret }}"
                                         data-token="{{ $token->token }}"
                                         id="pay-now-with-token"
-                                        class="button button-primary">
+                                        class="button button-primary inline-flex items-center">
+                                            <svg class="hidden animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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>
                                         {{ ctrans('texts.pay_now') }}
                                     </button>
                                 </div>