diff --git a/resources/js/clients/payments/forte-ach-payment.js b/resources/js/clients/payments/forte-ach-payment.js
new file mode 100644
index 000000000000..90bf9f675377
--- /dev/null
+++ b/resources/js/clients/payments/forte-ach-payment.js
@@ -0,0 +1,81 @@
+/**
+ * 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 ForteAuthorizeACH {
+    constructor(apiLoginId) {
+        this.apiLoginId = apiLoginId;
+    }
+
+    handleAuthorization = () => {
+        var account_number = document.getElementById('account-number').value;
+        var routing_number = document.getElementById('routing-number').value;
+
+        var data = {
+            api_login_id: this.apiLoginId,
+            account_number: account_number,
+            routing_number: routing_number,
+            account_type: 'checking',
+        };
+
+        let payNowButton = document.getElementById('pay-now');
+
+        if (payNowButton) {
+            document.getElementById('pay-now').disabled = true;
+            document.querySelector('#pay-now > svg').classList.remove('hidden');
+            document.querySelector('#pay-now > span').classList.add('hidden');
+        }
+        // console.log(data);
+        forte
+            .createToken(data)
+            .success(this.successResponseHandler)
+            .error(this.failedResponseHandler);
+        return false;
+    };
+
+    successResponseHandler = (response) => {
+        document.getElementById('payment_token').value = response.onetime_token;
+
+        document.getElementById('server_response').submit();
+
+        return false;
+    };
+
+    failedResponseHandler = (response) => {
+        var errors =
+            '<div class="alert alert-failure mb-4"><ul><li>' +
+            response.response_description +
+            '</li></ul></div>';
+        document.getElementById('forte_errors').innerHTML = errors;
+        document.getElementById('pay-now').disabled = false;
+        document.querySelector('#pay-now > svg').classList.add('hidden');
+        document.querySelector('#pay-now > span').classList.remove('hidden');
+
+        return false;
+    };
+
+    handle = () => {
+        let payNowButton = document.getElementById('pay-now');
+
+        if (payNowButton) {
+            payNowButton.addEventListener('click', (e) => {
+                this.handleAuthorization();
+            });
+        }
+
+        return this;
+    };
+}
+
+const apiLoginId = document.querySelector(
+    'meta[name="forte-api-login-id"]'
+).content;
+
+/** @handle */
+new ForteAuthorizeACH(apiLoginId).handle();
diff --git a/resources/js/clients/payments/forte-credit-card-payment.js b/resources/js/clients/payments/forte-credit-card-payment.js
new file mode 100644
index 000000000000..0139356a4daa
--- /dev/null
+++ b/resources/js/clients/payments/forte-credit-card-payment.js
@@ -0,0 +1,83 @@
+/**
+ * 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 ForteAuthorizeCard {
+    constructor(apiLoginId) {
+        this.apiLoginId = apiLoginId;
+        this.cardHolderName = document.getElementById('cardholder_name');
+    }
+
+    handleAuthorization = () => {
+        var myCard = $('#my-card');
+
+        var data = {
+            api_login_id: this.apiLoginId,
+            card_number: myCard.CardJs('cardNumber').replace(/[^\d]/g, ''),
+            expire_year: myCard.CardJs('expiryYear').replace(/[^\d]/g, ''),
+            expire_month: myCard.CardJs('expiryMonth').replace(/[^\d]/g, ''),
+            cvv: document.getElementById('cvv').value.replace(/[^\d]/g, ''),
+        };
+
+        let payNowButton = document.getElementById('pay-now');
+
+        if (payNowButton) {
+            document.getElementById('pay-now').disabled = true;
+            document.querySelector('#pay-now > svg').classList.remove('hidden');
+            document.querySelector('#pay-now > span').classList.add('hidden');
+        }
+
+        forte
+            .createToken(data)
+            .success(this.successResponseHandler)
+            .error(this.failedResponseHandler);
+        return false;
+    };
+
+    successResponseHandler = (response) => {
+        document.getElementById('payment_token').value = response.onetime_token;
+        document.getElementById('card_brand').value = response.card_type;
+
+        document.getElementById('server_response').submit();
+
+        return false;
+    };
+
+    failedResponseHandler = (response) => {
+        var errors =
+            '<div class="alert alert-failure mb-4"><ul><li>' +
+            response.response_description +
+            '</li></ul></div>';
+        document.getElementById('forte_errors').innerHTML = errors;
+        document.getElementById('pay-now').disabled = false;
+        document.querySelector('#pay-now > svg').classList.add('hidden');
+        document.querySelector('#pay-now > span').classList.remove('hidden');
+
+        return false;
+    };
+
+    handle = () => {
+        let payNowButton = document.getElementById('pay-now');
+
+        if (payNowButton) {
+            payNowButton.addEventListener('click', (e) => {
+                this.handleAuthorization();
+            });
+        }
+
+        return this;
+    };
+}
+
+const apiLoginId = document.querySelector(
+    'meta[name="forte-api-login-id"]'
+).content;
+
+/** @handle */
+new ForteAuthorizeCard(apiLoginId).handle();
diff --git a/resources/views/portal/ninja2020/gateways/forte/ach/pay.blade.php b/resources/views/portal/ninja2020/gateways/forte/ach/pay.blade.php
index 524bdb7e41ff..5dbb93fbd246 100644
--- a/resources/views/portal/ninja2020/gateways/forte/ach/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/forte/ach/pay.blade.php
@@ -1,11 +1,7 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Bank Transfer', 'card_title' => 'Bank Transfer'])
 
 @section('gateway_head')
-    @if($gateway->forte->company_gateway->getConfigField('testMode'))
-    <script type="text/javascript" src="https://sandbox.forte.net/api/js/v1"></script>
-    @else
-    <script type="text/javascript" src="https://api.forte.net/js/v1"></script>
-    @endif
+    <meta name="forte-api-login-id" content="{{$gateway->forte->company_gateway->getConfigField("apiLoginId")}}">
 @endsection
 
 @section('gateway_content')
@@ -41,46 +37,17 @@
             <input class="input w-full" id="account-number" type="text" placeholder="{{ctrans('texts.account_number')}}" required>
         </div>
     @endcomponent
-    <div class="bg-white px-4 py-5 flex justify-end">
-        <button type="button"
-        onclick="submitPay()"
-            class="button button-primary bg-primary {{ $class ?? '' }}">
-                <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>{{ $slot ?? ctrans('texts.pay_now') }}</span>
-        </button>
-    </div>
+
+    @include('portal.ninja2020.gateways.includes.pay_now')
 
 @endsection
 
 @section('gateway_footer')
-    <script>
-        function onTokenCreated(params) {
-            document.getElementById('payment_token').value=params.onetime_token;
-            let button = document.querySelector("#form_btn");
-            button.click();
-        }
-        function onTokenFailed(params) {
-            var errors = '<div class="alert alert-failure mb-4"><ul><li>'+ params.response_description +'</li></ul></div>';
-            document.getElementById("forte_errors").innerHTML = errors;
-        }
-        function submitPay(){
-            var account_number=document.getElementById('account-number').value;
-            var routing_number=document.getElementById('routing-number').value;
-
-            var data = {
-               api_login_id: '{{$gateway->forte->company_gateway->getConfigField("apiLoginId")}}',
-               account_number: account_number,
-               routing_number: routing_number, 
-               account_type: "checking",
-            }
-
-            forte.createToken(data)
-               .success(onTokenCreated)
-               .error(onTokenFailed);
-            return false;
-        }
-    </script>
+    @if($gateway->forte->company_gateway->getConfigField('testMode'))
+        <script type="text/javascript" src="https://sandbox.forte.net/api/js/v1"></script>
+    @else
+        <script type="text/javascript" src="https://api.forte.net/js/v1"></script>
+    @endif
+    
+    <script src="{{ asset('js/clients/payments/forte-ach-payment.js') }}"></script>
 @endsection
diff --git a/resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php
index ac47cda057cf..1cceb137f39c 100644
--- a/resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php
@@ -1,16 +1,11 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.payment_type_credit_card'), 'card_title' => ctrans('texts.payment_type_credit_card')])
 
 @section('gateway_head')
+    <meta name="forte-api-login-id" content="{{$gateway->forte->company_gateway->getConfigField("apiLoginId")}}">
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="{{ asset('js/clients/payments/forte-card-js.min.js') }}"></script>
 
     <link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
-
-    @if($gateway->forte->company_gateway->getConfigField('testMode'))
-        <script type="text/javascript" src="https://sandbox.forte.net/api/js/v1"></script>
-    @else
-        <script type="text/javascript" src="https://api.forte.net/js/v1"></script>
-    @endif
 @endsection
 
 @section('gateway_content')
@@ -41,50 +36,16 @@
        @include('portal.ninja2020.gateways.forte.includes.credit_card')
     @endcomponent
 
-    <div class="bg-white px-4 py-5 flex justify-end">
-        <button type="button"
-        onclick="submitPay()"
-            class="button button-primary bg-primary {{ $class ?? '' }}">
-                <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>{{ $slot ?? ctrans('texts.pay_now') }}</span>
-        </button>
-    </div>
+    @include('portal.ninja2020.gateways.includes.pay_now')
 
 @endsection
 
 @section('gateway_footer')
-    <script>
-        function onTokenCreated(params) {
-            document.getElementById('payment_token').value=params.onetime_token;
-            document.getElementById('card_brand').value=params.card_type;
-            let button = document.querySelector("#form_btn");
-            button.click();
-        }
-        function onTokenFailed(params) {
-            var errors = '<div class="alert alert-failure mb-4"><ul><li>'+ params.response_description +'</li></ul></div>';
-            document.getElementById("forte_errors").innerHTML = errors;
-        }
-        function submitPay(){
-            var month=document.querySelector('input[name=expiry-month]').value;
-            var year=document.querySelector('input[name=expiry-year]').value;
-            var cc=document.getElementById('card_number').value.replaceAll(' ','');
-            var cvv=document.getElementById('cvv').value;
-
-            var data = {
-               api_login_id: '{{$gateway->forte->company_gateway->getConfigField("apiLoginId")}}',
-               card_number: cc,
-               expire_year: year, 
-               expire_month: month,
-               cvv: cvv,
-            }
-
-            forte.createToken(data)
-               .success(onTokenCreated)
-               .error(onTokenFailed);
-            return false;
-        }
-    </script>
+    @if($gateway->forte->company_gateway->getConfigField('testMode'))
+        <script type="text/javascript" src="https://sandbox.forte.net/api/js/v1"></script>
+    @else
+        <script type="text/javascript" src="https://api.forte.net/js/v1"></script>
+    @endif
+    
+    <script src="{{ asset('js/clients/payments/forte-credit-card-payment.js') }}"></script>
 @endsection
diff --git a/webpack.mix.js b/webpack.mix.js
index 9f0c809188b5..0ad6a2425d05 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -10,6 +10,14 @@ mix.js("resources/js/app.js", "public/js")
         "resources/js/clients/payments/authorize-credit-card-payment.js",
         "public/js/clients/payments/authorize-credit-card-payment.js"
     )
+    .js(
+        "resources/js/clients/payments/forte-credit-card-payment.js",
+        "public/js/clients/payments/forte-credit-card-payment.js"
+    )
+    .js(
+        "resources/js/clients/payments/forte-ach-payment.js",
+        "public/js/clients/payments/forte-ach-payment.js"
+    )
     .js(
         "resources/js/clients/payments/stripe-ach.js",
         "public/js/clients/payments/stripe-ach.js"