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

Use mobile bottom sheet for Mini checkout and wrap Paystack in branded frame.
Deploy Ladill Mini / deploy (push) Successful in 25s
Details

Browse Source 
Amount entry slides up from the bottom on mobile; Paystack opens in a Ladill Mini sheet on mobile and a centered modal on desktop instead of leaving the site.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-07 20:29:13 +00:00
co-authored by Cursor
parent 664d2e68c2
commit f405217a33
5 changed files with 198 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/Public/PaymentController.php
+10 -1
View File
@@ -5,6 +5,7 @@ namespace App\Http\Controllers\Public;
use App\Http\Controllers\Controller;
use App\Models\QrCode;
use App\Services\Mini\MiniPaymentService;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\View\View;
@@ -14,7 +15,7 @@ class PaymentController extends Controller
{
public function __construct(private MiniPaymentService $payments) {}
public function pay(Request $request, string $shortCode): RedirectResponse
public function pay(Request $request, string $shortCode): JsonResponse|RedirectResponse
{
$qrCode = QrCode::query()
->with('user.qrSetting')
@@ -30,9 +31,17 @@ class PaymentController extends Controller
try {
$result = $this->payments->initiate($qrCode, $validated);
} catch (RuntimeException $e) {
if ($request->expectsJson()) {
return response()->json(['error' => $e->getMessage()], 422);
}
return back()->withInput()->with('error', $e->getMessage());
}
if ($request->expectsJson()) {
return response()->json(['checkout_url' => $result['checkout_url']]);
}
return redirect()->away($result['checkout_url']);
}
resources/views/partials/mini-paystack-frame-footer.blade.php
+3
View File
@@ -0,0 +1,3 @@
<div class="shrink-0 border-t border-slate-100 bg-slate-50/80 px-4 py-2.5 text-center">
<p class="text-[11px] text-slate-400">Secured by Paystack · Powered by Ladill Mini</p>
</div>
resources/views/partials/mini-paystack-frame-header.blade.php
+18
View File
@@ -0,0 +1,18 @@
<div class="relative shrink-0 border-b border-slate-100 px-4 pb-3 pt-3">
<div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200 md:hidden"></div>
<div class="flex items-center justify-between gap-3 pt-2 md:pt-0">
<div class="flex min-w-0 items-center gap-2.5">
<img src="{{ asset('images/logo/ladillmini-logo.svg') }}?v={{ @filemtime(public_path('images/logo/ladillmini-logo.svg')) ?: '1' }}"
alt="Ladill Mini" class="h-5 w-auto shrink-0">
<p class="truncate text-sm font-semibold text-slate-800">Complete payment</p>
</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">
<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>
resources/views/partials/paystack-sheet.blade.php
+63 -45
View File
@@ -1,54 +1,72 @@
{{--
Paystack mobile bottom-sheet iframe.
Paystack checkout wrapper — bottom sheet on mobile, centered modal on desktop.
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">
{{-- Mobile bottom sheet --}}
<div x-show="showSheet"
x-cloak
class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
role="dialog"
aria-modal="true">
{{-- Backdrop --}}
<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>
{{-- Sheet --}}
<div class="relative flex flex-col bg-white rounded-t-2xl overflow-hidden"
style="height:90dvh"
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">
<div class="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"
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="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>
<iframe :src="showSheet ? checkoutUrl : ''"
class="flex-1 w-full border-0"
allow="payment"
title="Paystack checkout"></iframe>
<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>
{{-- Desktop modal --}}
<div x-show="showSheet"
x-cloak
class="fixed inset-0 z-[9999] hidden items-center justify-center p-6 md:flex"
role="dialog"
aria-modal="true">
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm"
@click="showSheet = false"></div>
<div class="relative flex w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl"
style="height: min(720px, 90vh)"
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">
@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>
</div>
</template>
resources/views/public/qr/payment-landing.blade.php
+104 -14
View File
@@ -2,17 +2,102 @@
$content = $qrCode->content();
$businessName = $content['business_name'] ?? $qrCode->label;
$currency = $content['currency'] ?? 'GHS';
$payUrl = route('qr.public.payment.pay', $qrCode->short_code);
$csrf = csrf_token();
@endphp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="csrf-token" content="{{ $csrf }}">
<title>Pay {{ $businessName }}</title>
@vite(['resources/css/app.css'])
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen bg-slate-50 text-slate-900">
<main class="mx-auto flex min-h-screen max-w-sm flex-col justify-center px-4 py-8">
<body class="min-h-screen bg-slate-50 text-slate-900"
x-data="{
amount: @js(old('amount')),
loading: false,
errorMsg: @js(session('error')),
showSheet: false,
checkoutUrl: '',
async submitPay() {
const value = parseFloat(this.amount);
if (!value || value <= 0) {
this.errorMsg = 'Enter an amount greater than zero.';
return;
}
this.errorMsg = '';
this.loading = true;
try {
const res = await fetch(@js($payUrl), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': @js($csrf),
'X-Requested-With': 'XMLHttpRequest',
},
body: JSON.stringify({ amount: value }),
});
const data = await res.json().catch(() => ({}));
if (!res.ok || data.error || data.message) {
this.errorMsg = data.error || data.message || 'Could not start payment. Please try again.';
this.loading = false;
return;
}
this.checkoutUrl = data.checkout_url;
this.showSheet = true;
this.loading = false;
} catch (e) {
this.errorMsg = 'Network error. Please try again.';
this.loading = false;
}
}
}">
{{-- Mobile: merchant header + bottom sheet --}}
<div class="md:hidden flex min-h-screen flex-col">
<div class="flex flex-1 flex-col items-center justify-center px-6 pb-6 pt-10 text-center">
@if(!empty($content['logo_path']))
<img src="{{ route('qr.public.payment.logo', $qrCode->short_code) }}" alt="" class="h-16 w-16 rounded-2xl object-cover shadow-sm">
@endif
<h1 class="mt-4 text-xl font-bold text-slate-900">{{ $businessName }}</h1>
@if(!empty($content['branch_label']))
<p class="mt-1 text-sm text-slate-500">{{ $content['branch_label'] }}</p>
@endif
</div>
<div class="rounded-t-3xl border-t border-slate-200/80 bg-white px-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-3 shadow-[0_-8px_30px_rgba(15,23,42,0.08)]">
<div class="mx-auto mb-4 h-1 w-10 rounded-full bg-slate-200"></div>
<div x-show="errorMsg" x-cloak class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div>
<label for="amount-mobile" class="sr-only">Amount ({{ $currency }})</label>
<div class="relative">
<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
<input type="number" id="amount-mobile" x-model="amount" step="0.01" min="0.01" required autofocus
inputmode="decimal"
@keydown.enter.prevent="submitPay()"
class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
placeholder="0.00">
</div>
<button type="button" @click="submitPay()" :disabled="loading"
class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
<svg x-show="loading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>
<span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
</button>
<p class="mt-4 text-center text-[11px] text-slate-400">Secured by Paystack · Powered by Ladill Mini</p>
</div>
</div>
{{-- Desktop: centered card --}}
<main class="mx-auto hidden min-h-screen max-w-sm flex-col justify-center px-4 py-8 md:flex">
<div class="rounded-3xl border border-slate-200/80 bg-white p-6 shadow-sm">
<div class="text-center">
@if(!empty($content['logo_path']))
@@ -24,27 +109,32 @@
@endif
</div>
@if(session('error'))
<div class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
@endif
<div x-show="errorMsg" x-cloak class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div>
<form method="post" action="{{ route('qr.public.payment.pay', $qrCode->short_code) }}" class="mt-6">
@csrf
<label for="amount" class="sr-only">Amount ({{ $currency }})</label>
<div class="mt-6">
<label for="amount-desktop" class="sr-only">Amount ({{ $currency }})</label>
<div class="relative">
<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
<input type="number" id="amount" name="amount" step="0.01" min="0.01" required autofocus
<input type="number" id="amount-desktop" x-model="amount" step="0.01" min="0.01" required
inputmode="decimal"
@keydown.enter.prevent="submitPay()"
class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
placeholder="0.00" value="{{ old('amount') }}">
placeholder="0.00">
</div>
<button type="submit" class="mt-4 w-full rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700">
Pay
<button type="button" @click="submitPay()" :disabled="loading"
class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
<svg x-show="loading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>
<span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
</button>
</form>
</div>
<p class="mt-4 text-center text-[11px] text-slate-400">Secured by Paystack · Powered by Ladill Mini</p>
</div>
</main>
@include('partials.paystack-sheet')
</body>
</html>