diff --git a/app/PaymentDrivers/Authorize/AuthorizeACH.php b/app/PaymentDrivers/Authorize/AuthorizeACH.php
index 001c32dfee..b9fbdd5a99 100644
--- a/app/PaymentDrivers/Authorize/AuthorizeACH.php
+++ b/app/PaymentDrivers/Authorize/AuthorizeACH.php
@@ -47,10 +47,13 @@ class AuthorizeACH implements LivewireMethodInterface
   
     public function livewirePaymentView(array $data): string
     {
-        $data['gateway'] = $this->authorize;
-        $data['public_client_id'] = $this->authorize->init()->getPublicClientKey();
-        $data['api_login_id'] = $this->authorize->company_gateway->getConfigField('apiLoginId');
-        return render('gateways.authorize.ach.authorize', $data);
+        // $data['gateway'] = $this->authorize;
+        // $data['public_client_id'] = $this->authorize->init()->getPublicClientKey();
+        // $data['api_login_id'] = $this->authorize->company_gateway->getConfigField('apiLoginId');
+        // return render('gateways.authorize.ach.authorize', $data);
+        
+        return 'gateways.authorize.ach.pay_livewire';
+
     }
 
     public function paymentData(array $data): array
@@ -149,4 +152,5 @@ class AuthorizeACH implements LivewireMethodInterface
 
         return $this->authorize->createPayment($data, Payment::STATUS_COMPLETED);
     }
+
 } 
\ No newline at end of file
diff --git a/public/build/assets/authorize-ach-payment-76cf3d3d.js b/public/build/assets/authorize-ach-payment-2e0c5d83.js
similarity index 87%
rename from public/build/assets/authorize-ach-payment-76cf3d3d.js
rename to public/build/assets/authorize-ach-payment-2e0c5d83.js
index 6a4621e573..445aa75406 100644
--- a/public/build/assets/authorize-ach-payment-76cf3d3d.js
+++ b/public/build/assets/authorize-ach-payment-2e0c5d83.js
@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var d=(s,e,t)=>e in s?c(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>(d(s,typeof e!="symbol"?e+"":e,t),t);import{i as l,w as m}from"./wait-8f4ae121.js";/**
+var c=Object.defineProperty;var d=(n,e,t)=>e in n?c(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var i=(n,e,t)=>(d(n,typeof e!="symbol"?e+"":e,t),t);import{i as l,w as m}from"./wait-8f4ae121.js";/**
  * Invoice Ninja (https://invoiceninja.com)
  *
  * @link https://github.com/invoiceninja/invoiceninja source repository
@@ -6,4 +6,4 @@ var c=Object.defineProperty;var d=(s,e,t)=>e in s?c(s,e,{enumerable:!0,configura
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
  * @license https://www.elastic.co/licensing/elastic-license
- */class h{constructor(e,t){i(this,"handleAuthorization",()=>{var o,r;if(!this.isFormValid())return;this.submitButton.disabled=!0,(o=this.submitButton.querySelector("svg"))==null||o.classList.remove("hidden"),(r=this.submitButton.querySelector("span"))==null||r.classList.add("hidden");const e=document.querySelector('input[name="account_type"]:checked').value??"checking";var t={};t.clientKey=this.publicKey,t.apiLoginID=this.loginId;var a={};a.accountType=e,a.routingNumber=this.routingNumber.value,a.accountNumber=this.accountNumber.value,a.nameOnAccount=this.accountHolderName.value;var n={};return n.authData=t,n.bankData=a,Accept.dispatchData(n,this.responseHandler),!1});i(this,"responseHandler",e=>{if(e.messages.resultCode==="Error"){var t=0;const a=document.getElementById("errors");a&&(a.innerText=`${e.messages.message[t].code}: ${e.messages.message[t].text}`,a.style.display="block"),document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden")}else if(e.messages.resultCode==="Ok"){document.getElementById("dataDescriptor").value=e.opaqueData.dataDescriptor,document.getElementById("dataValue").value=e.opaqueData.dataValue;let a=document.querySelector("input[name=token-billing-checkbox]:checked");a&&(document.getElementById("store_card").value=a.value),document.getElementById("server_response").submit()}return!1});i(this,"handle",()=>{Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(a=>a.addEventListener("click",n=>{document.getElementById("authorize-ach-container").style.display="none",document.getElementById("token").value=n.target.dataset.token,document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden")}));let e=document.getElementById("toggle-payment-with-ach");e&&e.addEventListener("click",()=>{document.getElementById("authorize-ach-container").style.display="grid",document.getElementById("token").value=null,this.updateSubmitButton()});let t=document.getElementById("pay-now");return t&&t.addEventListener("click",a=>{let n=document.getElementById("token");n.value?this.handlePayNowAction(n.value):this.handleAuthorization()}),this});this.form=document.getElementById("server_response"),this.submitButton=document.getElementById("pay-now"),this.errorDiv=document.getElementById("errors"),this.publicKey=e,this.loginId=t,this.accountHolderName=document.getElementById("account_holder_name"),this.routingNumber=document.getElementById("routing_number"),this.accountNumber=document.getElementById("account_number"),this.acceptTerms=document.getElementById("accept-terms"),this.isValid={accountHolderName:!1,routingNumber:!1,accountNumber:!1,acceptTerms:!1},this.setupEventListeners(),this.updateSubmitButton()}setupEventListeners(){this.accountHolderName.addEventListener("input",()=>{this.validateAccountHolderName(),this.updateSubmitButton()}),this.routingNumber.addEventListener("input",()=>{this.validateRoutingNumber(),this.updateSubmitButton()}),this.accountNumber.addEventListener("input",()=>{this.validateAccountNumber(),this.updateSubmitButton()}),this.submitButton.addEventListener("click",e=>{e.preventDefault(),this.isFormValid()&&this.handleAuthorization()}),this.acceptTerms.addEventListener("change",()=>{this.validateAcceptTerms(),this.updateSubmitButton()})}validateAcceptTerms(){this.isValid.acceptTerms=this.acceptTerms.checked,this.isValid.acceptTerms?this.acceptTerms.classList.remove("border-red-500"):this.acceptTerms.classList.add("border-red-500")}validateAccountHolderName(){const e=this.accountHolderName.value.trim();this.isValid.accountHolderName=e.length>0&&e.length<=22,this.isValid.accountHolderName?this.accountHolderName.classList.remove("border-red-500"):this.accountHolderName.classList.add("border-red-500")}validateRoutingNumber(){const e=this.routingNumber.value.replace(/\D/g,"");this.isValid.routingNumber=e.length===9,this.isValid.routingNumber?this.routingNumber.classList.remove("border-red-500"):this.routingNumber.classList.add("border-red-500")}validateAccountNumber(){const e=this.accountNumber.value.replace(/\D/g,"");this.isValid.accountNumber=e.length>=1&&e.length<=17,this.isValid.accountNumber?this.accountNumber.classList.remove("border-red-500"):this.accountNumber.classList.add("border-red-500")}isFormValid(){return Object.values(this.isValid).every(Boolean)}updateSubmitButton(){const e=this.isFormValid();this.submitButton.disabled=!e,e?(this.submitButton.classList.remove("opacity-50","cursor-not-allowed"),this.submitButton.classList.add("hover:bg-primary-dark")):(this.submitButton.classList.add("opacity-50","cursor-not-allowed"),this.submitButton.classList.remove("hover:bg-primary-dark"))}handlePayNowAction(e){document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),document.getElementById("token").value=e,document.getElementById("server_response").submit()}}function u(){const s=document.querySelector('meta[name="authorize-public-key"]').content,e=document.querySelector('meta[name="authorize-login-id"]').content;new h(s,e).handle();const t=document.querySelectorAll("input.toggle-payment-with-token");t.length>0&&t[0].click()}l()?u():m("#authorize-ach-payment").then(()=>u());
+ */class h{constructor(e,t){i(this,"handleAuthorization",()=>{var o,r;if(!this.isFormValid())return;this.submitButton.disabled=!0,(o=this.submitButton.querySelector("svg"))==null||o.classList.remove("hidden"),(r=this.submitButton.querySelector("span"))==null||r.classList.add("hidden");const e=document.querySelector('input[name="account_type"]:checked').value??"checking";var t={};t.clientKey=this.publicKey,t.apiLoginID=this.loginId;var a={};a.accountType=e,a.routingNumber=this.routingNumber.value,a.accountNumber=this.accountNumber.value,a.nameOnAccount=this.accountHolderName.value;var s={};return s.authData=t,s.bankData=a,Accept.dispatchData(s,this.responseHandler),!1});i(this,"responseHandler",e=>{if(e.messages.resultCode==="Error"){var t=0;const a=document.getElementById("errors");a&&(a.innerText=`${e.messages.message[t].code}: ${e.messages.message[t].text}`,a.style.display="block"),document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden")}else if(e.messages.resultCode==="Ok"){document.getElementById("dataDescriptor").value=e.opaqueData.dataDescriptor,document.getElementById("dataValue").value=e.opaqueData.dataValue;let a=document.querySelector("input[name=token-billing-checkbox]:checked");a&&(document.getElementById("store_card").value=a.value),document.getElementById("server_response").submit()}return!1});i(this,"handle",()=>{Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(a=>a.addEventListener("click",s=>{document.getElementById("authorize-ach-container").style.display="none",document.getElementById("token").value=s.target.dataset.token,document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden")}));let e=document.getElementById("toggle-payment-with-ach");e&&e.addEventListener("click",()=>{document.getElementById("authorize-ach-container").style.display="grid",document.getElementById("token").value=null,this.updateSubmitButton()});let t=document.getElementById("pay-now");return t&&t.addEventListener("click",a=>{let s=document.getElementById("token");s.value?this.handlePayNowAction(s.value):this.handleAuthorization()}),this});this.form=document.getElementById("server_response"),this.submitButton=document.getElementById("pay-now"),this.errorDiv=document.getElementById("errors"),this.publicKey=e,this.loginId=t,this.accountHolderName=document.getElementById("account_holder_name"),this.routingNumber=document.getElementById("routing_number"),this.accountNumber=document.getElementById("account_number"),this.acceptTerms=document.getElementById("accept-terms"),this.isValid={accountHolderName:!1,routingNumber:!1,accountNumber:!1,acceptTerms:!1},this.setupEventListeners(),this.updateSubmitButton()}setupEventListeners(){this.accountHolderName.addEventListener("input",()=>{this.validateAccountHolderName(),this.updateSubmitButton()}),this.routingNumber.addEventListener("input",()=>{this.validateRoutingNumber(),this.updateSubmitButton()}),this.accountNumber.addEventListener("input",()=>{this.validateAccountNumber(),this.updateSubmitButton()}),this.submitButton.addEventListener("click",e=>{e.preventDefault(),this.isFormValid()&&this.handleAuthorization()}),this.acceptTerms.addEventListener("change",()=>{this.validateAcceptTerms(),this.updateSubmitButton()})}validateAcceptTerms(){this.isValid.acceptTerms=this.acceptTerms.checked,this.isValid.acceptTerms?this.acceptTerms.classList.remove("border-red-500"):this.acceptTerms.classList.add("border-red-500")}validateAccountHolderName(){const e=this.accountHolderName.value.trim();this.isValid.accountHolderName=e.length>0&&e.length<=22,this.isValid.accountHolderName?this.accountHolderName.classList.remove("border-red-500"):this.accountHolderName.classList.add("border-red-500")}validateRoutingNumber(){const e=this.routingNumber.value.replace(/\D/g,"");this.isValid.routingNumber=e.length===9,this.isValid.routingNumber?this.routingNumber.classList.remove("border-red-500"):this.routingNumber.classList.add("border-red-500")}validateAccountNumber(){const e=this.accountNumber.value.replace(/\D/g,"");this.isValid.accountNumber=e.length>=1&&e.length<=17,this.isValid.accountNumber?this.accountNumber.classList.remove("border-red-500"):this.accountNumber.classList.add("border-red-500")}isFormValid(){return Object.values(this.isValid).every(Boolean)}updateSubmitButton(){const e=this.isFormValid();this.submitButton.disabled=!e,e?(this.submitButton.classList.remove("opacity-50","cursor-not-allowed"),this.submitButton.classList.add("hover:bg-primary-dark")):(this.submitButton.classList.add("opacity-50","cursor-not-allowed"),this.submitButton.classList.remove("hover:bg-primary-dark"))}handlePayNowAction(e){document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),document.getElementById("token").value=e,document.getElementById("server_response").submit()}}function u(){const n=document.querySelector('meta[name="authorize-public-key"]').content,e=document.querySelector('meta[name="authorize-login-id"]').content;new h(n,e).handle();const t=document.querySelectorAll("input.toggle-payment-with-token");t.length>0&&t[0].click()}l()?u():m("#authorize-net-ach-payment").then(()=>u());
diff --git a/public/build/manifest.json b/public/build/manifest.json
index 2471588715..252fc547dc 100644
--- a/public/build/manifest.json
+++ b/public/build/manifest.json
@@ -83,7 +83,7 @@
     "src": "resources/js/clients/payment_methods/wepay-bank-account.js"
   },
   "resources/js/clients/payments/authorize-ach-payment.js": {
-    "file": "assets/authorize-ach-payment-76cf3d3d.js",
+    "file": "assets/authorize-ach-payment-2e0c5d83.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
diff --git a/resources/js/clients/payments/authorize-ach-payment.js b/resources/js/clients/payments/authorize-ach-payment.js
index e42ed56135..9cd6af68d5 100644
--- a/resources/js/clients/payments/authorize-ach-payment.js
+++ b/resources/js/clients/payments/authorize-ach-payment.js
@@ -280,4 +280,4 @@ function boot() {
     }
 }
 
-instant() ? boot() : wait('#authorize-ach-payment').then(() => boot());
+instant() ? boot() : wait('#authorize-net-ach-payment').then(() => boot());
diff --git a/resources/views/portal/ninja2020/gateways/authorize/ach/pay_livewire.blade.php b/resources/views/portal/ninja2020/gateways/authorize/ach/pay_livewire.blade.php
new file mode 100644
index 0000000000..326707bac2
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/authorize/ach/pay_livewire.blade.php
@@ -0,0 +1,71 @@
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden py-5 bg-white sm:gap-4"
+    id="authorize-net-ach-payment">
+
+    <meta name="authorize-public-key" content="{{ $public_client_id }}">
+    <meta name="authorize-login-id" content="{{ $api_login_id }}">
+    <meta name="instant-payment" content="yes" />
+
+    <form action="{{ route('client.payments.response') }}" method="post" id="server_response">
+        @csrf
+        <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
+        <input type="hidden" name="company_gateway_id" value="{{ $gateway->company_gateway->id }}">
+        <input type="hidden" name="payment_method_id" value="2">
+        <input type="hidden" name="gateway_response" id="gateway_response">
+        <input type="hidden" name="dataValue" id="dataValue"/>
+        <input type="hidden" name="dataDescriptor" id="dataDescriptor"/>
+        <input type="hidden" name="token" id="token"/>
+        <input type="hidden" name="store_card" id="store_card"/>
+        <input type="hidden" name="amount_with_fee" id="amount_with_fee" value="{{ $total['amount_with_fee'] }}"/>
+    </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.ach') }}
+    @endcomponent
+    @include('portal.ninja2020.gateways.includes.payment_details')
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
+    <ul class="list-none">
+        @if(count($tokens) > 0)
+            @foreach($tokens as $token)
+                <li class="py-2 cursor-pointer">
+                    <label class="mr-4">
+                        <input
+                            type="radio"
+                            data-token="{{ $token->hashed_id }}"
+                            name="payment-type"
+                            class="form-radio cursor-pointer toggle-payment-with-token"/>
+                        <span class="ml-1 cursor-pointer">**** {{ $token->meta?->last4 }}</span>
+                    </label>
+                </li>
+            @endforeach
+        @endisset
+
+        <li class="py-2 cursor-pointer">
+            <label>
+                <input
+                    type="radio"
+                    id="toggle-payment-with-ach"
+                    class="form-radio cursor-pointer"
+                    name="payment-type"
+                    checked/>
+                <span class="ml-1 cursor-pointer">{{ __('texts.add_bank_account') }}</span>
+            </label>
+        </li>
+    </ul>
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.authorize.includes.ach_form')
+    @include('portal.ninja2020.gateways.includes.pay_now')
+
+</div>
+
+@assets
+    @if($gateway->company_gateway->getConfigField('testMode'))
+        <script src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>
+    @else
+        <script src="https://js.authorize.net/v1/Accept.js" charset="utf-8"></script>
+    @endif
+
+    @vite('resources/js/clients/payments/authorize-ach-payment.js')
+@endassets