Embed POS checkouts in a modal/sheet using the seller email.

Card/MoMo always initializes with the merchant email, and Paystack/Flutterwave/Hubtel open in-page (desktop modal, mobile bottomsheet) instead of a full redirect.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/Http/Controllers/Pos/RegisterController.php

@@ -176,7 +176,17 @@ class RegisterController extends Controller
 
             $result = $this->sales->initiatePayCheckout($sale, $merchant);
 
-            return redirect()->away($result['checkout_url']);
+            if ($request->expectsJson() || $request->ajax()) {
+                return response()->json([
+                    'checkout_url' => $result['checkout_url'],
+                    'sale_id' => $sale->id,
+                ]);
+            }
+
+            return redirect()
+                ->route('pos.sales.show', $sale)
+                ->with('checkout_url', $result['checkout_url'])
+                ->with('success', 'Complete the payment to finish this sale.');
         } catch (RuntimeException $e) {
             return back()->withInput()->with('error', $e->getMessage());
         }

app/Http/Controllers/Pos/SaleController.php

@@ -82,22 +82,34 @@ class SaleController extends Controller
         return redirect()->route('pos.sales.index')->with('success', 'Sale deleted.');
     }
 
-    public function callback(Request $request, PosSale $sale): RedirectResponse
+    public function callback(Request $request, PosSale $sale): RedirectResponse|View
     {
         $reference = trim((string) $request->query('reference', $sale->payment_reference ?? ''));
 
         if ($reference === '') {
-            return redirect()->route('pos.sales.show', $sale)->with('error', 'Missing payment reference.');
+            return $this->paymentReturn(route('pos.sales.show', $sale), error: 'Missing payment reference.');
         }
 
         try {
             $sale = $this->sales->completePayCheckout($reference);
         } catch (RuntimeException $e) {
-            return redirect()->route('pos.sales.show', $sale)->with('error', $e->getMessage());
+            return $this->paymentReturn(route('pos.sales.show', $sale), error: $e->getMessage());
         }
 
-        return redirect()
+        return $this->paymentReturn(route('pos.sales.show', $sale), success: 'Payment received.');
-            ->route('pos.sales.show', $sale)
+    }
-            ->with('success', 'Payment received.');
+
+    private function paymentReturn(string $url, ?string $success = null, ?string $error = null): View
+    {
+        if ($success) {
+            session()->flash('success', $success);
+        }
+        if ($error) {
+            session()->flash('error', $error);
+        }
+
+        return view('pos.payment-return', [
+            'redirect' => $url,
+        ]);
     }
 }

app/Http/Controllers/Pos/TicketController.php

@@ -227,30 +227,53 @@ class TicketController extends Controller
 
             $result = $this->sales->startPayPayment($sale, $merchant, $amountMinor);
 
-            return redirect()->away($result['checkout_url']);
+            if ($request->expectsJson() || $request->ajax()) {
+                return response()->json([
+                    'checkout_url' => $result['checkout_url'],
+                    'sale_id' => $sale->id,
+                ]);
+            }
+
+            return redirect()
+                ->route('pos.tickets.show', $sale)
+                ->with('checkout_url', $result['checkout_url'])
+                ->with('success', 'Complete the payment to settle this ticket.');
         } catch (RuntimeException $e) {
             return back()->with('error', $e->getMessage());
         }
     }
 
-    public function paymentCallback(Request $request): RedirectResponse
+    public function paymentCallback(Request $request): RedirectResponse|View
     {
         $reference = trim((string) $request->query('reference', ''));
         if ($reference === '') {
-            return redirect()->route('pos.floor')->with('error', 'Missing payment reference.');
+            return view('pos.payment-return', [
+                'redirect' => route('pos.floor'),
+            ]);
         }
 
         try {
             $payment = $this->sales->completePayPayment($reference);
         } catch (\Throwable) {
-            return redirect()->route('pos.floor')->with('error', 'Payment could not be verified.');
+            session()->flash('error', 'Payment could not be verified.');
+
+            return view('pos.payment-return', [
+                'redirect' => route('pos.floor'),
+            ]);
         }
 
         $sale = $payment->sale->fresh();
+        if ($sale->isOpen()) {
+            session()->flash('success', 'Payment recorded — balance '.$sale->currency.' '.number_format($sale->balanceMinor() / 100, 2));
+            $url = route('pos.tickets.show', $sale);
+        } else {
+            session()->flash('success', 'Ticket settled.');
+            $url = route('pos.sales.show', $sale);
+        }
 
-        return $sale->isOpen()
+        return view('pos.payment-return', [
-            ? redirect()->route('pos.tickets.show', $sale)->with('success', 'Payment received — balance remaining.')
+            'redirect' => $url,
-            : redirect()->route('pos.sales.show', $sale)->with('success', 'Payment received.');
+        ]);
     }
 
     private function authorizeOpen(Request $request, PosSale $sale): void

app/Services/Pos/PosSaleService.php

@@ -305,7 +305,7 @@ class PosSaleService
             $merchant,
             $amount,
             (string) ($sale->currency ?? 'GHS'),
-            (string) ($sale->customer_email ?: $merchant->email ?: 'payer@example.com'),
+            (string) (trim((string) ($merchant->email ?? '')) !== '' ? $merchant->email : ('seller+'.($merchant->public_id ?? 'pos').'@checkout.ladill.local')),
             route('pos.payments.callback'),
             $reference,
             ['title' => 'Ticket '.$sale->reference.' payment', 'pos_sale_id' => $sale->id, 'pos_payment_id' => $payment->id],
@@ -506,7 +506,7 @@ class PosSaleService
             $merchant,
             $amount,
             (string) ($sale->currency ?? 'GHS'),
-            (string) ($sale->customer_email ?: $merchant->email ?: 'payer@example.com'),
+            (string) (trim((string) ($merchant->email ?? '')) !== '' ? $merchant->email : ('seller+'.($merchant->public_id ?? 'pos').'@checkout.ladill.local')),
             $callbackUrl,
             $reference,
             ['title' => 'POS '.$sale->reference, 'pos_sale_id' => $sale->id, 'pos_reference' => $sale->reference],

resources/js/app.js

@@ -16,6 +16,22 @@ import qrcode from 'qrcode-generator';
 window.qrcode = qrcode;
 
 Alpine.plugin(collapse);
+
+document.addEventListener('alpine:init', () => {
+    Alpine.store('paymentCheckout', {
+        isOpen: false,
+        url: '',
+        open(url) {
+            this.url = url || '';
+            this.isOpen = this.url !== '';
+        },
+        close() {
+            this.isOpen = false;
+            this.url = '';
+        },
+    });
+});
+
 registerLadillClipboard(Alpine);
 
 Alpine.data('notificationDropdown', (config = {}) => ({
@@ -239,13 +255,9 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                 this.loading = false;
                 return;
             }
-            if (window.innerWidth < 768) {
+            this.checkoutUrl = data.checkout_url;
-                this.checkoutUrl = data.checkout_url;
+            this.showSheet = true;
-                this.showSheet = true;
+            this.loading = false;
-                this.loading = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
         } catch (e) {
             this.errorMsg = 'Network error. Please try again.';
             this.loading = false;

resources/views/components/app-layout.blade.php

@@ -56,5 +56,6 @@
     @endauth
     @include('partials.afia')
     @include('partials.confirm-prompt')
+    @include('partials.payment-checkout-host')
 </body>
 </html>

resources/views/partials/payment-checkout-host.blade.php

@@ -0,0 +1,16 @@
+<div x-data
+     x-init="
+        const url = @js(session('checkout_url'));
+        if (url) {
+            $store.paymentCheckout.open(url);
+        }
+     "
+     class="contents">
+    <div x-data="{
+            get showSheet() { return $store.paymentCheckout.isOpen },
+            set showSheet(v) { if (!v) { $store.paymentCheckout.close() } },
+            get checkoutUrl() { return $store.paymentCheckout.url },
+         }">
+        @include('partials.paystack-sheet')
+    </div>
+</div>

resources/views/partials/paystack-sheet.blade.php

@@ -0,0 +1,78 @@
+{{--
+    Payment checkout shell: bottomsheet on mobile, centered modal on desktop.
+    Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).
+--}}
+<template x-teleport="body">
+<div x-show="showSheet"
+     x-cloak
+     class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
+     role="dialog"
+     aria-modal="true"
+     aria-label="Complete payment">
+
+    <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 bottomsheet --}}
+    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
+         style="height:90dvh"
+         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 items-center justify-between border-b border-slate-100 px-4 py-3">
+            <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
+            <p class="text-sm font-semibold text-slate-800">Complete payment</p>
+            <button type="button" @click="showSheet = false"
+                    class="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">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+        <iframe :src="showSheet ? checkoutUrl : ''"
+                class="h-full w-full flex-1 border-0"
+                allow="payment *"
+                title="Payment checkout"></iframe>
+    </div>
+
+    {{-- Desktop 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-center justify-between border-b border-slate-100 px-5 py-3">
+            <p class="text-sm font-semibold text-slate-800">Complete payment</p>
+            <button type="button" @click="showSheet = false"
+                    class="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">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+        <iframe :src="showSheet ? checkoutUrl : ''"
+                class="min-h-0 w-full flex-1 border-0"
+                allow="payment *"
+                title="Payment checkout"></iframe>
+    </div>
+</div>
+</template>

resources/views/pos/payment-return.blade.php

@@ -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 complete</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>Finishing 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>

tests/Feature/PosRegisterTest.php

@@ -7,7 +7,6 @@ use App\Models\PosLocation;
 use App\Models\PosProduct;
 use App\Models\PosSale;
 use App\Models\User;
-use App\Services\Pay\PayClient;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Support\Facades\Http;
 use Tests\TestCase;
@@ -122,27 +121,44 @@ class PosRegisterTest extends TestCase
         $this->assertSame(2000, $sale->total_minor);
     }
 
-    public function test_pay_sale_redirects_to_checkout(): void
+    public function test_pay_sale_opens_embedded_checkout(): void
     {
         $user = $this->user();
 
-        $this->mock(PayClient::class, function ($mock) {
+        \App\Models\PaymentGatewaySetting::create([
-            $mock->shouldReceive('createCheckout')->once()->andReturn([
+            'owner_ref' => $user->public_id,
-                'id' => 99,
+            'provider' => \App\Models\PaymentGatewaySetting::PROVIDER_PAYSTACK,
-                'reference' => 'LP-TESTREF',
+            'public_key' => 'pk_test',
-                'checkout_url' => 'https://checkout.paystack.com/test',
+            'secret_key' => 'sk_test',
-            ]);
+            'is_active' => true,
-        });
+        ]);
 
-        $this->actingAs($user)->post(route('pos.register.charge'), [
+        Http::fake([
+            'crm.test/api/customers*' => Http::response(['data' => []], 200),
+            'https://api.paystack.co/transaction/initialize' => Http::response([
+                'status' => true,
+                'data' => [
+                    'authorization_url' => 'https://checkout.paystack.com/test',
+                    'reference' => 'POSS-TESTREF',
+                ],
+            ], 200),
+        ]);
+
+        $response = $this->actingAs($user)->post(route('pos.register.charge'), [
             'payment_method' => 'pay',
             'lines' => [
                 ['name' => 'Snack', 'unit_price_minor' => 500, 'quantity' => 1],
             ],
-        ])->assertRedirect('https://checkout.paystack.com/test');
+        ]);
 
         $sale = PosSale::where('owner_ref', $user->public_id)->first();
-        $this->assertSame('LP-TESTREF', $sale->payment_reference);
+        $this->assertNotNull($sale);
+        $response->assertRedirect(route('pos.sales.show', $sale));
+        $response->assertSessionHas('checkout_url', 'https://checkout.paystack.com/test');
         $this->assertSame(PosSale::STATUS_PENDING, $sale->status);
+        $this->assertNotEmpty($sale->payment_reference);
+
+        Http::assertSent(fn ($r) => str_contains($r->url(), 'paystack.co')
+            && ($r['email'] ?? null) === $user->email);
     }
 }