feat: add 2% Mollie processing fee surcharge on top of payments

Adds a visible processing fee line item so customers cover payment
processing costs instead of having them deducted from the received amount.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/api/create-checkout-session/route.ts

@@ -13,6 +13,7 @@ function getMollie() {
 
 // Dynamic pricing configuration (in EUR)
 const TICKET_PRICE = 80 // €80 early bird
+const PROCESSING_FEE_PERCENT = 0.02 // 2% to cover Mollie payment processing fees
 
 // Accommodation prices per person for 7 nights
 const ACCOMMODATION_PRICES: Record<string, { label: string; price: number }> = {
@@ -37,18 +38,23 @@ export async function POST(request: NextRequest) {
 
     const registrationData = registrationDataStr ? JSON.parse(registrationDataStr) : null
 
-    // Calculate total
-    let total = TICKET_PRICE
+    // Calculate subtotal
+    let subtotal = TICKET_PRICE
     const descriptionParts = ["CCG 2026 Ticket (€80)"]
 
     if (includeAccommodation) {
       const accom = ACCOMMODATION_PRICES[accommodationType]
       if (accom) {
-        total += accom.price
+        subtotal += accom.price
         descriptionParts.push(`${accom.label} (€${accom.price.toFixed(2)})`)
       }
     }
 
+    // Add processing fee on top
+    const processingFee = Math.round(subtotal * PROCESSING_FEE_PERCENT * 100) / 100
+    const total = subtotal + processingFee
+    descriptionParts.push(`Processing fee (€${processingFee.toFixed(2)})`)
+
     // Build metadata for webhook
     const metadata: Record<string, string> = {}
     if (registrationData) {

app/register/page.tsx

@@ -42,9 +42,11 @@ export default function RegisterPage() {
   }
 
   const accommodationPrice = accommodationPrices[accommodationType]?.price ?? 0
-  const totalPrice =
+  const subtotalPrice =
     baseTicketPrice +
     (includeAccommodation ? accommodationPrice : 0)
+  const processingFee = Math.round(subtotalPrice * 0.02 * 100) / 100
+  const totalPrice = subtotalPrice + processingFee
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -290,6 +292,14 @@ export default function RegisterPage() {
                   </p>
                 </div>
 
+                {/* Processing fee */}
+                <div className="flex items-start justify-between py-3">
+                  <div>
+                    <div className="text-sm text-muted-foreground">Payment processing fee (2%)</div>
+                  </div>
+                  <span className="text-sm text-muted-foreground whitespace-nowrap ml-4">€{processingFee.toFixed(2)}</span>
+                </div>
+
                 {/* Total */}
                 <div className="flex justify-between items-center py-4 bg-primary/10 -mx-6 px-6 mt-4">
                   <div>