diff --git a/resources/js/clients/payments/sofort.js b/resources/js/clients/payments/sofort.js
index e5d44f3b0a..5e241ab264 100644
--- a/resources/js/clients/payments/sofort.js
+++ b/resources/js/clients/payments/sofort.js
@@ -36,14 +36,20 @@ class ProcessSOFORT {
 
         document.getElementById('pay-now').addEventListener('submit', (e) => {
             e.preventDefault();
-            processingOverlay(true);
-            document.getElementById('pay-now').disabled = true;
+
+            document.getElementById('pay-now-button').disabled = true;
+            document.querySelector('#pay-now-button > svg').classList.remove('hidden');
+            document.querySelector('#pay-now-button > span').classList.add('hidden');
 
             this.stripe.createSource(data).then(function(result) {
                 if (result.hasOwnProperty('source')) {
                     return (window.location = result.source.redirect.url);
                 }
 
+                document.getElementById('pay-now-button').disabled = false;
+                document.querySelector('#pay-now-button > svg').classList.add('hidden');
+                document.querySelector('#pay-now-button > span').classList.remove('hidden');
+
                 this.errors.textContent = '';
                 this.errors.textContent = result.error.message;
                 this.errors.hidden = false;
diff --git a/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
index 0bb9511f53..d06441e05c 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
@@ -39,9 +39,13 @@
                                <span class="font-bold">{{ App\Utils\Number::formatMoney($amount, $client) }}</span>
                             </dd>
                         </div>
-                        <div class="bg-gray-50 px-4 py-5 flex justify-end">
+                        <div class="bg-gray-50 px-4 py-5 flex justify-end" id="pay-now-button">
                             <button class="button button-primary">
-                                {{ ctrans('texts.pay_now') }}
+                                <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>
                     </form>