\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","deleted","label",[18],"40faa730-3093-11f0-83a3-569c3dd06744",["D",1747206945695],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","pinnedFileId","a06247d2-3093-11f0-b626-569c3dd06744","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_165":68},"org",{"_11":12,"_67":68,"_30":66,"_163":164},"branch",{"_43":106,"_13":16,"_37":40,"_155":122,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":14,"_162":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","tier","pro","profileImageUrl",{"_37":122,"_13":14,"_41":215,"_124":-5,"_125":24,"_126":127,"_128":-5,"_129":-5,"_30":66,"_130":131,"_132":114,"_133":114,"_134":-5,"_135":26,"_45":46,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":141,"_142":141,"_143":144,"_145":144,"_146":144,"_147":141,"_148":141,"_53":216,"_150":217,"_152":218,"_154":24},"tree",[194,195,196],"files",[194,195,196],"counts",{"_184":26,"_185":44,"_186":26,"_187":188,"_189":190},"contents",[],{"_37":111,"_13":18,"_63":64,"_47":-5,"_39":40,"_112":106,"_113":114,"_41":182,"_43":116,"_65":21,"_117":118,"_119":24,"_120":-5,"_17":183},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"navCollapsed",["D",1747209459823],[18],"pulls","branches","forks","envVars",{"_191":26,"_193":26},"connections",{"_191":26,"_192":26},"count","unfilledCount","emptyCount",{"_37":208,"_13":209,"_63":210,"_47":-5,"_39":40,"_112":95,"_113":114,"_41":211,"_43":71,"_65":21,"_117":212,"_119":24,"_120":-5,"_202":213,"_17":214},{"_37":111,"_13":18,"_63":64,"_47":-5,"_39":40,"_112":106,"_113":114,"_41":205,"_43":116,"_65":21,"_117":118,"_119":24,"_120":-5,"_202":206,"_17":207},{"_37":197,"_13":198,"_63":131,"_47":-5,"_39":40,"_112":95,"_113":114,"_41":199,"_43":200,"_65":76,"_117":201,"_119":24,"_120":-5,"_202":203,"_17":204},"feed8622-3098-11f0-87e8-569c3dd06744","index.ts",["D",1747209411850],3,"// 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}","children",[],[198],["D",1747209459823],[],[18],"feed5eb8-3098-11f0-87e8-569c3dd06744","README.md","699af622-3093-11f0-8289-569c3dd06744",["D",1747209411850],"# Client-Side Stripe Checkout Implementation\n\nThis is a client-side only implementation of Stripe Checkout, as requested. It uses Stripe's client-side checkout.js library to create a checkout session directly from the browser without requiring server-side code.\n\n## Important Notes\n\n1. **Replace the Stripe Keys**: \n - You must replace the placeholder publishable key (`pk_test_TYooMQauvdEDq54NiTphI7jx`) with your actual Stripe publishable key\n - You must replace the placeholder price ID (`price_1234567890`) with your actual Stripe price ID from your dashboard\n\n2. **Limitations of Client-Side Only Approach**:\n - Limited customization options compared to server-side implementation\n - Cannot perform post-payment actions that require the secret key\n - Cannot dynamically calculate prices or apply discounts\n - Cannot validate the payment on your end (you'll need to rely on Stripe webhooks)\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\n## How It Works\n\n1. The page loads with a simple product display and checkout button\n2. When the user clicks \"Proceed to Checkout\", the code calls `stripe.redirectToCheckout()`\n3. This redirects the user to Stripe's hosted checkout page\n4. After payment, the user is redirected back to the success or cancel URL\n5. The page displays a success or cancellation message based on the URL parameters\n\n## Customization\n\nTo customize this implementation:\n\n1. Update the product details and pricing in the HTML\n2. Replace the price ID with your actual Stripe price ID\n3. Customize the success and cancel messages\n4. Adjust the styling as needed using Tailwind classes\n\n## Alternative Approaches\n\nIf you need more functionality, consider:\n- Creating a minimal HTTP val to create checkout sessions server-side\n- Using Stripe Elements for more customized checkout experiences\n- Implementing webhook handling for post-payment processing",[],[209],["D",1747206945695],{"_11":12,"_165":68},{"_11":12,"_67":68,"_30":66,"_163":164},{"_43":106,"_13":16,"_37":40,"_155":122,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":14,"_162":12},"ctx",{"_53":-5,"_252":253,"_254":255,"_256":24,"_257":24,"_258":24,"_259":-5,"_260":-7,"_261":-7,"_262":26,"_263":24,"_264":24,"_265":-5,"_266":24,"_267":24},"ENV",{"_223":224,"_225":226,"_227":228,"_229":16,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","f1316bb1ce3ad41ce227a17bcad7725ad044419f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","API_URL","https://api.val.town","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier"]

History · index.html