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

\n {presetTips.map((amount) => (\n setTipAmount(amount)}\n className={`px-3 py-1 rounded ${\n tipAmount === amount\n ? \"bg-indigo-600 text-white\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n ${amount}\n \n ))}\n

\n Custom Amount ($):\n setTipAmount(Math.max(1, parseInt(e.target.value) || 0))}\n min=\"1\"\n className=\"w-20 px-2 py-1 border rounded\"\n />\n

\n \n {loading ? \"Processing...\" : `Tip $${tipAmount}`}\n \n

\n \n View source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/create-checkout-session\" && request.method === \"POST\") {\n const stripe = new Stripe(Deno.env.get(\"STRIPE_SECRET_KEY\"));\n\n try {\n const { amount } = await request.json();\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: amount * 100, // Convert to cents\n },\n quantity: 1,\n },\n ],\n mode: \"payment\",\n success_url: `${url.origin}/success?amount=${amount}`,\n cancel_url: `${url.origin}/cancel`,\n });\n\n return new Response(JSON.stringify({ url: session.url }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n if (url.pathname === \"/success\") {\n const amount = url.searchParams.get(\"amount\");\n return new Response(\n `\n \n \n Tip Successful\n \n \n \n

Thank You for Your Tip!

Your $${amount} tip has been successfully processed.

\n Back to Home\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n if (url.pathname === \"/cancel\") {\n return new Response(\n `\n \n \n Tip Cancelled\n \n \n \n

Tip Cancelled

Your tip was not processed. Feel free to try again!

\n Back to Home\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Tipping Demo\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/stripeCasualCheckoutDemo/code/main.tsx","extension","actionData","errors"]