/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import Stripe from "https://esm.sh/stripe"; function App() { const [loading, setLoading] = useState(false); const [tipAmount, setTipAmount] = useState(5); const handleCheckout = async () => { setLoading(true); try { const response = await fetch("/create-checkout-session", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ amount: tipAmount }), }); const { url } = await response.json(); window.location.href = url; } catch (error) { console.error("Error:", error); setLoading(false); } }; 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) => ( ))}

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

View source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/create-checkout-session" && request.method === "POST") { const stripe = new Stripe(Deno.env.get("STRIPE_SECRET_KEY")); try { const { amount } = await request.json(); const session = await stripe.checkout.sessions.create({ payment_method_types: ["card"], line_items: [ { price_data: { currency: "usd", product_data: { name: "Tip", }, unit_amount: amount * 100, // Convert to cents }, quantity: 1, }, ], mode: "payment", success_url: `${url.origin}/success?amount=${amount}`, cancel_url: `${url.origin}/cancel`, }); return new Response(JSON.stringify({ url: session.url }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } if (url.pathname === "/success") { const amount = url.searchParams.get("amount"); return new Response( ` Tip Successful

Thank You for Your Tip!

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

Back to Home

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

Tip Cancelled

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

Back to Home

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

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

stripeCasualCheckoutDemo