\n Client-Side Stripe Checkout\n

\n\n

\n Premium Plan\n $19.99\n

\n Access to all premium features for one month\n

\n\n

\n Total\n $19.99\n

\n\n \n Proceed to Checkout\n \n\n

\n View Source\n

\n\n \n \n",[],[173],{"_107":181,"_100":182,"_152":183,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":184,"_104":185,"_162":186,"_164":187,"_166":27,"_167":-5,"_168":188,"_103":189},"feed8622-3098-11f0-87e8-569c3dd06744","index.ts","a06247d2-3093-11f0-b626-569c3dd06744",["D",1747209411850],3,"http","// HTTP trigger for Stripe client-side checkout demo\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nexport default async function handler(req: Request): Promise {\n try {\n // Read the HTML file content\n const htmlContent = await readFile(\"/index.html\", import.meta.url);\n \n // Return the HTML content with the appropriate content type\n return new Response(htmlContent, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\"\n }\n });\n } catch (error) {\n console.error(\"Error serving HTML:\", error);\n return new Response(`Error: ${error.message}`, {\n status: 500,\n headers: {\n \"Content-Type\": \"text/plain\"\n }\n });\n }\n}",[],[182],"files",[149,171,180],"counts",{"_194":31,"_195":196,"_197":31,"_198":31},"pulls","branches",1,"forks","envVars","contents",[201,204,207],{"_107":150,"_100":151,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":202,"_104":161,"_162":163,"_164":165,"_166":27,"_167":-5,"_103":203},["D",1747209411850],[151],{"_107":172,"_100":173,"_152":174,"_154":-5,"_155":138,"_156":137,"_158":159,"_109":205,"_104":176,"_162":163,"_164":177,"_166":27,"_167":-5,"_103":206},["D",1747209459823],[173],{"_107":181,"_100":182,"_152":183,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":208,"_104":185,"_162":186,"_164":187,"_166":27,"_167":-5,"_103":209},["D",1747209411850],[182],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_98":99,"_100":101,"_102":42,"_105":216,"_220":221,"_303":31,"_304":27},{"_107":108,"_100":101,"_109":217,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":31,"_14":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_21":218,"_135":219,"_146":27},["D",1747206945695],{"_98":99,"_133":134},{"_104":137,"_100":42,"_107":138,"_139":108,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":101,"_145":99},"history",[222,227,241,249,257,265,272,279,285,291,297],{"_152":174,"_104":137,"_109":223,"_155":138,"_190":224},["D",1747209459823],[225],{"_107":172,"_155":138,"_152":174,"_100":173,"_164":177,"_162":163,"_104":176,"_154":-5,"_109":223,"_156":137,"_167":-5,"_158":159,"_166":27,"_103":226},[173],{"_152":183,"_104":157,"_109":228,"_155":138,"_190":229},["D",1747209411850],[230,232,235],{"_107":181,"_155":138,"_152":183,"_100":182,"_164":187,"_162":186,"_104":185,"_154":-5,"_109":228,"_156":157,"_167":-5,"_158":159,"_166":27,"_103":231},[182],{"_107":150,"_155":138,"_152":153,"_100":151,"_164":165,"_162":163,"_104":161,"_154":-5,"_109":233,"_156":157,"_167":-5,"_158":159,"_166":27,"_103":234},["D",1747209411850],[151],{"_107":236,"_155":138,"_152":174,"_100":173,"_164":237,"_162":163,"_104":238,"_154":-5,"_109":239,"_156":157,"_167":-5,"_158":27,"_166":27,"_103":240},"feed7e5c-3098-11f0-87e8-569c3dd06744","\n\n\n \n \n Client-Side Stripe Checkout\n \n \n \n\n\n

Client-Side Stripe Checkout

\n \n

\n Premium Plan\n $19.99\n

Access to all premium features for one month

\n \n

\n Total\n $19.99\n

\n \n \n \n

\n View Source\n

\n\n \n\n",4,["D",1747209411850],[173],{"_152":153,"_104":242,"_109":243,"_155":138,"_190":244},9,["D",1747207252708],[245],{"_107":246,"_155":138,"_152":153,"_100":151,"_164":247,"_162":163,"_104":196,"_154":-5,"_109":243,"_156":242,"_167":-5,"_158":27,"_166":27,"_103":248},"f7fa16b4-3093-11f0-aba2-569c3dd06744","# Stripe Checkout with Direct Price Implementation\n\nThis is a Stripe Checkout implementation that uses the actual price displayed on the page instead of a predefined price ID. It combines client-side and server-side approaches to create a seamless checkout experience.\n\n## How It Works\n\n1. The page loads with a product display and checkout button\n2. When the user clicks \"Proceed to Checkout\":\n - The code extracts the price directly from the page ($19.99)\n - It sends this price to a server-side endpoint (/create-checkout-session)\n - The server creates a Stripe Checkout Session with this exact amount\n - The client redirects to Stripe's hosted checkout page\n3. After payment, the user is redirected back to the success or cancel URL\n4. The page displays a success or cancellation message based on the URL parameters\n\n## Important Setup\n\n1. **Environment Variables**:\n - Set your `STRIPE_SECRET_KEY` in Val Town environment variables\n - Replace the placeholder publishable key (`pk_test_TYooMQauvdEDq54NiTphI7jx`) with your actual Stripe publishable key in the HTML\n\n2. **Advantages of This Approach**:\n - Uses the displayed price directly from the UI\n - No need to create and manage price IDs in Stripe dashboard\n - Prices can be changed in the UI without updating Stripe\n - More secure than client-side only approaches\n\n3. **Security Considerations**:\n - Never include your Stripe secret key in client-side code\n - The publishable key is safe to include in client-side code\n - Server-side validation ensures price integrity\n\n## Customization\n\nTo customize this implementation:\n\n1. Update the product details and pricing in the HTML\n2. The checkout will automatically use whatever price is displayed on the page\n3. Customize the success and cancel messages\n4. Adjust the styling as needed using Tailwind classes\n\n## Technical Details\n\n- Uses Stripe's Checkout Sessions API on the server\n- Extracts the price directly from the UI\n- Converts the price to cents (Stripe's required format)\n- Creates a dynamic product with the specified price\n- Handles errors gracefully with user feedback",[151],{"_152":174,"_104":250,"_109":251,"_155":138,"_190":252},8,["D",1747207233018],[253],{"_107":254,"_155":138,"_152":174,"_100":173,"_164":255,"_162":163,"_104":185,"_154":-5,"_109":251,"_156":250,"_167":-5,"_158":27,"_166":27,"_103":256},"ec3d843c-3093-11f0-9c69-569c3dd06744","\n\n\n \n \n Client-Side Stripe Checkout\n \n \n \n\n\n

Client-Side Stripe Checkout

\n \n

\n Premium Plan\n $19.99\n

Access to all premium features for one month

\n \n

\n Total\n $19.99\n

\n \n \n \n

\n View Source\n

\n\n \n\n, ''));\n \n document.getElementById('checkout-button').addEventListener('click', async function() {\n try {\n // Disable the button during checkout\n this.disabled = true;\n this.textContent = 'Processing...';\n \n // Create a checkout session on the server with the direct price\n const response = await fetch('/create-checkout-session', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n amount: price,\n currency: 'usd'\n }),\n });\n \n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || 'Failed to create checkout session');\n }\n \n const { id: sessionId } = await response.json();\n \n // Redirect to Checkout using the session ID\n const result = await stripe.redirectToCheckout({\n sessionId: sessionId\n });\n \n if (result.error) {\n throw new Error(result.error.message);\n }\n } catch (error) {\n console.error('Error:', error);\n alert('An error occurred: ' + error.message);\n \n // Re-enable the button\n this.disabled = false;\n this.textContent = 'Proceed to Checkout';\n }\n });\n\n // Check for success or canceled URL parameters\n const urlParams = new URLSearchParams(window.location.search);\n if (urlParams.get('success')) {\n const successMessage = document.createElement('div');\n successMessage.className = 'mt-4 p-3 bg-green-100 text-green-700 rounded';\n successMessage.textContent = 'Payment successful! Thank you for your purchase.';\n document.querySelector('.bg-white').prepend(successMessage);\n }\n \n if (urlParams.get('canceled')) {\n const cancelMessage = document.createElement('div');\n cancelMessage.className = 'mt-4 p-3 bg-yellow-100 text-yellow-700 rounded';\n cancelMessage.textContent = 'Payment canceled. If you have any questions, please contact us.';\n document.querySelector('.bg-white').prepend(cancelMessage);\n }\n \n\n",[173],{"_152":183,"_104":258,"_109":259,"_155":138,"_190":260},7,["D",1747207217301],[261],{"_107":262,"_155":138,"_152":183,"_100":182,"_164":263,"_162":186,"_104":161,"_154":-5,"_109":259,"_156":258,"_167":-5,"_158":27,"_166":27,"_103":264},"e2e001a8-3093-11f0-b0cb-569c3dd06744","// HTTP trigger for Stripe checkout demo with server-side session creation\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport Stripe from \"https://esm.sh/stripe@12.4.0?dts\";\n\n// Initialize Stripe with your secret key\nconst stripe = new Stripe(Deno.env.get(\"STRIPE_SECRET_KEY\") || \"sk_test_your_key\", {\n apiVersion: \"2023-10-16\",\n});\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n \n // Handle the create-checkout-session endpoint\n if (url.pathname === \"/create-checkout-session\" && req.method === \"POST\") {\n try {\n const data = await req.json();\n const { amount, currency = \"usd\" } = data;\n \n // Validate the amount\n if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {\n return new Response(JSON.stringify({ error: \"Invalid amount\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n // Create a Checkout Session\n const session = await stripe.checkout.sessions.create({\n payment_method_types: [\"card\"],\n line_items: [\n {\n price_data: {\n currency: currency,\n product_data: {\n name: \"Premium Plan\",\n description: \"Access to all premium features for one month\",\n },\n unit_amount: Math.round(Number(amount) * 100), // Convert to cents\n },\n quantity: 1,\n },\n ],\n mode: \"payment\",\n success_url: `${url.origin}?success=true`,\n cancel_url: `${url.origin}?canceled=true`,\n });\n \n // Return the session ID to the client\n return new Response(JSON.stringify({ id: session.id }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n console.error(\"Error creating checkout session:\", error);\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n \n // Serve the HTML page for all other requests\n try {\n const htmlContent = await readFile(\"/index.html\", import.meta.url);\n \n return new Response(htmlContent, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\"\n }\n });\n } catch (error) {\n console.error(\"Error serving HTML:\", error);\n return new Response(`Error: ${error.message}`, {\n status: 500,\n headers: {\n \"Content-Type\": \"text/plain\"\n }\n });\n }\n}",[182],{"_152":183,"_104":266,"_109":267,"_155":138,"_190":268},6,["D",1747207107773],[269],{"_107":270,"_155":138,"_152":183,"_100":182,"_164":187,"_162":186,"_104":196,"_154":-5,"_109":267,"_156":266,"_167":-5,"_158":27,"_166":27,"_103":271},"a1969838-3093-11f0-924c-569c3dd06744",[182],{"_152":183,"_104":176,"_109":273,"_155":138,"_190":274},["D",1747207105755],[275],{"_107":276,"_155":138,"_152":183,"_100":182,"_164":187,"_162":277,"_104":31,"_154":-5,"_109":273,"_156":176,"_167":-5,"_158":27,"_166":27,"_103":278},"a06245ac-3093-11f0-b626-569c3dd06744","script",[182],{"_152":174,"_104":238,"_109":280,"_155":138,"_190":281},["D",1747207100008],[282],{"_107":283,"_155":138,"_152":174,"_100":173,"_164":237,"_162":163,"_104":161,"_154":-5,"_109":280,"_156":238,"_167":-5,"_158":27,"_166":27,"_103":284},"9cf5ce70-3093-11f0-9933-569c3dd06744",[173],{"_152":153,"_104":185,"_109":286,"_155":138,"_190":287},["D",1747207013852],[288],{"_107":289,"_155":138,"_152":153,"_100":151,"_164":165,"_162":163,"_104":31,"_154":-5,"_109":286,"_156":185,"_167":-5,"_158":27,"_166":27,"_103":290},"699af56e-3093-11f0-8289-569c3dd06744",[151],{"_152":174,"_104":161,"_109":292,"_155":138,"_190":293},["D",1747207003176],[294],{"_107":295,"_155":138,"_152":174,"_100":173,"_164":237,"_162":186,"_104":196,"_154":-5,"_109":292,"_156":161,"_167":-5,"_158":27,"_166":27,"_103":296},"633eb84a-3093-11f0-9c41-569c3dd06744",[173],{"_152":174,"_104":196,"_109":298,"_155":138,"_190":299},["D",1747207000887],[300],{"_107":301,"_155":138,"_152":174,"_100":173,"_164":237,"_162":163,"_104":31,"_154":-5,"_109":298,"_156":196,"_167":-5,"_158":27,"_166":27,"_103":302},"61e104e4-3093-11f0-a419-569c3dd06744",[173],"page","hasNext","routes/_app","actionData","errors"]

History