Present Paystack checkout in a responsive mobile sheet and desktop modal.

Standardize customer-facing Ladill Pay checkout shells across products, open them on all viewports, and escape iframe callbacks back to the product flow.
2026-07-21 16:50:06 +00:00
parent 5cdc0a046d
commit 8937e67c73
9 changed files with 240 additions and 54 deletions
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Public;

 use App\Http\Controllers\Controller;
+use App\Models\MiniPayment;
 use App\Models\QrCode;
 use App\Services\Mini\MiniPaymentService;
 use App\Support\LadillLink;
@@ -50,19 +51,40 @@ class PaymentController extends Controller
        return redirect()->away($result['checkout_url']);
    }

-    public function callback(Request $request, string $shortCode): RedirectResponse|View
+    public function callback(Request $request, string $shortCode): View
    {
        $reference = trim((string) $request->query('reference', ''));
        if ($reference === '') {
-            return redirect()->away(LadillLink::url($shortCode))->with('error', 'Missing payment reference.');
+            return view('public.payment-return', [
+                'redirect' => LadillLink::url($shortCode),
+            ]);
        }

        try {
            $payment = $this->payments->complete($reference);
        } catch (RuntimeException $e) {
-            return redirect()->away(LadillLink::url($shortCode))->with('error', $e->getMessage());
+            return view('public.payment-return', [
+                'redirect' => LadillLink::url($shortCode),
+            ]);
        }

+        return view('public.payment-return', [
+            'redirect' => route('qr.public.payment.confirmed', [
+                'shortCode' => $shortCode,
+                'reference' => $payment->payment_reference,
+            ], absolute: true),
+        ]);
+    }
+
+    public function confirmed(string $shortCode, string $reference): View
+    {
+        $payment = MiniPayment::query()
+            ->with('qrCode')
+            ->where('payment_reference', $reference)
+            ->where('status', MiniPayment::STATUS_PAID)
+            ->whereHas('qrCode', fn ($q) => $q->where('short_code', $shortCode))
+            ->firstOrFail();
+
        return view('public.qr.payment-confirmed', [
            'payment' => $payment,
            'qrCode' => $payment->qrCode,
@@ -248,7 +248,7 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({

            // Legacy 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;
+            const useSheet = data.provider !== 'mtn_momo';
            if (useSheet) {
                this.checkoutUrl = data.checkout_url;
                this.showSheet = true;
@@ -36,7 +36,7 @@
                  loading: false,
                  errorMsg: '',
                  async submitTopup(event) {
-                      if (this.method !== 'paystack' || window.innerWidth >= 768) return;
+                      if (this.method !== 'paystack') return;

                      event.preventDefault();
                      this.loading = true;
@@ -1,44 +1,147 @@
 {{--
-    Paystack mobile bottom-sheet iframe.
-    Requires Alpine.js ancestor with: showSheet (bool), checkoutUrl (string).
-    On mobile (< md) the sheet slides up; on desktop nothing renders.
+    Responsive payment checkout shell: bottom sheet on mobile, centered modal on desktop.
+
+    Audiences:
+      - buyer (default): public ticket buyers, donors, shoppers — self-serve checkout
+      - operator: signed-in staff flows such as wallet top-up
+
+    Optional overrides: $sheetTitle, $sheetSubtitle, $sheetFooter, $sheetAria, $iframeTitle
+    Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).
+
+    Loads the provider authorization URL in-frame (verified via production Events/POS).
+    MoMo and other non-frameable providers should redirect instead of opening this sheet.
 --}}
+@php
+    $audience = $audience ?? 'buyer';
+    $defaults = match ($audience) {
+        'operator' => [
+            'title' => 'Complete payment',
+            'subtitle' => null,
+            'aria' => 'Complete payment',
+            'iframe' => 'Payment checkout',
+            'footer' => null,
+        ],
+        default => [
+            'title' => 'Complete your payment',
+            'subtitle' => 'Pay securely. You\'ll get a confirmation when it succeeds.',
+            'aria' => 'Complete your payment',
+            'iframe' => 'Secure payment checkout',
+            'footer' => 'Your payment is processed securely. Do not close this window until finished.',
+        ],
+    };
+    $sheetTitle = $sheetTitle ?? $defaults['title'];
+    $sheetSubtitle = $sheetSubtitle ?? $defaults['subtitle'];
+    $sheetAria = $sheetAria ?? $defaults['aria'];
+    $iframeTitle = $iframeTitle ?? $defaults['iframe'];
+    $sheetFooter = $sheetFooter ?? $defaults['footer'];
+@endphp
 <template x-teleport="body">
-    <div x-show="showSheet"
-         x-cloak
-         class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
-         role="dialog"
-         aria-modal="true">
+<div x-show="showSheet"
+     x-cloak
+     x-effect="document.documentElement.style.overflow = showSheet ? 'hidden' : ''"
+     @keydown.escape.window="if (showSheet) showSheet = false"
+     class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
+     role="dialog"
+     aria-modal="true"
+     :aria-hidden="(!showSheet).toString()"
+     aria-label="{{ $sheetAria }}">

-        <div class="absolute inset-0 bg-black/60"
-             x-show="showSheet"
-             x-transition:enter="transition-opacity duration-300"
-             x-transition:enter-start="opacity-0"
-             x-transition:enter-end="opacity-100"
-             x-transition:leave="transition-opacity duration-200"
-             x-transition:leave-start="opacity-100"
-             x-transition:leave-end="opacity-0"
-             @click="showSheet = false">
-        </div>
-
-        <div class="relative flex flex-col overflow-hidden rounded-t-2xl bg-white"
-             style="height:90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
-             x-show="showSheet"
-             x-transition:enter="transition-transform duration-300 ease-out"
-             x-transition:enter-start="translate-y-full"
-             x-transition:enter-end="translate-y-0"
-             x-transition:leave="transition-transform duration-200 ease-in"
-             x-transition:leave-start="translate-y-0"
-             x-transition:leave-end="translate-y-full">
-
-            @include('partials.mini-paystack-frame-header')
-
-            <iframe :src="showSheet ? checkoutUrl : ''"
-                    class="min-h-0 flex-1 w-full border-0"
-                    allow="payment"
-                    title="Paystack checkout"></iframe>
-
-            @include('partials.mini-paystack-frame-footer')
-        </div>
+    <div class="absolute inset-0 bg-black/60"
+         x-show="showSheet"
+         x-transition:enter="transition-opacity duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition-opacity duration-200"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @click="showSheet = false">
    </div>
+
+    {{-- Mobile bottom sheet --}}
+    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
+         style="height:90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
+         x-show="showSheet"
+         x-transition:enter="transition-transform duration-300 ease-out"
+         x-transition:enter-start="translate-y-full"
+         x-transition:enter-end="translate-y-0"
+         x-transition:leave="transition-transform duration-200 ease-in"
+         x-transition:leave-start="translate-y-0"
+         x-transition:leave-end="translate-y-full"
+         @click.stop>
+        <div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5"
+             style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
+            <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
+            <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                    <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
+                    @if (! empty($sheetSubtitle))
+                        <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
+                    @endif
+                </div>
+                <button type="button"
+                        x-ref="checkoutCloseMobile"
+                        @click="showSheet = false"
+                        class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
+                        aria-label="Close">
+                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+            <iframe :src="showSheet ? checkoutUrl : ''"
+                    class="h-full min-h-[60dvh] w-full border-0"
+                    allow="payment *"
+                    title="{{ $iframeTitle }}"></iframe>
+        </div>
+        @if (! empty($sheetFooter))
+            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500">
+                {{ $sheetFooter }}
+            </p>
+        @endif
+    </div>
+
+    {{-- Desktop centered modal --}}
+    <div class="relative hidden w-full max-w-lg overflow-hidden rounded-2xl bg-white shadow-2xl md:flex md:h-[min(720px,85vh)] md:flex-col"
+         x-show="showSheet"
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="opacity-0 scale-95"
+         x-transition:enter-end="opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-150"
+         x-transition:leave-start="opacity-100 scale-100"
+         x-transition:leave-end="opacity-0 scale-95"
+         @click.stop>
+        <div class="flex shrink-0 items-start justify-between gap-3 border-b border-slate-100 px-5 py-3">
+            <div class="min-w-0">
+                <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
+                @if (! empty($sheetSubtitle))
+                    <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
+                @endif
+            </div>
+            <button type="button"
+                    x-ref="checkoutCloseDesktop"
+                    x-init="$watch('showSheet', value => { if (value) { $nextTick(() => ($refs.checkoutCloseDesktop || $refs.checkoutCloseMobile)?.focus()) } })"
+                    @click="showSheet = false"
+                    class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
+                    aria-label="Close">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+            <iframe :src="showSheet ? checkoutUrl : ''"
+                    class="h-full min-h-0 w-full border-0"
+                    style="min-height: 28rem"
+                    allow="payment *"
+                    title="{{ $iframeTitle }}"></iframe>
+        </div>
+        @if (! empty($sheetFooter))
+            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-5 py-2 text-center text-[11px] text-slate-500">
+                {{ $sheetFooter }}
+            </p>
+        @endif
+    </div>
+</div>
 </template>
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Payment</title>
+    <style>
+        body { font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; display: grid; place-items: center; min-height: 100vh; margin: 0; }
+        p { font-size: 0.95rem; color: #475569; }
+    </style>
+</head>
+<body>
+    <p>Confirming your payment…</p>
+    <script>
+        (function () {
+            var url = @json($redirect);
+            try {
+                if (window.top && window.top !== window.self) {
+                    window.top.location.replace(url);
+                    return;
+                }
+            } catch (e) {}
+            window.location.replace(url);
+        })();
+    </script>
+</body>
+</html>
@@ -359,7 +359,7 @@
            const data = await res.json();
            if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
            if (!data.checkout_url) { this.errorMsg = 'Could not start payment.'; this.loading = false; return; }
-            if (data.provider === 'mtn_momo' || window.innerWidth >= 768) {
+            if (data.provider === 'mtn_momo') {
                window.location.href = data.checkout_url;
            } else {
                this.checkoutUrl = data.checkout_url;
@@ -474,7 +474,7 @@
            {{-- Header --}}
            <div class="px-6 py-6 text-center" style="background: linear-gradient(160deg, {{ $churchColor }}0d 0%, {{ $churchColor }}1f 100%); border-bottom: 1px solid {{ $churchColor }}22;">
                <h2 class="text-lg font-bold text-slate-900">Give Online</h2>
-                <p class="mt-0.5 text-xs text-slate-500">Secured by Paystack. Powered by Ladill Pay</p>
+                <p class="mt-0.5 text-xs text-slate-500">Your payment is processed securely</p>
            </div>

            <div class="px-5 pb-6 pt-5 space-y-5">
@@ -672,7 +672,7 @@
            const data = await res.json();
            if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
            if (!data.paid) { window.location.href = data.success_url; return; }
-            if (data.provider === 'mtn_momo' || window.innerWidth >= 768) {
+            if (data.provider === 'mtn_momo') {
                window.location.href = data.checkout_url;
            } else {
                this.checkoutUrl = data.checkout_url; this.showSheet = true; this.loading = false;
@@ -1210,7 +1210,7 @@
            const data = await res.json();
            if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
            if (!data.checkout_url) { this.errorMsg = 'Could not start payment.'; this.loading = false; return; }
-            if (data.provider === 'mtn_momo' || window.innerWidth >= 768) {
+            if (data.provider === 'mtn_momo') {
                window.location.href = data.checkout_url;
            } else {
                this.checkoutUrl = data.checkout_url;
@@ -1476,7 +1476,7 @@
                <span x-text="loading ? 'Opening payment…' : ('Pay {{ $currency }} ' + orderTotal.toFixed(2))"></span>
            </button>

-            <p class="text-center text-[11px] text-slate-400">Secured by Paystack. Powered by Ladill Pay</p>
+            <p class="text-center text-[11px] text-slate-400">Your payment is processed securely</p>
        </div>
    </div>
 </div>
@@ -73,7 +73,7 @@
                </button>
            </form>

-            <p class="mt-3 text-center text-[11px] text-slate-400">Secured by Paystack. Powered by Ladill Pay</p>
+            <p class="mt-3 text-center text-[11px] text-slate-400">Your payment is processed securely</p>
        </div>
    </div>

@@ -116,7 +116,7 @@
                </button>
            </form>

-            <p class="mt-4 text-center text-[11px] text-slate-400">Secured by Paystack. Powered by Ladill Pay</p>
+            <p class="mt-4 text-center text-[11px] text-slate-400">Your payment is processed securely</p>
        </div>
    </main>

@@ -193,7 +193,7 @@
                            return;
                        }
                        // Legacy MoMo waiting page must be full-page — never trap it in the Paystack iframe.
-                        const useSheet = data.provider !== 'mtn_momo' && window.innerWidth < 768;
+                        const useSheet = data.provider !== 'mtn_momo';
                        if (useSheet) {
                            this.checkoutUrl = data.checkout_url;
                            this.showSheet = true;
@@ -36,6 +36,7 @@ Route::get('/q/{shortCode}', [QrScanController::class, 'resolve'])->name('qr.pub
 Route::get('/q/{shortCode}/payment-logo', [QrScanController::class, 'paymentLogo'])->name('qr.public.payment.logo');
 Route::post('/q/{shortCode}/pay', [PaymentController::class, 'pay'])->name('qr.public.payment.pay');
 Route::get('/q/{shortCode}/pay/callback', [PaymentController::class, 'callback'])->name('qr.public.payment.callback');
+Route::get('/q/{shortCode}/pay/confirmed/{reference}', [PaymentController::class, 'confirmed'])->name('qr.public.payment.confirmed');
 });

 Route::middleware(['auth', 'platform.session'])->group(function () {
@@ -14,7 +14,7 @@ class MiniPaymentCheckoutTest extends TestCase
 {
    use RefreshDatabase;

-    public function test_payment_landing_shows_paystack_branding_not_momo(): void
+    public function test_payment_landing_shows_secure_checkout_not_momo(): void
    {
        $user = User::create([
            'public_id' => (string) Str::uuid(),
@@ -40,9 +40,12 @@ class MiniPaymentCheckoutTest extends TestCase
        $this->withHeader(\App\Support\LadillLink::INTERNAL_HEADER, '1')
            ->get('/q/'.$qr->short_code)
            ->assertOk()
-            ->assertSee('Secured by Paystack. Powered by Ladill Pay', false)
+            ->assertSee('Your payment is processed securely', false)
+            ->assertSee('md:items-center', false)
+            ->assertSee('Complete your payment', false)
            ->assertDontSee('MTN MoMo number', false)
-            ->assertDontSee('Pay with MTN MoMo', false);
+            ->assertDontSee('Pay with MTN MoMo', false)
+            ->assertDontSee('Paystack checkout', false);
    }

    public function test_pay_initiation_does_not_require_phone_and_returns_paystack_checkout(): void
@@ -101,4 +104,34 @@ class MiniPaymentCheckoutTest extends TestCase
            'payer_phone' => null,
        ]);
    }
+
+    public function test_payment_callback_returns_top_frame_escape(): void
+    {
+        $user = User::create([
+            'public_id' => (string) Str::uuid(),
+            'name' => 'Vendor',
+            'email' => 'vendor3@example.com',
+        ]);
+
+        $qr = QrCode::query()->create([
+            'user_id' => $user->id,
+            'short_code' => 'paycb001',
+            'type' => QrCode::TYPE_PAYMENT,
+            'label' => 'Till',
+            'payload' => [
+                'content' => [
+                    'business_name' => 'Accra Kiosk',
+                    'currency' => 'GHS',
+                ],
+                'style' => [],
+            ],
+            'is_active' => true,
+        ]);
+
+        $this->withHeader(\App\Support\LadillLink::INTERNAL_HEADER, '1')
+            ->get('/q/'.$qr->short_code.'/pay/callback')
+            ->assertOk()
+            ->assertSee('Confirming your payment', false)
+            ->assertSee('window.top.location.replace', false);
+    }
 }