💻 Checkout Frontend

Trigger a Stripe Checkout Session from a web frontend

Prompt Template

Create a GET endpoint on the "/" route in [SOME WEB FRAMEWORK] that renders an HTML page.
The webpage should contain a button that triggers a POST request to the /checkout endpoint using the browser fetch API. 


file_type_typescript src/index.ts
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import { HTTPException } from 'hono/http-exception';
import Stripe from 'stripe';
import 'dotenv/config'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

const app = new Hono()

app.get('/', (c) => {
  const html = `
  <!DOCTYPE html>
      <script src="https://js.stripe.com/v3/"></script>
      <button id="checkoutButton">Checkout</button>

        const checkoutButton = document.getElementById('checkoutButton');
        checkoutButton.addEventListener('click', async () => {
          const response = await fetch('/checkout', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
          const { id } = await response.json();
          const stripe = Stripe('${process.env.STRIPE_PUBLISHABLE_KEY}');
          await stripe.redirectToCheckout({ sessionId: id });
  return c.html(html);

const port = 3000
console.log(`Server is running on port ${port}`)

  fetch: app.fetch,

Questions? Let's chat

Open Discord