zias/kunstenkamp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:payments

Browse Source
This commit is contained in:
ッ
2026-03-03 12:33:44 +01:00
parent f6c2bad9df
commit b9e5c44588
10 changed files with 352 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/package.json
View File

@@ -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:",

47
apps/web/src/components/homepage/EventRegistrationForm.tsx
View File

@@ -76,33 +76,30 @@ export default function EventRegistrationForm() {
const submitMutation = useMutation({
...orpc.submitRegistration.mutationOptions(),
onSuccess: (data) => {
if (data.managementToken) {
onSuccess: async (data, variables) => {
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}`);

21
apps/web/src/routeTree.gen.ts
View File

@@ -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)

108
apps/web/src/routes/api/webhook/lemonsqueezy.ts Normal file
View File

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

68
apps/web/src/routes/manage.$token.tsx
View File

@@ -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}

4
bun.lock
View File

@@ -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=="],

1
packages/api/package.json
View File

@@ -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:",

113
packages/api/src/routers/index.ts
View File

@@ -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;

8
packages/db/src/schema/registrations.ts
View File

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

7
packages/env/src/server.ts vendored
View File

@@ -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,