diff --git a/app/Livewire/Flow2/ProcessPayment.php b/app/Livewire/Flow2/ProcessPayment.php
index 241fa5505838..6feac3848654 100644
--- a/app/Livewire/Flow2/ProcessPayment.php
+++ b/app/Livewire/Flow2/ProcessPayment.php
@@ -12,21 +12,37 @@
 
 namespace App\Livewire\Flow2;
 
+use App\Exceptions\PaymentFailed;
 use Livewire\Component;
 use App\Libraries\MultiDB;
+use App\Models\CompanyGateway;
 use App\Models\InvoiceInvitation;
 use App\Services\ClientPortal\InstantPayment;
+use App\Services\ClientPortal\LivewireInstantPayment;
 
 class ProcessPayment extends Component
 {
 
     public $context;
 
+    private string $component_view = '';
+
+    private array $payment_data_payload = [];
+
+    public $isLoading = true;
+
+
+    // public function toJSON()
+    // {
+    //     nlog("why");
+    // }
+
     public function mount()
     {
+        // $this->loadData();
     }
 
-    public function render()
+    public function boot()
     {
 
         MultiDB::setDb($this->context['invoice']->company->db);
@@ -38,15 +54,78 @@ class ProcessPayment extends Component
             'payment_method_id' => $this->context['gateway_type_id'],
             'payable_invoices' => [$this->context['payable_invoices']],
             'signature' => isset($this->context['signature']) ? $this->context['signature'] : false,
-            'contact_first_name' => $invitation->contact->first_name ?? '',
-            'contact_last_name' => $invitation->contact->last_name ?? '',
-            'contact_email' => $invitation->contact->email ?? ''
+            'signature_ip' => isset($this->context['signature_ip']) ? $this->context['signature_ip'] : false,
+            'pre_payment' => false,
+            'frequency_id' => false,
+            'remaining_cycles' => false,
+            'is_recurring' => false,
+            'hash' => false,
         ];
 
-        request()->replace($data);
+        $responder_data = (new LivewireInstantPayment($data))->run();
 
-        return (new InstantPayment(request()))->run();
+        $company_gateway = CompanyGateway::find($this->context['company_gateway_id']);
+        
+        $this->component_view = '';
 
-        // return render($view->view, $view->data);
+        if(!$responder_data['success'])
+            throw new PaymentFailed($responder_data['error'], 400);
+
+        $driver = $company_gateway
+                ->driver($invitation->contact->client)
+                ->setPaymentMethod($data['payment_method_id'])
+                ->setPaymentHash($responder_data['payload']['ph']);
+
+        $payment_data = $driver->processPaymentViewData($responder_data['payload']);
+        $payment_data['client_secret'] = $payment_data['intent']->client_secret;
+
+        unset($payment_data['intent']);
+
+        $token_billing_string = 'true';
+
+        if($company_gateway->token_billing == 'off' || $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';
+        }
+
+        $payment_data['token_billing_string'] = $token_billing_string;
+        
+        $this->payment_data_payload = $payment_data;
+        // $this->payment_data_payload['company_gateway'] = $company_gateway;
+
+        $this->payment_data_payload =
+        [
+            'stripe_account_id' => $this->payment_data_payload['company_gateway']->getConfigField('account_id'),
+            'publishable_key' => $this->payment_data_payload['company_gateway']->getPublishableKey(),
+            'require_postal_code' => $this->payment_data_payload['company_gateway']->require_postal_code,
+            'gateway' => $this->payment_data_payload['gateway'],
+            'client' => $this->payment_data_payload['client'],
+            'payment_method_id' => $this->payment_data_payload['payment_method_id'],
+            'token_billing_string' => $this->payment_data_payload['token_billing_string'],
+            'tokens' => $this->payment_data_payload['tokens'],
+            'client_secret' => $this->payment_data_payload['client_secret'],
+            'payment_hash' => $this->payment_data_payload['payment_hash'],
+            'total' => $this->payment_data_payload['total'],
+            'invoices' => $this->payment_data_payload['invoices'],
+            'amount_with_fee' => $this->payment_data_payload['amount_with_fee'],
+            'pre_payment' => $this->payment_data_payload['pre_payment'],
+            'is_recurring' => $this->payment_data_payload['is_recurring'],
+            'company_gateway' => $this->payment_data_payload['company_gateway'],
+        ];
+
+        // nlog(array_keys($this->payment_data_payload));
+        
+        $this->isLoading = false;
+
+    }
+
+    public function render()
+    {
+
+        if(!$this->isLoading)
+            return render('gateways.stripe.credit_card.livewire_pay', $this->payment_data_payload);
     }
 }
diff --git a/app/PaymentDrivers/Stripe/CreditCard.php b/app/PaymentDrivers/Stripe/CreditCard.php
index 3fbed359327d..4ba138f7ad69 100644
--- a/app/PaymentDrivers/Stripe/CreditCard.php
+++ b/app/PaymentDrivers/Stripe/CreditCard.php
@@ -57,8 +57,16 @@ class CreditCard
         return redirect()->route('client.payment_methods.index');
     }
 
-    public function paymentView(array $data)
+    public function paymentData(array $data)
     {
+        $data = $this->getData($data);
+        
+        return $data;
+    }
+
+    private function getData(array $data): array
+    {
+        
         $description = $this->stripe->getDescription(false);
 
         $payment_intent_data = [
@@ -77,6 +85,13 @@ class CreditCard
         $data['intent'] = $this->stripe->createPaymentIntent($payment_intent_data);
         $data['gateway'] = $this->stripe;
 
+        return $data;
+    }
+
+    public function paymentView(array $data)
+    {
+        $data = $this->getData($data);
+
         return render('gateways.stripe.credit_card.pay', $data);
     }
 
diff --git a/app/PaymentDrivers/StripePaymentDriver.php b/app/PaymentDrivers/StripePaymentDriver.php
index cb3b0584d4e6..17eb08c9acf9 100644
--- a/app/PaymentDrivers/StripePaymentDriver.php
+++ b/app/PaymentDrivers/StripePaymentDriver.php
@@ -418,6 +418,11 @@ class StripePaymentDriver extends BaseDriver
         return $this->payment_method->paymentView($data);
     }
 
+    public function processPaymentViewData(array $data): array
+    {
+        return $this->payment_method->paymentData($data);
+    }
+
     public function processPaymentResponse($request)
     {
         return $this->payment_method->paymentResponse($request);
diff --git a/app/Services/ClientPortal/LivewireInstantPayment.php b/app/Services/ClientPortal/LivewireInstantPayment.php
index 7f7e3757afca..328293248541 100644
--- a/app/Services/ClientPortal/LivewireInstantPayment.php
+++ b/app/Services/ClientPortal/LivewireInstantPayment.php
@@ -305,6 +305,7 @@ class LivewireInstantPayment
         ];
 
         $data = [
+            'ph' => $payment_hash,
             'payment_hash' => $payment_hash->hash,
             'total' => $totals,
             'invoices' => $payable_invoices,
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php
new file mode 100644
index 000000000000..9e6385828435
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php
@@ -0,0 +1,94 @@
+<style>
+    .spinner {
+        /* Simple spinner styling */
+        border: 4px solid rgba(0, 0, 0, 0.1);
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        border-left-color: #09f;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+</style>
+
+<div>
+
+
+
+    @if($stripe_account_id)
+        <meta name="stripe-account-id" content="{{ $stripe_account_id }}">
+        <meta name="stripe-publishable-key" content="{{ config('ninja.ninja_stripe_publishable_key') }}">
+    @else
+        <meta name="stripe-publishable-key" content="{{ $company_gateway->getPublishableKey() }}">
+    @endif
+
+    <meta name="stripe-secret" content="{{ $client_secret }}">
+    <meta name="only-authorization" content="">
+    <meta name="client-postal-code" content="{{ $client->postal_code ?? '' }}">
+    <meta name="stripe-require-postal-code" content="{{ $company_gateway->require_postal_code }}">
+
+    <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
+        @csrf
+        <input type="hidden" name="gateway_response">
+        <input type="hidden" name="store_card" value="{{ $token_billing_string }}">
+        <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
+
+        <input type="hidden" name="company_gateway_id" value="{{ $company_gateway->id }}">
+        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+
+        <input type="hidden" name="token">
+    </form>
+
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
+        {{ ctrans('texts.credit_card') }}
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.payment_details')
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
+        <ul class="list-none hover:list-disc">
+        @if(count($tokens) > 0)
+            @foreach($tokens as $token)
+            <li class="py-2 hover:text-blue hover:bg-blue-600">
+                <label class="mr-4">
+                    <input
+                        type="radio"
+                        data-token="{{ $token->token }}"
+                        name="payment-type"
+                        class="form-check-input text-indigo-600 rounded-full cursor-pointer toggle-payment-with-token toggle-payment-with-token"/>
+                    <span class="ml-1 cursor-pointer">**** {{ $token->meta?->last4 }}</span>
+                </label>
+            </li>
+            @endforeach
+        @endisset
+
+            <li class="py-2 hover:text-blue hover:bg-blue-600">
+                <label>
+                    <input
+                        type="radio"
+                        id="toggle-payment-with-credit-card"
+                        class="form-check-input text-indigo-600 rounded-full cursor-pointer"
+                        name="payment-type"
+                        checked/>
+                    <span class="ml-1 cursor-pointer">{{ __('texts.new_card') }}</span>
+                </label>
+            </li>    
+        </ul>
+        
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.stripe.includes.card_widget')
+    @include('portal.ninja2020.gateways.includes.pay_now')
+    
+
+    @script
+    <script src="https://js.stripe.com/v3/"></script>
+    @vite('resources/js/clients/payments/stripe-credit-card.js')
+    @endscript
+    
+</div>
\ No newline at end of file