diff --git a/app/Http/Controllers/ClientPortal/PaymentMethodController.php b/app/Http/Controllers/ClientPortal/PaymentMethodController.php
index 4dbf694c3b17..97b9a0d3d889 100644
--- a/app/Http/Controllers/ClientPortal/PaymentMethodController.php
+++ b/app/Http/Controllers/ClientPortal/PaymentMethodController.php
@@ -57,7 +57,6 @@ class PaymentMethodController extends Controller
 
         $data['gateway'] = $gateway;
         $data['client'] = auth()->user()->client;
-
         return $gateway
             ->driver(auth()->user()->client)
             ->setPaymentMethod($request->query('method'))
@@ -148,6 +147,9 @@ class PaymentMethodController extends Controller
         if (request()->query('method') == GatewayType::CREDIT_CARD) {
             return auth()->user()->client->getCreditCardGateway();
         }
+        if (request()->query('method') == GatewayType::BACS) {
+            return auth()->user()->client->getBACSGateway();
+        }
 
         if (in_array(request()->query('method'), [GatewayType::BANK_TRANSFER, GatewayType::DIRECT_DEBIT, GatewayType::SEPA])) {
             return auth()->user()->client->getBankTransferGateway();
diff --git a/public/js/clients/payments/stripe-bacs.js b/public/js/clients/payments/stripe-bacs.js
new file mode 100644
index 000000000000..22d576f971e7
--- /dev/null
+++ b/public/js/clients/payments/stripe-bacs.js
@@ -0,0 +1,2 @@
+/*! For license information please see stripe-bacs.js.LICENSE.txt */
+(()=>{var e,t,n,r;function o(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var c=i((function e(t,n){var r=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),a(this,"setupStripe",(function(){return r.stripeConnect?r.stripe=Stripe(r.key,{stripeAccount:r.stripeConnect}):r.stripe=Stripe(r.key),r})),a(this,"handle",(function(){document.getElementById("pay-now").addEventListener("click",(function(e){document.getElementById("errors");document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),r.stripe.confirmGiropayPayment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{billing_details:{name:document.getElementById("giropay-name").value}},return_url:document.querySelector('meta[name="return-url"]').content})}))})),this.key=t,this.errors=document.getElementById("errors"),this.stripeConnect=n}));new c(null!==(e=null===(t=document.querySelector('meta[name="stripe-publishable-key"]'))||void 0===t?void 0:t.content)&&void 0!==e?e:"",null!==(n=null===(r=document.querySelector('meta[name="stripe-account-id"]'))||void 0===r?void 0:r.content)&&void 0!==n?n:"").setupStripe().handle()})();
\ No newline at end of file
diff --git a/public/js/clients/payments/stripe-bacs.js.LICENSE.txt b/public/js/clients/payments/stripe-bacs.js.LICENSE.txt
new file mode 100644
index 000000000000..97e5374d6e40
--- /dev/null
+++ b/public/js/clients/payments/stripe-bacs.js.LICENSE.txt
@@ -0,0 +1,9 @@
+/**
+ * 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://www.elastic.co/licensing/elastic-license
+ */
diff --git a/resources/js/clients/payments/stripe-bacs.js b/resources/js/clients/payments/stripe-bacs.js
new file mode 100644
index 000000000000..3aab9174a0bb
--- /dev/null
+++ b/resources/js/clients/payments/stripe-bacs.js
@@ -0,0 +1,68 @@
+/**
+ * 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://www.elastic.co/licensing/elastic-license
+ */
+
+class ProcessBACS {
+    constructor(key, stripeConnect) {
+        this.key = key;
+        this.errors = document.getElementById('errors');
+        this.stripeConnect = stripeConnect;
+    }
+
+    setupStripe = () => {
+
+        if (this.stripeConnect){
+           // this.stripe.stripeAccount = this.stripeConnect;
+
+           this.stripe = Stripe(this.key, {
+              stripeAccount: this.stripeConnect,
+            });
+
+        }
+        else {
+            this.stripe = Stripe(this.key);
+        }
+
+
+        return this;
+    };
+
+    handle = () => {
+        document.getElementById('pay-now').addEventListener('click', (e) => {
+            let errors = document.getElementById('errors');
+
+            document.getElementById('pay-now').disabled = true;
+            document.querySelector('#pay-now > svg').classList.remove('hidden');
+            document.querySelector('#pay-now > span').classList.add('hidden');
+
+            this.stripe.confirmGiropayPayment(
+                document.querySelector('meta[name=pi-client-secret').content,
+                {
+                    payment_method: {
+                        billing_details: {
+                            name: document.getElementById("giropay-name").value,
+                        },
+                    },
+                    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 ProcessBACS(publishableKey, stripeConnect).setupStripe().handle();
diff --git a/resources/views/portal/ninja2020/gateways/stripe/bacs/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/bacs/pay.blade.php
index a20313b7899d..74046f442d82 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/bacs/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/bacs/pay.blade.php
@@ -1,97 +1,31 @@
-@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Credit card', 'card_title' => 'Credit card'])
-
-@php
-    $gateway_instance = $gateway instanceof \App\Models\CompanyGateway ? $gateway : $gateway->company_gateway;
-    $token_billing_string = 'true';
-
-    if($gateway_instance->token_billing == 'off' || $gateway_instance->token_billing == 'optin'){
-        $token_billing_string = 'false';
-    }
-    
-    
-@endphp
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'BACS', 'card_title' => 'BACS'])
 
 @section('gateway_head')
     @if($gateway->company_gateway->getConfigField('account_id'))
         <meta name="stripe-account-id" content="{{ $gateway->company_gateway->getConfigField('account_id') }}">
         <meta name="stripe-publishable-key" content="{{ config('ninja.ninja_stripe_publishable_key') }}">
     @else
-        <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
+        <meta name="stripe-publishable-key" content="{{ $gateway->company_gateway->getPublishableKey() }}">
     @endif
-
-    <meta name="stripe-secret" content="{{ $intent->client_secret }}">
-    <meta name="only-authorization" content="">
-    <meta name="client-postal-code" content="{{ $client->postal_code ?? '' }}">
-    <meta name="stripe-require-postal-code" content="{{ $gateway->company_gateway->require_postal_code }}">
+    <meta name="return-url" content="{{ $return_url }}">
+    <meta name="amount" content="{{ $stripe_amount }}">
+    <meta name="country" content="{{ $country }}">
+    <meta name="customer" content="{{ $customer }}">
+    <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
 @endsection
 
 @section('gateway_content')
-    <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
-        @csrf
-        <input type="hidden" name="gateway_response">
-        <input type="hidden" name="store_card" value="{{ $token_billing_string }}">
-        <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
-
-        <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
-        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
-
-        <input type="hidden" name="token">
-    </form>
-
     <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.credit_card') }}
-    @endcomponent
-
     @include('portal.ninja2020.gateways.includes.payment_details')
 
-    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
-        <ul class="list-none hover:list-disc">
-        @if(count($tokens) > 0)
-            @foreach($tokens as $token)
-            <li class="py-2 hover:text-blue hover:bg-blue-600">
-                <label class="mr-4">
-                    <input
-                        type="radio"
-                        data-token="{{ $token->token }}"
-                        name="payment-type"
-                        class="form-check-input text-indigo-600 rounded-full cursor-pointer toggle-payment-with-token toggle-payment-with-token"/>
-                    <span class="ml-1 cursor-pointer">**** {{ $token->meta?->last4 }}</span>
-                </label>
-            </li>
-            @endforeach
-        @endisset
-
-            <li class="py-2 hover:text-blue hover:bg-blue-600">
-                <label>
-                    <input
-                        type="radio"
-                        id="toggle-payment-with-credit-card"
-                        class="form-check-input text-indigo-600 rounded-full cursor-pointer"
-                        name="payment-type"
-                        checked/>
-                    <span class="ml-1 cursor-pointer">{{ __('texts.new_card') }}</span>
-                </label>
-            </li>    
-        </ul>
-        
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
+        {{ ctrans('texts.bacs') }} ({{ ctrans('texts.bank_transfer') }})
     @endcomponent
-
-    @include('portal.ninja2020.gateways.stripe.includes.card_widget')
     @include('portal.ninja2020.gateways.includes.pay_now')
-    
 @endsection
 
-@section('gateway_footer')
-    <script>
-        Livewire.on('passed-required-fields-check', (event) => {
-            if (event.hasOwnProperty('client_postal_code')) {
-                document.querySelector('meta[name=client-postal-code]').content = event.client_postal_code;
-            }
-        });
-    </script>
-
+@push('footer')
     <script src="https://js.stripe.com/v3/"></script>
-    <script src="{{ asset('js/clients/payments/stripe-credit-card.js') }}"></script>
-@endsection
+    <script src="{{ asset('js/clients/payments/stripe-bacs.js') }}"></script>
+@endpush
diff --git a/webpack.mix.js b/webpack.mix.js
index df0604426709..4706ea5bda62 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -26,6 +26,10 @@ mix.js("resources/js/app.js", "public/js")
         "resources/js/clients/payments/stripe-klarna.js",
         "public/js/clients/payments/stripe-klarna.js"
     )
+    .js(
+        "resources/js/clients/payments/stripe-bacs.js",
+        "public/js/clients/payments/stripe-bacs.js"
+    )
     .js(
         "resources/js/clients/invoices/action-selectors.js",
         "public/js/clients/invoices/action-selectors.js"