From ce4d543cbf690c6cac35022592cd8806e9c6c5bc Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 11 May 2026 14:51:04 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/pay.$id.tsx | 40 ++++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/routes/pay.$id.tsx b/src/routes/pay.$id.tsx
index 032287e..cb29723 100644
--- a/src/routes/pay.$id.tsx
+++ b/src/routes/pay.$id.tsx
@@ -2,11 +2,11 @@ import { createFileRoute, useSearch } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { CheckCircle2, CreditCard, XCircle } from "lucide-react";
+import { CheckCircle2, CreditCard, XCircle, Loader2 } from "lucide-react";
 import { formatCurrency } from "@/lib/format";
-import { getPublicPaymentRequest } from "@/lib/payments.functions";
+import { getPublicPaymentRequest, startPublicCheckout } from "@/lib/payments.functions";
 import { JusticeIcon } from "@/components/justice-icon";
+import { toast } from "sonner";
 
 export const Route = createFileRoute("/pay/$id")({
   validateSearch: (s: Record<string, unknown>) => ({
@@ -43,6 +43,7 @@ function PayPage() {
   const data = Route.useLoaderData();
   const search = useSearch({ from: "/pay/$id" });
   const [row, setRow] = useState(data);
+  const [starting, setStarting] = useState(false);
 
   useEffect(() => {
     setRow(data);
@@ -104,19 +105,26 @@ function PayPage() {
         </div>
       </div>
 
-      {row.stripe_checkout_url ? (
-        <Button
-          className="w-full"
-          size="lg"
-          onClick={() => {
-            window.location.href = row.stripe_checkout_url!;
-          }}
-        >
-          Pay {formatCurrency(row.total_amount_cents / 100)} with card
-        </Button>
-      ) : (
-        <Badge variant="outline">Checkout link unavailable</Badge>
-      )}
+      <Button
+        className="w-full"
+        size="lg"
+        disabled={starting}
+        onClick={async () => {
+          setStarting(true);
+          try {
+            const res = await startPublicCheckout({ data: { id: row.id } });
+            window.location.href = res.checkout_url;
+          } catch (e: any) {
+            setStarting(false);
+            toast.error("Could not start checkout", {
+              description: e?.message ?? "Please try again in a moment.",
+            });
+          }
+        }}
+      >
+        {starting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        Pay {formatCurrency(row.total_amount_cents / 100)} with card
+      </Button>
 
       {search.status === "cancel" && (
         <p className="text-xs text-muted-foreground text-center mt-3">