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

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

Leaderboard

\n setSortOrder(e.target.value)}\n className=\"px-2 py-1 border border-gray-300 rounded-lg\"\n >\n \n \n \n

\n {sortedTips.length === 0\n ?

No tips for this date.

\n : (\n

\n
{tip.name}
\n
${tip.amount}
\n
{tip.comment}
\n
{new Date(tip.timestamp).toUTCString()}
\n

\n )}\n

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

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

\n );\n\n return (\n

\n \n ←\n \n setIsCalendarOpen(!isCalendarOpen)}\n className=\"text-lg font-semibold\"\n >\n {formatDate(selectedDate)}\n \n \n →\n \n

\n {isCalendarOpen && (\n

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

\n )}\n

\n );\n}\n\nfunction App({ initialTips }) {\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 [tips, setTips] = useState(initialTips);\n const [selectedDate, setSelectedDate] = useState(new Date(new Date().toUTCString()));\n const [sortOrder, setSortOrder] = useState(\"highest\");\n const tipAmounts = [1, 5, 10, 20];\n\n const sanitizeInput = (input) => {\n return input.replace(/'/g, \"\");\n };\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: sanitizeInput(name), comment: sanitizeInput(comment) }),\n });\n const { url } = await response.json();\n window.location = url;\n };\n\n return (\n

Competitive Tipping

\n \n

\n Select tip amount:\n

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

\n {showCustomAmount && (\n

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

\n )}\n

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

\n setComment(sanitizeInput(e.target.value))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg\"\n placeholder=\"Add a comment (optional)\"\n rows=\"3\"\n >\n \n

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

\n \n \n

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

\n \n

Thank you for your tip!

Your Tip Details

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

{payment.name}

${payment.amount}

{payment.comment}

\n ))}\n

\n \n Back to Tipping Page\n \n

\n );\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root.dataset.page === \"success\") {\n const payments = JSON.parse(root.dataset.payments);\n createRoot(root).render();\n } else {\n const initialTips = JSON.parse(root.dataset.tips);\n createRoot(root).render();\n }\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 = 2;\n const KEY = \"StripeCheckoutDemo\";\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 (DATETIME('now', 'utc'))\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_SECRET_KEY\"), {\n apiVersion: \"2022-11-15\",\n });\n\n const data = await req.json();\n const { amount, name, comment } = data;\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\",\n },\n unit_amount: Math.round(amount * 100),\n },\n quantity: 1,\n },\n ],\n mode: \"payment\",\n success_url: `${url.origin}/success?session_id={CHECKOUT_SESSION_ID}&amount=${amount}&name=${\n encodeURIComponent(name)\n }&comment=${encodeURIComponent(comment)}`,\n cancel_url: `${url.origin}`,\n });\n\n return new Response(JSON.stringify({ url: session.url }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/success\") {\n const sessionId = url.searchParams.get(\"session_id\");\n const amount = url.searchParams.get(\"amount\");\n const name = url.searchParams.get(\"name\");\n const comment = url.searchParams.get(\"comment\");\n\n const stripe = new Stripe(Deno.env.get(\"STRIPE_SECRET_KEY\"), {\n apiVersion: \"2022-11-15\",\n });\n\n const session = await stripe.checkout.sessions.retrieve(sessionId);\n const paymentIntent = await stripe.paymentIntents.retrieve(session.payment_intent as string);\n\n if (paymentIntent.status === \"succeeded\") {\n const sanitizedName = name.replace(/'/g, \"\");\n const sanitizedComment = comment.replace(/'/g, \"\");\n await sqlite.execute(\n `INSERT INTO ${KEY}_payments_${SCHEMA_VERSION} (name, amount, comment) VALUES (?, ?, ?)`,\n [sanitizedName, amount, sanitizedComment],\n );\n }\n\n const paymentsJson = JSON.stringify([{ name, amount, comment }]);\n\n return new Response(\n `\n \n \n \n \n Tip Successful - Competitive Tipping\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n }\n\n // Fetch all tips for the root endpoint\n const allTips = await sqlite.execute(\n `SELECT name, amount, comment, timestamp FROM ${KEY}_payments_${SCHEMA_VERSION} ORDER BY amount DESC`,\n );\n\n const tipsJson = JSON.stringify(allTips.rows);\n\n return new Response(\n `\n \n \n \n \n Competitive Tipping\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/StripeCheckoutDemo/code/main.tsx","extension","actionData","errors"]