feat:payments

apps/web/package.json

@@ -12,6 +12,7 @@
 		"@base-ui/react": "^1.0.0",
 		"@kk/api": "workspace:*",
 		"@kk/auth": "workspace:*",
+		"@kk/db": "workspace:*",
 		"@kk/env": "workspace:*",
 		"@libsql/client": "catalog:",
 		"@orpc/client": "catalog:",

apps/web/src/components/homepage/EventRegistrationForm.tsx

@@ -76,33 +76,30 @@ export default function EventRegistrationForm() {
 
 	const submitMutation = useMutation({
 		...orpc.submitRegistration.mutationOptions(),
-		onSuccess: (data) => {
+		onSuccess: async (data, variables) => {
-			if (data.managementToken) {
+			if (!data.managementToken) return;
+
+			// If it's a performer, show success immediately
+			if (variables.registrationType === "performer") {
 				setSuccessToken(data.managementToken);
+				return;
+			}
+
+			// For watchers, create a checkout and redirect
+			try {
+				const checkoutResult = await orpc.createCheckout.call({
+					token: data.managementToken,
+				});
+
+				if (checkoutResult.checkoutUrl) {
+					window.location.href = checkoutResult.checkoutUrl;
+				} else {
+					toast.error("Kon betalingspagina niet laden");
+				}
+			} catch (error) {
+				console.error("Checkout error:", error);
+				toast.error("Er is iets misgegaan bij het aanmaken van de betaling");
 			}
-			setPerformerData({
-				firstName: "",
-				lastName: "",
-				email: "",
-				phone: "",
-				artForm: "",
-				experience: "",
-				isOver16: false,
-				extraQuestions: "",
-			});
-			setWatcherData({
-				firstName: "",
-				lastName: "",
-				email: "",
-				phone: "",
-				extraQuestions: "",
-			});
-			setGuests([]);
-			setGuestErrors([]);
-			setPerformerErrors({});
-			setWatcherErrors({});
-			setPerformerTouched({});
-			setWatcherTouched({});
 		},
 		onError: (error) => {
 			toast.error(`Er is iets misgegaan: ${error.message}`);

apps/web/src/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as ContactRouteImport } from './routes/contact'
 import { Route as AdminRouteImport } from './routes/admin'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ManageTokenRouteImport } from './routes/manage.$token'
+import { Route as ApiWebhookLemonsqueezyRouteImport } from './routes/api/webhook/lemonsqueezy'
 import { Route as ApiRpcSplatRouteImport } from './routes/api/rpc/$'
 import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
 
@@ -54,6 +55,11 @@ const ManageTokenRoute = ManageTokenRouteImport.update({
   path: '/manage/$token',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiWebhookLemonsqueezyRoute = ApiWebhookLemonsqueezyRouteImport.update({
+  id: '/api/webhook/lemonsqueezy',
+  path: '/api/webhook/lemonsqueezy',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiRpcSplatRoute = ApiRpcSplatRouteImport.update({
   id: '/api/rpc/$',
   path: '/api/rpc/$',
@@ -75,6 +81,7 @@ export interface FileRoutesByFullPath {
   '/manage/$token': typeof ManageTokenRoute
   '/api/auth/$': typeof ApiAuthSplatRoute
   '/api/rpc/$': typeof ApiRpcSplatRoute
+  '/api/webhook/lemonsqueezy': typeof ApiWebhookLemonsqueezyRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -86,6 +93,7 @@ export interface FileRoutesByTo {
   '/manage/$token': typeof ManageTokenRoute
   '/api/auth/$': typeof ApiAuthSplatRoute
   '/api/rpc/$': typeof ApiRpcSplatRoute
+  '/api/webhook/lemonsqueezy': typeof ApiWebhookLemonsqueezyRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -98,6 +106,7 @@ export interface FileRoutesById {
   '/manage/$token': typeof ManageTokenRoute
   '/api/auth/$': typeof ApiAuthSplatRoute
   '/api/rpc/$': typeof ApiRpcSplatRoute
+  '/api/webhook/lemonsqueezy': typeof ApiWebhookLemonsqueezyRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -111,6 +120,7 @@ export interface FileRouteTypes {
     | '/manage/$token'
     | '/api/auth/$'
     | '/api/rpc/$'
+    | '/api/webhook/lemonsqueezy'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -122,6 +132,7 @@ export interface FileRouteTypes {
     | '/manage/$token'
     | '/api/auth/$'
     | '/api/rpc/$'
+    | '/api/webhook/lemonsqueezy'
   id:
     | '__root__'
     | '/'
@@ -133,6 +144,7 @@ export interface FileRouteTypes {
     | '/manage/$token'
     | '/api/auth/$'
     | '/api/rpc/$'
+    | '/api/webhook/lemonsqueezy'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -145,6 +157,7 @@ export interface RootRouteChildren {
   ManageTokenRoute: typeof ManageTokenRoute
   ApiAuthSplatRoute: typeof ApiAuthSplatRoute
   ApiRpcSplatRoute: typeof ApiRpcSplatRoute
+  ApiWebhookLemonsqueezyRoute: typeof ApiWebhookLemonsqueezyRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -198,6 +211,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ManageTokenRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/webhook/lemonsqueezy': {
+      id: '/api/webhook/lemonsqueezy'
+      path: '/api/webhook/lemonsqueezy'
+      fullPath: '/api/webhook/lemonsqueezy'
+      preLoaderRoute: typeof ApiWebhookLemonsqueezyRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/rpc/$': {
       id: '/api/rpc/$'
       path: '/api/rpc/$'
@@ -225,6 +245,7 @@ const rootRouteChildren: RootRouteChildren = {
   ManageTokenRoute: ManageTokenRoute,
   ApiAuthSplatRoute: ApiAuthSplatRoute,
   ApiRpcSplatRoute: ApiRpcSplatRoute,
+  ApiWebhookLemonsqueezyRoute: ApiWebhookLemonsqueezyRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

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}

bun.lock

@@ -24,6 +24,7 @@
         "@base-ui/react": "^1.0.0",
         "@kk/api": "workspace:*",
         "@kk/auth": "workspace:*",
+        "@kk/db": "workspace:*",
         "@kk/env": "workspace:*",
         "@libsql/client": "catalog:",
         "@orpc/client": "catalog:",
@@ -83,6 +84,7 @@
         "@kk/auth": "workspace:*",
         "@kk/db": "workspace:*",
         "@kk/env": "workspace:*",
+        "@lemonsqueezy/lemonsqueezy.js": "^4.00.0",
         "@orpc/client": "catalog:",
         "@orpc/openapi": "catalog:",
         "@orpc/server": "catalog:",
@@ -525,6 +527,8 @@
 
     "@kk/infra": ["@kk/infra@workspace:packages/infra"],
 
+    "@lemonsqueezy/lemonsqueezy.js": ["@lemonsqueezy/lemonsqueezy.js@4.0.0", "", {}, "sha512-xcY1/lDrY7CpIF98WKiL1ElsfoVhddP7FT0fw7ssOzrFqQsr44HgolKrQZxd9SywsCPn12OTOUieqDIokI3mFg=="],
+
     "@libsql/client": ["@libsql/client@0.15.15", "", { "dependencies": { "@libsql/core": "^0.15.14", "@libsql/hrana-client": "^0.7.0", "js-base64": "^3.7.5", "libsql": "^0.5.22", "promise-limit": "^2.7.0" } }, "sha512-twC0hQxPNHPKfeOv3sNT6u2pturQjLcI+CnpTM0SjRpocEGgfiZ7DWKXLNnsothjyJmDqEsBQJ5ztq9Wlu470w=="],
 
     "@libsql/core": ["@libsql/core@0.15.15", "", { "dependencies": { "js-base64": "^3.7.5" } }, "sha512-C88Z6UKl+OyuKKPwz224riz02ih/zHYI3Ho/LAcVOgjsunIRZoBw7fjRfaH9oPMmSNeQfhGklSG2il1URoOIsA=="],

packages/api/package.json

@@ -14,6 +14,7 @@
 		"@kk/auth": "workspace:*",
 		"@kk/db": "workspace:*",
 		"@kk/env": "workspace:*",
+		"@lemonsqueezy/lemonsqueezy.js": "^4.00.0",
 		"@orpc/client": "catalog:",
 		"@orpc/openapi": "catalog:",
 		"@orpc/server": "catalog:",

packages/api/src/routers/index.ts

@@ -2,6 +2,7 @@ import { randomUUID } from "node:crypto";
 import { db } from "@kk/db";
 import { adminRequest, registration } from "@kk/db/schema";
 import { user } from "@kk/db/schema/auth";
+import { env } from "@kk/env/server";
 import type { RouterClient } from "@orpc/server";
 import { and, count, desc, eq, gte, isNull, like, lte } from "drizzle-orm";
 import { z } from "zod";
@@ -512,6 +513,118 @@ export const appRouter = {
 
 			return { success: true, message: "Admin toegang geweigerd" };
 		}),
+
+	// Lemon Squeezy Checkout Procedure
+	createCheckout: publicProcedure
+		.input(z.object({ token: z.string().uuid() }))
+		.handler(async ({ input }) => {
+			if (
+				!env.LEMON_SQUEEZY_API_KEY ||
+				!env.LEMON_SQUEEZY_STORE_ID ||
+				!env.LEMON_SQUEEZY_VARIANT_ID
+			) {
+				throw new Error("Lemon Squeezy is niet geconfigureerd");
+			}
+
+			const rows = await db
+				.select()
+				.from(registration)
+				.where(
+					and(
+						eq(registration.managementToken, input.token),
+						isNull(registration.cancelledAt),
+					),
+				)
+				.limit(1);
+
+			const row = rows[0];
+			if (!row) throw new Error("Inschrijving niet gevonden");
+			if (row.paymentStatus === "paid")
+				throw new Error("Betaling is al voltooid");
+
+			const isPerformer = row.registrationType === "performer";
+			if (isPerformer) {
+				throw new Error("Artiesten hoeven niet te betalen");
+			}
+
+			// Calculate price: €5 + €2 per guest (in cents)
+			const guests: Array<{ firstName: string; lastName: string }> = row.guests
+				? JSON.parse(row.guests)
+				: [];
+			const amountInCents = 500 + guests.length * 200;
+
+			// Create checkout via Lemon Squeezy API
+			const response = await fetch(
+				"https://api.lemonsqueezy.com/v1/checkouts",
+				{
+					method: "POST",
+					headers: {
+						Accept: "application/vnd.api+json",
+						"Content-Type": "application/vnd.api+json",
+						Authorization: `Bearer ${env.LEMON_SQUEEZY_API_KEY}`,
+					},
+					body: JSON.stringify({
+						data: {
+							type: "checkouts",
+							attributes: {
+								custom_price: amountInCents,
+								product_options: {
+									name: "Kunstenkamp Evenement",
+									description: `Toegangskaart voor ${1 + guests.length} perso(o)n(en)`,
+									redirect_url: `${env.CORS_ORIGIN}/manage/${input.token}`,
+								},
+								checkout_data: {
+									email: row.email,
+									name: `${row.firstName} ${row.lastName}`,
+									custom: {
+										registration_token: input.token,
+									},
+								},
+								checkout_options: {
+									embed: false,
+									locale: "nl",
+								},
+							},
+							relationships: {
+								store: {
+									data: {
+										type: "stores",
+										id: env.LEMON_SQUEEZY_STORE_ID,
+									},
+								},
+								variant: {
+									data: {
+										type: "variants",
+										id: env.LEMON_SQUEEZY_VARIANT_ID,
+									},
+								},
+							},
+						},
+					}),
+				},
+			);
+
+			if (!response.ok) {
+				const errorData = await response.json();
+				console.error("Lemon Squeezy checkout error:", errorData);
+				throw new Error("Kon checkout niet aanmaken");
+			}
+
+			const checkoutData = (await response.json()) as {
+				data?: {
+					attributes?: {
+						url?: string;
+					};
+				};
+			};
+			const checkoutUrl = checkoutData.data?.attributes?.url;
+
+			if (!checkoutUrl) {
+				throw new Error("Geen checkout URL ontvangen");
+			}
+
+			return { checkoutUrl };
+		}),
 };
 
 export type AppRouter = typeof appRouter;

packages/db/src/schema/registrations.ts

@@ -25,6 +25,12 @@ export const registration = sqliteTable(
 		extraQuestions: text("extra_questions"),
 		managementToken: text("management_token").unique(),
 		cancelledAt: integer("cancelled_at", { mode: "timestamp_ms" }),
+		// Payment fields
+		paymentStatus: text("payment_status").notNull().default("pending"),
+		paymentAmount: integer("payment_amount").default(0),
+		lemonsqueezyOrderId: text("lemonsqueezy_order_id"),
+		lemonsqueezyCustomerId: text("lemonsqueezy_customer_id"),
+		paidAt: integer("paid_at", { mode: "timestamp_ms" }),
 		createdAt: integer("created_at", { mode: "timestamp_ms" })
 			.default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
 			.notNull(),
@@ -35,5 +41,7 @@ export const registration = sqliteTable(
 		index("registration_artForm_idx").on(table.artForm),
 		index("registration_createdAt_idx").on(table.createdAt),
 		index("registration_managementToken_idx").on(table.managementToken),
+		index("registration_paymentStatus_idx").on(table.paymentStatus),
+		index("registration_lemonsqueezyOrderId_idx").on(table.lemonsqueezyOrderId),
 	],
 );

packages/env/src/server.ts

@@ -5,7 +5,8 @@ import { config } from "dotenv";
 import { z } from "zod";
 
 // Only load .env file in development (not in Cloudflare Workers)
-if (process.env.NODE_ENV !== "production") {
+// Skip if vars are already loaded (e.g., by Vite dev server)
+if (process.env.NODE_ENV !== "production" && !process.env.DATABASE_URL) {
 	const __dirname = dirname(fileURLToPath(import.meta.url));
 	config({ path: resolve(__dirname, "../.env") });
 }
@@ -24,6 +25,10 @@ export const env = createEnv({
 		NODE_ENV: z
 			.enum(["development", "production", "test"])
 			.default("development"),
+		LEMON_SQUEEZY_API_KEY: z.string().min(1).optional(),
+		LEMON_SQUEEZY_STORE_ID: z.string().min(1).optional(),
+		LEMON_SQUEEZY_VARIANT_ID: z.string().min(1).optional(),
+		LEMON_SQUEEZY_WEBHOOK_SECRET: z.string().min(1).optional(),
 	},
 	runtimeEnv: process.env,
 	emptyStringAsUndefined: true,