feat: complete Mollie payment integration

Add payment routes, checkout redirect, return page, DB schema updates,
and environment configuration for Mollie payment processing.

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

.env.example

@@ -41,6 +41,16 @@ GOOGLE_SERVICE_ACCOUNT=your_service_account_json_here
 GOOGLE_SHEET_ID=your_sheet_id_here
 GOOGLE_SHEET_NAME=Waitlist
 
+# ============================================
+# Mollie Payment Integration
+# ============================================
+# Mollie API key (test or live)
+# Test keys start with 'test_', live keys start with 'live_'
+MOLLIE_API_KEY=test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# Public base URL for redirects and webhooks
+BASE_URL=https://votc.jeffemmett.com
+
 # ============================================
 # AI Gateway Configuration for Game Chat
 # ============================================

apply.html

@@ -940,6 +940,13 @@
                 const result = await response.json();
 
                 if (response.ok && result.success) {
+                    // Redirect to Mollie checkout if payment URL was returned
+                    if (result.checkoutUrl) {
+                        window.location.href = result.checkoutUrl;
+                        return;
+                    }
+
+                    // No payment needed - show success directly
                     document.getElementById('confirm-email').textContent = data.email;
                     document.querySelectorAll('.form-section').forEach(s => s.classList.remove('active'));
                     document.querySelector('.form-section[data-step="success"]').style.display = 'block';

db/migration-002-mollie.sql

@@ -0,0 +1,11 @@
+-- Migration 002: Add Mollie payment fields to applications table
+-- Run this against existing databases to add payment support
+
+ALTER TABLE applications
+  ADD COLUMN IF NOT EXISTS mollie_payment_id VARCHAR(255),
+  ADD COLUMN IF NOT EXISTS payment_status VARCHAR(50) DEFAULT 'unpaid',
+  ADD COLUMN IF NOT EXISTS payment_amount DECIMAL(10, 2),
+  ADD COLUMN IF NOT EXISTS payment_paid_at TIMESTAMP WITH TIME ZONE;
+
+CREATE INDEX IF NOT EXISTS idx_applications_mollie_id ON applications(mollie_payment_id);
+CREATE INDEX IF NOT EXISTS idx_applications_payment_status ON applications(payment_status);

db/schema.sql

@@ -85,6 +85,12 @@ CREATE TABLE IF NOT EXISTS applications (
     scholarship_reason TEXT,
     contribution_amount VARCHAR(50),  -- sliding scale selection
 
+    -- Payment (Mollie)
+    mollie_payment_id VARCHAR(255),
+    payment_status VARCHAR(50) DEFAULT 'unpaid',  -- unpaid, pending, open, paid, failed, canceled, expired
+    payment_amount DECIMAL(10, 2),
+    payment_paid_at TIMESTAMP WITH TIME ZONE,
+
     -- Admin notes
     admin_notes TEXT,
 
@@ -98,6 +104,8 @@ CREATE TABLE IF NOT EXISTS applications (
 CREATE INDEX idx_applications_email ON applications(email);
 CREATE INDEX idx_applications_status ON applications(status);
 CREATE INDEX idx_applications_submitted ON applications(submitted_at);
+CREATE INDEX idx_applications_mollie_id ON applications(mollie_payment_id);
+CREATE INDEX idx_applications_payment_status ON applications(payment_status);
 
 -- Email log table (track all sent emails)
 CREATE TABLE IF NOT EXISTS email_log (

docker-compose.yml

@@ -13,6 +13,12 @@ services:
       - ADMIN_API_KEY=${ADMIN_API_KEY}
       - ADMIN_EMAILS=${ADMIN_EMAILS:-jeff@jeffemmett.com}
       - NODE_ENV=production
+      - GOOGLE_SHEET_ID=1uZy21IjIwAES92ki6K33CtiTfEzGoUlxQ8jk3IzA0qI
+      - GOOGLE_SERVICE_ACCOUNT_FILE=/run/secrets/google-service-account.json
+      - MOLLIE_API_KEY=${MOLLIE_API_KEY}
+      - BASE_URL=https://votc.jeffemmett.com
+    volumes:
+      - ./google-service-account.json:/run/secrets/google-service-account.json:ro
     depends_on:
       votc-db:
         condition: service_healthy

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@ai-sdk/anthropic": "^3.0.0",
         "@ai-sdk/mistral": "^3.0.0",
+        "@mollie/api-client": "^4.4.0",
         "@octokit/rest": "^22.0.1",
         "ai": "^6.0.1",
         "express": "^4.21.0",
@@ -92,6 +93,20 @@
         "zod": "^3.25.76 || ^4.1.8"
       }
     },
+    "node_modules/@mollie/api-client": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@mollie/api-client/-/api-client-4.4.0.tgz",
+      "integrity": "sha512-V2OKBGS4TUKpbARV4JSjjtXqfRqfTQ5KCKGudEFEOEh/yQxrM2zXhkoq2gIbA6nGIVPh5nVaAzqLhp4C+e4aMQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/node-fetch": "^2.6.13",
+        "node-fetch": "^2.7.0",
+        "ruply": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@octokit/auth-token": {
       "version": "6.0.0",
       "license": "MIT",
@@ -233,6 +248,25 @@
       "version": "1.1.0",
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "25.3.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz",
+      "integrity": "sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.13",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.13.tgz",
+      "integrity": "sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^4.0.4"
+      }
+    },
     "node_modules/@vercel/oidc": {
       "version": "3.1.0",
       "license": "Apache-2.0",
@@ -278,6 +312,12 @@
       "version": "1.1.1",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "funding": [
@@ -365,6 +405,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "license": "MIT",
@@ -400,6 +452,15 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "license": "MIT",
@@ -480,6 +541,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "license": "MIT"
@@ -576,6 +652,22 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "license": "MIT",
@@ -735,6 +827,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "license": "MIT",
@@ -1124,6 +1231,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/ruply": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ruply/-/ruply-1.0.1.tgz",
+      "integrity": "sha512-p39LnaaJyuucPGlgaB0KiyifpcuOkn24+Hq5y0ejAD/LlH+mRAbkHn2tckCLgHir+S+nis1WYG+TYEC4zHX0WQ==",
+      "license": "MIT"
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "funding": [
@@ -1289,6 +1402,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "license": "MIT"
+    },
     "node_modules/universal-user-agent": {
       "version": "7.0.3",
       "license": "ISC"

package.json

@@ -6,11 +6,12 @@
     "start": "node server.js"
   },
   "dependencies": {
-    "express": "^4.21.0",
     "@ai-sdk/anthropic": "^3.0.0",
     "@ai-sdk/mistral": "^3.0.0",
+    "@mollie/api-client": "^4.4.0",
     "@octokit/rest": "^22.0.1",
     "ai": "^6.0.1",
+    "express": "^4.21.0",
     "googleapis": "^126.0.1",
     "nodemailer": "^6.9.0",
     "pg": "^8.13.0"

payment-return.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Payment Status - Valley of the Commons</title>
+    <link rel="icon" type="image/svg+xml" href="icon.svg">
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --forest: #2d5016;
+            --forest-light: #4a7c23;
+            --cream: #faf8f5;
+            --sand: #f5f5f0;
+            --charcoal: #2c2c2c;
+            --error: #c53030;
+            --warning: #d69e2e;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: 'Inter', -apple-system, sans-serif;
+            background: var(--cream);
+            color: var(--charcoal);
+            line-height: 1.6;
+        }
+
+        .header {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(0,0,0,0.1);
+            padding: 1rem 2rem;
+        }
+
+        .header-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .header h1 {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 1.5rem;
+            font-weight: 400;
+            color: var(--forest);
+        }
+
+        .header a { color: var(--forest); text-decoration: none; }
+
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 3rem 2rem;
+        }
+
+        .status-card {
+            background: white;
+            border-radius: 12px;
+            padding: 2.5rem;
+            text-align: center;
+        }
+
+        .status-icon {
+            width: 70px;
+            height: 70px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 1.5rem;
+        }
+
+        .status-icon svg { width: 35px; height: 35px; stroke: white; }
+
+        .status-icon.success { background: var(--forest); }
+        .status-icon.pending { background: var(--warning); }
+        .status-icon.failed { background: var(--error); }
+        .status-icon.loading { background: #999; animation: pulse 1.5s infinite; }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        h2 {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 1.75rem;
+            color: var(--forest);
+            margin-bottom: 1rem;
+        }
+
+        .details {
+            background: var(--sand);
+            padding: 1rem 1.5rem;
+            border-radius: 8px;
+            margin: 1.5rem 0;
+            text-align: left;
+        }
+
+        .details p {
+            display: flex;
+            justify-content: space-between;
+            padding: 0.25rem 0;
+            font-size: 0.9rem;
+        }
+
+        .details strong { color: var(--charcoal); }
+
+        .btn {
+            display: inline-block;
+            padding: 0.875rem 2rem;
+            border: none;
+            border-radius: 8px;
+            font-family: inherit;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            text-decoration: none;
+            margin-top: 1.5rem;
+        }
+
+        .btn-primary { background: var(--forest); color: white; }
+        .btn-primary:hover { background: var(--forest-light); }
+
+        .footer {
+            text-align: center;
+            padding: 2rem;
+            color: #666;
+            font-size: 0.875rem;
+        }
+
+        .footer a { color: var(--forest); }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-content">
+            <h1><a href="/">Valley of the Commons</a></h1>
+            <a href="/">Home</a>
+        </div>
+    </header>
+
+    <div class="container">
+        <div class="status-card" id="status-card">
+            <div class="status-icon loading" id="status-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M12 6v6l4 2"/>
+                </svg>
+            </div>
+            <h2 id="status-title">Checking payment status...</h2>
+            <p id="status-message">Please wait while we confirm your payment.</p>
+            <div class="details" id="payment-details" style="display: none;">
+                <p><span>Ticket:</span> <strong id="detail-ticket"></strong></p>
+                <p><span>Amount:</span> <strong id="detail-amount"></strong></p>
+            </div>
+            <a href="/" class="btn btn-primary" id="action-btn" style="display: none;">Return to Homepage</a>
+        </div>
+    </div>
+
+    <footer class="footer">
+        <p>Valley of the Commons &middot; <a href="https://www.commons-hub.at/">Commons Hub</a> &middot; <a href="privacy.html">Privacy Policy</a></p>
+    </footer>
+
+    <script>
+        const params = new URLSearchParams(window.location.search);
+        const applicationId = params.get('id');
+
+        function showStatus(type, title, message, showDetails) {
+            const icon = document.getElementById('status-icon');
+            icon.className = 'status-icon ' + type;
+
+            const iconSvgs = {
+                success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>',
+                pending: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>',
+                failed: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>',
+            };
+
+            icon.innerHTML = iconSvgs[type] || iconSvgs.pending;
+            document.getElementById('status-title').textContent = title;
+            document.getElementById('status-message').textContent = message;
+
+            if (showDetails) {
+                document.getElementById('payment-details').style.display = 'block';
+            }
+
+            document.getElementById('action-btn').style.display = 'inline-block';
+        }
+
+        async function checkPaymentStatus() {
+            if (!applicationId) {
+                showStatus('failed', 'Invalid Link', 'No application ID found. Please check the link in your email.');
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/mollie/status?id=${applicationId}`);
+                const data = await response.json();
+
+                if (!response.ok) {
+                    showStatus('failed', 'Error', data.error || 'Could not check payment status.');
+                    return;
+                }
+
+                // Fill in details
+                if (data.ticketLabel) {
+                    document.getElementById('detail-ticket').textContent = data.ticketLabel;
+                }
+                if (data.paymentAmount) {
+                    document.getElementById('detail-amount').textContent = '\u20AC' + parseFloat(data.paymentAmount).toFixed(2);
+                }
+
+                switch (data.paymentStatus) {
+                    case 'paid':
+                        showStatus('success', 'Payment Confirmed!',
+                            'Your payment has been received. We\'ll review your application and get back to you within 2-3 weeks.', true);
+                        break;
+                    case 'pending':
+                    case 'open':
+                        showStatus('pending', 'Payment Processing',
+                            'Your payment is being processed. This page will update automatically.', true);
+                        // Poll again in 5 seconds
+                        setTimeout(checkPaymentStatus, 5000);
+                        break;
+                    case 'failed':
+                        showStatus('failed', 'Payment Failed',
+                            'Your payment could not be processed. Your application has been saved. Please contact us for assistance.', true);
+                        break;
+                    case 'canceled':
+                        showStatus('failed', 'Payment Canceled',
+                            'Your payment was canceled. Your application has been saved. You can contact us to arrange payment.', true);
+                        break;
+                    case 'expired':
+                        showStatus('failed', 'Payment Expired',
+                            'Your payment session has expired. Your application has been saved. Please contact us to arrange payment.', true);
+                        break;
+                    case 'unpaid':
+                        showStatus('pending', 'Awaiting Payment',
+                            'No payment has been recorded yet. If you were redirected here, please allow a moment for processing.', false);
+                        setTimeout(checkPaymentStatus, 3000);
+                        break;
+                    default:
+                        showStatus('pending', 'Status: ' + data.paymentStatus,
+                            'Your payment status is being updated. Please check back shortly.', false);
+                        setTimeout(checkPaymentStatus, 5000);
+                }
+            } catch (error) {
+                console.error('Status check error:', error);
+                showStatus('failed', 'Connection Error', 'Could not reach the server. Please try refreshing the page.');
+            }
+        }
+
+        checkPaymentStatus();
+    </script>
+</body>
+</html>

server.js

@@ -24,6 +24,7 @@ const waitlistHandler = require('./api/waitlist-db');
 const applicationHandler = require('./api/application');
 const gameChatHandler = require('./api/game-chat');
 const shareToGithubHandler = require('./api/share-to-github');
+const { handleWebhook, getPaymentStatus } = require('./api/mollie');
 
 // Adapter to convert Vercel handler to Express
 const vercelToExpress = (handler) => async (req, res) => {
@@ -41,6 +42,8 @@ app.all('/api/waitlist', vercelToExpress(waitlistHandler));
 app.all('/api/application', vercelToExpress(applicationHandler));
 app.all('/api/game-chat', vercelToExpress(gameChatHandler));
 app.all('/api/share-to-github', vercelToExpress(shareToGithubHandler));
+app.post('/api/mollie/webhook', vercelToExpress(handleWebhook));
+app.all('/api/mollie/status', vercelToExpress(getPaymentStatus));
 
 // Static files
 app.use(express.static(path.join(__dirname), {