/** @jsxImportSource https://esm.sh/react */ import confetti from "https://esm.sh/canvas-confetti"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [tipAmount, setTipAmount] = useState(5); const paymentLinks = { 1: "https://buy.stripe.com/test_eVa5nA3FhblYg1y3cc", 5: "https://buy.stripe.com/test_6oE3fs7Vx0Hk4iQcMN", 10: "https://buy.stripe.com/test_aEU3fs4Jl89M7v26oq", 20: "https://buy.stripe.com/test_bIY4jwcbN61E2aI4gj", }; const handleTip = () => { window.location.href = paymentLinks[tipAmount]; }; const presetTips = [1, 5, 10, 20]; return (

Casual Tipping

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

{presetTips.map((amount) => ( ))}

View source

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

Thank You for Your Tip!

Your generosity is greatly appreciated.

Back to Home

); } function client() { const root = document.getElementById("root"); if (root) { const url = new URL(window.location.href); if (url.pathname === "/success") { createRoot(root).render(); } else { createRoot(root).render(); } } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/success") { return new Response( ` Tip Successful

`, { headers: { "content-type": "text/html", }, }, ); } return new Response( ` Tipping Demo

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

StripeDemo