diff --git a/resources/js/clients/payments/sofort.js b/resources/js/clients/payments/stripe-sofort.js
similarity index 93%
rename from resources/js/clients/payments/sofort.js
rename to resources/js/clients/payments/stripe-sofort.js
index 5e241ab26414..2e5da55ac7a5 100644
--- a/resources/js/clients/payments/sofort.js
+++ b/resources/js/clients/payments/stripe-sofort.js
@@ -34,9 +34,7 @@ class ProcessSOFORT {
             },
         };
 
-        document.getElementById('pay-now').addEventListener('submit', (e) => {
-            e.preventDefault();
-
+        document.getElementById('pay-now').addEventListener('click', (e) => {
             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');
@@ -54,8 +52,6 @@ class ProcessSOFORT {
                 this.errors.textContent = result.error.message;
                 this.errors.hidden = false;
 
-                processingOverlay(false);
-
                 document.getElementById('pay-now').disabled = 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 a53402bf3614..3393a87c75b7 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
@@ -1,61 +1,23 @@
-@extends('portal.ninja2020.layout.app')
-@section('meta_title', ctrans('texts.sofort'))
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'SOFORT (Stripe)', 'card_title' => 'SOFORT (Stripe)'])
 
-@push('head')
+@section('gateway_head')
     <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
     <meta name="return-url" content="{{ $return_url }}">
     <meta name="amount" content="{{ $stripe_amount }}">
     <meta name="country" content="{{ $country }}">
-@endpush
+@endsection
 
-@section('body')
-    <div class="container mx-auto">
-        <div class="grid grid-cols-6 gap-4">
-            <div class="col-span-6 md:col-start-2 md:col-span-4">
-                <div class="alert alert-failure mb-4" hidden id="errors"></div>
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-                    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
-                        <h3 class="text-lg leading-6 font-medium text-gray-900">
-                            {{ ctrans('texts.pay_now') }}
-                        </h3>
-                        <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
-                            {{ ctrans('texts.complete_your_payment') }}
-                        </p>
-                    </div>
-                    <form action="#" method="POST" id="pay-now">
-                        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
-                            <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
-                                {{ ctrans('texts.payment_type') }}
-                            </dt>
-                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                {{ ctrans('texts.sofort') }} ({{ ctrans('texts.bank_transfer') }})
-                            </dd>
-                        </div>
-                        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
-                            <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
-                                {{ ctrans('texts.amount') }}
-                            </dt>
-                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                               <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" id="pay-now-button">
-                            <button class="button button-primary bg-primary">
-                                <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>
-                </div>
-            </div>
-        </div>
-    </div>
+@section('gateway_content')
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
+        {{ ctrans('texts.sofort') }} ({{ ctrans('texts.bank_transfer') }})
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.pay_now')
 @endsection
 
 @push('footer')
     <script src="https://js.stripe.com/v3/"></script>
-    <script src="{{ asset('js/clients/payments/sofort.js') }}"></script>
-@endpush 
\ No newline at end of file
+    <script src="{{ asset('js/clients/payments/stripe-sofort.js') }}"></script>
+@endpush
diff --git a/webpack.mix.js b/webpack.mix.js
index 120a08b6f0dc..6a2fd6e37d05 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -23,8 +23,8 @@ mix.js("resources/js/app.js", "public/js")
         "public/js/clients/invoices/payment.js"
     )
     .js(
-        "resources/js/clients/payments/sofort.js",
-        "public/js/clients/payments/sofort.js"
+        "resources/js/clients/payments/stripe-sofort.js",
+        "public/js/clients/payments/stripe-sofort.js"
     )
     .js(
         "resources/js/clients/payments/alipay.js",