feat:payments

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}