isaacclad/ladill-events
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Embed event checkouts and send seller email to gateways.
Deploy Ladill Events / deploy (push) Successful in 1m42s
Details

Browse Source 
Ticket/contribution payments open in a desktop modal or mobile sheet, initialize with the organizer email, and break out of the iframe after callback.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-15 08:29:13 +00:00
co-authored by Cursor
parent 6b2d97967a
commit ab192e443f
5 changed files with 90 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/partials/paystack-sheet.blade.php
+41 -17
View File
@@ -1,16 +1,15 @@
{{--
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.
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 flex-col justify-end md:hidden"
class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
role="dialog"
aria-modal="true">
aria-modal="true"
aria-label="Complete payment">
{{-- Backdrop --}}
<div class="absolute inset-0 bg-black/60"
x-show="showSheet"
x-transition:enter="transition-opacity duration-300"
@@ -22,8 +21,8 @@
@click="showSheet = false">
</div>
{{-- Sheet --}}
<div class="relative flex flex-col bg-white rounded-t-2xl overflow-hidden"
{{-- 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"
@@ -31,12 +30,12 @@
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">
<div class="flex shrink-0 items-center justify-between border-b border-slate-100 px-4 py-3">
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 @click="showSheet = false"
<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">
@@ -44,11 +43,36 @@
</svg>
</button>
</div>
<iframe :src="showSheet ? checkoutUrl : ''"
class="flex-1 w-full border-0"
allow="payment"
title="Paystack checkout"></iframe>
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>