E-commerce Store - Kleap Documentation

Create an online store to sell products with shopping cart and checkout.

What We’re Building

An e-commerce store with:

Product catalog with categories
Product detail pages
Shopping cart
Checkout with Stripe
Order confirmation

Prerequisites

Kleap account
Stripe account (for checkout)

Product data can be hardcoded in your site or stored in Kleap Database — a managed database built into Kleap (no separate account to connect).

Step 1: Store Your Products

Your catalog can live in one of two places:

Static data — hardcode the product list in your site. Simplest, great for a small catalog that rarely changes.
Kleap Database — a managed database built into Kleap (no separate account). Best when you want to add or edit products without redeploying.

Option: Kleap Database

Enable Kleap Database and create a products table:

products
   - id (uuid, primary key)
   - name (text)
   - description (text)
   - price (numeric)
   - image_url (text)
   - category (text)
   - inventory (integer)
   - created_at (timestamp)

Make products publicly readable.

Orders and payments are handled by Stripe’s hosted checkout (Step 5), so you don’t need orders tables in your site — Stripe records every order for you.

Add Sample Products

Add 6 sample products (static data or in Kleap Database):
- Mix of different categories
- Realistic prices
- AI-generated or your own product images

Step 2: Product Catalog

Homepage

Create an e-commerce homepage with:
- Hero banner with featured products or sale
- Category navigation
- Featured products grid (4-6 items)
- "View All Products" link

Products Page

Create a products page that:
- Shows all products in a responsive grid
- Has category filter tabs
- Has sort options (price, newest)
- Shows product cards with image, name, price, add to cart
- Handles empty state

Product Card

Create a product card component with:
- Product image (hover zoom effect)
- Product name
- Price display
- "Add to Cart" button
- Quick view option
- Sale badge (if discounted)

Step 3: Product Detail Page

Create a product detail page at /products/[id] with:
- Large product image gallery
- Product name and price
- Full description
- Quantity selector
- "Add to Cart" button
- Related products section
- Back to products link

Image Gallery

Add an image gallery to product pages:
- Main large image
- Thumbnail strip below
- Click thumbnail to change main image
- Lightbox on click

Step 4: Shopping Cart

Cart State

Implement shopping cart functionality:
- Store cart in localStorage (persists across sessions)
- Add to cart function
- Remove from cart function
- Update quantity function
- Calculate totals

Create a cart sidebar/drawer that:
- Opens when clicking cart icon
- Shows list of cart items
- Each item shows: image, name, quantity, price, remove button
- Shows subtotal
- Has "Continue Shopping" and "Checkout" buttons
- Shows empty cart message when empty

Cart Icon

Add a cart icon to the navigation that:
- Shows current item count badge
- Opens cart sidebar on click
- Updates dynamically when items added

Step 5: Checkout with Stripe

Your store is a static Astro site, so checkout runs on Stripe’s hosted pages. You only ever use your Stripe publishable key — no secret key (sk_...) and no server code live in your site.

Set Up Stripe

In your Stripe Dashboard, create a Payment Link or Buy Button for each product (or a Pricing Table for a set of products).
Copy each product’s link or Buy Button embed snippet.

Add Checkout

Wire up checkout:
- Point each product's "Buy" action to its Stripe Payment Link (or embed the Buy Button)
- Clicking Buy sends the shopper to Stripe's hosted checkout page
- Stripe collects payment and shipping details, then emails a receipt
- After payment, Stripe redirects back to a success page on your store

Stripe Payment Links and Buy Buttons each sell one product (or a fixed bundle). A fully dynamic cart that totals arbitrary items into a single Stripe Checkout Session needs a backend beyond a static site — for that, use a Payment Link per product, a Stripe Pricing Table, or add a small server/serverless function as an advanced step.

Order Confirmation

Create an order confirmation / success page that:
- Shows after Stripe redirects back from a successful payment
- Thanks the customer
- Includes a "Continue Shopping" button

Stripe emails the receipt and records the order in your Stripe Dashboard.

Step 6: Orders (Optional)

Every order and payment lives in your Stripe Dashboard — view orders, payment status, and customer details there without adding anything to your site. An in-app orders page or admin panel (past orders, status updates, sales stats) needs to read payment data from a backend, which is beyond a static site. Use the Stripe Dashboard for order management, or add a small server/serverless layer as an advanced step.

Step 7: Polish

Loading States

Add loading states:
- Product grid skeleton while loading
- Button spinner when adding to cart
- Checkout button loading state

Error Handling

Add error handling:
- Show error if product fails to load
- Handle out of stock items
- Display payment errors gracefully

Mobile Optimization

Optimize for mobile:
- Full-screen cart on mobile
- Touch-friendly product gallery
- Mobile-optimized checkout
- Easy quantity adjustments

Step 8: Launch

Pre-Launch Checklist

Deploy

Click Publish
Test checkout in Stripe test mode
Switch your Payment Links / Buy Buttons to live mode
Connect a custom domain

Enhancements

After launching, consider adding:

User accounts - Save shipping info, order history
Reviews - Product ratings and reviews
Wishlists - Save products for later
Search - Search products by name
Inventory tracking - Update stock on purchase
Email notifications - Order confirmation emails
Discount codes - Coupon system

Complete Prompt Flow

Database setup
Homepage with featured products
Products listing page
Product detail page
Shopping cart functionality
Stripe checkout (Payment Links / Buy Buttons)
Order confirmation
Polish and mobile optimization

Stripe Integration

Complete Stripe setup guide

​What We’re Building

​Prerequisites

​Step 1: Store Your Products

​Option: Kleap Database

​Add Sample Products

​Step 2: Product Catalog

​Homepage

​Products Page

​Product Card

​Step 3: Product Detail Page

​Image Gallery

​Step 4: Shopping Cart

​Cart State

​Cart Sidebar

​Cart Icon

​Step 5: Checkout with Stripe

​Set Up Stripe

​Add Checkout

​Order Confirmation

​Step 6: Orders (Optional)

​Step 7: Polish

​Loading States

​Error Handling

​Mobile Optimization

​Step 8: Launch

​Pre-Launch Checklist

​Deploy

​Enhancements

​Complete Prompt Flow

Stripe Integration

What We’re Building

Prerequisites

Step 1: Store Your Products

Option: Kleap Database

Add Sample Products

Step 2: Product Catalog

Homepage

Products Page

Product Card

Step 3: Product Detail Page

Image Gallery

Step 4: Shopping Cart

Cart State

Cart Sidebar

Cart Icon

Step 5: Checkout with Stripe

Set Up Stripe

Add Checkout

Order Confirmation

Step 6: Orders (Optional)

Step 7: Polish

Loading States

Error Handling

Mobile Optimization

Step 8: Launch

Pre-Launch Checklist

Deploy

Enhancements

Complete Prompt Flow