Use mobile bottom sheet for Mini checkout and wrap Paystack in branded frame.

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>

app/Http/Controllers/Public/PaymentController.php

@@ -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']);
     }