e-commerce

name	e-commerce
description	E-commerce platforms, payment processing, and shopping cart patterns
domain	domain-applications
version	1.0.0
tags	["e-commerce","payments","stripe","cart","checkout","inventory"]
triggers	{"keywords":{"primary":["e-commerce","ecommerce","shopping cart","checkout","payment","stripe"],"secondary":["inventory","order","product catalog","discount","coupon","shipping"]},"context_boost":["shop","store","buy","sell","transaction"],"context_penalty":["game","mobile","desktop"],"priority":"high"}

E-Commerce Development

Overview

Building e-commerce applications with shopping carts, payment processing, inventory management, and order fulfillment.

---

Shopping Cart

Cart State Management

interface CartItem {
  productId: string;
  variantId?: string;
  quantity: number;
  price: number;
  name: string;
  image: string;
}

interface Cart {
  id: string;
  items: CartItem[];
  subtotal: number;
  tax: number;
  shipping: number;
  total: number;
  discountCode?: string;
  discountAmount: number;
}

// Zustand cart store
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartStore {
  cart: Cart;
  addItem: (item: Omit<CartItem, 'quantity'>, quantity?: number) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  removeItem: (productId: string) => void;
  clearCart: () => void;
  applyDiscount: (code: string) => Promise<void>;
}

const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      cart: createEmptyCart(),

      addItem: (item, quantity = 1) => {
        set((state) => {
          const existingIndex = state.cart.items.findIndex(
            (i) => i.productId === item.productId && i.variantId === item.variantId
          );

          const newItems = [...state.cart.items];
          if (existingIndex >= 0) {
            newItems[existingIndex].quantity += quantity;
          } else {
            newItems.push({ ...item, quantity });
          }

          return { cart: recalculateCart({ ...state.cart, items: newItems }) };
        });
      },

      updateQuantity: (productId, quantity) => {
        set((state) => {
          if (quantity <= 0) {
            return {
              cart: recalculateCart({
                ...state.cart,
                items: state.cart.items.filter((i) => i.productId !== productId),
              }),
            };
          }

          const newItems = state.cart.items.map((item) =>
            item.productId === productId ? { ...item, quantity } : item
          );

          return { cart: recalculateCart({ ...state.cart, items: newItems }) };
        });
      },

      removeItem: (productId) => {
        set((state) => ({
          cart: recalculateCart({
            ...state.cart,
            items: state.cart.items.filter((i) => i.productId !== productId),
          }),
        }));
      },

      clearCart: () => set({ cart: createEmptyCart() }),

      applyDiscount: async (code) => {
        const discount = await validateDiscountCode(code);
        set((state) => ({
          cart: recalculateCart({
            ...state.cart,
            discountCode: code,
            discountAmount: discount.amount,
          }),
        }));
      },
    }),
    { name: 'cart-storage' }
  )
);

function recalculateCart(cart: Cart): Cart {
  const subtotal = cart.items.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );
  const tax = subtotal * 0.1; // 10% tax
  const shipping = subtotal > 100 ? 0 : 9.99;
  const total = subtotal + tax + shipping - cart.discountAmount;

  return { ...cart, subtotal, tax, shipping, total };
}

---

Payment Processing

Stripe Integration

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-10-16',
});

// Create checkout session
async function createCheckoutSession(cart: Cart, customerId?: string) {
  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    customer: customerId,
    line_items: cart.items.map((item) => ({
      price_data: {
        currency: 'usd',
        product_data: {
          name: item.name,
          images: [item.image],
        },
        unit_amount: Math.round(item.price * 100),
      },
      quantity: item.quantity,
    })),
    discounts: cart.discountCode
      ? [{ coupon: cart.discountCode }]
      : ,
    : {
      : [, , ],
    },
    : ,
    : ,
    : {
      : cart.,
    },
  });

   session;
}


  () {
   paymentIntent =  stripe..({
    : .(amount * ),
    : ,
    : customerId,
    : { :  },
  });

   {
    : paymentIntent.,
    : paymentIntent.,
  };
}


  () {
   event = stripe..(
    body,
    signature,
    process..!
  );

   (event.) {
     : {
       session = event..  ..;
       (session);
      ;
    }

     : {
       paymentIntent = event..  .;
       (paymentIntent);
      ;
    }

     : {
       paymentIntent = event..  .;
       (paymentIntent);
      ;
    }
  }
}

React Stripe Elements

import { loadStripe } from '@stripe/stripe-js';
import {
  Elements,
  PaymentElement,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!);

function CheckoutForm({ clientSecret }: { clientSecret: string }) {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string | null>(null);
  const [processing, setProcessing] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!stripe || !elements) return;

    setProcessing(true);
    setError(null);

    const { error: submitError } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${.location.origin}/checkout/success`,
      },
    });

     (submitError) {
      (submitError. || );
      ();
    }
  };

   (
    
  );
}

 () {
   [clientSecret, setClientSecret] = ();

  ( {
    (, {
      : ,
      : .({ : cart. }),
    })
      .( res.())
      .( (data.));
  }, []);

   (!clientSecret)  ;

   (
    
  );
}

---

Inventory Management

interface Product {
  id: string;
  name: string;
  sku: string;
  price: number;
  inventory: number;
  lowStockThreshold: number;
  variants: ProductVariant[];
}

interface ProductVariant {
  id: string;
  name: string;
  sku: string;
  price: number;
  inventory: number;
  attributes: Record<string, string>;
}

// Inventory operations with optimistic locking
async function reserveInventory(items: CartItem[]): Promise<boolean> {
  return prisma.$transaction(async (tx) => {
    for (const item of items) {
      const product = await tx.product.findUnique({
        where: { id: item.productId },
        : { : , :  },
      });

       (!product || product. < item.) {
          ();
      }

      
       updated =  tx..({
        : {
          : item.,
          : product.,
          : { : item. },
        },
        : {
          : { : item. },
          : { :  },
        },
      });

       (updated. === ) {
          ();
      }
    }

     ;
  });
}


  () {
   order =  prisma..({
    : { : orderId },
    : { :  },
  });

   prisma.$transaction(
    order..(
      prisma..({
        : { : item. },
        : { : { : item. } },
      })
    )
  );
}


  () {
   lowStockProducts =  prisma..({
    : {
      : { : prisma... },
    },
  });

   ( product  lowStockProducts) {
     (product);
  }
}

---

Order Management

enum OrderStatus {
  PENDING = 'pending',
  PAID = 'paid',
  PROCESSING = 'processing',
  SHIPPED = 'shipped',
  DELIVERED = 'delivered',
  CANCELLED = 'cancelled',
  REFUNDED = 'refunded',
}

interface Order {
  id: string;
  userId: string;
  status: OrderStatus;
  items: OrderItem[];
  subtotal: number;
  tax: number;
  shipping: number;
  total: number;
  shippingAddress: Address;
  billingAddress: Address;
  paymentIntentId: string;
  trackingNumber?: string;
  createdAt: Date;
  updatedAt: Date;
}

// Create order from checkout session
async function fulfillOrder(session: ..) {
   order =  prisma..({
    : {
      : session.!,
      : .,
      : session.  ,
      : session.! / ,
      : session.! / ,
      : .(session.!.),
      : {
        : .(session.!.),
      },
    },
  });

  
   (order.);

  
   (order);

  
   (order);

   order;
}


  () {
   order =  prisma..({
    : { : orderId },
    : { status },
  });

  
   (order);

   order;
}

---

Product Catalog

// Product search with filters
async function searchProducts(params: {
  query?: string;
  category?: string;
  minPrice?: number;
  maxPrice?: number;
  sortBy?: 'price' | 'name' | 'createdAt';
  sortOrder?: 'asc' | 'desc';
  page?: number;
  limit?: number;
}) {
  const {
    query,
    category,
    minPrice,
    maxPrice,
    sortBy = 'createdAt',
    sortOrder = 'desc',
    page = 1,
    limit = 20,
  } = params;

  const where: Prisma.ProductWhereInput = {
    status: 'active',
    ...(query && {
      OR: [
        { name: { contains: query, mode: 'insensitive' } },
        { description: { contains: query, mode: 'insensitive' } },
      ],
    }),
    ...(category && { categoryId: category }),
    ...(minPrice && { price: { gte: minPrice } }),
    ...(maxPrice && { price: { lte: maxPrice } }),
  };

  const [products, total] = await Promise.all([
    prisma.product.findMany({
      where,
      : { [sortBy]: sortOrder },
      : (page - ) * limit,
      : limit,
      : {
        : ,
        : ,
        : ,
      },
    }),
    prisma..({ where }),
  ]);

   {
    products,
    : {
      page,
      limit,
      total,
      : .(total / limit),
    },
  };
}

---

Related Skills

• [[payment-processing]] - Payment systems
• [[backend]] - API development
• [[database]] - Data modeling