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}