/** @jsxImportSource https://esm.sh/react */ import confetti from "https://esm.sh/canvas-confetti"; import React, { useEffect, useState } from "https://esm.sh/react"; import DatePicker from "https://esm.sh/react-datepicker"; import { createRoot } from "https://esm.sh/react-dom/client"; import Stripe from "https://esm.sh/stripe"; const datePickerStyles = ` .react-datepicker { font-family: Arial, sans-serif; border: 1px solid #aeaeae; border-radius: 0.3rem; display: inline-block; position: relative; width: 100%; background-color: white; } .react-datepicker__header { text-align: center; background-color: #f0f0f0; border-bottom: 1px solid #aeaeae; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; padding-top: 8px; position: relative; } .react-datepicker__current-month { margin-top: 0; color: #000; font-weight: bold; font-size: 1rem; } .react-datepicker__day-names, .react-datepicker__week { display: flex; justify-content: space-around; } .react-datepicker__day-name, .react-datepicker__day { color: #000; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__day:hover { background-color: #f0f0f0; } .react-datepicker__day--selected { background-color: #216ba5; color: #fff; } .react-datepicker__day--today { font-weight: bold; } .react-datepicker__navigation { display: none; } .custom-header { display: flex; justify-content: space-between; align-items: center; padding: 8px; background-color: #f0f0f0; border-bottom: 1px solid #aeaeae; } .custom-header button { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 0 10px; color: #216ba5; } .custom-header button:hover { color: #1d5d90; } .custom-header__current-month { font-weight: bold; font-size: 1rem; } `; function Instructions() { return (

Stripe Test Mode Instructions

Use card number: 4242 4242 4242 4242
Expiry date: Any future date (e.g., 12/34)
CVC: Any 3 digits
Other fields: Use any values

); } function TipList({ tips, selectedDate, sortOrder, setSortOrder }) { const filteredTips = tips.filter((tip) => { const tipDate = new Date(tip.timestamp); const gmtTipDate = new Date(tipDate.toUTCString()); return ( gmtTipDate.getUTCFullYear() === selectedDate.getUTCFullYear() && gmtTipDate.getUTCMonth() === selectedDate.getUTCMonth() && gmtTipDate.getUTCDate() === selectedDate.getUTCDate() ); }); const sortedTips = [...filteredTips].sort((a, b) => { if (sortOrder === "highest") { return b.amount - a.amount; } else { return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(); } }); return (

Leaderboard

{sortedTips.length === 0 ?

No tips for this date.

: (

{tip.name}

${tip.amount}

{tip.comment}

{new Date(tip.timestamp).toUTCString()}

)}

); } function DateSelector({ selectedDate, setSelectedDate }) { const [isCalendarOpen, setIsCalendarOpen] = useState(false); const today = new Date(); today.setUTCHours(0, 0, 0, 0); const formatDate = (date) => { return date.toUTCString().split(" ").slice(0, 4).join(" "); }; const handlePrevDay = () => { const newDate = new Date(selectedDate); newDate.setUTCDate(newDate.getUTCDate() - 1); setSelectedDate(newDate); }; const handleNextDay = () => { const newDate = new Date(selectedDate); newDate.setUTCDate(newDate.getUTCDate() + 1); setSelectedDate(newDate); }; const isDateInFuture = selectedDate > today; const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (

{date.toUTCString().split(" ").slice(2, 4).join(" ")}

); return (

{isCalendarOpen && (

{ setSelectedDate(date); setIsCalendarOpen(false); }} inline maxDate={today} calendarClassName="w-full" renderCustomHeader={CustomHeader} showMonthYearPicker={false} utcOffset={0} />

)}

); } function App({ initialTips }) { const [amount, setAmount] = useState(20); const [name, setName] = useState(""); const [comment, setComment] = useState(""); const [showCustomAmount, setShowCustomAmount] = useState(false); const [customAmount, setCustomAmount] = useState(""); const [tips, setTips] = useState(initialTips); const [selectedDate, setSelectedDate] = useState(new Date(new Date().toUTCString())); const [sortOrder, setSortOrder] = useState("highest"); const tipAmounts = [1, 5, 10, 20]; const sanitizeInput = (input) => { return input.replace(/'/g, ""); }; const handleSubmit = async (e) => { e.preventDefault(); const finalAmount = showCustomAmount ? parseFloat(customAmount) : amount; const response = await fetch("/create-checkout-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ amount: finalAmount, name: sanitizeInput(name), comment: sanitizeInput(comment) }), }); const { url } = await response.json(); window.location = url; }; return (

Competitive Tipping

Select tip amount:

{tipAmounts.map((tipAmount) => ( ))}

{showCustomAmount && (

setCustomAmount(sanitizeInput(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Enter custom amount" min="0.01" step="0.01" required />

)}

setName(sanitizeInput(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Your Name" required />

); } function Confetti() { useEffect(() => { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }); }, []); return null; } function SuccessPage({ payments }) { return (

Thank you for your tip!

Your Tip Details

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

{payment.name}

${payment.amount}

{payment.comment}

))}

Back to Tipping Page

); } function client() { const root = document.getElementById("root"); if (root.dataset.page === "success") { const payments = JSON.parse(root.dataset.payments); createRoot(root).render(); } else { const initialTips = JSON.parse(root.dataset.tips); createRoot(root).render(); } } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 2; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_payments_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, amount REAL NOT NULL, comment TEXT NOT NULL, timestamp DATETIME DEFAULT (DATETIME('now', 'utc')) ) `); const url = new URL(req.url); if (url.pathname === "/create-checkout-session" && req.method === "POST") { const stripe = new Stripe(Deno.env.get("STRIPE_SECRET_KEY"), { apiVersion: "2022-11-15", }); const data = await req.json(); const { amount, name, comment } = data; const session = await stripe.checkout.sessions.create({ payment_method_types: ["card"], line_items: [ { price_data: { currency: "usd", product_data: { name: "Tip", }, unit_amount: Math.round(amount * 100), }, quantity: 1, }, ], mode: "payment", success_url: `${url.origin}/success?session_id={CHECKOUT_SESSION_ID}&amount=${amount}&name=${ encodeURIComponent(name) }&comment=${encodeURIComponent(comment)}`, cancel_url: `${url.origin}`, }); return new Response(JSON.stringify({ url: session.url }), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/success") { const sessionId = url.searchParams.get("session_id"); const amount = url.searchParams.get("amount"); const name = url.searchParams.get("name"); const comment = url.searchParams.get("comment"); const stripe = new Stripe(Deno.env.get("STRIPE_SECRET_KEY"), { apiVersion: "2022-11-15", }); const session = await stripe.checkout.sessions.retrieve(sessionId); const paymentIntent = await stripe.paymentIntents.retrieve(session.payment_intent as string); if (paymentIntent.status === "succeeded") { const sanitizedName = name.replace(/'/g, ""); const sanitizedComment = comment.replace(/'/g, ""); await sqlite.execute( `INSERT INTO ${KEY}_payments_${SCHEMA_VERSION} (name, amount, comment) VALUES (?, ?, ?)`, [sanitizedName, amount, sanitizedComment], ); } const paymentsJson = JSON.stringify([{ name, amount, comment }]); return new Response( ` Tip Successful - Competitive Tipping

`, { headers: { "content-type": "text/html", }, }, ); } // Fetch all tips for the root endpoint const allTips = await sqlite.execute( `SELECT name, amount, comment, timestamp FROM ${KEY}_payments_${SCHEMA_VERSION} ORDER BY amount DESC`, ); const tipsJson = JSON.stringify(allTips.rows); return new Response( ` Competitive Tipping

`, { headers: { "content-type": "text/html", }, }, ); }

StripeCheckoutDemo

Version 21