Frame event checkout sheet for ticket buyers.
Deploy Ladill Events / deploy (push) Successful in 1m41s

Use buyer-facing copy, attendee email for gateway receipts, and keep operator wording only for staff wallet top-up.
This commit is contained in:
isaacclad
2026-07-15 13:23:36 +00:00
parent ab192e443f
commit 69ede57c03
5 changed files with 97 additions and 24 deletions
@@ -130,16 +130,18 @@ class EventRegistrationService
? sprintf('%s — %s', $content['name'] ?? $qrCode->label, $tierName)
: sprintf('%s ticket — %s', $content['name'] ?? $qrCode->label, $tierName);
$sellerEmail = trim((string) ($qrCode->user->email ?? ''));
if ($sellerEmail === '' || ! str_contains($sellerEmail, '@')) {
$sellerEmail = 'seller+'.($qrCode->user->public_id ?? 'events').'@checkout.ladill.local';
// Ticket buyers (not till staff): gateways get the attendee email so
// receipts and 3DS challenges belong to the person purchasing.
$buyerEmail = $email;
if ($buyerEmail === '' || ! str_contains($buyerEmail, '@')) {
$buyerEmail = 'buyer+'.($registration->reference).'@checkout.ladill.local';
}
$checkout = $this->gateway->initializeCheckout(
$qrCode->user,
$amountMinor,
(string) ($registration->currency ?? 'GHS'),
$sellerEmail,
$buyerEmail,
LadillLink::path($qrCode->short_code, 'register/callback'),
$registration->reference,
[
@@ -148,6 +150,7 @@ class EventRegistrationService
'registration_reference' => $registration->reference,
'qr_code_id' => $qrCode->id,
'mode' => $mode,
'attendee_email' => $email,
],
);
@@ -118,7 +118,11 @@
</button>
</div>
@include('partials.paystack-sheet')
@include('partials.paystack-sheet', [
'audience' => 'operator',
'sheetTitle' => 'Add credits',
'sheetSubtitle' => 'Complete payment to top up this account.',
])
</form>
</div>
</x-modal>
@@ -1,14 +1,44 @@
{{--
Payment checkout shell: bottomsheet 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).
--}}
@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
<template x-teleport="body">
<div x-show="showSheet"
x-cloak
class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
role="dialog"
aria-modal="true"
aria-label="Complete payment">
aria-label="{{ $sheetAria }}">
<div class="absolute inset-0 bg-black/60"
x-show="showSheet"
@@ -32,21 +62,33 @@
x-transition:leave-start="translate-y-0"
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="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5">
<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>
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
@if (! empty($sheetSubtitle))
<p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
@endif
</div>
<button type="button" @click="showSheet = false"
class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
class="shrink-0 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>
</div>
<iframe :src="showSheet ? checkoutUrl : ''"
class="h-full w-full flex-1 border-0"
allow="payment *"
title="Payment checkout"></iframe>
title="{{ $iframeTitle }}"></iframe>
@if (! empty($sheetFooter))
<p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500">
{{ $sheetFooter }}
</p>
@endif
</div>
{{-- Desktop modal --}}
@@ -59,10 +101,15 @@
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>
<div class="flex shrink-0 items-start justify-between gap-3 border-b border-slate-100 px-5 py-3">
<div class="min-w-0">
<p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
@if (! empty($sheetSubtitle))
<p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
@endif
</div>
<button type="button" @click="showSheet = false"
class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
class="shrink-0 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"/>
@@ -72,7 +119,12 @@
<iframe :src="showSheet ? checkoutUrl : ''"
class="min-h-0 w-full flex-1 border-0"
allow="payment *"
title="Payment checkout"></iframe>
title="{{ $iframeTitle }}"></iframe>
@if (! empty($sheetFooter))
<p class="shrink-0 border-t border-slate-100 bg-slate-50 px-5 py-2 text-center text-[11px] text-slate-500">
{{ $sheetFooter }}
</p>
@endif
</div>
</div>
</template>
@@ -10,7 +10,7 @@
</style>
</head>
<body>
<p>Finishing payment…</p>
<p>Confirming your payment…</p>
<script>
(function () {
var url = @json($redirect);
+17 -3
View File
@@ -615,7 +615,11 @@
</div>
@endif
@include('partials.paystack-sheet')
@include('partials.paystack-sheet', [
'audience' => 'buyer',
'sheetTitle' => 'Complete your gift',
'sheetSubtitle' => 'Pay securely. You\'ll get a confirmation when it succeeds.',
])
</div>
</div>
@@ -922,7 +926,13 @@
@endif
</div>
@include('partials.paystack-sheet')
@include('partials.paystack-sheet', [
'audience' => 'buyer',
'sheetTitle' => $evMode === 'contributions' ? 'Complete your contribution' : 'Complete your ticket payment',
'sheetSubtitle' => $evMode === 'contributions'
? 'Pay securely for your contribution. You\'ll get a confirmation when it succeeds.'
: 'Pay securely for your ticket. You\'ll get a confirmation when it succeeds.',
])
</div>
{{-- ===== ITINERARY ===== --}}
@@ -1514,7 +1524,11 @@
@endif
@if($acceptsPayment)
@include('partials.paystack-sheet')
@include('partials.paystack-sheet', [
'audience' => 'buyer',
'sheetTitle' => 'Complete your payment',
'sheetSubtitle' => 'Pay securely for your order. You\'ll get a confirmation when it succeeds.',
])
@endif
</div>{{-- end x-data --}}