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

Fix POS Paystack double modal and keep checkout in-app.

Browse Source 
Pass access_code into the payment sheet, launch Paystack Inline only,
and hide Ladill chrome after Inline loads so register Card/MoMo shows
a single payment interface.
This commit is contained in:
isaacclad
2026-07-21 21:23:21 +00:00
parent 4dcc46e319
commit 5c23df9561
8 changed files with 147 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/Pos/RegisterController.php
+3
View File
@@ -235,6 +235,7 @@ class RegisterController extends Controller
$result = $this->sales->initiatePayCheckout($sale, $merchant);
$checkoutUrl = $result['checkout_url'] ?? null;
$accessCode = $result['access_code'] ?? null;
$this->customerDisplays->pushPayment($location, $sale->fresh(['lines']), [
'checkout_url' => $checkoutUrl,
@@ -246,6 +247,7 @@ class RegisterController extends Controller
if ($request->expectsJson() || $request->ajax()) {
return response()->json([
'checkout_url' => $checkoutUrl,
'access_code' => $accessCode,
'sale_id' => $sale->id,
]);
}
@@ -253,6 +255,7 @@ class RegisterController extends Controller
return redirect()
->route('pos.sales.show', $sale)
->with('checkout_url', $checkoutUrl)
->with('access_code', $accessCode)
->with('success', 'Payment sheet ready — customer screen shows the QR; till sheet is for the operator.');
} catch (RuntimeException $e) {
return back()->withInput()->with('error', $e->getMessage());
app/Http/Controllers/Pos/TicketController.php
+2
View File
@@ -230,6 +230,7 @@ class TicketController extends Controller
if ($request->expectsJson() || $request->ajax()) {
return response()->json([
'checkout_url' => $result['checkout_url'],
'access_code' => $result['access_code'] ?? '',
'sale_id' => $sale->id,
]);
}
@@ -237,6 +238,7 @@ class TicketController extends Controller
return redirect()
->route('pos.tickets.show', $sale)
->with('checkout_url', $result['checkout_url'])
->with('access_code', $result['access_code'] ?? '')
->with('success', 'Payment sheet ready — hand the device to the customer for card or MoMo.');
} catch (RuntimeException $e) {
return back()->with('error', $e->getMessage());
app/Services/Payments/MerchantGatewayService.php
+2
View File
@@ -132,6 +132,7 @@ class MerchantGatewayService
return [
'checkout_url' => (string) $checkout['checkout_url'],
'access_code' => (string) ($checkout['access_code'] ?? ''),
'reference' => (string) $checkout['reference'],
'provider' => 'ladill_pay',
];
@@ -186,6 +187,7 @@ class MerchantGatewayService
return [
'checkout_url' => $url,
'access_code' => (string) ($response->json('data.access_code') ?? ''),
'reference' => (string) ($response->json('data.reference') ?: $reference),
'provider' => PaymentGatewaySetting::PROVIDER_PAYSTACK,
];
app/Services/Pos/PosSaleService.php
+6 -1
View File
@@ -362,7 +362,11 @@ class PosSaleService
'payment_reference' => $checkout['reference'],
])->save();
return ['payment' => $payment, 'checkout_url' => $checkout['checkout_url']];
return [
'payment' => $payment,
'checkout_url' => $checkout['checkout_url'],
'access_code' => (string) ($checkout['access_code'] ?? ''),
];
}
public function completePayPayment(string $reference): PosPayment
@@ -577,6 +581,7 @@ class PosSaleService
return [
'sale' => $sale->fresh('lines'),
'checkout_url' => $checkoutUrl,
'access_code' => (string) ($checkout['access_code'] ?? ''),
];
}
resources/js/app.js
+6 -2
View File
@@ -21,13 +21,17 @@ document.addEventListener('alpine:init', () => {
Alpine.store('paymentCheckout', {
isOpen: false,
url: '',
open(url) {
accessCode: '',
open(url, accessCode = '') {
this.url = url || '';
this.isOpen = this.url !== '';
this.accessCode = accessCode || '';
this.isOpen = this.url !== '' || this.accessCode !== '';
},
close() {
this.isOpen = false;
this.url = '';
this.accessCode = '';
window.LadillPayCheckout?.cancel?.();
},
});
});
resources/views/partials/payment-checkout-host.blade.php
+4 -2
View File
@@ -2,8 +2,9 @@
<div x-data
x-init="
const url = @js(session('checkout_url'));
if (url) {
$store.paymentCheckout.open(url);
const code = @js(session('access_code'));
if (url || code) {
$store.paymentCheckout.open(url || '', code || '');
}
"
class="contents">
@@ -11,6 +12,7 @@
get showSheet() { return $store.paymentCheckout.isOpen },
set showSheet(v) { if (!v) { $store.paymentCheckout.close() } },
get checkoutUrl() { return $store.paymentCheckout.url },
get accessCode() { return $store.paymentCheckout.accessCode },
}">
@include('partials.paystack-sheet', [
'audience' => 'operator',
resources/views/partials/paystack-sheet.blade.php
+106 -98
View File
@@ -187,12 +187,14 @@
this.launchInline(code, returnUrl);
return;
}
// Non-Paystack external URL without access_code — cannot embed.
// Never open checkout.paystack.com in an external tab.
this.frameable = false;
this.inline = false;
this.launching = false;
this._activeCode = '';
this.error = 'Secure checkout could not be opened in-page. Please try again.';
this.error = isPaystackCheckoutUrl(url)
? 'Could not start in-app payment. Please try again.'
: 'Secure checkout could not be opened in-page. Please try again.';
},
launchInline(accessCode, returnUrl) {
var store = this;
@@ -293,118 +295,124 @@
);
}
"
@keydown.escape.window="if (showSheet) showSheet = false"
@keydown.escape.window="if (showSheet && $store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error || $store.ladillPayCheckout.launching)) showSheet = false"
@ladill-pay-cancelled.window="showSheet = false"
class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
class="fixed inset-0 z-[9999]"
:class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable) ? 'pointer-events-none' : ''"
role="dialog"
aria-modal="true"
:aria-hidden="(!showSheet).toString()"
aria-label="{{ $sheetAria }}">
<div class="absolute inset-0 bg-black/60"
data-ladill-pay-backdrop
x-show="showSheet"
x-transition:enter="transition-opacity duration-300"
{{-- Brief loader only — then Paystack Inline is the sole payment UI (avoids double modal). --}}
<div x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error"
x-cloak
data-ladill-pay-loading
class="pointer-events-auto absolute inset-0 flex items-center justify-center bg-black/40 p-6"
x-transition:enter="transition-opacity duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity duration-200"
x-transition:leave="transition-opacity duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
x-transition:leave-end="opacity-0">
<div class="flex items-center gap-3 rounded-2xl bg-white px-5 py-4 shadow-xl">
<svg class="h-5 w-5 animate-spin text-indigo-600" fill="none" viewBox="0 0 24 24" aria-hidden="true">
<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>
<p class="text-sm font-semibold text-slate-800">Opening payment…</p>
</div>
</div>
{{-- One panel: bottom sheet (mobile) + centered modal (desktop). --}}
<div data-ladill-pay-panel
class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl"
style="height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
x-show="showSheet"
x-transition:enter="transition duration-300 ease-out md:duration-200"
x-transition:enter-start="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
x-transition:enter-end="translate-y-0 opacity-100 md:scale-100"
x-transition:leave="transition duration-200 ease-in md:duration-150"
x-transition:leave-start="translate-y-0 opacity-100 md:scale-100"
x-transition:leave-end="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
@click.stop>
<div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5 md:px-5 md:pt-3"
style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
<div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200 md:hidden" data-ladill-pay-handle aria-hidden="true"></div>
<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"
x-ref="checkoutClose"
x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.focus()) } })"
@click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
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" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg>
</button>
</div>
{{-- Full Ladill shell only for same-origin iframe (e.g. MoMo waiting) or recovery errors. --}}
<div x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
x-cloak
class="pointer-events-auto absolute inset-0 flex items-end justify-center md:items-center md:p-6"
data-ladill-pay-shell>
<div class="absolute inset-0 bg-black/60"
data-ladill-pay-backdrop
x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
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; window.LadillPayCheckout?.cancel?.()">
</div>
<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
<iframe x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.frameable"
:src="showSheet && $store.ladillPayCheckout && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
class="h-full min-h-[60dvh] w-full border-0 md:min-h-0"
style="min-height: 28rem"
allow="payment *"
title="{{ $iframeTitle }}"></iframe>
<div x-show="!$store.ladillPayCheckout || !$store.ladillPayCheckout.frameable"
class="flex min-h-[60dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[28rem] md:px-8 md:py-12"
data-ladill-pay-inline-status>
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
<svg x-show="!$store.ladillPayCheckout || $store.ladillPayCheckout.launching || !checkoutUrl && !(typeof accessCode !== 'undefined' && accessCode)"
class="h-6 w-6 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>
<svg x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error"
class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
</svg>
<svg x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/>
</svg>
<div data-ladill-pay-panel
class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl"
style="height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
x-transition:enter="transition duration-300 ease-out md:duration-200"
x-transition:enter-start="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
x-transition:enter-end="translate-y-0 opacity-100 md:scale-100"
x-transition:leave="transition duration-200 ease-in md:duration-150"
x-transition:leave-start="translate-y-0 opacity-100 md:scale-100"
x-transition:leave-end="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
@click.stop>
<div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5 md:px-5 md:pt-3"
style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
<div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200 md:hidden" data-ladill-pay-handle aria-hidden="true"></div>
<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"
x-ref="checkoutClose"
x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.focus()) } })"
@click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
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" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="max-w-xs space-y-1 md:max-w-sm">
<p class="text-sm font-semibold text-slate-800"
data-ladill-pay-status-title
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
? 'Checkout unavailable'
: ($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching
? 'Complete payment in the Paystack window'
: 'Starting secure checkout…')"></p>
<p class="text-xs leading-snug text-slate-500"
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
? $store.ladillPayCheckout.error
: 'Paystack opens on this page — not in a separate browser.'"></p>
</div>
<button type="button"
data-ladill-pay-retry
x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
@click="$store.ladillPayCheckout.sync(true, typeof checkoutUrl !== 'undefined' ? checkoutUrl : '', typeof accessCode !== 'undefined' ? accessCode : '', typeof returnUrl !== 'undefined' ? returnUrl : '')"
class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
Try again
</button>
<button type="button"
@click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
class="text-xs font-medium text-slate-500 hover:text-slate-700">
Cancel
</button>
</div>
<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
<iframe x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.frameable"
:src="showSheet && $store.ladillPayCheckout && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
class="h-full min-h-[60dvh] w-full border-0 md:min-h-0"
style="min-height: 28rem"
allow="payment *"
title="{{ $iframeTitle }}"></iframe>
<div x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
class="flex min-h-[40dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[20rem] md:px-8 md:py-12"
data-ladill-pay-inline-status>
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-50 text-red-500" aria-hidden="true">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/>
</svg>
</div>
<div class="max-w-xs space-y-1 md:max-w-sm">
<p class="text-sm font-semibold text-slate-800" data-ladill-pay-status-title>Checkout unavailable</p>
<p class="text-xs leading-snug text-slate-500" x-text="$store.ladillPayCheckout.error"></p>
</div>
<button type="button"
data-ladill-pay-retry
@click="$store.ladillPayCheckout.sync(true, typeof checkoutUrl !== 'undefined' ? checkoutUrl : '', typeof accessCode !== 'undefined' ? accessCode : '', typeof returnUrl !== 'undefined' ? returnUrl : '')"
class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
Try again
</button>
<button type="button"
@click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
class="text-xs font-medium text-slate-500 hover:text-slate-700">
Cancel
</button>
</div>
</div>
@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 md:px-5">
{{ $sheetFooter }}
</p>
@endif
</div>
@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 md:px-5">
{{ $sheetFooter }}
</p>
@endif
</div>
</div>
</template>
tests/Feature/ResponsivePaystackSheetTest.php
+18 -2
View File
@@ -18,6 +18,8 @@ class ResponsivePaystackSheetTest extends TestCase
$this->assertStringContainsString('data-ladill-pay-panel', $html);
$this->assertStringContainsString('data-ladill-pay-backdrop', $html);
$this->assertStringContainsString('data-ladill-pay-handle', $html);
$this->assertStringContainsString('data-ladill-pay-loading', $html);
$this->assertStringContainsString('data-ladill-pay-shell', $html);
$this->assertStringContainsString('data-ladill-pay-inline-status', $html);
$this->assertStringContainsString('md:items-center', $html);
$this->assertStringContainsString('rounded-t-2xl', $html);
@@ -28,11 +30,13 @@ class ResponsivePaystackSheetTest extends TestCase
$this->assertStringContainsString('LadillPayCheckout', $html);
$this->assertStringContainsString('resumeTransaction', $html);
$this->assertStringContainsString('js.paystack.co/v2/inline.js', $html);
$this->assertStringContainsString('Starting secure checkout', $html);
$this->assertStringContainsString('not in a separate browser', $html);
$this->assertStringContainsString('Opening payment', $html);
$this->assertStringContainsString('pointer-events-none', $html);
// Must not push Paystack to a separate browser as the primary path.
$this->assertStringNotContainsString('Continue to Paystack', $html);
$this->assertStringNotContainsString('window.open(', $html);
// Must not stack Ladill chrome under Paystack Inline (double interface).
$this->assertStringNotContainsString('Complete payment in the Paystack window', $html);
// Must not use Tailwind `hidden` + x-show on the panel (desktop stays invisible).
$this->assertStringNotContainsString('hidden w-full max-w-lg', $html);
$this->assertStringNotContainsString('Paystack checkout', $html);
@@ -56,4 +60,16 @@ class ResponsivePaystackSheetTest extends TestCase
|| str_contains($html, 'https:\/\/example.test\/paid')
);
}
public function test_payment_checkout_host_passes_access_code(): void
{
$path = resource_path('views/partials/payment-checkout-host.blade.php');
$this->assertFileExists($path);
$html = file_get_contents($path);
$this->assertStringContainsString('access_code', $html);
$this->assertStringContainsString('accessCode', $html);
$this->assertStringContainsString('paymentCheckout.open', $html);
$this->assertStringContainsString('partials.paystack-sheet', $html);
}
}