diff --git a/routes/api/receipt/[id].ts b/routes/api/receipt/[id].ts
new file mode 100644
index 0000000..18b025e
--- /dev/null
+++ b/routes/api/receipt/[id].ts
@@ -0,0 +1,52 @@
+import { define } from "../../../../utils.ts";
+import { getTransactionByStripeId } from "../../../../services/paymentService.ts";
+
+export const handler = define.handlers({
+  async GET(ctx) {
+    const stripeId = ctx.params.id;
+    if (!stripeId) {
+      return new Response("Not Found", { status: 404 });
+    }
+    const tx = await getTransactionByStripeId(stripeId);
+    if (!tx) {
+      return new Response("Receipt not found", { status: 404 });
+    }
+    const amount = tx.amount ?? 0;
+    const date = tx.payment_date || tx.created_on || Date.now();
+    const leaseId = tx.lease_id || "";
+    const method = tx.payment_method || "-";
+
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Payment Receipt</title>
+  <style>
+    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; padding: 24px; color: #111827; }
+    .card { max-width: 560px; margin: 0 auto; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; }
+    h1 { font-size: 20px; margin: 0 0 12px; }
+    .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
+    .label { color: #6b7280; }
+    .value { font-weight: 600; }
+  </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>Payment Receipt</h1>
+      <div class="row"><div class="label">Stripe/Payment ID</div><div class="value">${stripeId}</div></div>
+      <div class="row"><div class="label">Lease ID</div><div class="value">${leaseId}</div></div>
+      <div class="row"><div class="label">Amount</div><div class="value">$${amount.toLocaleString()}</div></div>
+      <div class="row"><div class="label">Method</div><div class="value">${method}</div></div>
+      <div class="row"><div class="label">Date</div><div class="value">${new Date(date).toLocaleString()}</div></div>
+    </div>
+  </body>
+  </html>`;
+
+    return new Response(html, {
+      status: 200,
+      headers: { "content-type": "text/html; charset=utf-8" },
+    });
+  },
+});
+