diff --git a/resources/views/components/user/service-topup-modal.blade.php b/resources/views/components/user/service-topup-modal.blade.php
index 98ce945..167d4ef 100644
--- a/resources/views/components/user/service-topup-modal.blade.php
+++ b/resources/views/components/user/service-topup-modal.blade.php
@@ -88,7 +88,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 559bf73..9d0c4a4 100644
--- a/resources/views/partials/paystack-sheet.blade.php
+++ b/resources/views/partials/paystack-sheet.blade.php
@@ -1,16 +1,51 @@
{{--
- 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
Complete Payment
+ {{ $sheetFooter }}
+
Confirming your payment…
+ + + diff --git a/resources/views/public/qr/landing.blade.php b/resources/views/public/qr/landing.blade.php index 632ccbc..bb2eda9 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"> @@ -1416,13 +1411,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;