diff --git a/app/Services/Pay/PayClient.php b/app/Services/Pay/PayClient.php
index 06bd055..5f9591b 100644
--- a/app/Services/Pay/PayClient.php
+++ b/app/Services/Pay/PayClient.php
@@ -26,7 +26,7 @@ class PayClient
     /** @param array<string,mixed> $payload */
     public function createCheckout(array $payload): array
     {
-        $res = Http::withToken($this->token())->acceptJson()->timeout(15)->post($this->base().'/checkouts', $payload);
+        $res = Http::withToken($this->token())->acceptJson()->timeout(45)->post($this->base().'/checkouts', $payload);
 
         return $this->jsonOrFail($res, 'Could not start checkout. Please try again.');
     }
diff --git a/resources/js/app.js b/resources/js/app.js
index ad12e36..db90b0c 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -15,6 +15,7 @@ window.QRCodeStyling = QRCodeStyling;
 import qrcode from 'qrcode-generator';
 window.qrcode = qrcode;
 
+window.Alpine = Alpine;
 Alpine.plugin(collapse);
 registerLadillClipboard(Alpine);
 
@@ -224,6 +225,9 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
         this.errorMsg = '';
         this.loading = true;
 
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), 45000);
+
         try {
             const res = await fetch(config.payUrl, {
                 method: 'POST',
@@ -234,33 +238,37 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                     'X-Requested-With': 'XMLHttpRequest',
                 },
                 body: JSON.stringify({ amount: value, customer_phone: phone }),
+                signal: controller.signal,
             });
             const data = await res.json().catch(() => ({}));
             const apiError = typeof data.error === 'string'
                 ? data.error
                 : (typeof data.message === 'string' ? data.message : '');
             if (!res.ok || apiError) {
-                this.errorMsg = apiError || 'Could not start payment. Please try again.';
-                this.loading = false;
+                this.errorMsg = apiError || (`Could not start payment (${res.status}). Please try again.`);
                 return;
             }
             if (!data.checkout_url) {
                 this.errorMsg = 'Could not start payment. Please try again.';
-                this.loading = false;
                 return;
             }
 
-            // MoMo waiting page must be full-page (prompt + status poll), not the Paystack iframe sheet.
+            // MoMo waiting page must be full-page — never trap it in the Paystack iframe
+            // (cross-origin iframe is blank / looks like "Pay did nothing").
             const useSheet = data.provider !== 'mtn_momo' && window.innerWidth < 768;
             if (useSheet) {
                 this.checkoutUrl = data.checkout_url;
                 this.showSheet = true;
-                this.loading = false;
             } else {
-                window.location.href = data.checkout_url;
+                window.location.assign(data.checkout_url);
+                return;
             }
         } catch (e) {
-            this.errorMsg = 'Network error. Please try again.';
+            this.errorMsg = e?.name === 'AbortError'
+                ? 'Payment is taking too long. Please try again.'
+                : 'Network error. Please try again.';
+        } finally {
+            clearTimeout(timer);
             this.loading = false;
         }
     },
diff --git a/resources/views/public/qr/payment-landing.blade.php b/resources/views/public/qr/payment-landing.blade.php
index 4cd640e..f4b7af7 100644
--- a/resources/views/public/qr/payment-landing.blade.php
+++ b/resources/views/public/qr/payment-landing.blade.php
@@ -14,6 +14,7 @@
     <title>Pay {{ $businessName }}</title>
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" />
+    <style>[x-cloak]{display:none!important}</style>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
 <body class="min-h-screen bg-slate-50 font-sans text-slate-900 antialiased"
@@ -46,33 +47,38 @@
              :style="paymentSheetStyle">
             <div class="mx-auto mb-4 h-1 w-10 rounded-full bg-slate-200"></div>
 
-            <div x-show="errorMsg" x-cloak class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div>
+            {{-- Always-visible (no x-cloak) server/client error so failures are never silent --}}
+            <div class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700"
+                 x-show="errorMsg"
+                 x-text="errorMsg"
+                 @if(session('error')) style="display:block" @else style="display:none" @endif>{{ session('error') }}</div>
 
-            <label for="amount-mobile" class="sr-only">Amount ({{ $currency }})</label>
-            <div class="relative">
-                <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
-                <input type="number" id="amount-mobile" x-model="amount" step="0.01" min="0.01" required autofocus
-                       inputmode="decimal"
-                       @keydown.enter.prevent="submitPay()"
-                       class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
-                       placeholder="0.00">
-            </div>
+            <form method="POST" action="{{ $payUrl }}" @submit.prevent="submitPay()" class="space-y-0">
+                @csrf
+                <label for="amount-mobile" class="sr-only">Amount ({{ $currency }})</label>
+                <div class="relative">
+                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
+                    <input type="number" id="amount-mobile" name="amount" x-model="amount" step="0.01" min="0.01" required autofocus
+                           inputmode="decimal"
+                           class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
+                           placeholder="0.00" value="{{ old('amount') }}">
+                </div>
 
-            <label for="phone-mobile" class="mt-3 block text-xs font-medium text-slate-500">MTN MoMo number</label>
-            <input type="tel" id="phone-mobile" x-model="phone" required
-                   inputmode="tel" autocomplete="tel"
-                   @keydown.enter.prevent="submitPay()"
-                   class="mt-1.5 w-full rounded-2xl border-slate-200 py-3.5 px-4 text-base font-medium text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
-                   placeholder="e.g. 024XXXXXXX">
+                <label for="phone-mobile" class="mt-3 block text-xs font-medium text-slate-500">MTN MoMo number</label>
+                <input type="tel" id="phone-mobile" name="customer_phone" x-model="phone" required
+                       inputmode="tel" autocomplete="tel"
+                       class="mt-1.5 w-full rounded-2xl border-slate-200 py-3.5 px-4 text-base font-medium text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
+                       placeholder="e.g. 024XXXXXXX" value="{{ old('customer_phone') }}">
 
-            <button type="button" @click="submitPay()" :disabled="loading"
-                    class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
-                <svg x-show="loading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-                </svg>
-                <span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
-            </button>
+                <button type="submit" :disabled="loading"
+                        class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
+                    <svg x-show="loading" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                    </svg>
+                    <span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
+                </button>
+            </form>
 
             <p class="mt-3 text-center text-[11px] text-slate-400">Pay with MTN MoMo. Powered by Ladill Pay</p>
         </div>
@@ -91,40 +97,141 @@
                 @endif
             </div>
 
-            <div x-show="errorMsg" x-cloak class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div>
+            <div class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700"
+                 x-show="errorMsg"
+                 x-text="errorMsg"
+                 @if(session('error')) style="display:block" @else style="display:none" @endif>{{ session('error') }}</div>
 
-            <div class="mt-6">
+            <form method="POST" action="{{ $payUrl }}" @submit.prevent="submitPay()" class="mt-6">
+                @csrf
                 <label for="amount-desktop" class="sr-only">Amount ({{ $currency }})</label>
                 <div class="relative">
                     <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
-                    <input type="number" id="amount-desktop" x-model="amount" step="0.01" min="0.01" required
+                    <input type="number" id="amount-desktop" name="amount" x-model="amount" step="0.01" min="0.01" required
                            inputmode="decimal"
-                           @keydown.enter.prevent="submitPay()"
                            class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
-                           placeholder="0.00">
+                           placeholder="0.00" value="{{ old('amount') }}">
                 </div>
 
                 <label for="phone-desktop" class="mt-3 block text-xs font-medium text-slate-500">MTN MoMo number</label>
-                <input type="tel" id="phone-desktop" x-model="phone" required
+                <input type="tel" id="phone-desktop" name="customer_phone" x-model="phone" required
                        inputmode="tel" autocomplete="tel"
-                       @keydown.enter.prevent="submitPay()"
                        class="mt-1.5 w-full rounded-2xl border-slate-200 py-3.5 px-4 text-base font-medium text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
-                       placeholder="e.g. 024XXXXXXX">
+                       placeholder="e.g. 024XXXXXXX" value="{{ old('customer_phone') }}">
 
-                <button type="button" @click="submitPay()" :disabled="loading"
+                <button type="submit" :disabled="loading"
                         class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
-                    <svg x-show="loading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <svg x-show="loading" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                     </svg>
                     <span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
                 </button>
-            </div>
+            </form>
 
             <p class="mt-4 text-center text-[11px] text-slate-400">Pay with MTN MoMo. Powered by Ladill Pay</p>
         </div>
     </main>
 
     @include('partials.paystack-sheet')
+
+    {{--
+      Safety net: if Alpine/Vite fails to boot, native form POST still works.
+      If Alpine boots but miniPaymentLanding was missing from an old bundle, redefine it.
+    --}}
+    <script>
+        document.addEventListener('alpine:init', () => {
+            const Alpine = window.Alpine;
+            if (!Alpine || typeof Alpine.data !== 'function') return;
+            // Re-register so Pay works even when Blade deploys ahead of an old Vite bundle.
+            Alpine.data('miniPaymentLanding', (config = {}) => ({
+                amount: config.amount ?? '',
+                phone: config.phone ?? '',
+                loading: false,
+                errorMsg: config.errorMsg ?? '',
+                showSheet: false,
+                checkoutUrl: '',
+                paymentSheetStyle: '',
+                sheetBleedStyle: '',
+                init() {
+                    this._syncSheet = () => {
+                        if (window.innerWidth >= 768) {
+                            this.paymentSheetStyle = '';
+                            this.sheetBleedStyle = '';
+                            return;
+                        }
+                        const vp = window.visualViewport;
+                        const offset = vp ? Math.max(0, Math.round(window.innerHeight - vp.height - vp.offsetTop)) : 0;
+                        const safePad = offset > 0 ? '1.25rem' : 'max(1.25rem, env(safe-area-inset-bottom))';
+                        this.paymentSheetStyle = `bottom: ${offset}px; padding-bottom: ${safePad};`;
+                        this.sheetBleedStyle = `bottom: ${offset}px;`;
+                    };
+                    this._onViewportChange = () => this._syncSheet();
+                    window.visualViewport?.addEventListener('resize', this._onViewportChange);
+                    window.visualViewport?.addEventListener('scroll', this._onViewportChange);
+                    if (window.innerWidth < 768) document.documentElement.classList.add('mini-payment-page');
+                    this._syncSheet();
+                },
+                async submitPay() {
+                    const value = parseFloat(this.amount);
+                    if (!value || value <= 0) {
+                        this.errorMsg = 'Enter an amount greater than zero.';
+                        return;
+                    }
+                    const phone = String(this.phone || '').trim();
+                    if (!phone) {
+                        this.errorMsg = 'Enter your MoMo number to pay.';
+                        return;
+                    }
+                    this.errorMsg = '';
+                    this.loading = true;
+                    const controller = new AbortController();
+                    const timer = setTimeout(() => controller.abort(), 45000);
+                    try {
+                        const res = await fetch(config.payUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                Accept: 'application/json',
+                                'X-CSRF-TOKEN': config.csrf,
+                                'X-Requested-With': 'XMLHttpRequest',
+                            },
+                            body: JSON.stringify({ amount: value, customer_phone: phone }),
+                            signal: controller.signal,
+                        });
+                        const data = await res.json().catch(() => ({}));
+                        const apiError = typeof data.error === 'string'
+                            ? data.error
+                            : (typeof data.message === 'string' ? data.message : '');
+                        if (!res.ok || apiError) {
+                            this.errorMsg = apiError || ('Could not start payment (' + res.status + '). Please try again.');
+                            return;
+                        }
+                        if (!data.checkout_url) {
+                            this.errorMsg = 'Could not start payment. Please try again.';
+                            return;
+                        }
+                        // MoMo waiting page must be full-page — never trap it in the Paystack iframe
+                        // (cross-origin iframe is blank / "does nothing").
+                        const useSheet = data.provider !== 'mtn_momo' && window.innerWidth < 768;
+                        if (useSheet) {
+                            this.checkoutUrl = data.checkout_url;
+                            this.showSheet = true;
+                        } else {
+                            window.location.assign(data.checkout_url);
+                            return;
+                        }
+                    } catch (e) {
+                        this.errorMsg = e?.name === 'AbortError'
+                            ? 'Payment is taking too long. Please try again.'
+                            : 'Network error. Please try again.';
+                    } finally {
+                        clearTimeout(timer);
+                        this.loading = false;
+                    }
+                },
+            }));
+        });
+    </script>
 </body>
 </html>