uplift.page
← library
prompt🛒 E-commercev2 · updated 2026-06-12

E-commerce storefront

Next.js storefront with Stripe Checkout and webhook-driven fulfillment.

Run it as a prompt

Paste this into any AI agent, or fetch it: curl -s https://uplift.page/api/v1/prompts/ecommerce-storefront/raw

prompt.md
# E-commerce storefront

Sell products online with hosted checkout, taxes, and an order pipeline you can trust during a traffic spike.

## Recommended stack

- **Next.js** - storefront. Static product pages with ISR are fast and cheap; server actions handle cart ops.
- **Stripe Checkout + Billing** - payments. Hosted checkout offloads PCI, taxes, wallets, and subscription math.
- **Supabase Postgres** - orders & inventory. Relational orders with RLS so customers see only their own.
- **Resend + react-email** - transactional email. Order confirmations as version-controlled React templates.

## Build steps

1. Model products/prices in Stripe as source of truth; mirror to your DB via webhook for querying.
2. Cart → Checkout Session with line items; let Stripe handle taxes and payment methods.
3. Treat `checkout.session.completed` webhooks as the only order-creation path (idempotent by event id).
4. Build order status page keyed by session id; email confirmation on webhook, not on redirect.
5. Test the whole flow with Stripe test clocks and the CLI webhook forwarder before launch.

## Watch out for

- Creating orders on the redirect page - users close tabs; webhooks are the truth.
- Non-idempotent webhook handlers double-fulfilling on Stripe retries.
- Storing card data anywhere, ever.

## Definition of done

- Test-mode purchase → order row → confirmation email, end to end
- Webhook replay produces no duplicate orders
- Refund in Stripe reflects in the customer's order page

The full prompt

Sell products online with hosted checkout, taxes, and an order pipeline you can trust during a traffic spike.

Recommended stack

  • Next.js - storefront. Static product pages with ISR are fast and cheap; server actions handle cart ops.
  • Stripe Checkout + Billing - payments. Hosted checkout offloads PCI, taxes, wallets, and subscription math.
  • Supabase Postgres - orders & inventory. Relational orders with RLS so customers see only their own.
  • Resend + react-email - transactional email. Order confirmations as version-controlled React templates.

Build steps

  1. Model products/prices in Stripe as source of truth; mirror to your DB via webhook for querying.
  2. Cart → Checkout Session with line items; let Stripe handle taxes and payment methods.
  3. Treat checkout.session.completed webhooks as the only order-creation path (idempotent by event id).
  4. Build order status page keyed by session id; email confirmation on webhook, not on redirect.
  5. Test the whole flow with Stripe test clocks and the CLI webhook forwarder before launch.

Watch out for

  • Creating orders on the redirect page - users close tabs; webhooks are the truth.
  • Non-idempotent webhook handlers double-fulfilling on Stripe retries.
  • Storing card data anywhere, ever.

Definition of done

  • Test-mode purchase → order row → confirmation email, end to end
  • Webhook replay produces no duplicate orders
  • Refund in Stripe reflects in the customer's order page

Served from the uplift.page library and refreshed within 5 minutes of every update.