Tip Val Town

Test Card Instructions

\n 💳\n Use card number: 4242 4242 4242 4242\n
\n 📅\n Expiry date: Any future date (e.g., 12/34)\n
\n 🔒\n CVC: Any 3 digits (4 for Amex)\n
\n ✏️\n Other fields: Use any values\n

\n );\n}\n\nfunction TippingForm({ onPaymentSuccess }) {\n const [amount, setAmount] = useState(20);\n const [name, setName] = useState(\"\");\n const [comment, setComment] = useState(\"\");\n const [showCustomAmount, setShowCustomAmount] = useState(false);\n const [customAmount, setCustomAmount] = useState(\"\");\n const tipAmounts = [1, 5, 10, 20];\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const finalAmount = showCustomAmount ? parseFloat(customAmount) : amount;\n const response = await fetch(\"/create-checkout-session\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ amount: finalAmount, name, comment }),\n });\n const { url } = await response.json();\n window.location = url;\n };\n\n const handleCustomAmountSubmit = (e) => {\n e.preventDefault();\n if (customAmount && !isNaN(parseFloat(customAmount))) {\n setAmount(parseFloat(customAmount));\n setShowCustomAmount(false);\n }\n };\n\n return (\n

\n \n

\n setName(e.target.value)}\n placeholder=\"Your Name\"\n className=\"w-full px-3 py-3 mb-4 border border-gray-200 rounded-xl text-[0.95rem] bg-transparent text-black transition-all duration-200 focus:outline-none focus:border-gray-600\"\n required\n />\n setComment(e.target.value)}\n placeholder=\"Your Comment\"\n className=\"w-full px-3 py-3 mb-4 border border-gray-200 rounded-xl text-[0.95rem] bg-transparent text-black transition-all duration-200 focus:outline-none focus:border-gray-600 resize-y min-h-[50px] max-h-[150px]\"\n required\n />\n

\n {tipAmounts.map((tip) => (\n {\n setAmount(tip);\n setShowCustomAmount(false);\n }}\n >\n ${tip}\n \n ))}\n

\n setShowCustomAmount(true)}\n >\n Custom Amount\n \n {showCustomAmount && (\n

\n \n setCustomAmount(e.target.value)}\n placeholder=\"Enter amount\"\n className=\"flex-grow px-3 py-3 border border-gray-200 rounded-l-xl text-[0.95rem] bg-transparent text-black transition-all duration-200 focus:outline-none focus:border-gray-600\"\n min=\"0.01\"\n step=\"0.01\"\n required\n />\n \n Set\n \n \n

\n )}\n \n Send ${showCustomAmount ? customAmount : amount} Tip\n \n \n

\n );\n}\n\nfunction Leaderboard({ payments }) {\n return (\n

Recent Payments

\n {payments.map((payment, index) => (\n

{payment.name}

${payment.amount}

{payment.comment}

\n ))}\n

\n );\n}\n\nfunction Confetti() {\n useEffect(() => {\n const duration = 15 * 1000;\n const animationEnd = Date.now() + duration;\n const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };\n\n function randomInRange(min, max) {\n return Math.random() * (max - min) + min;\n }\n\n const interval = setInterval(function() {\n const timeLeft = animationEnd - Date.now();\n\n if (timeLeft <= 0) {\n return clearInterval(interval);\n }\n\n const particleCount = 50 * (timeLeft / duration);\n \n confetti(Object.assign({}, defaults, { \n particleCount, \n origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } \n }));\n confetti(Object.assign({}, defaults, { \n particleCount, \n origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } \n }));\n }, 250);\n\n return () => clearInterval(interval);\n }, []);\n\n return null;\n}\n\nfunction App() {\n const [payments, setPayments] = useState([]);\n const [showConfetti, setShowConfetti] = useState(false);\n\n useEffect(() => {\n fetchPayments();\n const urlParams = new URLSearchParams(window.location.search);\n if (urlParams.get('success') === 'true') {\n setShowConfetti(true);\n }\n }, []);\n\n const fetchPayments = async () => {\n const response = await fetch('/get-payments');\n const data = await response.json();\n setPayments(data);\n };\n\n return (\n

\n {showConfetti && }\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(req: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 1;\n const KEY = \"fearlessVioletAnteater\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_payments_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n amount REAL NOT NULL,\n comment TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(req.url);\n\n if (url.pathname === \"/create-checkout-session\" && req.method === \"POST\") {\n const stripe = new Stripe(Deno.env.get(\"STRIPE_VALTOWN_SECRET_KEY\"));\n const { amount, name, comment } = await req.json();\n\n const session = await stripe.checkout.sessions.create({\n payment_method_types: [\"card\"],\n line_items: [\n {\n price_data: {\n currency: \"usd\",\n product_data: {\n name: \"Tip for Val Town\",\n },\n unit_amount: Math.round(amount * 100),\n },\n quantity: 1,\n },\n ],\n mode: \"payment\",\n success_url: `${url.origin}?success=true`,\n cancel_url: `${url.origin}`,\n metadata: { name, comment },\n });\n\n return new Response(JSON.stringify({ url: session.url }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/get-payments\") {\n const recentPayments = await sqlite.execute(\n `SELECT name, amount, comment FROM ${KEY}_payments_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 10`,\n );\n\n return new Response(JSON.stringify(recentPayments.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.searchParams.get('success') === 'true') {\n const sessionId = url.searchParams.get(\"session_id\");\n const stripe = new Stripe(Deno.env.get(\"STRIPE_VALTOWN_SECRET_KEY\"));\n const session = await stripe.checkout.sessions.retrieve(sessionId);\n\n if (session.payment_status === \"paid\") {\n await sqlite.execute(\n `INSERT INTO ${KEY}_payments_${SCHEMA_VERSION} (name, amount, comment) VALUES (?, ?, ?)`,\n [session.metadata.name, session.amount_total / 100, session.metadata.comment],\n );\n }\n }\n\n return new Response(\n `\n \n \n \n \n Tip Val Town\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/vawogbemi/fearlessVioletAnteater/code/main.tsx","extension","actionData","errors"]