diff --git a/app/PaymentDrivers/Stripe/SEPA.php b/app/PaymentDrivers/Stripe/SEPA.php
index f2525f938b15..7f618e2a0c99 100644
--- a/app/PaymentDrivers/Stripe/SEPA.php
+++ b/app/PaymentDrivers/Stripe/SEPA.php
@@ -29,7 +29,7 @@ class SEPA implements MethodInterface
 
     public function authorizeView($data)
     {
-        return render('gateways.stripe.sofort.authorize', $data);
+        return render('gateways.stripe.sepa.authorize', $data);
     }
 
     public function authorizeResponse(Request $request) { }
diff --git a/resources/js/clients/payments/stripe-sepa.js b/resources/js/clients/payments/stripe-sepa.js
new file mode 100644
index 000000000000..6a2f36894ede
--- /dev/null
+++ b/resources/js/clients/payments/stripe-sepa.js
@@ -0,0 +1,59 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com)
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+class ProcessSEPA {
+    constructor(key, stripeConnect) {
+        this.key = key;
+        this.errors = document.getElementById('errors');
+        this.stripeConnect = stripeConnect;
+    }
+
+    setupStripe = () => {
+        this.stripe = Stripe(this.key);
+
+        if(this.stripeConnect)
+            this.stripe.stripeAccount = stripeConnect;
+
+        return this;
+    };
+
+    handle = () => {
+        document.getElementById('pay-now').addEventListener('click', (e) => {
+            document.getElementById('pay-now').disabled = true;
+            document.querySelector('#pay-now > svg').classList.remove('hidden');
+            document.querySelector('#pay-now > span').classList.add('hidden');
+
+            this.stripe.confirmSEPAPayment(
+                document.querySelector('meta[name=pi-client-secret').content,
+                {
+                    payment_method: {
+                        sofort: {
+                            country: document.querySelector(
+                                'meta[name="country"]'
+                            ).content,
+                        },
+                    },
+                    return_url: document.querySelector(
+                        'meta[name="return-url"]'
+                    ).content,
+                }
+            );
+        });
+    };
+}
+
+const publishableKey = document.querySelector(
+    'meta[name="stripe-publishable-key"]'
+)?.content ?? '';
+
+const stripeConnect =
+    document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
+
+new ProcessSEPA(publishableKey, stripeConnect).setupStripe().handle();
diff --git a/resources/views/portal/ninja2020/gateways/stripe/sepa/authorize.blade.php b/resources/views/portal/ninja2020/gateways/stripe/sepa/authorize.blade.php
index def2150fb30d..6a5c4bc09cb6 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/sepa/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/sepa/authorize.blade.php
@@ -10,9 +10,9 @@
 @endsection
 
 @section('gateway_content')
-    @if(session()->has('ach_error'))
+    @if(session()->has('sepa_error'))
         <div class="alert alert-failure mb-4">
-            <p>{{ session('ach_error') }}</p>
+            <p>{{ session('sepa_error') }}</p>
         </div>
     @endif
 
@@ -78,5 +78,5 @@
 
 @section('gateway_footer')
     <script src="https://js.stripe.com/v3/"></script>
-    <script src="{{ asset('js/clients/payments/stripe-ach.js') }}"></script>
+    <script src="{{ asset('js/clients/payments/stripe-sepa.js') }}"></script>
 @endsection