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/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/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/razorpay/hosted/pay_livewire.blade.php b/resources/views/portal/ninja2020/gateways/razorpay/hosted/pay_livewire.blade.php
new file mode 100644
index 000000000000..45678634b806
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/razorpay/hosted/pay_livewire.blade.php
@@ -0,0 +1,33 @@
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden py-5 bg-white sm:gap-4"
+    id="razorpay-hosted-payment">
+    <meta name="razorpay-options" content="{{ \json_encode($options) }}">
+
+    <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
+        @csrf
+        <input type="hidden" name="gateway_response">
+        <input type="hidden" name="store_card">
+        <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
+
+        <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
+        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+
+        <input type="hidden" name="razorpay_payment_id" id="razorpay_payment_id">
+        <input type="hidden" name="razorpay_signature" id="razorpay_signature">
+    </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.aio_checkout') }}
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.payment_details')
+
+    @include('portal.ninja2020.gateways.includes.pay_now')
+</div>
+
+@assets
+    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
+    
+    @vite('resources/js/clients/payments/razorpay-aio.js')
+@endassets