diff --git a/app/DataMapper/CompanySettings.php b/app/DataMapper/CompanySettings.php
index 2e201f637fe9..3aaf31106c3d 100644
--- a/app/DataMapper/CompanySettings.php
+++ b/app/DataMapper/CompanySettings.php
@@ -522,8 +522,6 @@ class CompanySettings extends BaseSettings
     public string $email_template_payment_failed = '';
 
     public static $casts = [
-        'email_template_payment_failed'      => 'string',
-        'email_subject_payment_failed'       => 'string',
         'payment_flow'                       => 'string',
         'enable_quote_reminder1'             => 'bool',
         'quote_num_days_reminder1'           => 'int',
@@ -774,6 +772,8 @@ class CompanySettings extends BaseSettings
         'portal_custom_js' => 'string',
         'client_portal_enable_uploads' => 'bool',
         'purchase_order_number_counter' => 'integer',
+        'email_template_payment_failed'      => 'string',
+        'email_subject_payment_failed'       => 'string',
     ];
 
     public static $free_plan_casts = [
diff --git a/app/Livewire/Flow2/InvoicePay.php b/app/Livewire/Flow2/InvoicePay.php
index 2c2aecc86e28..8caab966a107 100644
--- a/app/Livewire/Flow2/InvoicePay.php
+++ b/app/Livewire/Flow2/InvoicePay.php
@@ -41,7 +41,7 @@ class InvoicePay extends Component
         'client_postal_code' => 'postal_code',
         'client_country_id' => 'country_id',
 
-        'client_shipping_address_line_1' => 'shipping_address1',
+        'client_shipping_address_line_1' => 'shipping_address1',  
         'client_shipping_address_line_2' => 'shipping_address2',
         'client_shipping_city' => 'shipping_city',
         'client_shipping_state' => 'shipping_state',
@@ -188,7 +188,7 @@ class InvoicePay extends Component
                 }
             }
         }
-
+        
         return $this->required_fields = false;
 
     }
@@ -241,10 +241,9 @@ class InvoicePay extends Component
 
         nlog($this->invoices);
 
-        if(is_array($this->invoices)) {
+        if(is_array($this->invoices))
             $this->invoices = Invoice::find($this->transformKeys($this->invoices));
-        }
-
+        
         $invoices = $this->invoices->filter(function ($i) {
             $i = $i->service()
                 ->markSent()
diff --git a/app/Livewire/Flow2/InvoiceSummary.php b/app/Livewire/Flow2/InvoiceSummary.php
index ce84992512a1..51681737b240 100644
--- a/app/Livewire/Flow2/InvoiceSummary.php
+++ b/app/Livewire/Flow2/InvoiceSummary.php
@@ -42,6 +42,6 @@ class InvoiceSummary extends Component
             'invoice' => $this->invoices,
             'client' => $this->invoices->first()->client,
         ]);
-
+        
     }
 }
diff --git a/app/Livewire/Flow2/ProcessPayment.php b/app/Livewire/Flow2/ProcessPayment.php
index a761b8440dab..1092807a8cf6 100644
--- a/app/Livewire/Flow2/ProcessPayment.php
+++ b/app/Livewire/Flow2/ProcessPayment.php
@@ -64,7 +64,7 @@ class ProcessPayment extends Component
             ->setPaymentHash($responder_data['payload']['ph']);
 
         $this->payment_data_payload = $driver->processPaymentViewData($responder_data['payload']);
-
+        
         $this->payment_view = $driver->livewirePaymentView(
             $this->payment_data_payload,
         );
diff --git a/app/Livewire/Flow2/RequiredFields.php b/app/Livewire/Flow2/RequiredFields.php
index d0d280c3172e..31a3cec7c272 100644
--- a/app/Livewire/Flow2/RequiredFields.php
+++ b/app/Livewire/Flow2/RequiredFields.php
@@ -113,7 +113,7 @@ class RequiredFields extends Component
         $rff = new RFFService(
             fields: $this->fields,
             database: $this->getContext()['db'],
-            company_gateway_id: (string) $this->company_gateway->id,
+            company_gateway_id: (string)$this->company_gateway->id,
         );
 
         $contact = auth()->guard('contact')->user();
diff --git a/app/Livewire/Flow2/UnderOverPayment.php b/app/Livewire/Flow2/UnderOverPayment.php
index 93865ee6a0bd..31ec54cb6932 100644
--- a/app/Livewire/Flow2/UnderOverPayment.php
+++ b/app/Livewire/Flow2/UnderOverPayment.php
@@ -18,6 +18,7 @@ use Livewire\Component;
 
 class UnderOverPayment extends Component
 {
+
     use WithSecureContext;
 
     public $payableAmount;
@@ -44,28 +45,29 @@ class UnderOverPayment extends Component
 
         $settings = $this->getContext()['settings'];
 
-        foreach($payableInvoices as $key => $invoice) {
+        foreach($payableInvoices as $key => $invoice){
             $payableInvoices[$key]['amount'] = Number::parseFloat($invoice['formatted_amount']);
         }
 
         $input_amount = collect($payableInvoices)->sum('amount');
 
-        if($settings->client_portal_allow_under_payment && $settings->client_portal_under_payment_minimum != 0) {
-            if($input_amount <= $settings->client_portal_under_payment_minimum) {
+        if($settings->client_portal_allow_under_payment && $settings->client_portal_under_payment_minimum != 0)
+        {
+            if($input_amount <= $settings->client_portal_under_payment_minimum){
                 // return error message under payment too low.
                 $this->errors = ctrans('texts.minimum_required_payment', ['amount' => $settings->client_portal_under_payment_minimum]);
                 $this->dispatch('errorMessageUpdate', errors: $this->errors);
             }
         }
 
-        if(!$settings->client_portal_allow_over_payment && ($input_amount > $this->invoice_amount)) {
+        if(!$settings->client_portal_allow_over_payment && ($input_amount > $this->invoice_amount)){
             $this->errors = ctrans('texts.over_payments_disabled');
             $this->dispatch('errorMessageUpdate', errors: $this->errors);
         }
 
-        if(!$this->errors) {
+        if(!$this->errors){
             $this->setContext('payable_invoices', $payableInvoices);
-            $this->dispatch('payable-amount', payable_amount: $input_amount);
+            $this->dispatch('payable-amount',  payable_amount: $input_amount );
         }
     }
 
diff --git a/app/PaymentDrivers/Authorize/AuthorizeCreditCard.php b/app/PaymentDrivers/Authorize/AuthorizeCreditCard.php
index 8260e71efa6e..0c259bf4d546 100644
--- a/app/PaymentDrivers/Authorize/AuthorizeCreditCard.php
+++ b/app/PaymentDrivers/Authorize/AuthorizeCreditCard.php
@@ -21,6 +21,7 @@ use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
 use App\PaymentDrivers\AuthorizePaymentDriver;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\Utils\Traits\MakesHash;
 use net\authorize\api\contract\v1\DeleteCustomerPaymentProfileRequest;
 use net\authorize\api\contract\v1\DeleteCustomerProfileRequest;
@@ -30,7 +31,7 @@ use net\authorize\api\controller\DeleteCustomerProfileController;
 /**
  * Class AuthorizeCreditCard.
  */
-class AuthorizeCreditCard
+class AuthorizeCreditCard implements LivewireMethodInterface
 {
     use MakesHash;
 
@@ -41,7 +42,7 @@ class AuthorizeCreditCard
         $this->authorize = $authorize;
     }
 
-    public function processPaymentView($data)
+    public function paymentData(array $data): array
     {
         $tokens = ClientGatewayToken::where('client_id', $this->authorize->client->id)
                                     ->where('company_gateway_id', $this->authorize->company_gateway->id)
@@ -54,6 +55,13 @@ class AuthorizeCreditCard
         $data['public_client_id'] = $this->authorize->init()->getPublicClientKey();
         $data['api_login_id'] = $this->authorize->company_gateway->getConfigField('apiLoginId');
 
+        return $data;
+    }
+
+    public function processPaymentView($data)
+    {
+        $data = $this->paymentData($data);
+
         return render('gateways.authorize.credit_card.pay', $data);
     }
 
@@ -313,4 +321,9 @@ class AuthorizeCreditCard
             'invoices' => $vars['invoices'],
         ];
     }
+    
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.authorize.credit_card.pay_livewire';
+    }
 }
diff --git a/app/PaymentDrivers/BTCPay/BTCPay.php b/app/PaymentDrivers/BTCPay/BTCPay.php
index 8b5b3a07aff8..99d35c729f29 100644
--- a/app/PaymentDrivers/BTCPay/BTCPay.php
+++ b/app/PaymentDrivers/BTCPay/BTCPay.php
@@ -14,6 +14,7 @@ namespace App\PaymentDrivers\BTCPay;
 
 use App\Models\Payment;
 use App\PaymentDrivers\BTCPayPaymentDriver;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\Utils\Traits\MakesHash;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\Http\Requests\ClientPortal\Payments\PaymentResponseRequest;
@@ -24,7 +25,7 @@ use App\Services\Email\EmailObject;
 use App\Services\Email\Email;
 use Illuminate\Support\Facades\App;
 
-class BTCPay implements MethodInterface
+class BTCPay implements MethodInterface, LivewireMethodInterface
 {
     use MakesHash;
 
@@ -49,9 +50,7 @@ class BTCPay implements MethodInterface
 
     public function paymentView($data)
     {
-        $data['gateway'] = $this->driver_class;
-        $data['amount'] = $data['total']['amount_with_fee'];
-        $data['currency'] = $this->driver_class->client->getCurrencyCode();
+        $data = $this->paymentData($data);
 
         return render('gateways.btcpay.pay', $data);
     }
@@ -176,4 +175,24 @@ class BTCPay implements MethodInterface
             throw new PaymentFailed('Error during BTCPay refund : ' . $e->getMessage());
         }
     }
+    
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.btcpay.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->driver_class;
+        $data['amount'] = $data['total']['amount_with_fee'];
+        $data['currency'] = $this->driver_class->client->getCurrencyCode();
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Braintree/ACH.php b/app/PaymentDrivers/Braintree/ACH.php
index bbd854291d71..e5527049a5e8 100644
--- a/app/PaymentDrivers/Braintree/ACH.php
+++ b/app/PaymentDrivers/Braintree/ACH.php
@@ -20,11 +20,12 @@ use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
 use App\PaymentDrivers\BraintreePaymentDriver;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\Utils\Traits\MakesHash;
 use Illuminate\Http\Request;
 
-class ACH implements MethodInterface
+class ACH implements MethodInterface, LivewireMethodInterface
 {
     use MakesHash;
 
@@ -97,10 +98,7 @@ class ACH implements MethodInterface
 
     public function paymentView(array $data)
     {
-        $data['gateway'] = $this->braintree;
-        $data['currency'] = $this->braintree->client->getCurrencyCode();
-        $data['payment_method_id'] = GatewayType::BANK_TRANSFER;
-        $data['amount'] = $this->braintree->payment_hash->data->amount_with_fee;
+        $data = $this->paymentData($data);
 
         return render('gateways.braintree.ach.pay', $data);
     }
@@ -181,4 +179,24 @@ class ACH implements MethodInterface
 
         throw new PaymentFailed($response->transaction->additionalProcessorResponse, $response->transaction->processorResponseCode);
     }
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.braintree.ach.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->braintree;
+        $data['currency'] = $this->braintree->client->getCurrencyCode();
+        $data['payment_method_id'] = GatewayType::BANK_TRANSFER;
+        $data['amount'] = $this->braintree->payment_hash->data->amount_with_fee;
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Braintree/CreditCard.php b/app/PaymentDrivers/Braintree/CreditCard.php
index 3ab0fdbe3de7..197f863ab3b3 100644
--- a/app/PaymentDrivers/Braintree/CreditCard.php
+++ b/app/PaymentDrivers/Braintree/CreditCard.php
@@ -21,8 +21,9 @@ use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
 use App\PaymentDrivers\BraintreePaymentDriver;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 
-class CreditCard
+class CreditCard implements LivewireMethodInterface
 {
     /**
      * @var BraintreePaymentDriver
@@ -76,17 +77,7 @@ class CreditCard
 
     public function paymentView(array $data)
     {
-        $data['gateway'] = $this->braintree;
-        $data['client_token'] = $this->braintree->gateway->clientToken()->generate();
-        $data['threeds'] = $this->threeDParameters($data);
-        $data['threeds_enable'] = $this->braintree->company_gateway->getConfigField('threeds') ? "true" : "false";
-
-        if ($this->braintree->company_gateway->getConfigField('merchantAccountId')) {
-            /** https://developer.paypal.com/braintree/docs/reference/request/client-token/generate#merchant_account_id */
-            $data['client_token'] = $this->braintree->gateway->clientToken()->generate([ //@phpstan-ignore-line
-                'merchantAccountId' => $this->braintree->company_gateway->getConfigField('merchantAccountId'),
-            ]);
-        }
+       $data = $this->paymentData($data);
 
         return render('gateways.braintree.credit_card.pay', $data);
     }
@@ -278,4 +269,32 @@ class CreditCard
             return $this->braintree->processInternallyFailedPayment($this->braintree, $e);
         }
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.braintree.credit_card.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->braintree;
+        $data['client_token'] = $this->braintree->gateway->clientToken()->generate();
+        $data['threeds'] = $this->threeDParameters($data);
+        $data['threeds_enable'] = $this->braintree->company_gateway->getConfigField('threeds') ? "true" : "false";
+
+        if ($this->braintree->company_gateway->getConfigField('merchantAccountId')) {
+            /** https://developer.paypal.com/braintree/docs/reference/request/client-token/generate#merchant_account_id */
+            $data['client_token'] = $this->braintree->gateway->clientToken()->generate([ // @phpstan-ignore-line
+                'merchantAccountId' => $this->braintree->company_gateway->getConfigField('merchantAccountId'),
+            ]);
+        }
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Braintree/PayPal.php b/app/PaymentDrivers/Braintree/PayPal.php
index 6de57c1f15e9..2ad38515484d 100644
--- a/app/PaymentDrivers/Braintree/PayPal.php
+++ b/app/PaymentDrivers/Braintree/PayPal.php
@@ -10,8 +10,9 @@ use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
 use App\PaymentDrivers\BraintreePaymentDriver;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 
-class PayPal
+class PayPal implements LivewireMethodInterface
 {
     /**
      * @var BraintreePaymentDriver
@@ -45,8 +46,7 @@ class PayPal
      */
     public function paymentView(array $data)
     {
-        $data['gateway'] = $this->braintree;
-        $data['client_token'] = $this->braintree->gateway->clientToken()->generate();
+        $data = $this->paymentData($data);
 
         return render('gateways.braintree.paypal.pay', $data);
     }
@@ -188,4 +188,23 @@ class PayPal
             return $this->braintree->processInternallyFailedPayment($this->braintree, $e);
         }
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.braintree.paypal.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->braintree;
+        $data['client_token'] = $this->braintree->gateway->clientToken()->generate();
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/CheckoutCom/CreditCard.php b/app/PaymentDrivers/CheckoutCom/CreditCard.php
index f6b5249e8d6c..b41bb578918a 100644
--- a/app/PaymentDrivers/CheckoutCom/CreditCard.php
+++ b/app/PaymentDrivers/CheckoutCom/CreditCard.php
@@ -19,6 +19,7 @@ use App\Models\ClientGatewayToken;
 use App\Models\GatewayType;
 use App\Models\SystemLog;
 use App\PaymentDrivers\CheckoutComPaymentDriver;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\Utils\Traits\MakesHash;
 use Checkout\CheckoutApiException;
@@ -32,7 +33,7 @@ use Illuminate\Contracts\View\Factory;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 
-class CreditCard implements MethodInterface
+class CreditCard implements MethodInterface, LivewireMethodInterface
 {
     use Utilities;
     use MakesHash;
@@ -140,7 +141,7 @@ class CreditCard implements MethodInterface
         }
     }
 
-    public function paymentView($data)
+    public function paymentData(array $data): array
     {
         $data['gateway'] = $this->checkout;
         $data['company_gateway'] = $this->checkout->company_gateway;
@@ -150,6 +151,17 @@ class CreditCard implements MethodInterface
         $data['raw_value'] = $data['total']['amount_with_fee'];
         $data['customer_email'] = $this->checkout->client->present()->email();
 
+        return $data;
+    }
+    
+    public function paymentView($data, $livewire = false)
+    {
+        $data = $this->paymentData($data);
+
+        if ($livewire) {
+            return render('gateways.checkout.credit_card.pay_livewire', $data);
+        }
+
         return render('gateways.checkout.credit_card.pay', $data);
     }
 
diff --git a/app/PaymentDrivers/Eway/CreditCard.php b/app/PaymentDrivers/Eway/CreditCard.php
index e7f97124566d..a3fbb56d5fd3 100644
--- a/app/PaymentDrivers/Eway/CreditCard.php
+++ b/app/PaymentDrivers/Eway/CreditCard.php
@@ -17,10 +17,11 @@ use App\Jobs\Util\SystemLogger;
 use App\Models\GatewayType;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\EwayPaymentDriver;
 use App\Utils\Traits\MakesHash;
 
-class CreditCard
+class CreditCard implements LivewireMethodInterface
 {
     use MakesHash;
 
@@ -102,11 +103,18 @@ class CreditCard
         return $token;
     }
 
-    public function paymentView($data)
+    public function paymentData(array $data): array
     {
         $data['gateway'] = $this->eway_driver;
         $data['public_api_key'] = $this->eway_driver->company_gateway->getConfigField('publicApiKey');
 
+        return $data;
+    }
+
+    public function paymentView($data)
+    {
+        $data = $this->paymentData($data);
+
         return render('gateways.eway.pay', $data);
     }
 
@@ -276,4 +284,8 @@ class CreditCard
 
         return $payment;
     }
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.eway.pay_livewire';
+    }
 }
diff --git a/app/PaymentDrivers/Forte/ACH.php b/app/PaymentDrivers/Forte/ACH.php
index 8ea313e77200..750ffdd0f3b9 100644
--- a/app/PaymentDrivers/Forte/ACH.php
+++ b/app/PaymentDrivers/Forte/ACH.php
@@ -19,11 +19,12 @@ use App\Models\Payment;
 use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\FortePaymentDriver;
 use App\Utils\Traits\MakesHash;
 use Illuminate\Support\Facades\Validator;
 
-class ACH
+class ACH implements LivewireMethodInterface
 {
     use MakesHash;
 
@@ -79,10 +80,8 @@ class ACH
 
     public function paymentView(array $data)
     {
-        $this->forte->payment_hash->data = array_merge((array) $this->forte->payment_hash->data, $data);
-        $this->forte->payment_hash->save();
+        $data = $this->paymentData($data);
 
-        $data['gateway'] = $this->forte;
         return render('gateways.forte.ach.pay', $data);
     }
 
@@ -175,4 +174,25 @@ class ACH
         return redirect()->route('client.payments.show', ['payment' => $payment->hashed_id]);
 
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.forte.ach.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->forte->payment_hash->data = array_merge((array) $this->forte->payment_hash->data, $data);
+        $this->forte->payment_hash->save();
+
+        $data['gateway'] = $this->forte;
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Forte/CreditCard.php b/app/PaymentDrivers/Forte/CreditCard.php
index 04942e046b74..9e3356ce8a6a 100644
--- a/app/PaymentDrivers/Forte/CreditCard.php
+++ b/app/PaymentDrivers/Forte/CreditCard.php
@@ -20,11 +20,12 @@ use App\Models\Payment;
 use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\FortePaymentDriver;
 use App\Utils\Traits\MakesHash;
 use Illuminate\Support\Facades\Validator;
 
-class CreditCard
+class CreditCard implements LivewireMethodInterface
 {
     use MakesHash;
 
@@ -157,10 +158,8 @@ class CreditCard
 
     public function paymentView(array $data)
     {
-        $this->forte->payment_hash->data = array_merge((array) $this->forte->payment_hash->data, $data);
-        $this->forte->payment_hash->save();
-
-        $data['gateway'] = $this->forte;
+        $data = $this->paymentData($data);
+        
         return render('gateways.forte.credit_card.pay', $data);
     }
 
@@ -287,4 +286,25 @@ class CreditCard
         return redirect()->route('client.payments.show', ['payment' => $payment->hashed_id]);
 
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.forte.credit_card.pay_livewire';        
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->forte->payment_hash->data = array_merge((array) $this->forte->payment_hash->data, $data);
+        $this->forte->payment_hash->save();
+
+        $data['gateway'] = $this->forte;
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/GoCardless/ACH.php b/app/PaymentDrivers/GoCardless/ACH.php
index e52e8ce54101..9a8d051373e8 100644
--- a/app/PaymentDrivers/GoCardless/ACH.php
+++ b/app/PaymentDrivers/GoCardless/ACH.php
@@ -20,6 +20,7 @@ use App\Models\Invoice;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\GoCardlessPaymentDriver;
 use App\Utils\Traits\MakesHash;
@@ -31,7 +32,7 @@ use Illuminate\Routing\Redirector;
 use Illuminate\View\View;
 
 //@deprecated
-class ACH implements MethodInterface
+class ACH implements MethodInterface, LivewireMethodInterface
 {
     use MakesHash;
 
@@ -146,9 +147,7 @@ class ACH implements MethodInterface
      */
     public function paymentView(array $data): View
     {
-        $data['gateway'] = $this->go_cardless;
-        $data['amount'] = $this->go_cardless->convertToGoCardlessAmount($data['total']['amount_with_fee'], $this->go_cardless->client->currency()->precision);
-        $data['currency'] = $this->go_cardless->client->getCurrencyCode();
+        $data = $this->paymentData($data);
 
         return render('gateways.gocardless.ach.pay', $data);
     }
@@ -257,4 +256,23 @@ class ACH implements MethodInterface
 
         throw new PaymentFailed('Failed to process the payment.', 500);
     }
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.gocardless.ach.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->go_cardless;
+        $data['amount'] = $this->go_cardless->convertToGoCardlessAmount($data['total']['amount_with_fee'], $this->go_cardless->client->currency()->precision);
+        $data['currency'] = $this->go_cardless->client->getCurrencyCode();
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/GoCardless/DirectDebit.php b/app/PaymentDrivers/GoCardless/DirectDebit.php
index ab67f2862263..a7c17e608feb 100644
--- a/app/PaymentDrivers/GoCardless/DirectDebit.php
+++ b/app/PaymentDrivers/GoCardless/DirectDebit.php
@@ -21,6 +21,7 @@ use App\Models\Invoice;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\GoCardlessPaymentDriver;
 use App\Utils\Traits\MakesHash;
@@ -29,7 +30,7 @@ use Illuminate\Http\Request;
 use Illuminate\Routing\Redirector;
 use Illuminate\View\View;
 
-class DirectDebit implements MethodInterface
+class DirectDebit implements MethodInterface, LivewireMethodInterface
 {
     use MakesHash;
 
@@ -218,9 +219,7 @@ class DirectDebit implements MethodInterface
      */
     public function paymentView(array $data): View
     {
-        $data['gateway'] = $this->go_cardless;
-        $data['amount'] = $this->go_cardless->convertToGoCardlessAmount($data['total']['amount_with_fee'], $this->go_cardless->client->currency()->precision);
-        $data['currency'] = $this->go_cardless->client->getCurrencyCode();
+        $data = $this->paymentData($data);
 
         return render('gateways.gocardless.direct_debit.pay', $data);
     }
@@ -330,4 +329,24 @@ class DirectDebit implements MethodInterface
 
         throw new PaymentFailed('Failed to process the payment.', 500);
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.gocardless.direct_debit.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->go_cardless;
+        $data['amount'] = $this->go_cardless->convertToGoCardlessAmount($data['total']['amount_with_fee'], $this->go_cardless->client->currency()->precision);
+        $data['currency'] = $this->go_cardless->client->getCurrencyCode();
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/GoCardless/InstantBankPay.php b/app/PaymentDrivers/GoCardless/InstantBankPay.php
index 624f04eebe7c..ff0e43db48e7 100644
--- a/app/PaymentDrivers/GoCardless/InstantBankPay.php
+++ b/app/PaymentDrivers/GoCardless/InstantBankPay.php
@@ -9,13 +9,14 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\GoCardlessPaymentDriver;
 use Illuminate\Contracts\Container\BindingResolutionException;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 
-class InstantBankPay implements MethodInterface
+class InstantBankPay implements MethodInterface, LivewireMethodInterface
 {
     protected GoCardlessPaymentDriver $go_cardless;
 
@@ -120,7 +121,7 @@ class InstantBankPay implements MethodInterface
                 return $this->processPendingPayment($payment);
             }
 
-            return $this->processUnsuccessfulPayment($payment);
+            $this->processUnsuccessfulPayment($payment);
         } catch (\Exception $exception) {
             throw new PaymentFailed(
                 $exception->getMessage(),
@@ -197,9 +198,8 @@ class InstantBankPay implements MethodInterface
      * Process unsuccessful payments for Direct Debit.
      *
      * @param ResourcesPayment $payment
-     * @return never
      */
-    public function processUnsuccessfulPayment(\GoCardlessPro\Resources\Payment $payment)
+    public function processUnsuccessfulPayment(\GoCardlessPro\Resources\Payment $payment): void
     {
         PaymentFailureMailer::dispatch($this->go_cardless->client, $payment->status, $this->go_cardless->client->company, $this->go_cardless->payment_hash->data->amount_with_fee);
 
@@ -224,4 +224,24 @@ class InstantBankPay implements MethodInterface
             $this->go_cardless->client->company,
         );
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // not supported, this is offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/GoCardless/SEPA.php b/app/PaymentDrivers/GoCardless/SEPA.php
index d0f81228ceff..d2a797e80738 100644
--- a/app/PaymentDrivers/GoCardless/SEPA.php
+++ b/app/PaymentDrivers/GoCardless/SEPA.php
@@ -20,6 +20,7 @@ use App\Models\Invoice;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\GoCardlessPaymentDriver;
 use App\Utils\Traits\MakesHash;
@@ -29,7 +30,7 @@ use Illuminate\Http\Request;
 use Illuminate\Routing\Redirector;
 use Illuminate\View\View;
 
-class SEPA implements MethodInterface
+class SEPA implements MethodInterface, LivewireMethodInterface
 {
     use MakesHash;
 
@@ -145,9 +146,7 @@ class SEPA implements MethodInterface
      */
     public function paymentView(array $data): View
     {
-        $data['gateway'] = $this->go_cardless;
-        $data['amount'] = $this->go_cardless->convertToGoCardlessAmount($data['total']['amount_with_fee'], $this->go_cardless->client->currency()->precision);
-        $data['currency'] = $this->go_cardless->client->getCurrencyCode();
+        $data = $this->paymentData($data);
 
         return render('gateways.gocardless.sepa.pay', $data);
     }
@@ -257,4 +256,24 @@ class SEPA implements MethodInterface
 
         throw new PaymentFailed('Failed to process the payment.', 500);
     }
+    
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.gocardless.sepa.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->go_cardless;
+        $data['amount'] = $this->go_cardless->convertToGoCardlessAmount($data['total']['amount_with_fee'], $this->go_cardless->client->currency()->precision);
+        $data['currency'] = $this->go_cardless->client->getCurrencyCode();
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Mollie/Bancontact.php b/app/PaymentDrivers/Mollie/Bancontact.php
index 3df988bbb2ef..3a19ac358fb7 100644
--- a/app/PaymentDrivers/Mollie/Bancontact.php
+++ b/app/PaymentDrivers/Mollie/Bancontact.php
@@ -19,13 +19,14 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 
-class Bancontact implements MethodInterface
+class Bancontact implements MethodInterface, LivewireMethodInterface
 {
     protected MolliePaymentDriver $mollie;
 
@@ -209,4 +210,24 @@ class Bancontact implements MethodInterface
     {
         return $this->processSuccessfulPayment($payment, 'open');
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // Doesn't support, it's offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Mollie/BankTransfer.php b/app/PaymentDrivers/Mollie/BankTransfer.php
index 7c5872714c06..642d4bfc84c6 100644
--- a/app/PaymentDrivers/Mollie/BankTransfer.php
+++ b/app/PaymentDrivers/Mollie/BankTransfer.php
@@ -19,6 +19,7 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Exception;
@@ -28,7 +29,7 @@ use Illuminate\Routing\Redirector;
 use Illuminate\View\View;
 use Mollie\Api\Resources\Payment as ResourcesPayment;
 
-class BankTransfer implements MethodInterface
+class BankTransfer implements MethodInterface, LivewireMethodInterface
 {
     protected MolliePaymentDriver $mollie;
 
@@ -206,4 +207,24 @@ class BankTransfer implements MethodInterface
     {
         return $this->processSuccessfulPayment($payment, 'open');
     }
+    
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // Doesn't support, it's offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Mollie/CreditCard.php b/app/PaymentDrivers/Mollie/CreditCard.php
index 627605974532..6e712c8f84b6 100644
--- a/app/PaymentDrivers/Mollie/CreditCard.php
+++ b/app/PaymentDrivers/Mollie/CreditCard.php
@@ -10,12 +10,13 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Illuminate\Contracts\View\Factory;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\View\View;
 
-class CreditCard
+class CreditCard implements LivewireMethodInterface
 {
     /**
      * @var MolliePaymentDriver
@@ -37,7 +38,7 @@ class CreditCard
      */
     public function paymentView(array $data)
     {
-        $data['gateway'] = $this->mollie;
+        $data = $this->paymentData($data);
 
         return render('gateways.mollie.credit_card.pay', $data);
     }
@@ -257,4 +258,22 @@ class CreditCard
     {
         return redirect()->route('client.payment_methods.index');
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.mollie.credit_card.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->mollie;
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Mollie/IDEAL.php b/app/PaymentDrivers/Mollie/IDEAL.php
index 3b19cad34f11..134853a6fe04 100644
--- a/app/PaymentDrivers/Mollie/IDEAL.php
+++ b/app/PaymentDrivers/Mollie/IDEAL.php
@@ -19,13 +19,14 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 
-class IDEAL implements MethodInterface
+class IDEAL implements MethodInterface, LivewireMethodInterface
 {
     protected MolliePaymentDriver $mollie;
 
@@ -209,4 +210,24 @@ class IDEAL implements MethodInterface
     {
         return $this->processSuccessfulPayment($payment, 'open');
     }
+    
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // Doesn't support, it's offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Mollie/KBC.php b/app/PaymentDrivers/Mollie/KBC.php
index 00b87934a92d..0811d7567454 100644
--- a/app/PaymentDrivers/Mollie/KBC.php
+++ b/app/PaymentDrivers/Mollie/KBC.php
@@ -19,13 +19,14 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 
-class KBC implements MethodInterface
+class KBC implements MethodInterface, LivewireMethodInterface
 {
     protected MolliePaymentDriver $mollie;
 
@@ -193,4 +194,24 @@ class KBC implements MethodInterface
 
         return redirect()->route('client.payments.show', ['payment' => $this->mollie->encodePrimaryKey($payment_record->id)]);
     }
+    
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // Doesn't support, it's offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/PayFast/CreditCard.php b/app/PaymentDrivers/PayFast/CreditCard.php
index d3ca7b87cd10..4cfb13f4a09e 100644
--- a/app/PaymentDrivers/PayFast/CreditCard.php
+++ b/app/PaymentDrivers/PayFast/CreditCard.php
@@ -18,12 +18,13 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\PayFastPaymentDriver;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Str;
 
-class CreditCard
+class CreditCard implements LivewireMethodInterface
 {
     public $payfast;
 
@@ -158,24 +159,9 @@ class CreditCard
 
     public function paymentView($data)
     {
-        $payfast_data = [
-            'merchant_id' => $this->payfast->company_gateway->getConfigField('merchantId'),
-            'merchant_key' => $this->payfast->company_gateway->getConfigField('merchantKey'),
-            'return_url' => route('client.payments.index'),
-            'cancel_url' => route('client.payment_methods.index'),
-            'notify_url' => $this->payfast->genericWebhookUrl(),
-            'm_payment_id' => $data['payment_hash'],
-            'amount' => $data['amount_with_fee'],
-            'item_name' => 'purchase',
-            'item_description' => ctrans('texts.invoices').': '.collect($data['invoices'])->pluck('invoice_number'),
-            'passphrase' => $this->payfast->company_gateway->getConfigField('passphrase'),
-        ];
+        $data = $this->paymentData($data);
 
-        $payfast_data['signature'] = $this->payfast->generateSignature($payfast_data);
-        $payfast_data['gateway'] = $this->payfast;
-        $payfast_data['payment_endpoint_url'] = $this->payfast->endpointUrl();
-
-        return render('gateways.payfast.pay', array_merge($data, $payfast_data));
+        return render('gateways.payfast.pay', array_merge($data));
     }
 
     /*
@@ -263,4 +249,36 @@ class CreditCard
 
         throw new PaymentFailed('Failed to process the payment.', 500);
     }
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.payfast.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $payfast_data = [
+            'merchant_id' => $this->payfast->company_gateway->getConfigField('merchantId'),
+            'merchant_key' => $this->payfast->company_gateway->getConfigField('merchantKey'),
+            'return_url' => route('client.payments.index'),
+            'cancel_url' => route('client.payment_methods.index'),
+            'notify_url' => $this->payfast->genericWebhookUrl(),
+            'm_payment_id' => $data['payment_hash'],
+            'amount' => $data['amount_with_fee'],
+            'item_name' => 'purchase',
+            'item_description' => ctrans('texts.invoices').': '.collect($data['invoices'])->pluck('invoice_number'),
+            'passphrase' => $this->payfast->company_gateway->getConfigField('passphrase'),
+        ];
+
+        $payfast_data['signature'] = $this->payfast->generateSignature($payfast_data);
+        $payfast_data['gateway'] = $this->payfast;
+        $payfast_data['payment_endpoint_url'] = $this->payfast->endpointUrl();
+
+        return array_merge($data, $payfast_data);
+    }
 }
diff --git a/app/PaymentDrivers/PayPalPPCPPaymentDriver.php b/app/PaymentDrivers/PayPalPPCPPaymentDriver.php
index a62b24b6be8b..50b4ae6fe7ce 100644
--- a/app/PaymentDrivers/PayPalPPCPPaymentDriver.php
+++ b/app/PaymentDrivers/PayPalPPCPPaymentDriver.php
@@ -85,30 +85,13 @@ class PayPalPPCPPaymentDriver extends PayPalBasePaymentDriver
      */
     public function processPaymentView($data)
     {
-
-        $this->init()->checkPaymentsReceivable();
-
-        $data['gateway'] = $this;
-        $this->payment_hash->data = array_merge((array) $this->payment_hash->data, ['amount' => $data['total']['amount_with_fee']]);
-        $this->payment_hash->save();
-
-        $data['client_id'] = config('ninja.paypal.client_id');
-        $data['token'] = $this->getClientToken();
-        $data['order_id'] = $this->createOrder($data);
-        $data['funding_source'] = $this->paypal_payment_method;
-        $data['gateway_type_id'] = $this->gateway_type_id;
-        $data['merchantId'] = $this->company_gateway->getConfigField('merchantId');
-        $data['currency'] = $this->client->currency()->code;
-        $data['guid'] = $this->risk_guid;
-        $data['identifier'] = "s:INN_".$this->company_gateway->getConfigField('merchantId')."_CHCK";
-        $data['pp_client_reference'] = $this->getClientHash();
+        $data = $this->processPaymentViewData($data);
 
         if($this->gateway_type_id == 29) {
             return render('gateways.paypal.ppcp.card', $data);
         } else {
             return render('gateways.paypal.ppcp.pay', $data);
         }
-
     }
 
     /**
@@ -480,7 +463,34 @@ class PayPalPPCPPaymentDriver extends PayPalBasePaymentDriver
 
     }
 
+    public function processPaymentViewData(array $data): array
+    {
+        $this->init()->checkPaymentsReceivable();
 
+        $data['gateway'] = $this;
+        $this->payment_hash->data = array_merge((array) $this->payment_hash->data, ['amount' => $data['total']['amount_with_fee']]);
+        $this->payment_hash->save();
 
+        $data['client_id'] = config('ninja.paypal.client_id');
+        $data['token'] = $this->getClientToken();
+        $data['order_id'] = $this->createOrder($data);
+        $data['funding_source'] = $this->paypal_payment_method;
+        $data['gateway_type_id'] = $this->gateway_type_id;
+        $data['merchantId'] = $this->company_gateway->getConfigField('merchantId');
+        $data['currency'] = $this->client->currency()->code;
+        $data['guid'] = $this->risk_guid;
+        $data['identifier'] = "s:INN_".$this->company_gateway->getConfigField('merchantId')."_CHCK";
+        $data['pp_client_reference'] = $this->getClientHash();
 
+        return $data;
+    } 
+
+    public function livewirePaymentView(array $data): string 
+    {
+        if ($this->gateway_type_id == 29) {
+            return 'gateways.paypal.ppcp.card_livewire';
+        }
+
+        return 'gateways.paypal.ppcp.pay_livewire';
+    }
 }
diff --git a/app/PaymentDrivers/PayPalRestPaymentDriver.php b/app/PaymentDrivers/PayPalRestPaymentDriver.php
index dfbf86b75943..46bca65a930a 100644
--- a/app/PaymentDrivers/PayPalRestPaymentDriver.php
+++ b/app/PaymentDrivers/PayPalRestPaymentDriver.php
@@ -31,30 +31,13 @@ class PayPalRestPaymentDriver extends PayPalBasePaymentDriver
 
     public function processPaymentView($data)
     {
-
-        $this->init();
-
-        $data['gateway'] = $this;
-
-        $this->payment_hash->data = array_merge((array) $this->payment_hash->data, ['amount' => $data['total']['amount_with_fee']]);
-        $this->payment_hash->save();
-
-        $data['client_id'] = $this->company_gateway->getConfigField('clientId');
-        $data['token'] = $this->getClientToken();
-        $data['order_id'] = $this->createOrder($data);
-        $data['funding_source'] = $this->paypal_payment_method;
-        $data['gateway_type_id'] = $this->gateway_type_id;
-        $data['currency'] = $this->client->currency()->code;
-        $data['guid'] = $this->risk_guid;
-        $data['identifier'] = "s:INN_ACDC_CHCK";
-        $data['pp_client_reference'] = $this->getClientHash();
+        $data = $this->processPaymentViewData($data);
 
         if($this->gateway_type_id == 29) {
             return render('gateways.paypal.ppcp.card', $data);
         } else {
             return render('gateways.paypal.pay', $data);
         }
-
     }
 
     /**
@@ -434,4 +417,35 @@ class PayPalRestPaymentDriver extends PayPalBasePaymentDriver
         SystemLogger::dispatch($response, SystemLog::CATEGORY_GATEWAY_RESPONSE, SystemLog::EVENT_GATEWAY_FAILURE, SystemLog::TYPE_PAYPAL, $this->client, $this->client->company);
 
     }
+
+    public function processPaymentViewData(array $data): array
+    {
+        $this->init();
+
+        $data['gateway'] = $this;
+
+        $this->payment_hash->data = array_merge((array) $this->payment_hash->data, ['amount' => $data['total']['amount_with_fee']]);
+        $this->payment_hash->save();
+
+        $data['client_id'] = $this->company_gateway->getConfigField('clientId');
+        $data['token'] = $this->getClientToken();
+        $data['order_id'] = $this->createOrder($data);
+        $data['funding_source'] = $this->paypal_payment_method;
+        $data['gateway_type_id'] = $this->gateway_type_id;
+        $data['currency'] = $this->client->currency()->code;
+        $data['guid'] = $this->risk_guid;
+        $data['identifier'] = "s:INN_ACDC_CHCK";
+        $data['pp_client_reference'] = $this->getClientHash();
+
+        return $data;
+    }
+
+    public function livewirePaymentView(array $data): string 
+    {
+        if ($this->gateway_type_id == 29) {
+            return 'gateways.paypal.ppcp.card_livewire';
+        }
+
+        return 'gateways.paypal.pay_livewire';
+    }
 }
diff --git a/app/PaymentDrivers/PayTrace/CreditCard.php b/app/PaymentDrivers/PayTrace/CreditCard.php
index 2c2672aa62a8..970994d3c323 100644
--- a/app/PaymentDrivers/PayTrace/CreditCard.php
+++ b/app/PaymentDrivers/PayTrace/CreditCard.php
@@ -18,12 +18,13 @@ use App\Models\Invoice;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\PaytracePaymentDriver;
 use App\Utils\Traits\MakesHash;
 use Illuminate\Http\Request;
 use Illuminate\Support\Str;
 
-class CreditCard
+class CreditCard implements LivewireMethodInterface
 {
     use MakesHash;
 
@@ -36,9 +37,8 @@ class CreditCard
 
     public function authorizeView($data)
     {
-        $data['client_key'] = $this->paytrace->getAuthToken();
-        $data['gateway'] = $this->paytrace;
-
+        $data = $this->paymentData($data);
+        
         return render('gateways.paytrace.authorize', $data);
     }
 
@@ -239,5 +239,24 @@ class CreditCard
         ];
 
         return $this->paytrace->processUnsuccessfulTransaction($data);
+    } 
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string
+    {
+        return 'gateways.paytrace.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array
+    {
+        $data['client_key'] = $this->paytrace->getAuthToken();
+        $data['gateway'] = $this->paytrace;
+
+        return $data;
     }
 }
diff --git a/app/PaymentDrivers/Razorpay/Hosted.php b/app/PaymentDrivers/Razorpay/Hosted.php
index 2a8c35bafc1f..9003349cb77e 100644
--- a/app/PaymentDrivers/Razorpay/Hosted.php
+++ b/app/PaymentDrivers/Razorpay/Hosted.php
@@ -19,6 +19,7 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\RazorpayPaymentDriver;
 use Illuminate\Http\RedirectResponse;
@@ -26,7 +27,7 @@ use Illuminate\Http\Request;
 use Illuminate\View\View;
 use Razorpay\Api\Errors\SignatureVerificationError;
 
-class Hosted implements MethodInterface
+class Hosted implements MethodInterface, LivewireMethodInterface
 {
     protected RazorpayPaymentDriver $razorpay;
 
@@ -67,23 +68,7 @@ class Hosted implements MethodInterface
      */
     public function paymentView(array $data): View
     {
-        $order = $this->razorpay->gateway->order->create([
-            'currency' => $this->razorpay->client->currency()->code,
-            'amount' => $this->razorpay->convertToRazorpayAmount((float) $this->razorpay->payment_hash->data->amount_with_fee),
-        ]);
-
-        $this->razorpay->payment_hash->withData('order_id', $order->id);
-        $this->razorpay->payment_hash->withData('order_amount', $order->amount);
-
-        $data['gateway'] = $this->razorpay;
-
-        $data['options'] = [
-            'key' => $this->razorpay->company_gateway->getConfigField('apiKey'),
-            'amount' => $this->razorpay->convertToRazorpayAmount((float) $this->razorpay->payment_hash->data->amount_with_fee),
-            'currency' => $this->razorpay->client->currency()->code,
-            'name' => $this->razorpay->company_gateway->company->present()->name(),
-            'order_id' => $order->id,
-        ];
+        $data = $this->paymentData($data);
 
         return render('gateways.razorpay.hosted.pay', $data);
     }
@@ -174,4 +159,38 @@ class Hosted implements MethodInterface
 
         throw new PaymentFailed($exception->getMessage(), $exception->getCode());
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.razorpay.hosted.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $order = $this->razorpay->gateway->order->create([
+            'currency' => $this->razorpay->client->currency()->code,
+            'amount' => $this->razorpay->convertToRazorpayAmount((float) $this->razorpay->payment_hash->data->amount_with_fee),
+        ]);
+
+        $this->razorpay->payment_hash->withData('order_id', $order->id);
+        $this->razorpay->payment_hash->withData('order_amount', $order->amount);
+
+        $data['gateway'] = $this->razorpay;
+
+        $data['options'] = [
+            'key' => $this->razorpay->company_gateway->getConfigField('apiKey'),
+            'amount' => $this->razorpay->convertToRazorpayAmount((float) $this->razorpay->payment_hash->data->amount_with_fee),
+            'currency' => $this->razorpay->client->currency()->code,
+            'name' => $this->razorpay->company_gateway->company->present()->name(),
+            'order_id' => $order->id,
+        ];
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Square/CreditCard.php b/app/PaymentDrivers/Square/CreditCard.php
index 1075b0a292ad..f95428c04ebb 100644
--- a/app/PaymentDrivers/Square/CreditCard.php
+++ b/app/PaymentDrivers/Square/CreditCard.php
@@ -21,6 +21,7 @@ use App\Models\Invoice;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\SquarePaymentDriver;
 use App\Utils\Traits\MakesHash;
@@ -29,7 +30,7 @@ use Illuminate\Http\Request;
 use Illuminate\View\View;
 use Square\Http\ApiResponse;
 
-class CreditCard implements MethodInterface
+class CreditCard implements MethodInterface, LivewireMethodInterface
 {
     use MakesHash;
 
@@ -64,10 +65,7 @@ class CreditCard implements MethodInterface
 
     public function paymentView($data)
     {
-        $data['gateway'] = $this->square_driver;
-        $data['amount'] = $this->square_driver->payment_hash->data->amount_with_fee;
-        $data['currencyCode'] = $this->square_driver->client->getCurrencyCode();
-        $data['square_contact'] = $this->buildClientObject();
+        $data = $this->paymentData($data);
 
         return render('gateways.square.credit_card.pay', $data);
     }
@@ -238,5 +236,24 @@ class CreditCard implements MethodInterface
         return false;
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.square.credit_card.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->square_driver;
+        $data['amount'] = $this->square_driver->payment_hash->data->amount_with_fee;
+        $data['currencyCode'] = $this->square_driver->client->getCurrencyCode();
+        $data['square_contact'] = $this->buildClientObject();
 
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Stripe/ACH.php b/app/PaymentDrivers/Stripe/ACH.php
index 60e8289dd8e0..8a0dd8b6a89b 100644
--- a/app/PaymentDrivers/Stripe/ACH.php
+++ b/app/PaymentDrivers/Stripe/ACH.php
@@ -205,59 +205,6 @@ class ACH implements LivewireMethodInterface
         return render('gateways.stripe.ach.pay', $data);
     }
 
-    public function livewirePaymentView(array $data): string
-    {
-        return 'gateways.stripe.ach.pay_livewire';
-    }
-
-    public function paymentData(array $data): array
-    {
-        $data['gateway'] = $this->stripe;
-        $data['currency'] = $this->stripe->client->getCurrencyCode();
-        $data['payment_method_id'] = GatewayType::BANK_TRANSFER;
-        $data['customer'] = $this->stripe->findOrCreateCustomer();
-        $data['amount'] = $this->stripe->convertToStripeAmount($data['total']['amount_with_fee'], $this->stripe->client->currency()->precision, $this->stripe->client->currency());
-
-        $description = $this->stripe->getDescription(false);
-
-        $intent = false;
-
-        if (count($data['tokens']) == 1) {
-
-            $token = $data['tokens'][0];
-
-            $meta = $token->meta;
-
-            if(isset($meta->state) && $meta->state == 'unauthorized') {
-                return redirect()->route('client.payment_methods.show', $token->hashed_id);
-            }
-        }
-
-        if (count($data['tokens']) == 0) {
-            $intent =
-            $this->stripe->createPaymentIntent(
-                [
-                'amount' => $data['amount'],
-                'currency' => $data['currency'],
-                'setup_future_usage' => 'off_session',
-                'customer' => $data['customer']->id,
-                'payment_method_types' => ['us_bank_account'],
-                'description' => $description,
-                'metadata' => [
-                    'payment_hash' => $this->stripe->payment_hash->hash,
-                    'gateway_type_id' => GatewayType::BANK_TRANSFER,
-                ],
-                'statement_descriptor' => $this->stripe->getStatementDescriptor(),
-            ]
-            );
-        }
-
-        $data['client_secret'] = $intent ? $intent->client_secret : false;
-
-        return $data;
-    }
-
-
     public function tokenBilling(ClientGatewayToken $cgt, PaymentHash $payment_hash)
     {
         $amount = array_sum(array_column($payment_hash->invoices(), 'amount')) + $payment_hash->fee_total;
@@ -642,4 +589,56 @@ class ACH implements LivewireMethodInterface
             return $this->stripe->processInternallyFailedPayment($this->stripe, $e);
         }
     }
+
+    public function livewirePaymentView(array $data): string
+    {
+        return 'gateways.stripe.ach.pay_livewire';
+    }
+
+    public function paymentData(array $data): array
+    {
+        $data['gateway'] = $this->stripe;
+        $data['currency'] = $this->stripe->client->getCurrencyCode();
+        $data['payment_method_id'] = GatewayType::BANK_TRANSFER;
+        $data['customer'] = $this->stripe->findOrCreateCustomer();
+        $data['amount'] = $this->stripe->convertToStripeAmount($data['total']['amount_with_fee'], $this->stripe->client->currency()->precision, $this->stripe->client->currency());
+
+        $description = $this->stripe->getDescription(false);
+
+        $intent = false;
+
+        if (count($data['tokens']) == 1) {
+
+            $token = $data['tokens'][0];
+
+            $meta = $token->meta;
+
+            if(isset($meta->state) && $meta->state == 'unauthorized') {
+                return redirect()->route('client.payment_methods.show', $token->hashed_id);
+            }
+        }
+
+        if (count($data['tokens']) == 0) {
+            $intent =
+            $this->stripe->createPaymentIntent(
+                [
+                'amount' => $data['amount'],
+                'currency' => $data['currency'],
+                'setup_future_usage' => 'off_session',
+                'customer' => $data['customer']->id,
+                'payment_method_types' => ['us_bank_account'],
+                'description' => $description,
+                'metadata' => [
+                    'payment_hash' => $this->stripe->payment_hash->hash,
+                    'gateway_type_id' => GatewayType::BANK_TRANSFER,
+                ],
+                'statement_descriptor' => $this->stripe->getStatementDescriptor(),
+            ]
+            );
+        }
+
+        $data['client_secret'] = $intent ? $intent->client_secret : false;
+
+        return $data;
+    }
 }
diff --git a/app/PaymentDrivers/Stripe/ACSS.php b/app/PaymentDrivers/Stripe/ACSS.php
index 39bdb6a19269..fba4819cabe5 100644
--- a/app/PaymentDrivers/Stripe/ACSS.php
+++ b/app/PaymentDrivers/Stripe/ACSS.php
@@ -164,7 +164,7 @@ class ACSS implements LivewireMethodInterface
 
     public function paymentData(array $data): array
     {
-        if (count($data['tokens']) == 0) {
+        if(count($data['tokens']) == 0) {
             $hash = Str::random(32);
 
             Cache::put($hash, $data, 3600);
@@ -176,7 +176,7 @@ class ACSS implements LivewireMethodInterface
             $data['company_gateway'] = $this->stripe->company_gateway;
             $data['customer'] = $this->stripe->findOrCreateCustomer()->id;
             $data['country'] = $this->stripe->client->country->iso_3166_2;
-
+    
             $intent = \Stripe\SetupIntent::create([
                 'usage' => 'off_session',
                 'payment_method_types' => ['acss_debit'],
@@ -193,7 +193,7 @@ class ACSS implements LivewireMethodInterface
                     ],
                 ],
             ], $this->stripe->stripe_connect_auth);
-
+    
             $data['pi_client_secret'] = $intent->client_secret;
 
             return $data;
@@ -389,8 +389,8 @@ class ACSS implements LivewireMethodInterface
             return $this->stripe->processInternallyFailedPayment($this->stripe, $e);
         }
     }
-
-    public function livewirePaymentView(array $data): string
+    
+    public function livewirePaymentView(array $data): string 
     {
         if (array_key_exists('needs_mandate_generate', $data)) {
             return 'gateways.stripe.acss.authorize_livewire';
diff --git a/app/PaymentDrivers/Stripe/Bancontact.php b/app/PaymentDrivers/Stripe/Bancontact.php
index f22a8898cc26..56bace102109 100644
--- a/app/PaymentDrivers/Stripe/Bancontact.php
+++ b/app/PaymentDrivers/Stripe/Bancontact.php
@@ -39,6 +39,7 @@ class Bancontact implements LivewireMethodInterface
     public function paymentView(array $data)
     {
         $data = $this->paymentData($data);
+        $data = $this->paymentData($data);
 
         return render('gateways.stripe.bancontact.pay', $data);
     }
diff --git a/app/PaymentDrivers/Stripe/BankTransfer.php b/app/PaymentDrivers/Stripe/BankTransfer.php
index 2e8837a95e0a..f8d0e26b88ba 100644
--- a/app/PaymentDrivers/Stripe/BankTransfer.php
+++ b/app/PaymentDrivers/Stripe/BankTransfer.php
@@ -40,6 +40,7 @@ class BankTransfer implements LivewireMethodInterface
     public function paymentView(array $data)
     {
         $data = $this->paymentData($data);
+        $data = $this->paymentData($data);
 
         return render('gateways.stripe.bank_transfer.pay', $data);
     }
diff --git a/app/PaymentDrivers/Stripe/SEPA.php b/app/PaymentDrivers/Stripe/SEPA.php
index bf937f0a3db1..c82c1b6f292f 100644
--- a/app/PaymentDrivers/Stripe/SEPA.php
+++ b/app/PaymentDrivers/Stripe/SEPA.php
@@ -162,6 +162,22 @@ class SEPA implements LivewireMethodInterface
         $data['country'] = $this->stripe->client->country->iso_3166_2;
         $data['payment_hash'] = $this->stripe->payment_hash->hash;
 
+
+        /** if the iban and client country don't match (OR UK IBAN) - need to inject billing details also */
+        // $data['billing_details'] = [
+        //     'name' => $this->stripe->client->present()->name(),
+        //     'email' => $this->stripe->client->present()->email(),
+        //     'address' => [
+        //         'line1' => $this->stripe->client->address1 ?? '',
+        //         'line2' => $this->stripe->client->address2 ?? '',
+        //         'city' => $this->stripe->client->city ?? '',
+        //         'state' => $this->stripe->client->state ?? '',
+        //         'postal_code' => $this->stripe->client->postal_code ?? '',
+        //         'country' => $this->stripe->client->country->iso_3166_2 ?? 'DE',
+        //     ]
+        // ];
+
+
         $intent_data = [
             'amount' => $data['stripe_amount'],
             'currency' => 'eur',
@@ -185,7 +201,7 @@ class SEPA implements LivewireMethodInterface
         return $data;
     }
 
-    public function livewirePaymentView(array $data): string
+    public function livewirePaymentView(array $data): string 
     {
         return 'gateways.stripe.sepa.pay_livewire';
     }
diff --git a/app/PaymentDrivers/Stripe/SOFORT.php b/app/PaymentDrivers/Stripe/SOFORT.php
index 01789b6849d5..f4827e77613f 100644
--- a/app/PaymentDrivers/Stripe/SOFORT.php
+++ b/app/PaymentDrivers/Stripe/SOFORT.php
@@ -39,6 +39,7 @@ class SOFORT implements LivewireMethodInterface
     public function paymentView(array $data)
     {
         $data = $this->paymentData($data);
+        $data = $this->paymentData($data);
 
         return render('gateways.stripe.sofort.pay', $data);
     }
diff --git a/app/PaymentDrivers/StripePaymentDriver.php b/app/PaymentDrivers/StripePaymentDriver.php
index be2e5d165fc6..220cc1fc504b 100644
--- a/app/PaymentDrivers/StripePaymentDriver.php
+++ b/app/PaymentDrivers/StripePaymentDriver.php
@@ -126,8 +126,8 @@ class StripePaymentDriver extends BaseDriver
             );
 
             Stripe::setApiKey($this->company_gateway->getConfigField('apiKey'));
-            Stripe::setApiVersion('2022-11-15');
-            // Stripe::setAPiVersion('2023-08-16');
+            // Stripe::setApiVersion('2022-11-15');
+            Stripe::setAPiVersion('2023-08-16');
         }
 
         return $this;
@@ -419,6 +419,33 @@ class StripePaymentDriver extends BaseDriver
         return $this->payment_method->paymentView($data);
     }
 
+    public function processPaymentViewData(array $data): array
+    {
+        $data = $this->payment_method->paymentData($data); 
+
+        $data['stripe_account_id'] = $this->company_gateway->getConfigField('account_id');
+
+        if (array_key_exists('intent', $data)) {
+            $data['client_secret'] = $data['intent']->client_secret;
+        }
+
+        unset($data['intent']);
+
+        $token_billing_string = 'true';
+
+        if($this->company_gateway->token_billing == 'off' || $this->company_gateway->token_billing == 'optin') {
+            $token_billing_string = 'false';
+        }
+
+        if (isset($data['pre_payment']) && $data['pre_payment'] == '1' && isset($data['is_recurring']) && $data['is_recurring'] == '1') {
+            $token_billing_string = 'true';
+        }
+
+        $data['token_billing_string'] = $token_billing_string;
+
+        return $data;
+    }
+
     public function processPaymentResponse($request)
     {
         return $this->payment_method->paymentResponse($request);
@@ -1022,30 +1049,5 @@ class StripePaymentDriver extends BaseDriver
 
     }
 
-    public function processPaymentViewData(array $data): array
-    {
-        $data = $this->payment_method->paymentData($data); 
-
-        $data['stripe_account_id'] = $this->company_gateway->getConfigField('account_id');
-
-        if (array_key_exists('intent', $data)) {
-            $data['client_secret'] = $data['intent']->client_secret;
-        }
-
-        unset($data['intent']);
-
-        $token_billing_string = 'true';
-
-        if($this->company_gateway->token_billing == 'off' || $this->company_gateway->token_billing == 'optin') {
-            $token_billing_string = 'false';
-        }
-
-        if (isset($data['pre_payment']) && $data['pre_payment'] == '1' && isset($data['is_recurring']) && $data['is_recurring'] == '1') {
-            $token_billing_string = 'true';
-        }
-
-        $data['token_billing_string'] = $token_billing_string;
-
-        return $data;
-    }
 }
+
diff --git a/app/Services/Client/PaymentMethod.php b/app/Services/Client/PaymentMethod.php
index 3c19d6e46caf..fd83c36d2364 100644
--- a/app/Services/Client/PaymentMethod.php
+++ b/app/Services/Client/PaymentMethod.php
@@ -183,6 +183,14 @@ class PaymentMethod
                 }
             }
         }
+        
+        if (($this->client->getSetting('use_credits_payment') == 'option' || $this->client->getSetting('use_credits_payment') == 'always') && $this->client->service()->getCreditBalance() > 0) {
+            $this->payment_urls[] = [
+                'label' => ctrans('texts.apply_credit'),
+                'company_gateway_id'  => CompanyGateway::GATEWAY_CREDIT,
+                'gateway_type_id' => GatewayType::CREDIT,
+            ];
+        }
 
         if (($this->client->getSetting('use_credits_payment') == 'option' || $this->client->getSetting('use_credits_payment') == 'always') && $this->client->service()->getCreditBalance() > 0) {
             // Show credits as only payment option if both statements are true.
diff --git a/app/Services/Client/RFFService.php b/app/Services/Client/RFFService.php
index 08b4b3b467a0..f5b5f6ae9f1d 100644
--- a/app/Services/Client/RFFService.php
+++ b/app/Services/Client/RFFService.php
@@ -108,7 +108,6 @@ class RFFService
             if ($return_errors) {
                 return $validator->getMessageBag()->getMessages();
             }
-
             session()->flash('validation_errors', $validator->getMessageBag()->getMessages());
 
             return false;
@@ -129,7 +128,7 @@ class RFFService
         $contact = [];
 
         MultiDB::setDb($this->database);
-
+ 
         foreach ($data as $field => $value) {
             if (Str::startsWith($field, 'client_')) {
                 $client[$this->mappings[$field]] = $value;
diff --git a/app/Services/ClientPortal/LivewireInstantPayment.php b/app/Services/ClientPortal/LivewireInstantPayment.php
index e08a61759eb9..39cb90bd063d 100644
--- a/app/Services/ClientPortal/LivewireInstantPayment.php
+++ b/app/Services/ClientPortal/LivewireInstantPayment.php
@@ -56,7 +56,6 @@ class LivewireInstantPayment
         'payload' => [],
         'component' => '',
     ];
-
     /**
      * is_credit_payment
      *
@@ -64,7 +63,6 @@ class LivewireInstantPayment
      * @var bool
      */
     private $is_credit_payment = false;
-
     /**
      * __construct
      *
@@ -98,7 +96,6 @@ class LivewireInstantPayment
         }
 
         $payable_invoices = collect($this->data['payable_invoices']);
-
         $tokens = [];
 
         $invoices = Invoice::query()
@@ -239,7 +236,6 @@ class LivewireInstantPayment
 
             $this->mergeResponder(['success' => true, 'component' => 'CreditPaymentComponent', 'payload' => $data]);
             return $this->getResponder();
-
         }
 
         $this->mergeResponder(['success' => true, 'payload' => $data]);
diff --git a/public/build/assets/braintree-paypal-16e2f577.js b/public/build/assets/braintree-paypal-f78ad64b.js
similarity index 69%
rename from public/build/assets/braintree-paypal-16e2f577.js
rename to public/build/assets/braintree-paypal-f78ad64b.js
index d2a70b6d643e..98e40ff55193 100644
--- a/public/build/assets/braintree-paypal-16e2f577.js
+++ b/public/build/assets/braintree-paypal-f78ad64b.js
@@ -1,4 +1,4 @@
-import{i as l,w as s}from"./wait-8f4ae121.js";/**
+import{i as s,w as u}from"./wait-8f4ae121.js";/**
  * Invoice Ninja (https://invoiceninja.com).
  *
  * @link https://github.com/invoiceninja/invoiceninja source repository
@@ -6,4 +6,4 @@ import{i as l,w as s}from"./wait-8f4ae121.js";/**
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
  * @license https://www.elastic.co/licensing/elastic-license 
- */class a{initBraintreeDataCollector(){window.braintree.client.create({authorization:document.querySelector("meta[name=client-token]").content},function(e,t){window.braintree.dataCollector.create({client:t,paypal:!0},function(n,o){n||(document.querySelector("input[name=client-data]").value=o.deviceData)})})}static getPaymentDetails(){return{flow:"vault"}}static handleErrorMessage(e){let t=document.getElementById("errors");t.innerText=e,t.hidden=!1}handlePaymentWithToken(){Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",n=>{document.getElementById("paypal-button").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=n.target.dataset.token,document.getElementById("pay-now-with-token").classList.remove("hidden"),document.getElementById("pay-now").classList.add("hidden")}));let e=document.getElementById("pay-now-with-token");e.addEventListener("click",t=>{e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()})}handle(){this.initBraintreeDataCollector(),this.handlePaymentWithToken(),braintree.client.create({authorization:document.querySelector("meta[name=client-token]").content}).then(function(e){return braintree.paypalCheckout.create({client:e})}).then(function(e){return e.loadPayPalSDK({vault:!0}).then(function(t){return paypal.Buttons({fundingSource:paypal.FUNDING.PAYPAL,createBillingAgreement:function(){return t.createPayment(a.getPaymentDetails())},onApprove:function(n,o){return t.tokenizePayment(n).then(function(c){let r=document.querySelector('input[name="token-billing-checkbox"]:checked');r&&(document.querySelector('input[name="store_card"]').value=r.value),document.querySelector("input[name=gateway_response]").value=JSON.stringify(c),document.getElementById("server-response").submit()})},onCancel:function(n){},onError:function(n){console.log(n.message),a.handleErrorMessage(n.message)}}).render("#paypal-button")})}).catch(function(e){console.log(e.message),a.handleErrorMessage(e.message)})}}function i(){new a().handle()}l()?i():s("#braintree-paypal-payment").then(()=>i());
+ */class a{initBraintreeDataCollector(){window.braintree.client.create({authorization:document.querySelector("meta[name=client-token]").content},function(e,t){window.braintree.dataCollector.create({client:t,paypal:!0},function(n,o){n||(document.querySelector("input[name=client-data]").value=o.deviceData)})})}static getPaymentDetails(){return{flow:"vault"}}static handleErrorMessage(e){let t=document.getElementById("errors");t.innerText=e,t.hidden=!1}handlePaymentWithToken(){Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",n=>{document.getElementById("paypal-button").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=n.target.dataset.token,document.getElementById("pay-now-with-token").classList.remove("hidden"),document.getElementById("pay-now").classList.add("hidden")}));let e=document.getElementById("pay-now-with-token");e.addEventListener("click",t=>{e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()})}handle(){this.initBraintreeDataCollector(),this.handlePaymentWithToken(),braintree.client.create({authorization:document.querySelector("meta[name=client-token]").content}).then(function(e){return braintree.paypalCheckout.create({client:e})}).then(function(e){return e.loadPayPalSDK({vault:!0}).then(function(t){return paypal.Buttons({fundingSource:paypal.FUNDING.PAYPAL,createBillingAgreement:function(){return t.createPayment(a.getPaymentDetails())},onApprove:function(n,o){return t.tokenizePayment(n).then(function(d){var i,c;(i=document.querySelector("#paypal-button"))==null||i.classList.add("hidden"),(c=document.querySelector("#paypal-spinner"))==null||c.classList.remove("hidden");let r=document.querySelector('input[name="token-billing-checkbox"]:checked');r&&(document.querySelector('input[name="store_card"]').value=r.value),document.querySelector("input[name=gateway_response]").value=JSON.stringify(d),document.getElementById("server-response").submit()})},onCancel:function(n){},onError:function(n){console.log(n.message),a.handleErrorMessage(n.message)}}).render("#paypal-button")})}).catch(function(e){console.log(e.message),a.handleErrorMessage(e.message)})}}function l(){new a().handle()}s()?l():u("#braintree-paypal-payment").then(()=>l());
diff --git a/public/build/assets/checkout-credit-card-2cca8b36.js b/public/build/assets/checkout-credit-card-2cca8b36.js
new file mode 100644
index 000000000000..cc32bdcba638
--- /dev/null
+++ b/public/build/assets/checkout-credit-card-2cca8b36.js
@@ -0,0 +1,9 @@
+import{i as s,w as i}from"./wait-8f4ae121.js";/**
+ * 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 a{constructor(){this.tokens=[]}handlePaymentUsingToken(t){document.getElementById("checkout--container").classList.add("hidden"),document.getElementById("pay-now-with-token--container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=t.target.dataset.token}handlePaymentUsingCreditCard(t){document.getElementById("checkout--container").classList.remove("hidden"),document.getElementById("pay-now-with-token--container").classList.add("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="";const e=document.getElementById("pay-button"),d=document.querySelector('meta[name="public-key"]').content??"",o=document.getElementById("payment-form");Frames.init(d),Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED,function(n){e.disabled=!Frames.isCardValid()}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED,function(n){e.disabled=!1}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZED,function(n){e.disabled=!0,document.querySelector('input[name="gateway_response"]').value=JSON.stringify(n),document.querySelector('input[name="store_card"]').value=document.querySelector("input[name=token-billing-checkbox]:checked").value,document.getElementById("server-response").submit()}),o.addEventListener("submit",function(n){n.preventDefault(),e.disabled=!0,Frames.submitCard()})}completePaymentUsingToken(t){let e=document.getElementById("pay-now-with-token");e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}handle(){this.handlePaymentUsingCreditCard(),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",this.handlePaymentUsingToken)),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",this.handlePaymentUsingCreditCard),document.getElementById("pay-now-with-token").addEventListener("click",this.completePaymentUsingToken)}}function r(){new a().handle()}s()?r():i("#checkout-credit-card-payment").then(()=>new a().handle());
diff --git a/public/build/assets/checkout-credit-card-fbe72284.js b/public/build/assets/checkout-credit-card-fbe72284.js
deleted file mode 100644
index 6024203e4e0e..000000000000
--- a/public/build/assets/checkout-credit-card-fbe72284.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import{i as s,w as i}from"./wait-8f4ae121.js";/**
- * 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 a{constructor(){this.tokens=[]}mountFrames(){console.log("Mount checkout frames..")}handlePaymentUsingToken(t){document.getElementById("checkout--container").classList.add("hidden"),document.getElementById("pay-now-with-token--container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=t.target.dataset.token}handlePaymentUsingCreditCard(t){document.getElementById("checkout--container").classList.remove("hidden"),document.getElementById("pay-now-with-token--container").classList.add("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="";const e=document.getElementById("pay-button"),d=document.querySelector('meta[name="public-key"]').content??"",o=document.getElementById("payment-form");Frames.init(d),Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED,function(n){e.disabled=!Frames.isCardValid()}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED,function(n){e.disabled=!1}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZED,function(n){e.disabled=!0,document.querySelector('input[name="gateway_response"]').value=JSON.stringify(n),document.querySelector('input[name="store_card"]').value=document.querySelector("input[name=token-billing-checkbox]:checked").value,document.getElementById("server-response").submit()}),o.addEventListener("submit",function(n){n.preventDefault(),e.disabled=!0,Frames.submitCard()})}completePaymentUsingToken(t){let e=document.getElementById("pay-now-with-token");e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}handle(){this.handlePaymentUsingCreditCard(),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",this.handlePaymentUsingToken)),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",this.handlePaymentUsingCreditCard),document.getElementById("pay-now-with-token").addEventListener("click",this.completePaymentUsingToken)}}function r(){new a().handle()}s()?r():i("#checkout-credit-card-payment").then(()=>new a().handle());
diff --git a/public/build/assets/eway-credit-card-0119725d.js b/public/build/assets/eway-credit-card-150298fa.js
similarity index 82%
rename from public/build/assets/eway-credit-card-0119725d.js
rename to public/build/assets/eway-credit-card-150298fa.js
index 20131732b21b..c666a834e504 100644
--- a/public/build/assets/eway-credit-card-0119725d.js
+++ b/public/build/assets/eway-credit-card-150298fa.js
@@ -6,4 +6,4 @@ import{i as d,w as n}from"./wait-8f4ae121.js";/**
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
  * @license https://www.elastic.co/licensing/elastic-license
- */class a{constructor(){this.cardStyles="padding: 2px; border: 1px solid #AAA; border-radius: 3px; height: 34px; width: 100%;",this.errorCodes=new Map,this.errorCodes.set("V6000","Validation error"),this.errorCodes.set("V6001","Invalid CustomerIP"),this.errorCodes.set("V6002","Invalid DeviceID"),this.errorCodes.set("V6003","Invalid Request PartnerID"),this.errorCodes.set("V6004","Invalid Request Method"),this.errorCodes.set("V6010","Invalid TransactionType, account not certified for eCome only MOTO or Recurring available"),this.errorCodes.set("V6011","Invalid Payment TotalAmount"),this.errorCodes.set("V6012","Invalid Payment InvoiceDescription"),this.errorCodes.set("V6013","Invalid Payment InvoiceNumber"),this.errorCodes.set("V6014","Invalid Payment InvoiceReference"),this.errorCodes.set("V6015","Invalid Payment CurrencyCode"),this.errorCodes.set("V6016","Payment Required"),this.errorCodes.set("V6017","Payment CurrencyCode Required"),this.errorCodes.set("V6018","Unknown Payment CurrencyCode"),this.errorCodes.set("V6019","Cardholder identity authentication required"),this.errorCodes.set("V6020","Cardholder Input Required"),this.errorCodes.set("V6021","EWAY_CARDHOLDERNAME Required"),this.errorCodes.set("V6022","EWAY_CARDNUMBER Required"),this.errorCodes.set("V6023","EWAY_CARDCVN Required"),this.errorCodes.set("V6024","Cardholder Identity Authentication One Time Password Not Active Yet"),this.errorCodes.set("V6025","PIN Required"),this.errorCodes.set("V6033","Invalid Expiry Date"),this.errorCodes.set("V6034","Invalid Issue Number"),this.errorCodes.set("V6035","Invalid Valid From Date"),this.errorCodes.set("V6039","Invalid Network Token Status"),this.errorCodes.set("V6040","Invalid TokenCustomerID"),this.errorCodes.set("V6041","Customer Required"),this.errorCodes.set("V6042","Customer FirstName Required"),this.errorCodes.set("V6043","Customer LastName Required"),this.errorCodes.set("V6044","Customer CountryCode Required"),this.errorCodes.set("V6045","Customer Title Required"),this.errorCodes.set("V6046","TokenCustomerID Required"),this.errorCodes.set("V6047","RedirectURL Required"),this.errorCodes.set("V6048","CheckoutURL Required when CheckoutPayment specified"),this.errorCodes.set("V6049","nvalid Checkout URL"),this.errorCodes.set("V6051","Invalid Customer FirstName"),this.errorCodes.set("V6052","Invalid Customer LastName"),this.errorCodes.set("V6053","Invalid Customer CountryCode"),this.errorCodes.set("V6058","Invalid Customer Title"),this.errorCodes.set("V6059","Invalid RedirectURL"),this.errorCodes.set("V6060","Invalid TokenCustomerID"),this.errorCodes.set("V6061","Invalid Customer Reference"),this.errorCodes.set("V6062","Invalid Customer CompanyName"),this.errorCodes.set("V6063","Invalid Customer JobDescription"),this.errorCodes.set("V6064","Invalid Customer Street1"),this.errorCodes.set("V6065","Invalid Customer Street2"),this.errorCodes.set("V6066","Invalid Customer City"),this.errorCodes.set("V6067","Invalid Customer State"),this.errorCodes.set("V6068","Invalid Customer PostalCode"),this.errorCodes.set("V6069","Invalid Customer Email"),this.errorCodes.set("V6070","Invalid Customer Phone"),this.errorCodes.set("V6071","Invalid Customer Mobile"),this.errorCodes.set("V6072","Invalid Customer Comments"),this.errorCodes.set("V6073","Invalid Customer Fax"),this.errorCodes.set("V6074","Invalid Customer URL"),this.errorCodes.set("V6075","Invalid ShippingAddress FirstName"),this.errorCodes.set("V6076","Invalid ShippingAddress LastName"),this.errorCodes.set("V6077","Invalid ShippingAddress Street1"),this.errorCodes.set("V6078","Invalid ShippingAddress Street2"),this.errorCodes.set("V6079","Invalid ShippingAddress City"),this.errorCodes.set("V6080","Invalid ShippingAddress State"),this.errorCodes.set("V6081","Invalid ShippingAddress PostalCode"),this.errorCodes.set("V6082","Invalid ShippingAddress Email"),this.errorCodes.set("V6083","Invalid ShippingAddress Phone"),this.errorCodes.set("V6084","Invalid ShippingAddress Country"),this.errorCodes.set("V6085","Invalid ShippingAddress ShippingMethod"),this.errorCodes.set("V6086","Invalid ShippingAddress Fax"),this.errorCodes.set("V6091","Unknown Customer CountryCode"),this.errorCodes.set("V6092","Unknown ShippingAddress CountryCode"),this.errorCodes.set("V6093","Insufficient Address Information"),this.errorCodes.set("V6100","Invalid EWAY_CARDNAME"),this.errorCodes.set("V6101","Invalid EWAY_CARDEXPIRYMONTH"),this.errorCodes.set("V6102","Invalid EWAY_CARDEXPIRYYEAR"),this.errorCodes.set("V6103","Invalid EWAY_CARDSTARTMONTH"),this.errorCodes.set("V6104","Invalid EWAY_CARDSTARTYEAR"),this.errorCodes.set("V6105","Invalid EWAY_CARDISSUENUMBER"),this.errorCodes.set("V6106","Invalid EWAY_CARDCVN"),this.errorCodes.set("V6107","Invalid EWAY_ACCESSCODE"),this.errorCodes.set("V6108","Invalid CustomerHostAddress"),this.errorCodes.set("V6109","Invalid UserAgent"),this.errorCodes.set("V6110","Invalid EWAY_CARDNUMBER"),this.errorCodes.set("V6111","Unauthorised API Access, Account Not PCI Certified"),this.errorCodes.set("V6112","Redundant card details other than expiry year and month"),this.errorCodes.set("V6113","Invalid transaction for refund"),this.errorCodes.set("V6114","Gateway validation error"),this.errorCodes.set("V6115","Invalid DirectRefundRequest, Transaction ID"),this.errorCodes.set("V6116","Invalid card data on original TransactionID"),this.errorCodes.set("V6117","Invalid CreateAccessCodeSharedRequest, FooterText"),this.errorCodes.set("V6118","Invalid CreateAccessCodeSharedRequest, HeaderText"),this.errorCodes.set("V6119","Invalid CreateAccessCodeSharedRequest, Language"),this.errorCodes.set("V6120","Invalid CreateAccessCodeSharedRequest, LogoUrl"),this.errorCodes.set("V6121","Invalid TransactionSearch, Filter Match Type"),this.errorCodes.set("V6122","Invalid TransactionSearch, Non numeric Transaction ID"),this.errorCodes.set("V6123","Invalid TransactionSearch,no TransactionID or AccessCode specified"),this.errorCodes.set("V6124","Invalid Line Items. The line items have been provided however the totals do not match the TotalAmount field"),this.errorCodes.set("V6125","Selected Payment Type not enabled"),this.errorCodes.set("V6126","Invalid encrypted card number, decryption failed"),this.errorCodes.set("V6127","Invalid encrypted cvn, decryption failed"),this.errorCodes.set("V6128","Invalid Method for Payment Type"),this.errorCodes.set("V6129","Transaction has not been authorised for Capture/Cancellation"),this.errorCodes.set("V6130","Generic customer information error"),this.errorCodes.set("V6131","Generic shipping information error"),this.errorCodes.set("V6132","Transaction has already been completed or voided, operation not permitted"),this.errorCodes.set("V6133","Checkout not available for Payment Type"),this.errorCodes.set("V6134","Invalid Auth Transaction ID for Capture/Void"),this.errorCodes.set("V6135","PayPal Error Processing Refund"),this.errorCodes.set("V6136","Original transaction does not exist or state is incorrect"),this.errorCodes.set("V6140","Merchant account is suspended"),this.errorCodes.set("V6141","Invalid PayPal account details or API signature"),this.errorCodes.set("V6142","Authorise not available for Bank/Branch"),this.errorCodes.set("V6143","Invalid Public Key"),this.errorCodes.set("V6144","Method not available with Public API Key Authentication"),this.errorCodes.set("V6145","Credit Card not allow if Token Customer ID is provided with Public API Key Authentication"),this.errorCodes.set("V6146","Client Side Encryption Key Missing or Invalid"),this.errorCodes.set("V6147","Unable to Create One Time Code for Secure Field"),this.errorCodes.set("V6148","Secure Field has Expired"),this.errorCodes.set("V6149","Invalid Secure Field One Time Code"),this.errorCodes.set("V6150","Invalid Refund Amount"),this.errorCodes.set("V6151","Refund amount greater than original transaction"),this.errorCodes.set("V6152","Original transaction already refunded for total amount"),this.errorCodes.set("V6153","Card type not support by merchant"),this.errorCodes.set("V6154","Insufficent Funds Available For Refund"),this.errorCodes.set("V6155","Missing one or more fields in request"),this.errorCodes.set("V6160","Encryption Method Not Supported"),this.errorCodes.set("V6161","Encryption failed, missing or invalid key"),this.errorCodes.set("V6165","Invalid Click-to-Pay (Visa Checkout) data or decryption failed"),this.errorCodes.set("V6170","Invalid TransactionSearch, Invoice Number is not unique"),this.errorCodes.set("V6171","Invalid TransactionSearch, Invoice Number not found"),this.errorCodes.set("V6220","Three domain secure XID invalid"),this.errorCodes.set("V6221","Three domain secure ECI invalid"),this.errorCodes.set("V6222","Three domain secure AVV invalid"),this.errorCodes.set("V6223","Three domain secure XID is required"),this.errorCodes.set("V6224","Three Domain Secure ECI is required"),this.errorCodes.set("V6225","Three Domain Secure AVV is required"),this.errorCodes.set("V6226","Three Domain Secure AuthStatus is required"),this.errorCodes.set("V6227","Three Domain Secure AuthStatus invalid"),this.errorCodes.set("V6228","Three domain secure Version is required"),this.errorCodes.set("V6230","Three domain secure Directory Server Txn ID invalid"),this.errorCodes.set("V6231","Three domain secure Directory Server Txn ID is required"),this.errorCodes.set("V6232","Three domain secure Version is invalid"),this.errorCodes.set("V6501","Invalid Amex InstallementPlan"),this.errorCodes.set("V6502","Invalid Number Of Installements for Amex. Valid values are from 0 to 99 inclusive"),this.errorCodes.set("V6503","Merchant Amex ID required"),this.errorCodes.set("V6504","Invalid Merchant Amex ID"),this.errorCodes.set("V6505","Merchant Terminal ID required"),this.errorCodes.set("V6506","Merchant category code required"),this.errorCodes.set("V6507","Invalid merchant category code"),this.errorCodes.set("V6508","Amex 3D ECI required"),this.errorCodes.set("V6509","Invalid Amex 3D ECI"),this.errorCodes.set("V6510","Invalid Amex 3D verification value"),this.errorCodes.set("V6511","Invalid merchant location data"),this.errorCodes.set("V6512","Invalid merchant street address"),this.errorCodes.set("V6513","Invalid merchant city"),this.errorCodes.set("V6514","Invalid merchant country"),this.errorCodes.set("V6515","Invalid merchant phone"),this.errorCodes.set("V6516","Invalid merchant postcode"),this.errorCodes.set("V6517","Amex connection error"),this.errorCodes.set("V6518","Amex EC Card Details API returned invalid data"),this.errorCodes.set("V6520","Invalid or missing Amex Point Of Sale Data"),this.errorCodes.set("V6521","Invalid or missing Amex transaction date time"),this.errorCodes.set("V6522","Invalid or missing Amex Original transaction date time"),this.errorCodes.set("V6530","Credit Card Number in non Credit Card Field")}get groupFieldConfig(){var e,t,r,s,o;return{publicApiKey:(e=document.querySelector("meta[name=public-api-key]"))==null?void 0:e.content,fieldDivId:"eway-secure-panel",fieldType:"group",styles:"",layout:{fonts:["Lobster"],rows:[{styles:"",cells:[{colSpan:12,styles:"margin-top: 15px;",label:{fieldColSpan:4,text:(t=document.querySelector("meta[name=translation-card-name]"))==null?void 0:t.content,styles:""},field:{fieldColSpan:8,fieldType:"name",styles:this.cardStyles,divStyles:"padding-left: 10px;"}},{colSpan:12,styles:"margin-top: 15px;",label:{fieldColSpan:4,text:(r=document.querySelector("meta[name=translation-expiry_date]"))==null?void 0:r.content,styles:""},field:{fieldColSpan:8,fieldType:"expirytext",styles:this.cardStyles,divStyles:"padding-left: 10px;"}}]},{styles:"",cells:[{colSpan:12,styles:"margin-top: 15px;",label:{fieldColSpan:4,text:(s=document.querySelector("meta[name=translation-card_number]"))==null?void 0:s.content,styles:""},field:{fieldColSpan:8,fieldType:"card",styles:this.cardStyles}},{colSpan:12,styles:"margin-top: 15px;",label:{fieldColSpan:4,text:(o=document.querySelector("meta[name=translation-cvv]"))==null?void 0:o.content,styles:""},field:{fieldColSpan:8,fieldType:"cvn",styles:this.cardStyles}}]}]}}}securePanelCallback(e){if(document.getElementById("errors").hidden=!0,e.errors)return this.handleErrors(e.errors);document.getElementById("authorize-card")&&(document.getElementById("authorize-card").disabled=!1),document.getElementById("pay-now")&&(document.getElementById("pay-now").disabled=!1),document.querySelector("input[name=securefieldcode]").value=e.secureFieldCode}handleErrors(e){let t=e.split(" "),r="";t.forEach(s=>{r=r.concat(this.errorCodes.get(s)+"<br>")}),document.getElementById("errors").innerHTML=r,document.getElementById("errors").hidden=!1}completeAuthorization(e){e.target.parentElement.disabled=!0,document.getElementById("server-response").submit()}completePaymentUsingToken(e){e.target.parentElement.disabled=!0,document.getElementById("server-response").submit()}completePaymentWithoutToken(e){e.target.parentElement.disabled=!0;let t=document.querySelector('input[name="token-billing-checkbox"]:checked');t&&(document.querySelector('input[name="store_card"]').value=t.value),document.getElementById("server-response").submit()}initialize(){this.eWAY=eWAY.setupSecureField(this.groupFieldConfig,e=>this.securePanelCallback(e))}handle(){var e,t;this.initialize(),(e=document.getElementById("authorize-card"))==null||e.addEventListener("click",r=>this.completeAuthorization(r)),Array.from(document.getElementsByClassName("toggle-payment-with-token")??[]).forEach(r=>r.addEventListener("click",s=>{document.getElementById("eway-secure-panel").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=s.target.dataset.token,document.getElementById("pay-now").disabled=!1})),document.getElementById("toggle-payment-with-credit-card")&&document.getElementById("toggle-payment-with-credit-card").addEventListener("click",r=>{document.getElementById("eway-secure-panel").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="",document.getElementById("pay-now").disabled=!0}),(t=document.getElementById("pay-now"))==null||t.addEventListener("click",r=>document.querySelector("input[name=token]").value?this.completePaymentUsingToken(r):this.completePaymentWithoutToken(r))}}function i(){new a().handle()}d()?i():n("#eway-credit-card-payment").then(()=>i());
+ */class a{constructor(){this.cardStyles="padding: 2px; border: 1px solid #AAA; border-radius: 3px; height: 34px; width: 100%;",this.errorCodes=new Map,this.errorCodes.set("V6000","Validation error"),this.errorCodes.set("V6001","Invalid CustomerIP"),this.errorCodes.set("V6002","Invalid DeviceID"),this.errorCodes.set("V6003","Invalid Request PartnerID"),this.errorCodes.set("V6004","Invalid Request Method"),this.errorCodes.set("V6010","Invalid TransactionType, account not certified for eCome only MOTO or Recurring available"),this.errorCodes.set("V6011","Invalid Payment TotalAmount"),this.errorCodes.set("V6012","Invalid Payment InvoiceDescription"),this.errorCodes.set("V6013","Invalid Payment InvoiceNumber"),this.errorCodes.set("V6014","Invalid Payment InvoiceReference"),this.errorCodes.set("V6015","Invalid Payment CurrencyCode"),this.errorCodes.set("V6016","Payment Required"),this.errorCodes.set("V6017","Payment CurrencyCode Required"),this.errorCodes.set("V6018","Unknown Payment CurrencyCode"),this.errorCodes.set("V6019","Cardholder identity authentication required"),this.errorCodes.set("V6020","Cardholder Input Required"),this.errorCodes.set("V6021","EWAY_CARDHOLDERNAME Required"),this.errorCodes.set("V6022","EWAY_CARDNUMBER Required"),this.errorCodes.set("V6023","EWAY_CARDCVN Required"),this.errorCodes.set("V6024","Cardholder Identity Authentication One Time Password Not Active Yet"),this.errorCodes.set("V6025","PIN Required"),this.errorCodes.set("V6033","Invalid Expiry Date"),this.errorCodes.set("V6034","Invalid Issue Number"),this.errorCodes.set("V6035","Invalid Valid From Date"),this.errorCodes.set("V6039","Invalid Network Token Status"),this.errorCodes.set("V6040","Invalid TokenCustomerID"),this.errorCodes.set("V6041","Customer Required"),this.errorCodes.set("V6042","Customer FirstName Required"),this.errorCodes.set("V6043","Customer LastName Required"),this.errorCodes.set("V6044","Customer CountryCode Required"),this.errorCodes.set("V6045","Customer Title Required"),this.errorCodes.set("V6046","TokenCustomerID Required"),this.errorCodes.set("V6047","RedirectURL Required"),this.errorCodes.set("V6048","CheckoutURL Required when CheckoutPayment specified"),this.errorCodes.set("V6049","nvalid Checkout URL"),this.errorCodes.set("V6051","Invalid Customer FirstName"),this.errorCodes.set("V6052","Invalid Customer LastName"),this.errorCodes.set("V6053","Invalid Customer CountryCode"),this.errorCodes.set("V6058","Invalid Customer Title"),this.errorCodes.set("V6059","Invalid RedirectURL"),this.errorCodes.set("V6060","Invalid TokenCustomerID"),this.errorCodes.set("V6061","Invalid Customer Reference"),this.errorCodes.set("V6062","Invalid Customer CompanyName"),this.errorCodes.set("V6063","Invalid Customer JobDescription"),this.errorCodes.set("V6064","Invalid Customer Street1"),this.errorCodes.set("V6065","Invalid Customer Street2"),this.errorCodes.set("V6066","Invalid Customer City"),this.errorCodes.set("V6067","Invalid Customer State"),this.errorCodes.set("V6068","Invalid Customer PostalCode"),this.errorCodes.set("V6069","Invalid Customer Email"),this.errorCodes.set("V6070","Invalid Customer Phone"),this.errorCodes.set("V6071","Invalid Customer Mobile"),this.errorCodes.set("V6072","Invalid Customer Comments"),this.errorCodes.set("V6073","Invalid Customer Fax"),this.errorCodes.set("V6074","Invalid Customer URL"),this.errorCodes.set("V6075","Invalid ShippingAddress FirstName"),this.errorCodes.set("V6076","Invalid ShippingAddress LastName"),this.errorCodes.set("V6077","Invalid ShippingAddress Street1"),this.errorCodes.set("V6078","Invalid ShippingAddress Street2"),this.errorCodes.set("V6079","Invalid ShippingAddress City"),this.errorCodes.set("V6080","Invalid ShippingAddress State"),this.errorCodes.set("V6081","Invalid ShippingAddress PostalCode"),this.errorCodes.set("V6082","Invalid ShippingAddress Email"),this.errorCodes.set("V6083","Invalid ShippingAddress Phone"),this.errorCodes.set("V6084","Invalid ShippingAddress Country"),this.errorCodes.set("V6085","Invalid ShippingAddress ShippingMethod"),this.errorCodes.set("V6086","Invalid ShippingAddress Fax"),this.errorCodes.set("V6091","Unknown Customer CountryCode"),this.errorCodes.set("V6092","Unknown ShippingAddress CountryCode"),this.errorCodes.set("V6093","Insufficient Address Information"),this.errorCodes.set("V6100","Invalid EWAY_CARDNAME"),this.errorCodes.set("V6101","Invalid EWAY_CARDEXPIRYMONTH"),this.errorCodes.set("V6102","Invalid EWAY_CARDEXPIRYYEAR"),this.errorCodes.set("V6103","Invalid EWAY_CARDSTARTMONTH"),this.errorCodes.set("V6104","Invalid EWAY_CARDSTARTYEAR"),this.errorCodes.set("V6105","Invalid EWAY_CARDISSUENUMBER"),this.errorCodes.set("V6106","Invalid EWAY_CARDCVN"),this.errorCodes.set("V6107","Invalid EWAY_ACCESSCODE"),this.errorCodes.set("V6108","Invalid CustomerHostAddress"),this.errorCodes.set("V6109","Invalid UserAgent"),this.errorCodes.set("V6110","Invalid EWAY_CARDNUMBER"),this.errorCodes.set("V6111","Unauthorised API Access, Account Not PCI Certified"),this.errorCodes.set("V6112","Redundant card details other than expiry year and month"),this.errorCodes.set("V6113","Invalid transaction for refund"),this.errorCodes.set("V6114","Gateway validation error"),this.errorCodes.set("V6115","Invalid DirectRefundRequest, Transaction ID"),this.errorCodes.set("V6116","Invalid card data on original TransactionID"),this.errorCodes.set("V6117","Invalid CreateAccessCodeSharedRequest, FooterText"),this.errorCodes.set("V6118","Invalid CreateAccessCodeSharedRequest, HeaderText"),this.errorCodes.set("V6119","Invalid CreateAccessCodeSharedRequest, Language"),this.errorCodes.set("V6120","Invalid CreateAccessCodeSharedRequest, LogoUrl"),this.errorCodes.set("V6121","Invalid TransactionSearch, Filter Match Type"),this.errorCodes.set("V6122","Invalid TransactionSearch, Non numeric Transaction ID"),this.errorCodes.set("V6123","Invalid TransactionSearch,no TransactionID or AccessCode specified"),this.errorCodes.set("V6124","Invalid Line Items. The line items have been provided however the totals do not match the TotalAmount field"),this.errorCodes.set("V6125","Selected Payment Type not enabled"),this.errorCodes.set("V6126","Invalid encrypted card number, decryption failed"),this.errorCodes.set("V6127","Invalid encrypted cvn, decryption failed"),this.errorCodes.set("V6128","Invalid Method for Payment Type"),this.errorCodes.set("V6129","Transaction has not been authorised for Capture/Cancellation"),this.errorCodes.set("V6130","Generic customer information error"),this.errorCodes.set("V6131","Generic shipping information error"),this.errorCodes.set("V6132","Transaction has already been completed or voided, operation not permitted"),this.errorCodes.set("V6133","Checkout not available for Payment Type"),this.errorCodes.set("V6134","Invalid Auth Transaction ID for Capture/Void"),this.errorCodes.set("V6135","PayPal Error Processing Refund"),this.errorCodes.set("V6136","Original transaction does not exist or state is incorrect"),this.errorCodes.set("V6140","Merchant account is suspended"),this.errorCodes.set("V6141","Invalid PayPal account details or API signature"),this.errorCodes.set("V6142","Authorise not available for Bank/Branch"),this.errorCodes.set("V6143","Invalid Public Key"),this.errorCodes.set("V6144","Method not available with Public API Key Authentication"),this.errorCodes.set("V6145","Credit Card not allow if Token Customer ID is provided with Public API Key Authentication"),this.errorCodes.set("V6146","Client Side Encryption Key Missing or Invalid"),this.errorCodes.set("V6147","Unable to Create One Time Code for Secure Field"),this.errorCodes.set("V6148","Secure Field has Expired"),this.errorCodes.set("V6149","Invalid Secure Field One Time Code"),this.errorCodes.set("V6150","Invalid Refund Amount"),this.errorCodes.set("V6151","Refund amount greater than original transaction"),this.errorCodes.set("V6152","Original transaction already refunded for total amount"),this.errorCodes.set("V6153","Card type not support by merchant"),this.errorCodes.set("V6154","Insufficent Funds Available For Refund"),this.errorCodes.set("V6155","Missing one or more fields in request"),this.errorCodes.set("V6160","Encryption Method Not Supported"),this.errorCodes.set("V6161","Encryption failed, missing or invalid key"),this.errorCodes.set("V6165","Invalid Click-to-Pay (Visa Checkout) data or decryption failed"),this.errorCodes.set("V6170","Invalid TransactionSearch, Invoice Number is not unique"),this.errorCodes.set("V6171","Invalid TransactionSearch, Invoice Number not found"),this.errorCodes.set("V6220","Three domain secure XID invalid"),this.errorCodes.set("V6221","Three domain secure ECI invalid"),this.errorCodes.set("V6222","Three domain secure AVV invalid"),this.errorCodes.set("V6223","Three domain secure XID is required"),this.errorCodes.set("V6224","Three Domain Secure ECI is required"),this.errorCodes.set("V6225","Three Domain Secure AVV is required"),this.errorCodes.set("V6226","Three Domain Secure AuthStatus is required"),this.errorCodes.set("V6227","Three Domain Secure AuthStatus invalid"),this.errorCodes.set("V6228","Three domain secure Version is required"),this.errorCodes.set("V6230","Three domain secure Directory Server Txn ID invalid"),this.errorCodes.set("V6231","Three domain secure Directory Server Txn ID is required"),this.errorCodes.set("V6232","Three domain secure Version is invalid"),this.errorCodes.set("V6501","Invalid Amex InstallementPlan"),this.errorCodes.set("V6502","Invalid Number Of Installements for Amex. Valid values are from 0 to 99 inclusive"),this.errorCodes.set("V6503","Merchant Amex ID required"),this.errorCodes.set("V6504","Invalid Merchant Amex ID"),this.errorCodes.set("V6505","Merchant Terminal ID required"),this.errorCodes.set("V6506","Merchant category code required"),this.errorCodes.set("V6507","Invalid merchant category code"),this.errorCodes.set("V6508","Amex 3D ECI required"),this.errorCodes.set("V6509","Invalid Amex 3D ECI"),this.errorCodes.set("V6510","Invalid Amex 3D verification value"),this.errorCodes.set("V6511","Invalid merchant location data"),this.errorCodes.set("V6512","Invalid merchant street address"),this.errorCodes.set("V6513","Invalid merchant city"),this.errorCodes.set("V6514","Invalid merchant country"),this.errorCodes.set("V6515","Invalid merchant phone"),this.errorCodes.set("V6516","Invalid merchant postcode"),this.errorCodes.set("V6517","Amex connection error"),this.errorCodes.set("V6518","Amex EC Card Details API returned invalid data"),this.errorCodes.set("V6520","Invalid or missing Amex Point Of Sale Data"),this.errorCodes.set("V6521","Invalid or missing Amex transaction date time"),this.errorCodes.set("V6522","Invalid or missing Amex Original transaction date time"),this.errorCodes.set("V6530","Credit Card Number in non Credit Card Field")}get groupFieldConfig(){var e,r,s,t,o;return{publicApiKey:(e=document.querySelector("meta[name=public-api-key]"))==null?void 0:e.content,fieldDivId:"eway-secure-panel",fieldType:"group",styles:"",layout:{fonts:["Lobster"],rows:[{styles:"",cells:[{colSpan:12,styles:"margin-top: 15px;",label:{fieldColSpan:4,text:(r=document.querySelector("meta[name=translation-card-name]"))==null?void 0:r.content,styles:""},field:{fieldColSpan:8,fieldType:"name",styles:this.cardStyles,divStyles:"padding-left: 10px;"}},{colSpan:12,styles:"margin-top: 15px;",label:{fieldColSpan:4,text:(s=document.querySelector("meta[name=translation-expiry_date]"))==null?void 0:s.content,styles:""},field:{fieldColSpan:8,fieldType:"expirytext",styles:this.cardStyles,divStyles:"padding-left: 10px;"}}]},{styles:"",cells:[{colSpan:12,styles:"margin-top: 15px;",label:{fieldColSpan:4,text:(t=document.querySelector("meta[name=translation-card_number]"))==null?void 0:t.content,styles:""},field:{fieldColSpan:8,fieldType:"card",styles:this.cardStyles}},{colSpan:12,styles:"margin-top: 15px;",label:{fieldColSpan:4,text:(o=document.querySelector("meta[name=translation-cvv]"))==null?void 0:o.content,styles:""},field:{fieldColSpan:8,fieldType:"cvn",styles:this.cardStyles}}]}]}}}securePanelCallback(e){if(document.getElementById("errors").hidden=!0,e.errors)return this.handleErrors(e.errors);document.getElementById("authorize-card")&&(document.getElementById("authorize-card").disabled=!1),document.getElementById("pay-now")&&(document.getElementById("pay-now").disabled=!1),document.querySelector("input[name=securefieldcode]").value=e.secureFieldCode}handleErrors(e){let r=e.split(" "),s="";r.forEach(t=>{s=s.concat(this.errorCodes.get(t)+"<br>")}),document.getElementById("errors").innerHTML=s,document.getElementById("errors").hidden=!1}completeAuthorization(e){e.target.parentElement.disabled=!0;const r=document.getElementById("authorize-card");r.querySelector("svg").classList.remove("hidden"),r.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}completePaymentUsingToken(e){e.target.parentElement.disabled=!0,document.getElementById("server-response").submit()}completePaymentWithoutToken(e){e.target.parentElement.disabled=!0;let r=document.querySelector('input[name="token-billing-checkbox"]:checked');r&&(document.querySelector('input[name="store_card"]').value=r.value),document.getElementById("server-response").submit()}initialize(){this.eWAY=eWAY.setupSecureField(this.groupFieldConfig,e=>this.securePanelCallback(e))}handle(){var r,s;this.initialize(),(r=document.getElementById("authorize-card"))==null||r.addEventListener("click",t=>this.completeAuthorization(t)),Array.from(document.getElementsByClassName("toggle-payment-with-token")??[]).forEach(t=>t.addEventListener("click",o=>{document.getElementById("eway-secure-panel").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=o.target.dataset.token,document.getElementById("pay-now").disabled=!1})),document.getElementById("toggle-payment-with-credit-card")&&document.getElementById("toggle-payment-with-credit-card").addEventListener("click",t=>{document.getElementById("eway-secure-panel").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="",document.getElementById("pay-now").disabled=!0});const e=document.getElementById("pay-now");(s=document.getElementById("pay-now"))==null||s.addEventListener("click",t=>{let o=document.querySelector("input[name=token]");return e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),o.value?this.completePaymentUsingToken(t):this.completePaymentWithoutToken(t)})}}function i(){new a().handle()}d()?i():n("#eway-credit-card-payment").then(()=>i());
diff --git a/public/build/assets/paytrace-credit-card-7f87b811.js b/public/build/assets/paytrace-credit-card-7f87b811.js
deleted file mode 100644
index 32e75644d2d9..000000000000
--- a/public/build/assets/paytrace-credit-card-7f87b811.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import{i as o,w as i}from"./wait-8f4ae121.js";/**
- * 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 d{constructor(){var t;this.clientKey=(t=document.querySelector("meta[name=paytrace-client-key]"))==null?void 0:t.content}get creditCardStyles(){return{font_color:"#000",border_color:"#a1b1c9",border_style:"dotted",font_size:"13pt",input_border_radius:"3px",input_border_width:"1px",input_font:"Times New Roman, arial, fantasy",input_font_weight:"400",input_margin:"5px 0px 5px 0px",input_padding:"0px 5px 0px 5px",label_color:"#a0aec0",label_size:"16px",label_width:"150px",label_font:"Times New Roman, sans-serif, serif",label_font_weight:"light",label_margin:"5px 0px 0px 0px",label_padding:"0px 5px 0px 5px",background_color:"white",height:"30px",width:"370px",padding_bottom:"0px"}}get codeStyles(){return{font_color:"#000",border_color:"#a1b1c9",border_style:"dotted",font_size:"13pt",input_border_radius:"2px",input_border_width:"1px",input_font:"serif, cursive, fantasy",input_font_weight:"700",input_margin:"5px 0px 5px 20px",input_padding:"0px 5px 0px 5px",label_color:"#a0aec0",label_size:"16px",label_width:"150px",label_font:"sans-serif, arial, serif",label_font_weight:"bold",label_margin:"5px 0px 0px 20px",label_padding:"2px 5px 2px 5px",background_color:"white",height:"30px",width:"150px",padding_bottom:"2px"}}get expStyles(){return{font_color:"#000",border_color:"#a1b1c9",border_style:"dashed",font_size:"12pt",input_border_radius:"0px",input_border_width:"2px",input_font:"arial, cursive, fantasy",input_font_weight:"400",input_margin:"5px 0px 5px 0px",input_padding:"0px 5px 0px 5px",label_color:"#a0aec0",label_size:"16px",label_width:"150px",label_font:"arial, fantasy, serif",label_font_weight:"normal",label_margin:"5px 0px 0px 0px",label_padding:"2px 5px 2px 5px",background_color:"white",height:"30px",width:"85px",padding_bottom:"2px",type:"dropdown"}}updatePayTraceLabels(){window.PTPayment.getControl("securityCode").label.text(document.querySelector("meta[name=ctrans-cvv]").content),window.PTPayment.getControl("creditCard").label.text(document.querySelector("meta[name=ctrans-card_number]").content),window.PTPayment.getControl("expiration").label.text(document.querySelector("meta[name=ctrans-expires]").content)}setupPayTrace(){return window.PTPayment.setup({styles:{code:this.codeStyles,cc:this.creditCardStyles,exp:this.expStyles},authorization:{clientKey:this.clientKey}})}handlePaymentWithCreditCard(t){t.target.parentElement.disabled=!0,document.getElementById("errors").hidden=!0,window.PTPayment.validate(n=>{if(n.length>=1){let e=document.getElementById("errors");return e.textContent=n[0].description,e.hidden=!1,t.target.parentElement.disabled=!1}this.ptInstance.process().then(e=>{document.getElementById("HPF_Token").value=e.message.hpf_token,document.getElementById("enc_key").value=e.message.enc_key;let a=document.querySelector('input[name="token-billing-checkbox"]:checked');a&&(document.querySelector('input[name="store_card"]').value=a.value),document.getElementById("server_response").submit()}).catch(e=>{document.getElementById("errors").textContent=JSON.stringify(e),document.getElementById("errors").hidden=!1,console.log(e)})})}handlePaymentWithToken(t){t.target.parentElement.disabled=!0,document.getElementById("server_response").submit()}handle(){var t;Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(n=>n.addEventListener("click",e=>{document.getElementById("paytrace--credit-card-container").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=e.target.dataset.token})),(t=document.getElementById("toggle-payment-with-credit-card"))==null||t.addEventListener("click",n=>{document.getElementById("paytrace--credit-card-container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="",this.setupPayTrace().then(e=>{this.ptInstance=e,this.updatePayTraceLabels()})}),document.getElementById("pay-now").addEventListener("click",n=>document.querySelector("input[name=token]").value===""?this.handlePaymentWithCreditCard(n):this.handlePaymentWithToken(n)),Array.from(document.getElementsByClassName("toggle-payment-with-token")).length===0&&!o()&&document.getElementById("toggle-payment-with-credit-card").click()}}function r(){new d().handle()}o()?r():i("#paytrace-credit-card-payment").then(()=>r());
diff --git a/public/build/assets/paytrace-credit-card-d29797c1.js b/public/build/assets/paytrace-credit-card-d29797c1.js
new file mode 100644
index 000000000000..7052cba6938d
--- /dev/null
+++ b/public/build/assets/paytrace-credit-card-d29797c1.js
@@ -0,0 +1,9 @@
+import{i as o,w as i}from"./wait-8f4ae121.js";/**
+ * 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 l{constructor(){var t;this.clientKey=(t=document.querySelector("meta[name=paytrace-client-key]"))==null?void 0:t.content}get creditCardStyles(){return{font_color:"#000",border_color:"#a1b1c9",border_style:"dotted",font_size:"13pt",input_border_radius:"3px",input_border_width:"1px",input_font:"Times New Roman, arial, fantasy",input_font_weight:"400",input_margin:"5px 0px 5px 0px",input_padding:"0px 5px 0px 5px",label_color:"#a0aec0",label_size:"16px",label_width:"150px",label_font:"Times New Roman, sans-serif, serif",label_font_weight:"light",label_margin:"5px 0px 0px 0px",label_padding:"0px 5px 0px 5px",background_color:"white",height:"30px",width:"370px",padding_bottom:"0px"}}get codeStyles(){return{font_color:"#000",border_color:"#a1b1c9",border_style:"dotted",font_size:"13pt",input_border_radius:"2px",input_border_width:"1px",input_font:"serif, cursive, fantasy",input_font_weight:"700",input_margin:"5px 0px 5px 20px",input_padding:"0px 5px 0px 5px",label_color:"#a0aec0",label_size:"16px",label_width:"150px",label_font:"sans-serif, arial, serif",label_font_weight:"bold",label_margin:"5px 0px 0px 20px",label_padding:"2px 5px 2px 5px",background_color:"white",height:"30px",width:"150px",padding_bottom:"2px"}}get expStyles(){return{font_color:"#000",border_color:"#a1b1c9",border_style:"dashed",font_size:"12pt",input_border_radius:"0px",input_border_width:"2px",input_font:"arial, cursive, fantasy",input_font_weight:"400",input_margin:"5px 0px 5px 0px",input_padding:"0px 5px 0px 5px",label_color:"#a0aec0",label_size:"16px",label_width:"150px",label_font:"arial, fantasy, serif",label_font_weight:"normal",label_margin:"5px 0px 0px 0px",label_padding:"2px 5px 2px 5px",background_color:"white",height:"30px",width:"85px",padding_bottom:"2px",type:"dropdown"}}updatePayTraceLabels(){window.PTPayment.getControl("securityCode").label.text(document.querySelector("meta[name=ctrans-cvv]").content),window.PTPayment.getControl("creditCard").label.text(document.querySelector("meta[name=ctrans-card_number]").content),window.PTPayment.getControl("expiration").label.text(document.querySelector("meta[name=ctrans-expires]").content)}setupPayTrace(){return window.PTPayment.setup({styles:{code:this.codeStyles,cc:this.creditCardStyles,exp:this.expStyles},authorization:{clientKey:this.clientKey}})}handlePaymentWithCreditCard(t){const e=document.getElementById("pay-now");e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),t.target.parentElement.disabled=!0,document.getElementById("errors").hidden=!0,window.PTPayment.validate(a=>{if(a.length>=1){let n=document.getElementById("errors");return n.textContent=a[0].description,n.hidden=!1,e.querySelector("svg").classList.add("hidden"),e.querySelector("span").classList.remove("hidden"),t.target.parentElement.disabled=!1}this.ptInstance.process().then(n=>{document.getElementById("HPF_Token").value=n.message.hpf_token,document.getElementById("enc_key").value=n.message.enc_key;let r=document.querySelector('input[name="token-billing-checkbox"]:checked');r&&(document.querySelector('input[name="store_card"]').value=r.value),document.getElementById("server_response").submit()}).catch(n=>{document.getElementById("errors").textContent=JSON.stringify(n),document.getElementById("errors").hidden=!1,e.querySelector("svg").classList.add("hidden"),e.querySelector("span").classList.remove("hidden"),console.log(n)})})}handlePaymentWithToken(t){t.target.parentElement.disabled=!0;const e=document.getElementById("pay-now");e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server_response").submit()}handle(){var t;Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(e=>e.addEventListener("click",a=>{document.getElementById("paytrace--credit-card-container").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=a.target.dataset.token})),(t=document.getElementById("toggle-payment-with-credit-card"))==null||t.addEventListener("click",e=>{document.getElementById("paytrace--credit-card-container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="",this.setupPayTrace().then(a=>{this.ptInstance=a,this.updatePayTraceLabels()})}),document.getElementById("pay-now").addEventListener("click",e=>document.querySelector("input[name=token]").value===""?this.handlePaymentWithCreditCard(e):this.handlePaymentWithToken(e)),Array.from(document.getElementsByClassName("toggle-payment-with-token")).length===0&&!o()&&document.getElementById("toggle-payment-with-credit-card").click()}}function d(){new l().handle()}o()?d():i("#paytrace-credit-card-payment").then(()=>d());
diff --git a/public/build/assets/razorpay-aio-3d02ff1d.js b/public/build/assets/razorpay-aio-3d02ff1d.js
deleted file mode 100644
index 37774d9fd657..000000000000
--- a/public/build/assets/razorpay-aio-3d02ff1d.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * 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 
- */var a;let n=JSON.parse((a=document.querySelector("meta[name=razorpay-options]"))==null?void 0:a.content);n.handler=function(e){document.getElementById("razorpay_payment_id").value=e.razorpay_payment_id,document.getElementById("razorpay_signature").value=e.razorpay_signature,document.getElementById("server-response").submit()};n.modal={ondismiss:function(){t.disabled=!1}};let o=new Razorpay(n),t=document.getElementById("pay-now");t.onclick=function(e){t.disabled=!0,o.open()};
diff --git a/public/build/assets/razorpay-aio-f8e8c7f0.js b/public/build/assets/razorpay-aio-f8e8c7f0.js
new file mode 100644
index 000000000000..9031d5887707
--- /dev/null
+++ b/public/build/assets/razorpay-aio-f8e8c7f0.js
@@ -0,0 +1,9 @@
+import{i,w as d}from"./wait-8f4ae121.js";/**
+ * 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 
+ */function o(){var a;let e=JSON.parse((a=document.querySelector("meta[name=razorpay-options]"))==null?void 0:a.content);e.handler=function(n){document.getElementById("razorpay_payment_id").value=n.razorpay_payment_id,document.getElementById("razorpay_signature").value=n.razorpay_signature,document.getElementById("server-response").submit()},e.modal={ondismiss:function(){t.disabled=!1}};let r=new Razorpay(e),t=document.getElementById("pay-now");t.onclick=function(n){t.disabled=!0,r.open()}}i()?o():d("#razorpay-hosted-payment").then(()=>o());
diff --git a/public/build/assets/stripe-bacs-425cb13e.js b/public/build/assets/stripe-bacs-425cb13e.js
new file mode 100644
index 000000000000..38799a268fa6
--- /dev/null
+++ b/public/build/assets/stripe-bacs-425cb13e.js
@@ -0,0 +1,9 @@
+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 o=(n,e,t)=>(d(n,typeof e!="symbol"?e+"":e,t),t);import{i as u,w as l}from"./wait-8f4ae121.js";/**
+ * 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 h{constructor(e,t,s){o(this,"setupStripe",()=>(this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this));o(this,"payment_data");o(this,"handle",()=>{this.onlyAuthorization?document.getElementById("authorize-bacs").addEventListener("click",e=>{document.getElementById("authorize-bacs").disabled=!0,document.querySelector("#authorize-bacs > svg").classList.remove("hidden"),document.querySelector("#authorize-bacs > span").classList.add("hidden"),location.href=document.querySelector("meta[name=stripe-redirect-url]").content}):(this.payNowButton=document.getElementById("pay-now"),document.getElementById("pay-now").addEventListener("click",e=>{this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}),this.payment_data=Array.from(document.getElementsByClassName("toggle-payment-with-token")),this.payment_data.length>0?this.payment_data.forEach(e=>e.addEventListener("click",t=>{document.querySelector("input[name=token]").value=t.target.dataset.token})):(this.errors.textContent=document.querySelector("meta[name=translation-payment-method-required]").content,this.errors.hidden=!1,this.payNowButton.disabled=!0,this.payNowButton.querySelector("span").classList.remove("hidden"),this.payNowButton.querySelector("svg").classList.add("hidden")))});this.key=e,this.errors=document.getElementById("errors"),this.stripeConnect=t,this.onlyAuthorization=s}}function a(){var s,i,r;const n=((s=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:s.content)??"",e=((i=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:i.content)??"",t=((r=document.querySelector('meta[name="only-authorization"]'))==null?void 0:r.content)??"";new h(n,e,t).setupStripe().handle()}u()?a():l("#stripe-bacs-payment").then(()=>a());
diff --git a/public/build/assets/stripe-bacs-c9a61b93.js b/public/build/assets/stripe-bacs-c9a61b93.js
deleted file mode 100644
index bce69d1e56bd..000000000000
--- a/public/build/assets/stripe-bacs-c9a61b93.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var a=Object.defineProperty;var c=(n,e,t)=>e in n?a(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var s=(n,e,t)=>(c(n,typeof e!="symbol"?e+"":e,t),t);import{i as d,w as u}from"./wait-8f4ae121.js";/**
- * 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 l{constructor(e,t){s(this,"setupStripe",()=>(this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this));s(this,"payment_data");s(this,"handle",()=>{this.onlyAuthorization?document.getElementById("authorize-bacs").addEventListener("click",e=>{document.getElementById("authorize-bacs").disabled=!0,document.querySelector("#authorize-bacs > svg").classList.remove("hidden"),document.querySelector("#authorize-bacs > span").classList.add("hidden"),location.href=document.querySelector("meta[name=stripe-redirect-url]").content}):(this.payNowButton=document.getElementById("pay-now"),document.getElementById("pay-now").addEventListener("click",e=>{this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}),this.payment_data=Array.from(document.getElementsByClassName("toggle-payment-with-token")),this.payment_data.length>0?this.payment_data.forEach(e=>e.addEventListener("click",t=>{document.querySelector("input[name=token]").value=t.target.dataset.token})):(this.errors.textContent=document.querySelector("meta[name=translation-payment-method-required]").content,this.errors.hidden=!1,this.payNowButton.disabled=!0,this.payNowButton.querySelector("span").classList.remove("hidden"),this.payNowButton.querySelector("svg").classList.add("hidden")))});this.key=e,this.errors=document.getElementById("errors"),this.stripeConnect=t,this.onlyAuthorization=onlyAuthorization}}function r(){var t,o,i;const n=((t=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:t.content)??"",e=((o=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:o.content)??"";(i=document.querySelector('meta[name="only-authorization"]'))==null||i.content,new l(n,e).setupStripe().handle()}d()?r():u("#stripe-bacs-payment").then(()=>r());
diff --git a/public/build/assets/stripe-bank-transfer-4ab58b35.js b/public/build/assets/stripe-bank-transfer-4ab58b35.js
new file mode 100644
index 000000000000..c723f15b55f7
--- /dev/null
+++ b/public/build/assets/stripe-bank-transfer-4ab58b35.js
@@ -0,0 +1,9 @@
+import{i as p,w as y}from"./wait-8f4ae121.js";/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2024. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */p()?c():y("#stripe-bank-transfer-payment").then(()=>c());function c(){var r,o,s;const m=(r=document.querySelector('meta[name="stripe-client-secret"]'))==null?void 0:r.content,i=(o=document.querySelector('meta[name="stripe-return-url"]'))==null?void 0:o.content,d={clientSecret:m,appearance:{theme:"stripe",variables:{colorPrimary:"#0570de",colorBackground:"#ffffff",colorText:"#30313d",colorDanger:"#df1b41",fontFamily:"Ideal Sans, system-ui, sans-serif",spacingUnit:"2px",borderRadius:"4px"}}},e=Stripe(document.querySelector('meta[name="stripe-publishable-key"]').getAttribute("content")),t=((s=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:s.content)??"";t&&(e.stripeAccount=t);const n=e.elements(d);n.create("payment").mount("#payment-element"),document.getElementById("payment-form").addEventListener("submit",async l=>{l.preventDefault(),document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden");const{error:a}=await e.confirmPayment({elements:n,confirmParams:{return_url:i}});if(a){document.getElementById("pay-now").disabled=!1,document.querySelector("svg").classList.remove("hidden"),document.querySelector("span").classList.add("hidden");const u=document.querySelector("#errors");u.textContent=a.message}})}
diff --git a/public/build/assets/stripe-ideal-95836518.js b/public/build/assets/stripe-ideal-2110e54f.js
similarity index 79%
rename from public/build/assets/stripe-ideal-95836518.js
rename to public/build/assets/stripe-ideal-2110e54f.js
index cd679e943098..140dce58769b 100644
--- a/public/build/assets/stripe-ideal-95836518.js
+++ b/public/build/assets/stripe-ideal-2110e54f.js
@@ -1,4 +1,4 @@
-var s=Object.defineProperty;var a=(n,t,e)=>t in n?s(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var r=(n,t,e)=>(a(n,typeof t!="symbol"?t+"":t,e),e);import{i as l,w as c}from"./wait-8f4ae121.js";/**
+var l=Object.defineProperty;var c=(n,t,e)=>t in n?l(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var r=(n,t,e)=>(c(n,typeof t!="symbol"?t+"":t,e),e);import{i as a,w as o}from"./wait-8f4ae121.js";/**
  * Invoice Ninja (https://invoiceninja.com)
  *
  * @link https://github.com/invoiceninja/invoiceninja source repository
@@ -6,4 +6,4 @@ var s=Object.defineProperty;var a=(n,t,e)=>t in n?s(n,t,{enumerable:!0,configura
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
  * @license https://www.elastic.co/licensing/elastic-license 
- */class d{constructor(t,e){r(this,"setupStripe",()=>{this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key);let t=this.stripe.elements();var e={style:{base:{padding:"10px 12px",color:"#32325d",fontSize:"16px","::placeholder":{color:"#aab7c4"}}}};return this.ideal=t.create("idealBank",e),this.ideal.mount("#ideal-bank-element"),this});r(this,"handle",()=>{document.getElementById("pay-now").addEventListener("click",t=>{let e=document.getElementById("errors");if(!document.getElementById("ideal-name").value){e.textContent=document.querySelector("meta[name=translation-name-required]").content,e.hidden=!1,console.log("name");return}document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmIdealPayment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{ideal:this.ideal,billing_details:{name:document.getElementById("ideal-name").value}},return_url:document.querySelector('meta[name="return-url"]').content})})});this.key=t,this.errors=document.getElementById("errors"),this.stripeConnect=e}}function o(){var e,i;const n=((e=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:e.content)??"",t=((i=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:i.content)??"";new d(n,t).setupStripe().handle()}l()?o():c("#stripe-ideal-payment").then(()=>o());
+ */class d{constructor(t,e){r(this,"setupStripe",()=>{this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key);let t=this.stripe.elements();var e={style:{base:{padding:"10px 12px",color:"#32325d",fontSize:"16px","::placeholder":{color:"#aab7c4"}}}};return this.ideal=t.create("idealBank",e),this.ideal.mount("#ideal-bank-element"),this});r(this,"handle",()=>{document.getElementById("pay-now").addEventListener("click",t=>{let e=document.getElementById("errors");if(!document.getElementById("ideal-name").value){e.textContent=document.querySelector("meta[name=translation-name-required]").content,e.hidden=!1,console.log("name");return}document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmIdealPayment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{ideal:this.ideal,billing_details:{name:document.getElementById("ideal-name").value}},return_url:document.querySelector('meta[name="return-url"]').content})})});this.key=t,this.errors=document.getElementById("errors"),this.stripeConnect=e}}function i(){var e,s;const n=((e=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:e.content)??"",t=((s=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:s.content)??"";new d(n,t).setupStripe().handle()}a()?i():o("#stripe-ideal-payment").then(()=>i());a()?i():o("#stripe-ideal-payment").then(()=>i());
diff --git a/public/build/assets/stripe-klarna-93dcc6f1.js b/public/build/assets/stripe-klarna-0c59275f.js
similarity index 86%
rename from public/build/assets/stripe-klarna-93dcc6f1.js
rename to public/build/assets/stripe-klarna-0c59275f.js
index 23d5443b5d68..67dbaa45e291 100644
--- a/public/build/assets/stripe-klarna-93dcc6f1.js
+++ b/public/build/assets/stripe-klarna-0c59275f.js
@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var m=(n,e,t)=>e in n?c(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var o=(n,e,t)=>(m(n,typeof e!="symbol"?e+"":e,t),t);import{i as d,w as i}from"./wait-8f4ae121.js";/**
+var d=Object.defineProperty;var i=(n,e,t)=>e in n?d(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var o=(n,e,t)=>(i(n,typeof e!="symbol"?e+"":e,t),t);import{i as c,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 m=(n,e,t)=>e in n?c(n,e,{enumerable:!0,configura
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
  * @license https://www.elastic.co/licensing/elastic-license
- */class l{constructor(e,t){o(this,"setupStripe",()=>(this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this));o(this,"handleError",e=>{document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden"),this.errors.textContent="",this.errors.textContent=e,this.errors.hidden=!1});o(this,"handle",()=>{document.getElementById("pay-now").addEventListener("click",e=>{let t=document.getElementById("errors"),r=document.getElementById("klarna-name").value;/^[A-Za-z\s]*$/.test(r)?(document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmKlarnaPayment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{billing_details:{name:r,email:document.querySelector("meta[name=email]").content,address:{line1:document.querySelector("meta[name=address-1]").content,line2:document.querySelector("meta[name=address-2]").content,city:document.querySelector("meta[name=city]").content,postal_code:document.querySelector("meta[name=postal_code]").content,state:document.querySelector("meta[name=state]").content,country:document.querySelector("meta[name=country]").content}}},return_url:document.querySelector('meta[name="return-url"]').content}).then(a=>{if(a.hasOwnProperty("error"))return this.handleError(a.error.message)})):(document.getElementById("klarna-name-correction").hidden=!1,document.getElementById("klarna-name").textContent=r.replace(/^[A-Za-z\s]*$/,""),document.getElementById("klarna-name").focus(),t.textContent=document.querySelector("meta[name=translation-name-without-special-characters]").content,t.hidden=!1)})});this.key=e,this.errors=document.getElementById("errors"),this.stripeConnect=t}}function s(){var t,r;const n=((t=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:t.content)??"",e=((r=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:r.content)??"";new l(n,e).setupStripe().handle()}d()?s():i("#stripe-klarna-payment").then(()=>s());
+ */class l{constructor(e,t){o(this,"setupStripe",()=>(this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this));o(this,"handleError",e=>{document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden"),this.errors.textContent="",this.errors.textContent=e,this.errors.hidden=!1});o(this,"handle",()=>{document.getElementById("pay-now").addEventListener("click",e=>{let t=document.getElementById("errors"),r=document.getElementById("klarna-name").value;/^[A-Za-z\s]*$/.test(r)?(document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmKlarnaPayment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{billing_details:{name:r,email:document.querySelector("meta[name=email]").content,address:{line1:document.querySelector("meta[name=address-1]").content,line2:document.querySelector("meta[name=address-2]").content,city:document.querySelector("meta[name=city]").content,postal_code:document.querySelector("meta[name=postal_code]").content,state:document.querySelector("meta[name=state]").content,country:document.querySelector("meta[name=country]").content}}},return_url:document.querySelector('meta[name="return-url"]').content}).then(s=>{if(s.hasOwnProperty("error"))return this.handleError(s.error.message)})):(document.getElementById("klarna-name-correction").hidden=!1,document.getElementById("klarna-name").textContent=r.replace(/^[A-Za-z\s]*$/,""),document.getElementById("klarna-name").focus(),t.textContent=document.querySelector("meta[name=translation-name-without-special-characters]").content,t.hidden=!1)})});this.key=e,this.errors=document.getElementById("errors"),this.stripeConnect=t}}function a(){var t,r;const n=((t=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:t.content)??"",e=((r=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:r.content)??"";new l(n,e).setupStripe().handle()}c()?a():m("#stripe-klarna-payment").then(()=>a());c()?a():m("#stripe-klarna-payment").then(()=>a());
diff --git a/public/build/assets/stripe-przelewy24-5db060c5.js b/public/build/assets/stripe-przelewy24-07696bca.js
similarity index 82%
rename from public/build/assets/stripe-przelewy24-5db060c5.js
rename to public/build/assets/stripe-przelewy24-07696bca.js
index 5318ae19a96a..5775ecd675d8 100644
--- a/public/build/assets/stripe-przelewy24-5db060c5.js
+++ b/public/build/assets/stripe-przelewy24-07696bca.js
@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var s=(n,t,e)=>t in n?c(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var o=(n,t,e)=>(s(n,typeof t!="symbol"?t+"":t,e),e);import{i as d,w as m}from"./wait-8f4ae121.js";/**
+var d=Object.defineProperty;var m=(n,t,e)=>t in n?d(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var r=(n,t,e)=>(m(n,typeof t!="symbol"?t+"":t,e),e);import{i as s,w as c}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 s=(n,t,e)=>t in n?c(n,t,{enumerable:!0,configura
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
  * @license https://www.elastic.co/licensing/elastic-license 
- */class i{constructor(t,e){o(this,"setupStripe",()=>{this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key);let t=this.stripe.elements();var e={style:{base:{padding:"10px 12px",color:"#32325d",fontSize:"16px","::placeholder":{color:"#aab7c4"}}}};return this.p24bank=t.create("p24Bank",e),this.p24bank.mount("#p24-bank-element"),this});o(this,"handle",()=>{document.getElementById("pay-now").addEventListener("click",t=>{let e=document.getElementById("errors");if(document.getElementById("p24-name").value===""){document.getElementById("p24-name").focus(),e.textContent=document.querySelector("meta[name=translation-name-required]").content,e.hidden=!1;return}if(document.getElementById("p24-email-address").value===""){document.getElementById("p24-email-address").focus(),e.textContent=document.querySelector("meta[name=translation-email-required]").content,e.hidden=!1;return}if(!document.getElementById("p24-mandate-acceptance").checked){document.getElementById("p24-mandate-acceptance").focus(),e.textContent=document.querySelector("meta[name=translation-terms-required]").content,e.hidden=!1;return}document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmP24Payment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{p24:this.p24bank,billing_details:{name:document.getElementById("p24-name").value,email:document.getElementById("p24-email-address").value}},payment_method_options:{p24:{tos_shown_and_accepted:document.getElementById("p24-mandate-acceptance").checked}},return_url:document.querySelector('meta[name="return-url"]').content}).then(function(a){a.error?(e.textContent=a.error.message,e.hidden=!1,document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden")):a.paymentIntent.status==="succeeded"&&(window.location=document.querySelector('meta[name="return-url"]').content)})})});this.key=t,this.errors=document.getElementById("errors"),this.stripeConnect=e}}function r(){var e,a;const n=((e=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:e.content)??"",t=((a=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:a.content)??"";new i(n,t).setupStripe().handle()}d()?r():m("#stripe-przelewy24-payment").then(()=>r());
+ */class i{constructor(t,e){r(this,"setupStripe",()=>{this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key);let t=this.stripe.elements();var e={style:{base:{padding:"10px 12px",color:"#32325d",fontSize:"16px","::placeholder":{color:"#aab7c4"}}}};return this.p24bank=t.create("p24Bank",e),this.p24bank.mount("#p24-bank-element"),this});r(this,"handle",()=>{document.getElementById("pay-now").addEventListener("click",t=>{let e=document.getElementById("errors");if(document.getElementById("p24-name").value===""){document.getElementById("p24-name").focus(),e.textContent=document.querySelector("meta[name=translation-name-required]").content,e.hidden=!1;return}if(document.getElementById("p24-email-address").value===""){document.getElementById("p24-email-address").focus(),e.textContent=document.querySelector("meta[name=translation-email-required]").content,e.hidden=!1;return}if(!document.getElementById("p24-mandate-acceptance").checked){document.getElementById("p24-mandate-acceptance").focus(),e.textContent=document.querySelector("meta[name=translation-terms-required]").content,e.hidden=!1;return}document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmP24Payment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{p24:this.p24bank,billing_details:{name:document.getElementById("p24-name").value,email:document.getElementById("p24-email-address").value}},payment_method_options:{p24:{tos_shown_and_accepted:document.getElementById("p24-mandate-acceptance").checked}},return_url:document.querySelector('meta[name="return-url"]').content}).then(function(a){a.error?(e.textContent=a.error.message,e.hidden=!1,document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden")):a.paymentIntent.status==="succeeded"&&(window.location=document.querySelector('meta[name="return-url"]').content)})})});this.key=t,this.errors=document.getElementById("errors"),this.stripeConnect=e}}function o(){var e,a;const n=((e=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:e.content)??"",t=((a=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:a.content)??"";new i(n,t).setupStripe().handle()}s()?o():c("#stripe-przelewy24-payment").then(()=>o());s()?o():c("#stripe-przelewy24-payment").then(()=>o());
diff --git a/public/build/assets/stripe-sepa-23154322.js b/public/build/assets/stripe-sepa-23154322.js
new file mode 100644
index 000000000000..7f05ad082dd7
--- /dev/null
+++ b/public/build/assets/stripe-sepa-23154322.js
@@ -0,0 +1,9 @@
+var i=Object.defineProperty;var l=(a,e,t)=>e in a?i(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var r=(a,e,t)=>(l(a,typeof e!="symbol"?e+"":e,t),t);import{i as s,w as c}from"./wait-8f4ae121.js";/**
+ * 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 d{constructor(e,t){r(this,"setupStripe",()=>{this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key);const e=this.stripe.elements();var t={base:{color:"#32325d",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',fontSmoothing:"antialiased",fontSize:"16px","::placeholder":{color:"#aab7c4"},":-webkit-autofill":{color:"#32325d"}},invalid:{color:"#fa755a",iconColor:"#fa755a",":-webkit-autofill":{color:"#fa755a"}}},n={style:t,supportedCountries:["SEPA"],placeholderCountry:document.querySelector('meta[name="country"]').content};return this.iban=e.create("iban",n),this.iban.mount("#sepa-iban"),document.getElementById("sepa-name").value=document.querySelector("meta[name=client_name]").content,document.getElementById("sepa-email-address").value=document.querySelector("meta[name=client_email]").content,this});r(this,"handle",()=>{let e=document.getElementById("errors");Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",n=>{document.getElementById("stripe--payment-container").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=n.target.dataset.token})),document.getElementById("toggle-payment-with-new-bank-account").addEventListener("click",t=>{document.getElementById("stripe--payment-container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value=""}),document.getElementById("pay-now").addEventListener("click",t=>{if(document.querySelector("input[name=token]").value.length!==0)document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmSepaDebitPayment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:document.querySelector("input[name=token]").value}).then(n=>n.error?this.handleFailure(n.error.message):this.handleSuccess(n));else{if(document.getElementById("sepa-name").value===""){document.getElementById("sepa-name").focus(),e.textContent=document.querySelector("meta[name=translation-name-required]").content,e.hidden=!1;return}if(document.getElementById("sepa-email-address").value===""){document.getElementById("sepa-email-address").focus(),e.textContent=document.querySelector("meta[name=translation-email-required]").content,e.hidden=!1;return}if(!document.getElementById("sepa-mandate-acceptance").checked){e.textContent=document.querySelector("meta[name=translation-terms-required]").content,e.hidden=!1;return}document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmSepaDebitPayment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{sepa_debit:this.iban,billing_details:{name:document.getElementById("sepa-name").value,email:document.getElementById("sepa-email-address").value}}}).then(n=>n.error?this.handleFailure(n.error.message):this.handleSuccess(n))}})});this.key=e,this.errors=document.getElementById("errors"),this.stripeConnect=t}handleSuccess(e){document.querySelector('input[name="gateway_response"]').value=JSON.stringify(e.paymentIntent);let t=document.querySelector('input[name="token-billing-checkbox"]:checked');t&&(document.querySelector('input[name="store_card"]').value=t.value),document.querySelector("input[name=token]").value.length>2&&(document.querySelector('input[name="store_card"]').value=!1),document.getElementById("server-response").submit()}handleFailure(e){let t=document.getElementById("errors");t.textContent="",t.textContent=e,t.hidden=!1,document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden")}handleSuccess(e){document.querySelector('input[name="gateway_response"]').value=JSON.stringify(e.paymentIntent);let t=document.querySelector('input[name="token-billing-checkbox"]:checked');t&&(document.querySelector('input[name="store_card"]').value=t.value),document.getElementById("server-response").submit()}}function o(){var t,n;const a=((t=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:t.content)??"",e=((n=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:n.content)??"";new d(a,e).setupStripe().handle()}s()?o():c("#stripe-sepa-payment").then(()=>o());s()?o():c("#stripe-sepa-payment").then(()=>o());
diff --git a/public/build/assets/stripe-sofort-fbef42bb.js b/public/build/assets/stripe-sofort-92ec46e7.js
similarity index 61%
rename from public/build/assets/stripe-sofort-fbef42bb.js
rename to public/build/assets/stripe-sofort-92ec46e7.js
index a43c308c4190..b577c47f8799 100644
--- a/public/build/assets/stripe-sofort-fbef42bb.js
+++ b/public/build/assets/stripe-sofort-92ec46e7.js
@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var i=(n,e,t)=>e in n?c(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var r=(n,e,t)=>(i(n,typeof e!="symbol"?e+"":e,t),t);import{i as a,w as u}from"./wait-8f4ae121.js";/**
+var a=Object.defineProperty;var u=(n,e,t)=>e in n?a(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var o=(n,e,t)=>(u(n,typeof e!="symbol"?e+"":e,t),t);import{i as c,w as i}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 i=(n,e,t)=>e in n?c(n,e,{enumerable:!0,configura
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
  * @license https://www.elastic.co/licensing/elastic-license 
- */class m{constructor(e,t){r(this,"setupStripe",()=>(this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this));r(this,"handle",()=>{document.getElementById("pay-now").addEventListener("click",e=>{document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmSofortPayment(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})})});this.key=e,this.errors=document.getElementById("errors"),this.stripeConnect=t}}function s(){var t,o;const n=((t=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:t.content)??"",e=((o=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:o.content)??"";new m(n,e).setupStripe().handle()}a()?s():u("#stripe-sofort-payment").then(()=>s());
+ */class m{constructor(e,t){o(this,"setupStripe",()=>(this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this));o(this,"handle",()=>{document.getElementById("pay-now").addEventListener("click",e=>{document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),this.stripe.confirmSofortPayment(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})})});this.key=e,this.errors=document.getElementById("errors"),this.stripeConnect=t}}function r(){var t,s;const n=((t=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:t.content)??"",e=((s=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:s.content)??"";new m(n,e).setupStripe().handle()}c()?r():i("#stripe-sofort-payment").then(()=>r());c()?r():i("#stripe-sofort-payment").then(()=>r());
diff --git a/public/build/manifest.json b/public/build/manifest.json
index b78b8c954b7b..0891802e084f 100644
--- a/public/build/manifest.json
+++ b/public/build/manifest.json
@@ -83,7 +83,7 @@
     "src": "resources/js/clients/payments/braintree-credit-card.js"
   },
   "resources/js/clients/payments/braintree-paypal.js": {
-    "file": "assets/braintree-paypal-16e2f577.js",
+    "file": "assets/braintree-paypal-f78ad64b.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -91,7 +91,7 @@
     "src": "resources/js/clients/payments/braintree-paypal.js"
   },
   "resources/js/clients/payments/checkout-credit-card.js": {
-    "file": "assets/checkout-credit-card-fbe72284.js",
+    "file": "assets/checkout-credit-card-2cca8b36.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -99,7 +99,7 @@
     "src": "resources/js/clients/payments/checkout-credit-card.js"
   },
   "resources/js/clients/payments/eway-credit-card.js": {
-    "file": "assets/eway-credit-card-0119725d.js",
+    "file": "assets/eway-credit-card-150298fa.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -131,7 +131,7 @@
     "src": "resources/js/clients/payments/mollie-credit-card.js"
   },
   "resources/js/clients/payments/paytrace-credit-card.js": {
-    "file": "assets/paytrace-credit-card-7f87b811.js",
+    "file": "assets/paytrace-credit-card-d29797c1.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -139,7 +139,10 @@
     "src": "resources/js/clients/payments/paytrace-credit-card.js"
   },
   "resources/js/clients/payments/razorpay-aio.js": {
-    "file": "assets/razorpay-aio-3d02ff1d.js",
+    "file": "assets/razorpay-aio-f8e8c7f0.js",
+    "imports": [
+      "_wait-8f4ae121.js"
+    ],
     "isEntry": true,
     "src": "resources/js/clients/payments/razorpay-aio.js"
   },
@@ -181,7 +184,7 @@
     "src": "resources/js/clients/payments/stripe-alipay.js"
   },
   "resources/js/clients/payments/stripe-bacs.js": {
-    "file": "assets/stripe-bacs-c9a61b93.js",
+    "file": "assets/stripe-bacs-425cb13e.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -196,6 +199,14 @@
     "isEntry": true,
     "src": "resources/js/clients/payments/stripe-bancontact.js"
   },
+  "resources/js/clients/payments/stripe-bank-transfer.js": {
+    "file": "assets/stripe-bank-transfer-4ab58b35.js",
+    "imports": [
+      "_wait-8f4ae121.js"
+    ],
+    "isEntry": true,
+    "src": "resources/js/clients/payments/stripe-bank-transfer.js"
+  },
   "resources/js/clients/payments/stripe-becs.js": {
     "file": "assets/stripe-becs-483b1b23.js",
     "imports": [
@@ -245,7 +256,7 @@
     "src": "resources/js/clients/payments/stripe-giropay.js"
   },
   "resources/js/clients/payments/stripe-ideal.js": {
-    "file": "assets/stripe-ideal-95836518.js",
+    "file": "assets/stripe-ideal-2110e54f.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -253,7 +264,7 @@
     "src": "resources/js/clients/payments/stripe-ideal.js"
   },
   "resources/js/clients/payments/stripe-klarna.js": {
-    "file": "assets/stripe-klarna-93dcc6f1.js",
+    "file": "assets/stripe-klarna-0c59275f.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -261,7 +272,7 @@
     "src": "resources/js/clients/payments/stripe-klarna.js"
   },
   "resources/js/clients/payments/stripe-przelewy24.js": {
-    "file": "assets/stripe-przelewy24-5db060c5.js",
+    "file": "assets/stripe-przelewy24-07696bca.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -269,7 +280,7 @@
     "src": "resources/js/clients/payments/stripe-przelewy24.js"
   },
   "resources/js/clients/payments/stripe-sepa.js": {
-    "file": "assets/stripe-sepa-9ab85221.js",
+    "file": "assets/stripe-sepa-23154322.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -277,7 +288,7 @@
     "src": "resources/js/clients/payments/stripe-sepa.js"
   },
   "resources/js/clients/payments/stripe-sofort.js": {
-    "file": "assets/stripe-sofort-fbef42bb.js",
+    "file": "assets/stripe-sofort-92ec46e7.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
diff --git a/resources/js/clients/payments/braintree-credit-card.js b/resources/js/clients/payments/braintree-credit-card.js
index baa42ff71c88..b959706dc952 100644
--- a/resources/js/clients/payments/braintree-credit-card.js
+++ b/resources/js/clients/payments/braintree-credit-card.js
@@ -142,4 +142,4 @@ function boot() {
     new BraintreeCreditCard().handle();
 }
 
-instant() ? boot() : wait('#braintree-credit-card-payment', 'meta[name=client-token]').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#braintree-credit-card-payment', 'meta[name=client-token]').then(() => boot());
diff --git a/resources/js/clients/payments/braintree-paypal.js b/resources/js/clients/payments/braintree-paypal.js
index 5d1f1a3ed629..4f0a4965fd5b 100644
--- a/resources/js/clients/payments/braintree-paypal.js
+++ b/resources/js/clients/payments/braintree-paypal.js
@@ -88,6 +88,9 @@ class BraintreePayPal {
 
                     onApprove: function (data, actions) {
                         return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
+                            document.querySelector('#paypal-button')?.classList.add('hidden');
+                            document.querySelector('#paypal-spinner')?.classList.remove('hidden');
+
                             let tokenBillingCheckbox = document.querySelector(
                                 'input[name="token-billing-checkbox"]:checked'
                             );
@@ -125,4 +128,4 @@ function boot() {
     new BraintreePayPal().handle();
 }
 
-instant() ? boot() : wait('#braintree-paypal-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#braintree-paypal-payment').then(() => boot());
diff --git a/resources/js/clients/payments/checkout-credit-card.js b/resources/js/clients/payments/checkout-credit-card.js
index a3e3821405b8..ed07906efd48 100644
--- a/resources/js/clients/payments/checkout-credit-card.js
+++ b/resources/js/clients/payments/checkout-credit-card.js
@@ -5,7 +5,7 @@
  *
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
- * @license https://www.elastic.co/licensing/elastic-license 
+ * @license https://www.elastic.co/licensing/elastic-license
  */
 
 import { wait, instant } from '../wait';
@@ -15,56 +15,60 @@ class CheckoutCreditCard {
         this.tokens = [];
     }
 
-    mountFrames() {
-        console.log('Mount checkout frames..');
-    }
-
     handlePaymentUsingToken(e) {
         document.getElementById('checkout--container').classList.add('hidden');
-        document.getElementById('pay-now-with-token--container').classList.remove('hidden');
+        document
+            .getElementById('pay-now-with-token--container')
+            .classList.remove('hidden');
         document.getElementById('save-card--container').style.display = 'none';
 
-        document
-            .querySelector('input[name=token]')
-            .value = e.target.dataset.token;
+        document.querySelector('input[name=token]').value =
+            e.target.dataset.token;
     }
 
     handlePaymentUsingCreditCard(e) {
-        document.getElementById('checkout--container').classList.remove('hidden');
-        document.getElementById('pay-now-with-token--container').classList.add('hidden');
+        document
+            .getElementById('checkout--container')
+            .classList.remove('hidden');
+        document
+            .getElementById('pay-now-with-token--container')
+            .classList.add('hidden');
         document.getElementById('save-card--container').style.display = 'grid';
 
-        document
-            .querySelector('input[name=token]')
-            .value = '';
+        document.querySelector('input[name=token]').value = '';
 
         const payButton = document.getElementById('pay-button');
-        
-        const publicKey = document.querySelector('meta[name="public-key"]').content ?? '';
+
+        const publicKey =
+            document.querySelector('meta[name="public-key"]').content ?? '';
         const form = document.getElementById('payment-form');
 
         Frames.init(publicKey);
 
-        Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED, function (event) {
-            payButton.disabled = !Frames.isCardValid();
-        });
+        Frames.addEventHandler(
+            Frames.Events.CARD_VALIDATION_CHANGED,
+            function (event) {
+                payButton.disabled = !Frames.isCardValid();
+            }
+        );
 
-        Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, function (event) {
-            payButton.disabled = false;
-        });
+        Frames.addEventHandler(
+            Frames.Events.CARD_TOKENIZATION_FAILED,
+            function (event) {
+                payButton.disabled = false;
+            }
+        );
 
         Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, function (event) {
             payButton.disabled = true;
 
-            document.querySelector(
-                'input[name="gateway_response"]'
-            ).value = JSON.stringify(event);
+            document.querySelector('input[name="gateway_response"]').value =
+                JSON.stringify(event);
 
-            document.querySelector(
-                'input[name="store_card"]'
-            ).value = document.querySelector(
-                'input[name=token-billing-checkbox]:checked'
-            ).value;
+            document.querySelector('input[name="store_card"]').value =
+                document.querySelector(
+                    'input[name=token-billing-checkbox]:checked'
+                ).value;
 
             document.getElementById('server-response').submit();
         });
@@ -89,9 +93,11 @@ class CheckoutCreditCard {
     handle() {
         this.handlePaymentUsingCreditCard();
 
-        Array
-            .from(document.getElementsByClassName('toggle-payment-with-token'))
-            .forEach((element) => element.addEventListener('click', this.handlePaymentUsingToken));
+        Array.from(
+            document.getElementsByClassName('toggle-payment-with-token')
+        ).forEach((element) =>
+            element.addEventListener('click', this.handlePaymentUsingToken)
+        );
 
         document
             .getElementById('toggle-payment-with-credit-card')
diff --git a/resources/js/clients/payments/eway-credit-card.js b/resources/js/clients/payments/eway-credit-card.js
index e7efe4e98b9e..c4ba16b2d14c 100644
--- a/resources/js/clients/payments/eway-credit-card.js
+++ b/resources/js/clients/payments/eway-credit-card.js
@@ -433,6 +433,11 @@ class EwayRapid {
     completeAuthorization(event) {
         event.target.parentElement.disabled = true;
 
+        const button = document.getElementById('authorize-card');
+
+        button.querySelector('svg').classList.remove('hidden');
+        button.querySelector('span').classList.add('hidden');
+
         document.getElementById('server-response').submit();
     }
 
@@ -499,9 +504,14 @@ class EwayRapid {
                 });
         }
 
+        const payNowButton = document.getElementById('pay-now');
+
         document.getElementById('pay-now')?.addEventListener('click', (e) => {
             let tokenInput = document.querySelector('input[name=token]');
 
+            payNowButton.querySelector('svg').classList.remove('hidden');
+            payNowButton.querySelector('span').classList.add('hidden');
+
             if (tokenInput.value) {
                 return this.completePaymentUsingToken(e);
             }
@@ -515,4 +525,4 @@ function boot() {
     new EwayRapid().handle();
 }
 
-instant() ? boot() : wait('#eway-credit-card-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#eway-credit-card-payment').then(() => boot());
diff --git a/resources/js/clients/payments/forte-ach-payment.js b/resources/js/clients/payments/forte-ach-payment.js
index 2103a96a332b..8e50c5e2a2ba 100644
--- a/resources/js/clients/payments/forte-ach-payment.js
+++ b/resources/js/clients/payments/forte-ach-payment.js
@@ -8,7 +8,7 @@
  * @license https://opensource.org/licenses/AAL
  */
 
-import { wait, instant } from '../wait';
+import { wait, instant } from '../wait'; 
 
 class ForteAuthorizeACH {
     constructor(apiLoginId) {
@@ -79,9 +79,9 @@ function boot() {
     const apiLoginId = document.querySelector(
         'meta[name="forte-api-login-id"]'
     ).content;
-
+    
     /** @handle */
     new ForteAuthorizeACH(apiLoginId).handle();
 }
 
-instant() ? boot() : wait('#force-ach-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#force-ach-payment').then(() => boot());
diff --git a/resources/js/clients/payments/forte-credit-card-payment.js b/resources/js/clients/payments/forte-credit-card-payment.js
index 3cff32754fd5..c06fc7396793 100644
--- a/resources/js/clients/payments/forte-credit-card-payment.js
+++ b/resources/js/clients/payments/forte-credit-card-payment.js
@@ -96,4 +96,4 @@ function boot() {
     new ForteAuthorizeCard(apiLoginId).handle();
 }
 
-instant() ? boot() : wait('#forte-credit-card-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#forte-credit-card-payment').then(() => boot());
diff --git a/resources/js/clients/payments/mollie-credit-card.js b/resources/js/clients/payments/mollie-credit-card.js
index 75cd05925909..e81a2da34dbf 100644
--- a/resources/js/clients/payments/mollie-credit-card.js
+++ b/resources/js/clients/payments/mollie-credit-card.js
@@ -173,4 +173,4 @@ function boot() {
     new _Mollie().handle();
 }
 
-instant() ? boot() : wait('#mollie-credit-card-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot(): wait('#mollie-credit-card-payment').then(() => boot());
diff --git a/resources/js/clients/payments/paytrace-credit-card.js b/resources/js/clients/payments/paytrace-credit-card.js
index d951c7ec0e50..7d639bd2a3b1 100644
--- a/resources/js/clients/payments/paytrace-credit-card.js
+++ b/resources/js/clients/payments/paytrace-credit-card.js
@@ -124,6 +124,11 @@ class PayTraceCreditCard {
     }
 
     handlePaymentWithCreditCard(event) {
+        const button = document.getElementById('pay-now');
+
+        button.querySelector('svg').classList.remove('hidden');
+        button.querySelector('span').classList.add('hidden');
+
         event.target.parentElement.disabled = true;
         document.getElementById('errors').hidden = true;
 
@@ -134,6 +139,10 @@ class PayTraceCreditCard {
                 errorsContainer.textContent = errors[0].description;
                 errorsContainer.hidden = false;
 
+
+                button.querySelector('svg').classList.add('hidden');
+                button.querySelector('span').classList.remove('hidden');
+
                 return (event.target.parentElement.disabled = false);
             }
 
@@ -163,6 +172,9 @@ class PayTraceCreditCard {
                     ).textContent = JSON.stringify(error);
                     document.getElementById('errors').hidden = false;
 
+                    button.querySelector('svg').classList.add('hidden');
+                    button.querySelector('span').classList.remove('hidden');
+
                     console.log(error);
                 });
         });
@@ -171,6 +183,11 @@ class PayTraceCreditCard {
     handlePaymentWithToken(event) {
         event.target.parentElement.disabled = true;
 
+        const button = document.getElementById('pay-now');
+
+        button.querySelector('svg').classList.remove('hidden');
+        button.querySelector('span').classList.add('hidden');
+
         document.getElementById('server_response').submit();
     }
 
@@ -230,4 +247,4 @@ function boot() {
     new PayTraceCreditCard().handle();
 }
 
-instant() ? boot() : wait('#paytrace-credit-card-payment').then(() => boot())
\ No newline at end of file
+instant() ? boot() : wait('#paytrace-credit-card-payment').then(() => boot())
diff --git a/resources/js/clients/payments/razorpay-aio.js b/resources/js/clients/payments/razorpay-aio.js
index 4097b07fcbf9..42e8ae1313d1 100644
--- a/resources/js/clients/payments/razorpay-aio.js
+++ b/resources/js/clients/payments/razorpay-aio.js
@@ -8,29 +8,35 @@
  * @license https://www.elastic.co/licensing/elastic-license 
  */
 
-let options = JSON.parse(
-    document.querySelector('meta[name=razorpay-options]')?.content
-);
+import { wait, instant } from '../wait';
 
-options.handler = function (response) {
-    document.getElementById('razorpay_payment_id').value =
-        response.razorpay_payment_id;
-    document.getElementById('razorpay_signature').value =
-        response.razorpay_signature;
-    document.getElementById('server-response').submit();
-};
+function boot() {
+    let options = JSON.parse(
+        document.querySelector('meta[name=razorpay-options]')?.content
+    );
+    
+    options.handler = function (response) {
+        document.getElementById('razorpay_payment_id').value =
+            response.razorpay_payment_id;
+        document.getElementById('razorpay_signature').value =
+            response.razorpay_signature;
+        document.getElementById('server-response').submit();
+    };
+    
+    options.modal = {
+        ondismiss: function () {
+            payNowButton.disabled = false;
+        },
+    };
+    
+    let razorpay = new Razorpay(options);
+    let payNowButton = document.getElementById('pay-now');
+    
+    payNowButton.onclick = function (event) {
+        payNowButton.disabled = true;
+    
+        razorpay.open();
+    };
+}
 
-options.modal = {
-    ondismiss: function () {
-        payNowButton.disabled = false;
-    },
-};
-
-let razorpay = new Razorpay(options);
-let payNowButton = document.getElementById('pay-now');
-
-payNowButton.onclick = function (event) {
-    payNowButton.disabled = true;
-
-    razorpay.open();
-};
+instant() ? boot() : wait('#razorpay-hosted-payment').then(() => boot());
diff --git a/resources/js/clients/payments/stripe-acss.js b/resources/js/clients/payments/stripe-acss.js
index a04c50e3799a..da842c84be95 100644
--- a/resources/js/clients/payments/stripe-acss.js
+++ b/resources/js/clients/payments/stripe-acss.js
@@ -149,10 +149,10 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessACSS(publishableKey, stripeConnect).setupStripe().handle();
 }
 
diff --git a/resources/js/clients/payments/stripe-alipay.js b/resources/js/clients/payments/stripe-alipay.js
index 288b0c2acabf..6a00310fcae9 100644
--- a/resources/js/clients/payments/stripe-alipay.js
+++ b/resources/js/clients/payments/stripe-alipay.js
@@ -48,9 +48,10 @@ class ProcessAlipay {
                     document.querySelector('meta[name=ci_intent]').content,
                     {
                         // Return URL where the customer should be redirected after the authorization
-                        return_url: `${document.querySelector('meta[name=return_url]')
+                        return_url: `${
+                            document.querySelector('meta[name=return_url]')
                                 .content
-                            }`,
+                        }`,
                     }
                 );
 
@@ -82,4 +83,4 @@ function boot() {
     new ProcessAlipay(publishableKey, stripeConnect).setupStripe().handle();
 }
 
-instant() ? boot() : wait('#stripe-alipay-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#stripe-alipay-payment').then(() => boot());
diff --git a/resources/js/clients/payments/stripe-bacs.js b/resources/js/clients/payments/stripe-bacs.js
index 6deb63a26128..561fb515b668 100644
--- a/resources/js/clients/payments/stripe-bacs.js
+++ b/resources/js/clients/payments/stripe-bacs.js
@@ -11,7 +11,7 @@
 import { instant, wait } from '../wait';
 
 class ProcessBACS {
-    constructor(key, stripeConnect) {
+    constructor(key, stripeConnect, onlyAuthorization) {
         this.key = key;
         this.errors = document.getElementById('errors');
         this.stripeConnect = stripeConnect;
@@ -84,13 +84,13 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
     const onlyAuthorization =
         document.querySelector('meta[name="only-authorization"]')?.content ?? '';
-
-    new ProcessBACS(publishableKey, stripeConnect).setupStripe().handle();
+    
+    new ProcessBACS(publishableKey, stripeConnect, onlyAuthorization).setupStripe().handle();
 }
 
-instant() ? boot() : wait('#stripe-bacs-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#stripe-bacs-payment').then(() => boot());
diff --git a/resources/js/clients/payments/stripe-bancontact.js b/resources/js/clients/payments/stripe-bancontact.js
index 894298eeb321..74ad70cddf46 100644
--- a/resources/js/clients/payments/stripe-bancontact.js
+++ b/resources/js/clients/payments/stripe-bancontact.js
@@ -69,11 +69,11 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessBANCONTACTPay(publishableKey, stripeConnect).setupStripe().handle();
 }
 
-instant() ? boot() : wait('#stripe-bancontact-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#stripe-bancontact-payment').then(() => boot());
diff --git a/resources/js/clients/payments/stripe-becs.js b/resources/js/clients/payments/stripe-becs.js
index 3b41ab4c6841..b463e1014813 100644
--- a/resources/js/clients/payments/stripe-becs.js
+++ b/resources/js/clients/payments/stripe-becs.js
@@ -141,11 +141,11 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessBECS(publishableKey, stripeConnect).setupStripe().handle();
 }
 
-instant() ? boot() : wait('#stripe-becs-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#stripe-becs-payment').then(() => boot());
diff --git a/resources/js/clients/payments/stripe-browserpay.js b/resources/js/clients/payments/stripe-browserpay.js
index 73fdaef53981..ad53816f4ccd 100644
--- a/resources/js/clients/payments/stripe-browserpay.js
+++ b/resources/js/clients/payments/stripe-browserpay.js
@@ -148,4 +148,4 @@ function boot() {
     new StripeBrowserPay().handle()
 }
 
-instant() ? boot() : wait('#stripe-browserpay-payment').then(() => boot())
\ No newline at end of file
+instant() ? boot() : wait('#stripe-browserpay-payment').then(() => boot())
diff --git a/resources/js/clients/payments/stripe-credit-card.js b/resources/js/clients/payments/stripe-credit-card.js
index ea642a1b830d..eb60acde543d 100644
--- a/resources/js/clients/payments/stripe-credit-card.js
+++ b/resources/js/clients/payments/stripe-credit-card.js
@@ -250,4 +250,4 @@ function boot() {
     s.handle();
 }
 
-instant() ? boot() : wait('#stripe-credit-card-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#stripe-credit-card-payment').then(() => boot());
diff --git a/resources/js/clients/payments/stripe-eps.js b/resources/js/clients/payments/stripe-eps.js
index 09d6af44ac3c..08e238f945ee 100644
--- a/resources/js/clients/payments/stripe-eps.js
+++ b/resources/js/clients/payments/stripe-eps.js
@@ -86,11 +86,11 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessEPSPay(publishableKey, stripeConnect).setupStripe().handle();
 }
 
-instant() ? boot() : wait('#stripe-eps-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#stripe-eps-payment').then(() => boot());
diff --git a/resources/js/clients/payments/stripe-fpx.js b/resources/js/clients/payments/stripe-fpx.js
index 54a48ec434b4..2a6b1cb76301 100644
--- a/resources/js/clients/payments/stripe-fpx.js
+++ b/resources/js/clients/payments/stripe-fpx.js
@@ -87,11 +87,11 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessFPXPay(publishableKey, stripeConnect).setupStripe().handle();
 }
 
-instant() ? boot() : wait('#stripe-fpx-payment').then(() => boot());
\ No newline at end of file
+instant() ? boot() : wait('#stripe-fpx-payment').then(() => boot());
diff --git a/resources/js/clients/payments/stripe-giropay.js b/resources/js/clients/payments/stripe-giropay.js
index cfeaedf8f4bf..7ab942de8376 100644
--- a/resources/js/clients/payments/stripe-giropay.js
+++ b/resources/js/clients/payments/stripe-giropay.js
@@ -70,10 +70,10 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessGiroPay(publishableKey, stripeConnect).setupStripe().handle();
 }
 
diff --git a/resources/js/clients/payments/stripe-ideal.js b/resources/js/clients/payments/stripe-ideal.js
index 842ee08ff527..9831341370a2 100644
--- a/resources/js/clients/payments/stripe-ideal.js
+++ b/resources/js/clients/payments/stripe-ideal.js
@@ -8,7 +8,7 @@
  * @license https://www.elastic.co/licensing/elastic-license 
  */
 
-import { wait, instant } from '../wait';
+import { wait, instant } from '../wait';    
 
 class ProcessIDEALPay {
     constructor(key, stripeConnect) {
@@ -87,11 +87,13 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessIDEALPay(publishableKey, stripeConnect).setupStripe().handle();
 }
 
+instant() ? boot() : wait('#stripe-ideal-payment').then(() => boot());
+
 instant() ? boot() : wait('#stripe-ideal-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/stripe-klarna.js b/resources/js/clients/payments/stripe-klarna.js
index c8dd78d40667..f81d95f080ac 100644
--- a/resources/js/clients/payments/stripe-klarna.js
+++ b/resources/js/clients/payments/stripe-klarna.js
@@ -98,11 +98,13 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessKlarna(publishableKey, stripeConnect).setupStripe().handle();
 }
 
+instant() ? boot() : wait('#stripe-klarna-payment').then(() => boot());
+
 instant() ? boot() : wait('#stripe-klarna-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/stripe-przelewy24.js b/resources/js/clients/payments/stripe-przelewy24.js
index a3e8c9ebd360..6119ea7492fd 100644
--- a/resources/js/clients/payments/stripe-przelewy24.js
+++ b/resources/js/clients/payments/stripe-przelewy24.js
@@ -119,11 +119,13 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
+    
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
     new ProcessPRZELEWY24(publishableKey, stripeConnect).setupStripe().handle();
 }
 
+instant() ? boot() : wait('#stripe-przelewy24-payment').then(() => boot());
+
 instant() ? boot() : wait('#stripe-przelewy24-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/stripe-sepa.js b/resources/js/clients/payments/stripe-sepa.js
index 2e1383fe5f28..d7f871c5843e 100644
--- a/resources/js/clients/payments/stripe-sepa.js
+++ b/resources/js/clients/payments/stripe-sepa.js
@@ -149,13 +149,10 @@ class ProcessSEPA {
                     return;
                 }
 
-
                 document.getElementById('pay-now').disabled = true;
                 document.querySelector('#pay-now > svg').classList.remove('hidden');
                 document.querySelector('#pay-now > span').classList.add('hidden');
 
-
-
                 this.stripe
                     .confirmSepaDebitPayment(
                         document.querySelector('meta[name=pi-client-secret')
@@ -238,7 +235,7 @@ class ProcessSEPA {
 function boot() {
     const publishableKey =
         document.querySelector('meta[name="stripe-publishable-key"]')?.content ??
-        '';
+    '';
 
     const stripeConnect =
         document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
@@ -246,4 +243,6 @@ function boot() {
     new ProcessSEPA(publishableKey, stripeConnect).setupStripe().handle();
 }
 
+instant() ? boot() : wait('#stripe-sepa-payment').then(() => boot());
+
 instant() ? boot() : wait('#stripe-sepa-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/stripe-sofort.js b/resources/js/clients/payments/stripe-sofort.js
index 0f678b21f92d..c1bfd7f1e105 100644
--- a/resources/js/clients/payments/stripe-sofort.js
+++ b/resources/js/clients/payments/stripe-sofort.js
@@ -64,11 +64,13 @@ function boot() {
     const publishableKey = document.querySelector(
         'meta[name="stripe-publishable-key"]'
     )?.content ?? '';
-
-    const stripeConnect =
-        document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
-
+    
+    const stripeConnect = 
+        document.querySelector('meta[name="stripe-account-id"]')?.content ?? ''; 
+    
     new ProcessSOFORT(publishableKey, stripeConnect).setupStripe().handle();
 }
 
+instant() ? boot() : wait('#stripe-sofort-payment').then(() => boot());
+
 instant() ? boot() : wait('#stripe-sofort-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/flow2/payment-method.blade.php b/resources/views/portal/ninja2020/flow2/payment-method.blade.php
index a1b8ecb2ebdd..ec43a8bd4165 100644
--- a/resources/views/portal/ninja2020/flow2/payment-method.blade.php
+++ b/resources/views/portal/ninja2020/flow2/payment-method.blade.php
@@ -62,4 +62,4 @@
         });
     </script>
     @endscript
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/portal/ninja2020/flow2/required-fields.blade.php b/resources/views/portal/ninja2020/flow2/required-fields.blade.php
index 30b06e893555..d5446753c50b 100644
--- a/resources/views/portal/ninja2020/flow2/required-fields.blade.php
+++ b/resources/views/portal/ninja2020/flow2/required-fields.blade.php
@@ -58,4 +58,4 @@
             </div>
         </form>
     @endif
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/portal/ninja2020/gateways/authorize/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/authorize/credit_card/pay.blade.php
index c74cdaee0668..b8fef635ce60 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/credit_card/pay.blade.php
@@ -3,6 +3,7 @@
 @section('gateway_head')
     <meta name="authorize-public-key" content="{{ $public_client_id }}">
     <meta name="authorize-login-id" content="{{ $api_login_id }}">
+    <meta name="instant-payment" content="yes" />
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <meta name="authnet-require-cvv" content="{{ $gateway->company_gateway->require_cvv }}">
diff --git a/resources/views/portal/ninja2020/gateways/braintree/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/braintree/credit_card/pay.blade.php
index e9f1c44f9b4c..771a5f3e5530 100644
--- a/resources/views/portal/ninja2020/gateways/braintree/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/braintree/credit_card/pay.blade.php
@@ -2,6 +2,7 @@
 
 @section('gateway_head')
     <meta name="client-token" content="{{ $client_token ?? '' }}"/>
+    <meta name="instant-payment" content="yes" />
 
     <script src='https://js.braintreegateway.com/web/dropin/1.33.4/js/dropin.min.js'></script>
     {{-- <script src="https://js.braintreegateway.com/web/3.76.2/js/client.min.js"></script> --}}
diff --git a/resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php b/resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php
index d83b2ea496bb..b1ee5eadb370 100644
--- a/resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php
@@ -2,6 +2,7 @@
 
 @section('gateway_head')
     <meta name="client-token" content="{{ $client_token ?? '' }}"/>
+    <meta name="instant-payment" content="yes" />
 
     <script src="https://js.braintreegateway.com/web/3.76.2/js/client.min.js"></script>
     <script src="https://js.braintreegateway.com/web/3.76.2/js/paypal-checkout.min.js"></script>
diff --git a/resources/views/portal/ninja2020/gateways/eway/pay.blade.php b/resources/views/portal/ninja2020/gateways/eway/pay.blade.php
index 3f0cc9c788a1..98c7805b886c 100644
--- a/resources/views/portal/ninja2020/gateways/eway/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/eway/pay.blade.php
@@ -7,6 +7,7 @@ ctrans('texts.credit_card')])
     <meta name="translation-expiry_date" content="{{ ctrans('texts.date') }}">
     <meta name="translation-card_number" content="{{ ctrans('texts.card_number') }}">
     <meta name="translation-cvv" content="{{ ctrans('texts.cvv') }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
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 8dfab33c4269..89d1a308f20a 100644
--- a/resources/views/portal/ninja2020/gateways/forte/ach/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/forte/ach/pay.blade.php
@@ -2,6 +2,7 @@
 
 @section('gateway_head')
     <meta name="forte-api-login-id" content="{{$gateway->company_gateway->getConfigField("apiLoginId")}}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
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 3c7b389c7ad0..bfc291f2415f 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
@@ -2,6 +2,8 @@
 
 @section('gateway_head')
     <meta name="forte-api-login-id" content="{{$gateway->company_gateway->getConfigField("apiLoginId")}}">
+    <meta name="instant-payment" content="yes" />
+
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 @endsection
 
diff --git a/resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php
index 8939c3b2cdf1..a3809360716e 100644
--- a/resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php
@@ -4,6 +4,7 @@ ctrans('texts.credit_card')])
 @section('gateway_head')
     <meta name="mollie-testmode" content="{{ $gateway->company_gateway->getConfigField('testMode') }}">
     <meta name="mollie-profileId" content="{{ $gateway->company_gateway->getConfigField('profileId') }}">
+    <meta name="instant-payment" content="yes">
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     
diff --git a/resources/views/portal/ninja2020/gateways/payfast/pay.blade.php b/resources/views/portal/ninja2020/gateways/payfast/pay.blade.php
index 742622dff8a5..73c40893278a 100644
--- a/resources/views/portal/ninja2020/gateways/payfast/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/payfast/pay.blade.php
@@ -3,6 +3,7 @@
 @section('gateway_head')
     <meta name="contact-email" content="{{ $contact->email }}">
     <meta name="client-postal-code" content="{{ $contact->client->postal_code }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/paytrace/pay.blade.php b/resources/views/portal/ninja2020/gateways/paytrace/pay.blade.php
index 582954aa3667..85e8caaf7653 100644
--- a/resources/views/portal/ninja2020/gateways/paytrace/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/paytrace/pay.blade.php
@@ -6,6 +6,7 @@
     <meta name="ctrans-cvv" content="{{ ctrans('texts.cvv') }}">
     <meta name="ctrans-card_number" content="{{ ctrans('texts.card_number') }}">
     <meta name="ctrans-expires" content="{{ ctrans('texts.expires') }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/razorpay/hosted/pay.blade.php b/resources/views/portal/ninja2020/gateways/razorpay/hosted/pay.blade.php
index c5c130ef84cf..1da5150f4aa7 100644
--- a/resources/views/portal/ninja2020/gateways/razorpay/hosted/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/razorpay/hosted/pay.blade.php
@@ -3,6 +3,7 @@ ctrans('texts.aio_checkout')])
 
 @section('gateway_head')
     <meta name="razorpay-options" content="{{ \json_encode($options) }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php
index f4841afd7295..a5512001bec7 100644
--- a/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php
@@ -7,6 +7,8 @@
     <meta name="square_contact" content="{{ json_encode($square_contact) }}">
     <meta name="amount" content="{{ $amount }}">
     <meta name="currencyCode" content="{{ $currencyCode }}">
+    <meta name="instant-payment" content="yes" />
+
    <style>
     .loader {
       border-top-color: #3498db;
diff --git a/resources/views/portal/ninja2020/gateways/stripe/acss/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/acss/pay.blade.php
index 0a6cbc457baf..aa4c7f6b7848 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/acss/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/acss/pay.blade.php
@@ -8,7 +8,7 @@
     @else
         <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
     @endif
-
+    <meta name="instant-payment" content="yes" />
     <meta name="return-url" content="{{ $return_url }}">
     <meta name="amount" content="{{ $stripe_amount }}">
     <meta name="country" content="{{ $country }}">
@@ -60,5 +60,4 @@
 @push('footer')
     <script src="https://js.stripe.com/v3/"></script>
     @vite('resources/js/clients/payments/stripe-acss.js')
- 
 @endpush
diff --git a/resources/views/portal/ninja2020/gateways/stripe/alipay/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/alipay/pay.blade.php
index 91df047a272f..3a6eb09734e6 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/alipay/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/alipay/pay.blade.php
@@ -7,9 +7,10 @@
     @else
     <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
     @endif
+
     <meta name="return_url" content="{{ $return_url }}">
     <meta name="ci_intent" content="{{ $ci_intent }}">
-    
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/applepay/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/applepay/pay.blade.php
index 76e72631df7c..86d7ce25292e 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/applepay/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/applepay/pay.blade.php
@@ -1,7 +1,7 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Apple Pay', 'card_title' => 'Apple Pay'])
 
 @section('gateway_head')
-
+  <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
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 40e57f291cce..bcba5932da74 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/bacs/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/bacs/pay.blade.php
@@ -9,6 +9,7 @@
     @endif
     <meta name="only-authorization" content="">
     <meta name="translation-payment-method-required" content="{{ ctrans('texts.missing_payment_method') }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/bancontact/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/bancontact/pay.blade.php
index 91ea5ee9cc58..4d9e56fc8466 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/bancontact/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/bancontact/pay.blade.php
@@ -17,6 +17,8 @@
     <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
 
     <meta name="translation-name-required" content="{{ ctrans('texts.missing_account_holder_name') }}">
+
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/bank_transfer/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/bank_transfer/pay.blade.php
index 22ee4a045e03..96546a645427 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/bank_transfer/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/bank_transfer/pay.blade.php
@@ -8,7 +8,7 @@
         <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
     @endif
         <meta name="viewport" content="width=device-width, minimum-scale=1" />
-
+        <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/becs/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/becs/pay.blade.php
index 82f23cea9d77..cf3bb0ecfa34 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/becs/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/becs/pay.blade.php
@@ -17,6 +17,8 @@
     <meta name="translation-name-required" content="{{ ctrans('texts.missing_account_holder_name') }}">
     <meta name="translation-email-required" content="{{ ctrans('texts.provide_email') }}">
     <meta name="translation-terms-required" content="{{ ctrans('texts.you_need_to_accept_the_terms_before_proceeding') }}">
+    
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/browser_pay/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/browser_pay/pay.blade.php
index 7bbae14bb70a..4d4006948553 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/browser_pay/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/browser_pay/pay.blade.php
@@ -11,6 +11,8 @@
     <meta name="stripe-pi-client-secret" content="{{ $pi_client_secret }}">
     <meta name="no-available-methods" content="{{ json_encode(ctrans('texts.no_available_methods')) }}">
     <meta name="payment-request-data" content="{{ json_encode($payment_request_data) }}">
+
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php
index 9042dc94d991..0d0290ff39b0 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php
@@ -27,6 +27,8 @@
     <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="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/eps/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/eps/pay.blade.php
index 80995e0653c8..c8597ffa1d83 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/eps/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/eps/pay.blade.php
@@ -16,6 +16,7 @@
     <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
 
     <meta name="translation-name-required" content="{{ ctrans('texts.missing_account_holder_name') }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/fpx/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/fpx/pay.blade.php
index a1ea200ab23d..bc6c6e1d2055 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/fpx/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/fpx/pay.blade.php
@@ -14,6 +14,8 @@
     <meta name="country" content="{{ $country }}">
     <meta name="customer" content="{{ $customer }}">
     <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
+
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/giropay/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/giropay/pay.blade.php
index f4996bb3db36..840da07f0e65 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/giropay/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/giropay/pay.blade.php
@@ -14,6 +14,7 @@
     <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
 
     <meta name="translation-terms-required" content="{{ ctrans('texts.you_need_to_accept_the_terms_before_proceeding') }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/ideal/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/ideal/pay.blade.php
index b0ac53a3e19e..df9dd614fe71 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/ideal/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/ideal/pay.blade.php
@@ -14,6 +14,7 @@
     <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
 
     <meta name="translation-name-required" content="{{ ctrans('texts.missing_account_holder_name') }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/klarna/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/klarna/pay.blade.php
index 2d6d9de448f5..8f37c8de1fdd 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/klarna/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/klarna/pay.blade.php
@@ -19,6 +19,7 @@
     <meta name="postal_code" content="{{ $gateway->client->postal_code }}">
     <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
     <meta name="translation-name-without-special-characters" content="{{ ctrans('texts.name_without_special_characters') }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/przelewy24/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/przelewy24/pay.blade.php
index dc5194b1a788..d0f86186c263 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/przelewy24/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/przelewy24/pay.blade.php
@@ -16,6 +16,7 @@
     <meta name="translation-name-required" content="{{ ctrans('texts.missing_account_holder_name') }}">
     <meta name="translation-email-required" content="{{ ctrans('texts.provide_email') }}">
     <meta name="translation-terms-required" content="{{ ctrans('texts.you_need_to_accept_the_terms_before_proceeding') }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/sepa/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/sepa/pay.blade.php
index 9dbdca625c49..ea06ccf0f42d 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/sepa/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/sepa/pay.blade.php
@@ -18,6 +18,8 @@
     <meta name="translation-name-required" content="{{ ctrans('texts.missing_account_holder_name') }}">
     <meta name="translation-email-required" content="{{ ctrans('texts.provide_email') }}">
     <meta name="translation-terms-required" content="{{ ctrans('texts.you_need_to_accept_the_terms_before_proceeding') }}">
+
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
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 312b9242ddd4..02dab2c565e4 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
@@ -15,6 +15,7 @@
     <meta name="country" content="{{ $country }}">
     <meta name="customer" content="{{ $customer }}">
     <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
diff --git a/vite.config.ts b/vite.config.ts
index e602646138e9..2536460c80f7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -51,6 +51,7 @@ export default defineConfig({
             'resources/js/clients/payments/stripe-browserpay.js',
             'resources/js/clients/payments/stripe-fpx.js',
             'resources/js/clients/payments/stripe-ach-pay.js',
+            'resources/js/clients/payments/stripe-bank-transfer.js',
             'resources/js/clients/payment_methods/authorize-stripe-acss.js',
         ]),
         viteStaticCopy({