feat:payments

apps/web/src/routes/api/webhook/lemonsqueezy.ts

@@ -0,0 +1,108 @@
+import { createHmac } from "node:crypto";
+import { db } from "@kk/db";
+import { registration } from "@kk/db/schema";
+import { env } from "@kk/env/server";
+import { createFileRoute } from "@tanstack/react-router";
+import { eq } from "drizzle-orm";
+
+// Webhook payload types
+interface LemonSqueezyWebhookPayload {
+	meta: {
+		event_name: string;
+		custom_data?: {
+			registration_token?: string;
+		};
+	};
+	data: {
+		id: string;
+		type: string;
+		attributes: {
+			customer_id: number;
+			order_number: number;
+			status: string;
+		};
+	};
+}
+
+function verifyWebhookSignature(
+	payload: string,
+	signature: string,
+	secret: string,
+): boolean {
+	const hmac = createHmac("sha256", secret);
+	hmac.update(payload);
+	const digest = hmac.digest("hex");
+	return signature === digest;
+}
+
+async function handleWebhook({ request }: { request: Request }) {
+	// Get the raw body as text for signature verification
+	const payload = await request.text();
+	const signature = request.headers.get("X-Signature");
+
+	if (!signature) {
+		return new Response("Missing signature", { status: 401 });
+	}
+
+	if (!env.LEMON_SQUEEZY_WEBHOOK_SECRET) {
+		console.error("LEMON_SQUEEZY_WEBHOOK_SECRET not configured");
+		return new Response("Webhook secret not configured", { status: 500 });
+	}
+
+	// Verify the signature
+	if (
+		!verifyWebhookSignature(
+			payload,
+			signature,
+			env.LEMON_SQUEEZY_WEBHOOK_SECRET,
+		)
+	) {
+		return new Response("Invalid signature", { status: 401 });
+	}
+
+	try {
+		const event: LemonSqueezyWebhookPayload = JSON.parse(payload);
+
+		// Only handle order_created events
+		if (event.meta.event_name !== "order_created") {
+			return new Response("Event ignored", { status: 200 });
+		}
+
+		const registrationToken = event.meta.custom_data?.registration_token;
+		if (!registrationToken) {
+			console.error("No registration token in webhook payload");
+			return new Response("Missing registration token", { status: 400 });
+		}
+
+		const orderId = event.data.id;
+		const customerId = String(event.data.attributes.customer_id);
+
+		// Update registration in database
+		await db
+			.update(registration)
+			.set({
+				paymentStatus: "paid",
+				lemonsqueezyOrderId: orderId,
+				lemonsqueezyCustomerId: customerId,
+				paidAt: new Date(),
+			})
+			.where(eq(registration.managementToken, registrationToken));
+
+		console.log(
+			`Payment successful for registration ${registrationToken}, order ${orderId}`,
+		);
+
+		return new Response("OK", { status: 200 });
+	} catch (error) {
+		console.error("Webhook processing error:", error);
+		return new Response("Internal error", { status: 500 });
+	}
+}
+
+export const Route = createFileRoute("/api/webhook/lemonsqueezy")({
+	server: {
+		handlers: {
+			POST: handleWebhook,
+		},
+	},
+});

apps/web/src/routes/manage.$token.tsx

@@ -78,6 +78,22 @@ function ManageRegistrationPage() {
 		},
 	});
 
+	const checkoutMutation = useMutation({
+		...orpc.createCheckout.mutationOptions(),
+		onSuccess: (data) => {
+			if (data.checkoutUrl) {
+				window.location.href = data.checkoutUrl;
+			}
+		},
+		onError: (err) => {
+			toast.error(`Betaling starten mislukt: ${err.message}`);
+		},
+	});
+
+	const handlePay = () => {
+		checkoutMutation.mutate({ token });
+	};
+
 	const handleEdit = () => {
 		if (data) {
 			setFormData({
@@ -631,6 +647,47 @@ function ManageRegistrationPage() {
 					)}
 				</div>
 
+				{/* Payment status badge for watchers */}
+				{!isPerformer && (
+					<div className="mb-6">
+						{data.paymentStatus === "paid" ? (
+							<div className="inline-flex items-center gap-2 rounded-full border border-green-400/40 bg-green-400/10 px-4 py-1.5 font-semibold text-green-400 text-sm">
+								<svg
+									className="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									strokeWidth={2}
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+								Betaling ontvangen
+							</div>
+						) : (
+							<div className="inline-flex items-center gap-2 rounded-full border border-yellow-400/40 bg-yellow-400/10 px-4 py-1.5 font-semibold text-sm text-yellow-400">
+								<svg
+									className="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									strokeWidth={2}
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+								Betaling in afwachting
+							</div>
+						)}
+					</div>
+				)}
+
 				<div className="space-y-6 rounded-lg border border-white/20 bg-white/5 p-6 md:p-8">
 					<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 						<div>
@@ -708,6 +765,17 @@ function ManageRegistrationPage() {
 				</div>
 
 				<div className="mt-8 flex flex-wrap items-center gap-4">
+					{/* Pay button for watchers who haven't paid */}
+					{!isPerformer && data.paymentStatus !== "paid" && (
+						<button
+							type="button"
+							onClick={handlePay}
+							disabled={checkoutMutation.isPending}
+							className="bg-teal-400 px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-teal-300 disabled:opacity-50"
+						>
+							{checkoutMutation.isPending ? "Laden..." : "Nu betalen"}
+						</button>
+					)}
 					<button
 						type="button"
 						onClick={handleEdit}