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

Frame POS checkout sheet for till operators.
Deploy Ladill POS / deploy (push) Successful in 1m16s
Details

Browse Source 
Use operator-facing copy and merchant email so Card/MoMo checkout is for staff handing the screen to a customer, not self-serve buyers.
This commit is contained in:
isaacclad
2026-07-15 13:23:29 +00:00
parent 69ec45eea6
commit 7c20cf705a
6 changed files with 64 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/partials/payment-checkout-host.blade.php
+1
View File
@@ -1,3 +1,4 @@
{{-- Global host for till-operator Card/MoMo sheets (register + open tickets). --}}
<div x-data
x-init="
const url = @js(session('checkout_url'));
resources/views/partials/paystack-sheet.blade.php
+42 -17
View File
@@ -1,14 +1,21 @@
{{--
Payment checkout shell: bottomsheet on mobile, centered modal on desktop.
POS checkout shell for till operators: bottomsheet on mobile, modal on desktop.
Audience is staff at the register — not the end customer browsing alone.
Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).
--}}
@php
$sheetTitle = $sheetTitle ?? 'Customer payment';
$sheetSubtitle = $sheetSubtitle ?? 'Hand this screen to the customer for card or mobile money.';
$sheetAria = $sheetAria ?? $sheetTitle;
$iframeTitle = $iframeTitle ?? 'Customer card or mobile money checkout';
@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 +39,31 @@
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>
<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 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 ($sheetSubtitle)
<p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
@endif
</div>
<button type="button" @click="showSheet = false"
class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
aria-label="Close payment sheet">
<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>
<p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500">
Stay on this screen until the customer finishes. Closing only hides the sheet.
</p>
</div>
{{-- Desktop modal --}}
@@ -59,11 +76,16 @@
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 ($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"
aria-label="Close">
class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
aria-label="Close payment sheet">
<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>
@@ -72,7 +94,10 @@
<iframe :src="showSheet ? checkoutUrl : ''"
class="min-h-0 w-full flex-1 border-0"
allow="payment *"
title="Payment checkout"></iframe>
title="{{ $iframeTitle }}"></iframe>
<p class="shrink-0 border-t border-slate-100 bg-slate-50 px-5 py-2 text-center text-[11px] text-slate-500">
Stay on this screen until the customer finishes. Closing only hides the sheet.
</p>
</div>
</div>
</template>
resources/views/pos/payment-return.blade.php
+2 -2
View File
@@ -3,14 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payment complete</title>
<title>Customer payment</title>
<style>
body { font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; display: grid; place-items: center; min-height: 100vh; margin: 0; }
p { font-size: 0.95rem; color: #475569; }
</style>
</head>
<body>
<p>Finishing payment…</p>
<p>Confirming customer payment…</p>
<script>
(function () {
var url = @json($redirect);