From a73a15988b7fe7c034b26ff699a757c35086d67a Mon Sep 17 00:00:00 2001 From: isaacclad Date: Tue, 21 Jul 2026 16:50:07 +0000 Subject: [PATCH] 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. --- .../Controllers/Public/DonationController.php | 31 ++- resources/js/app.js | 7 +- .../user/service-topup-modal.blade.php | 2 +- .../views/partials/paystack-sheet.blade.php | 179 ++++++++++++++---- .../views/public/payment-return.blade.php | 27 +++ resources/views/public/qr/landing.blade.php | 22 +-- routes/web.php | 1 + 7 files changed, 202 insertions(+), 67 deletions(-) create mode 100644 resources/views/public/payment-return.blade.php diff --git a/app/Http/Controllers/Public/DonationController.php b/app/Http/Controllers/Public/DonationController.php index 6b4c992..8111099 100644 --- a/app/Http/Controllers/Public/DonationController.php +++ b/app/Http/Controllers/Public/DonationController.php @@ -3,11 +3,11 @@ namespace App\Http\Controllers\Public; use App\Http\Controllers\Controller; +use App\Models\GiveDonation; use App\Models\QrCode; use App\Services\Give\GiveDonationService; use App\Support\LadillLink; use Illuminate\Http\JsonResponse; -use Illuminate\Http\RedirectResponse; use Illuminate\Http\Request; use Illuminate\View\View; use RuntimeException; @@ -50,21 +50,40 @@ class DonationController extends Controller ]); } - 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 { $donation = $this->donations->complete($reference); - } catch (RuntimeException $e) { - return redirect()->away(LadillLink::url($shortCode))->with('order_error', $e->getMessage()); } catch (\Throwable) { - return redirect()->away(LadillLink::url($shortCode))->with('order_error', 'Payment could not be verified. Contact the organisation with reference: '.$reference); + return view('public.payment-return', [ + 'redirect' => LadillLink::url($shortCode), + ]); } + return view('public.payment-return', [ + 'redirect' => route('qr.public.donation.confirmed', [ + 'shortCode' => $shortCode, + 'reference' => $donation->payment_reference, + ], absolute: true), + ]); + } + + public function confirmed(string $shortCode, string $reference): View + { + $donation = GiveDonation::query() + ->with('qrCode') + ->where('payment_reference', $reference) + ->where('status', GiveDonation::STATUS_PAID) + ->whereHas('qrCode', fn ($q) => $q->where('short_code', $shortCode)) + ->firstOrFail(); + return view('public.qr.donation-confirmed', [ 'donation' => $donation, 'qrCode' => $donation->qrCode, diff --git a/resources/js/app.js b/resources/js/app.js index 60b7507..bb6c591 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -239,13 +239,8 @@ 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.loading = false; - } else { - window.location.href = data.checkout_url; - } } catch (e) { this.errorMsg = 'Network error. Please try again.'; this.loading = false; diff --git a/resources/views/components/user/service-topup-modal.blade.php b/resources/views/components/user/service-topup-modal.blade.php index f9a5675..acdbd94 100644 --- a/resources/views/components/user/service-topup-modal.blade.php +++ b/resources/views/components/user/service-topup-modal.blade.php @@ -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; diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php index ce2f127..9d0c4a4 100644 --- a/resources/views/partials/paystack-sheet.blade.php +++ b/resources/views/partials/paystack-sheet.blade.php @@ -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 diff --git a/resources/views/public/payment-return.blade.php b/resources/views/public/payment-return.blade.php new file mode 100644 index 0000000..82ed789 --- /dev/null +++ b/resources/views/public/payment-return.blade.php @@ -0,0 +1,27 @@ + + + + + + Payment + + + +

Confirming your payment…

+ + + diff --git a/resources/views/public/qr/landing.blade.php b/resources/views/public/qr/landing.blade.php index 236f109..f9be753 100644 --- a/resources/views/public/qr/landing.blade.php +++ b/resources/views/public/qr/landing.blade.php @@ -358,13 +358,8 @@ }); const data = await res.json(); if (data.error) { this.errorMsg = data.error; this.loading = false; return; } - if (window.innerWidth < 768) { - this.checkoutUrl = data.checkout_url; - this.showSheet = true; - this.loading = false; - } else { - window.location.href = data.checkout_url; - } + this.checkoutUrl = data.checkout_url; + this.showSheet = true; } catch(e) { this.errorMsg = 'Network error. Please try again.'; this.loading = false; @@ -671,8 +666,8 @@ 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 (window.innerWidth < 768) { this.checkoutUrl = data.checkout_url; this.showSheet = true; this.loading = false; } - else { window.location.href = data.checkout_url; } + this.checkoutUrl = data.checkout_url; + this.showSheet = true; } catch(e) { this.errorMsg = 'Network error. Please try again.'; this.loading = false; } } }" class="min-h-screen bg-slate-50 pb-12"> @@ -1205,13 +1200,8 @@ }); const data = await res.json(); if (data.error) { this.errorMsg = data.error; this.loading = false; return; } - if (window.innerWidth < 768) { - this.checkoutUrl = data.checkout_url; - this.showSheet = true; - this.loading = false; - } else { - window.location.href = data.checkout_url; - } + this.checkoutUrl = data.checkout_url; + this.showSheet = true; } catch(e) { this.errorMsg = 'Network error. Please try again.'; this.loading = false; diff --git a/routes/web.php b/routes/web.php index b118dba..cba3881 100644 --- a/routes/web.php +++ b/routes/web.php @@ -34,6 +34,7 @@ Route::get('/q/{shortCode}/church-logo', [QrScanController::class, 'churchLogo'] Route::get('/q/{shortCode}/church-cover', [QrScanController::class, 'churchCover'])->name('qr.public.church.cover'); Route::post('/q/{shortCode}/order', [DonationController::class, 'store'])->name('qr.public.order'); Route::get('/q/{shortCode}/order/callback', [DonationController::class, 'callback'])->name('qr.public.order.callback'); +Route::get('/q/{shortCode}/donation/confirmed/{reference}', [DonationController::class, 'confirmed'])->name('qr.public.donation.confirmed'); }); Route::middleware(['auth', 'platform.session'])->group(function () {