diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php index 5486563..ce2f127 100644 --- a/resources/views/partials/paystack-sheet.blade.php +++ b/resources/views/partials/paystack-sheet.blade.php @@ -1,9 +1,9 @@ {{-- - Paystack checkout wrapper — bottom sheet on mobile, centered modal on desktop. + 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. --}} diff --git a/resources/views/public/qr/payment-landing.blade.php b/resources/views/public/qr/payment-landing.blade.php index 551294c..e789c30 100644 --- a/resources/views/public/qr/payment-landing.blade.php +++ b/resources/views/public/qr/payment-landing.blade.php @@ -19,6 +19,8 @@ amount: @js(old('amount')), loading: false, errorMsg: @js(session('error')), + showSheet: false, + checkoutUrl: '', async submitPay() { const value = parseFloat(this.amount); if (!value || value <= 0) { @@ -49,7 +51,13 @@ this.loading = false; return; } - window.location.assign(data.checkout_url); + if (window.innerWidth < 768) { + 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; @@ -134,5 +142,7 @@

Secured by Paystack · Powered by Ladill Mini

+ + @include('partials.paystack-sheet')