isaaccladandCursor
76f2a0a395
Deploy Ladill Mini / deploy (push) Successful in 37s
Restore the bottom-sheet iframe on mobile and redirect desktop to the hosted checkout URL, matching other Ladill apps. Co-authored-by: Cursor <cursoragent@cursor.com>
45 lines
1.8 KiB
PHP
45 lines
1.8 KiB
PHP
{{--
|
|
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.
|
|
--}}
|
|
<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 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>
|
|
</template>
|