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 }]
: undefined,
shipping_address_collection: {
allowed_countries: ['US', 'CA', 'GB'],
},
success_url: `${process.env.APP_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${process.env.APP_URL}/cart`,
metadata: {
cartId: cart.id,
},
});
return session;
}
// Create payment intent (for custom checkout)
async function createPaymentIntent(amount: number, customerId?: string) {
const paymentIntent = await stripe.paymentIntents.create({
amount: Math.round(amount * 100),
currency: 'usd',
customer: customerId,
automatic_payment_methods: { enabled: true },
});
return {
clientSecret: paymentIntent.client_secret,
paymentIntentId: paymentIntent.id,
};
}
// Webhook handler
async function handleStripeWebhook(body: string, signature: string) {
const event = stripe.webhooks.constructEvent(
body,
signature,
process.env.STRIPE_WEBHOOK_SECRET!
);
switch (event.type) {
case 'checkout.session.completed': {
const session = event.data.object as Stripe.Checkout.Session;
await fulfillOrder(session);
break;
}
case 'payment_intent.succeeded': {
const paymentIntent = event.data.object as Stripe.PaymentIntent;
await handlePaymentSuccess(paymentIntent);
break;
}
case 'payment_intent.payment_failed': {
const paymentIntent = event.data.object as Stripe.PaymentIntent;
await handlePaymentFailure(paymentIntent);
break;
}
}
}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: `${window.location.origin}/checkout/success`,
},
});
if (submitError) {
setError(submitError.message || 'Payment failed');
setProcessing(false);
}
};
return (
<form onSubmit={handleSubmit}>
<PaymentElement />
{error && <div className="error">{error}</div>}
<button type="submit" disabled={!stripe || processing}>
{processing ? 'Processing...' : 'Pay Now'}
</button>
</form>
);
}
function CheckoutPage() {
const [clientSecret, setClientSecret] = useState('');
useEffect(() => {
fetch('/api/create-payment-intent', {
method: 'POST',
body: JSON.stringify({ amount: cart.total }),
})
.then((res) => res.json())
.then((data) => setClientSecret(data.clientSecret));
}, []);
if (!clientSecret) return <Loading />;
return (
<Elements
stripe={stripePromise}
options={{ clientSecret, appearance: { theme: 'stripe' } }}
>
<CheckoutForm clientSecret={clientSecret} />
</Elements>
);
}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 },
select: { inventory: true, version: true },
});
if (!product || product.inventory < item.quantity) {
throw new Error(`Insufficient inventory for ${item.name}`);
}
// Optimistic locking with version check
const updated = await tx.product.updateMany({
where: {
id: item.productId,
version: product.version,
inventory: { gte: item.quantity },
},
data: {
inventory: { decrement: item.quantity },
version: { increment: 1 },
},
});
if (updated.count === 0) {
throw new Error(`Concurrent modification for ${item.name}`);
}
}
return true;
});
}
// Release inventory (on order cancellation)
async function releaseInventory(orderId: string) {
const order = await prisma.order.findUnique({
where: { id: orderId },
include: { items: true },
});
await prisma.$transaction(
order.items.map((item) =>
prisma.product.update({
where: { id: item.productId },
data: { inventory: { increment: item.quantity } },
})
)
);
}
// Low stock alerts
async function checkLowStock() {
const lowStockProducts = await prisma.product.findMany({
where: {
inventory: { lte: prisma.product.fields.lowStockThreshold },
},
});
for (const product of lowStockProducts) {
await sendLowStockAlert(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: Stripe.Checkout.Session) {
const order = await prisma.order.create({
data: {
userId: session.client_reference_id!,
status: OrderStatus.PAID,
paymentIntentId: session.payment_intent as string,
subtotal: session.amount_subtotal! / 100,
total: session.amount_total! / 100,
shippingAddress: JSON.parse(session.metadata!.shippingAddress),
items: {
create: JSON.parse(session.metadata!.items),
},
},
});
// Reserve inventory
await reserveInventory(order.items);
// Send confirmation email
await sendOrderConfirmation(order);
// Notify fulfillment system
await notifyFulfillment(order);
return order;
}
// Order status updates
async function updateOrderStatus(orderId: string, status: OrderStatus) {
const order = await prisma.order.update({
where: { id: orderId },
data: { status },
});
// Send notification
await sendOrderStatusUpdate(order);
return 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,
orderBy: { [sortBy]: sortOrder },
skip: (page - 1) * limit,
take: limit,
include: {
category: true,
images: true,
variants: true,
},
}),
prisma.product.count({ where }),
]);
return {
products,
pagination: {
page,
limit,
total,
totalPages: Math.ceil(total / limit),
},
};
}Related Skills
- [[payment-processing]] - Payment systems
- [[backend]] - API development
- [[database]] - Data modeling