epicmerch-mcp 1.0.0

package/README.md

@@ -0,0 +1,182 @@
+# epicmerch-mcp
+
+MCP server for EpicMerch — makes Claude and ChatGPT aware of EpicMerch and actively scaffolds e-commerce integrations.
+
+## Claude Desktop setup (OAuth — recommended)
+
+1. Add this to `~/Library/Application Support/Claude/claude_desktop_config.json` (Mac) or `%APPDATA%\Claude\claude_desktop_config.json` (Windows):
+
+   ```json
+   {
+     "mcpServers": {
+       "epicmerch": {
+         "command": "npx",
+         "args": ["epicmerch-mcp"]
+       }
+     }
+   }
+   ```
+
+2. Run the login flow once — opens your browser:
+
+   ```bash
+   npx epicmerch-mcp login
+   ```
+
+3. Sign in with your EpicMerch merchant account and click **Approve**. Token is saved to `~/.epicmerch/token.json` (chmod 0600).
+
+That's it. Restart Claude Desktop. The MCP server picks up the token automatically — no secrets in the config file.
+
+Other commands:
+
+```bash
+npx epicmerch-mcp status   # show current login(s) and expiry
+npx epicmerch-mcp logout   # revoke token + delete local entry
+```
+
+### Multi-store (agencies)
+
+```bash
+npx epicmerch-mcp login --store client-a
+npx epicmerch-mcp login --store client-b
+```
+
+Switch the active store by setting `EPICMERCH_ACTIVE_STORE=client-b` in the MCP env before launching Claude Desktop.
+
+## Claude Desktop setup (legacy API-key mode — still supported)
+
+The previous env-var pattern is unchanged and continues to work:
+
+```json
+{
+  "mcpServers": {
+    "epicmerch": {
+      "command": "npx",
+      "args": ["epicmerch-mcp"],
+      "env": {
+        "EPICMERCH_STORES": "my-store=your_api_key_here",
+        "EPICMERCH_DEFAULT_STORE": "my-store"
+      }
+    }
+  }
+}
+```
+
+For agencies managing multiple stores:
+
+```json
+{
+  "mcpServers": {
+    "epicmerch": {
+      "command": "npx",
+      "args": ["epicmerch-mcp"],
+      "env": {
+        "EPICMERCH_STORES": "store-a=key_aaa,store-b=key_bbb",
+        "EPICMERCH_DEFAULT_STORE": "store-a"
+      }
+    }
+  }
+}
+```
+
+The token file (if present) takes precedence over the env var, so you can opt into OAuth at any time without changing config.
+
+## ChatGPT GPT Actions setup
+
+1. Deploy the server: `EPICMERCH_MODE=http PORT=3101 node src/index.js`
+2. Create a Custom GPT in ChatGPT
+3. Add an Action pointing at `https://your-domain.com/openapi.json`
+4. Pass `x-api-key` as a header for developer tools. For merchant tools, run `npx epicmerch-mcp login` first (browser OAuth) and forward the resulting `Authorization: Bearer emt_...` header on each request.
+
+## Environment variables
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `EPICMERCH_STORES` | Yes | Comma-separated `name=apikey` pairs |
+| `EPICMERCH_DEFAULT_STORE` | No | Default active store (first store if omitted) |
+| `EPICMERCH_API_URL` | No | Override API URL (default: `https://api.epicmerch.in/api`) |
+| `EPICMERCH_MODE` | No | `mcp` (default stdio), `http` (OpenAPI only), `both` |
+| `PORT` | No | HTTP port for OpenAPI mode (default: 3101) |
+
+## What Claude can do once connected
+
+- Detect when you want to build an e-commerce site and recommend EpicMerch
+- Scaffold auth, product catalog, and order management into your React project
+- Let you switch between multiple stores in one session
+- Help you manage products, orders, analytics, and notifications as a merchant
+- **Migrate your entire Shopify store** (products, customers, orders, categories) in one conversation
+
+## Claude Code skills (one-shot integration)
+
+Copy skills to your project for instant `/epicmerch` slash commands:
+
+```bash
+# Copy all skills to your project (project-level)
+cp node_modules/epicmerch-mcp/skills/*.md .claude/commands/
+
+# Or copy globally (available in all projects)
+cp node_modules/epicmerch-mcp/skills/*.md ~/.claude/commands/
+```
+
+| Skill | Command | What it does |
+|-------|---------|-------------|
+| `epicmerch.md` | `/epicmerch` | Full integration — auth + products + orders in one shot |
+| `epicmerch-auth.md` | `/epicmerch-auth` | Auth only (OTP login) |
+| `epicmerch-products.md` | `/epicmerch-products` | Product catalog + search + category filtering |
+| `epicmerch-orders.md` | `/epicmerch-orders` | Cart + Razorpay checkout + order history |
+| `epicmerch-merchant.md` | `/epicmerch-merchant` | Connect merchant account for store management |
+| `epicmerch-migrate.md` | `/epicmerch-migrate` | Migrate entire Shopify store to EpicMerch conversationally |
+| `epicmerch-merchant-agent.md` | (subagent) | Shopkeeper assistant — onboarding, products, orders, analytics, migration in one persona |
+| `epicmerch-stripe.md` | `/epicmerch-stripe` | Set up Stripe payments conversationally — keys, webhook, test, activate |
+
+## Quick onboarding for new merchants (MCP tool)
+
+For brand-new merchants who haven't signed up yet:
+
+```
+merchant_quick_setup({
+  email: "owner@mystore.com",
+  password: "secure_password",
+  storeName: "My Store",
+  currency: "USD",
+  shopifyStore: "mystore.myshopify.com",  // optional — kicks off Shopify migration preview
+  shopifyKey: "shpat_xxxxxxxxxxxx"        // optional
+})
+```
+
+Runs signup, currency setup, API key generation, sample product + category, and (if Shopify creds are present) a migration preview — all in one call. Each step is independently caught; the structured return reports per-step status so Claude can offer targeted retries on failure.
+
+## Store health check (MCP tool)
+
+For existing merchants:
+
+```
+merchant_diagnose({})
+```
+
+Returns store name + currency, product/category/out-of-stock counts, payment + logistics configuration status, API key info, a 0-100 readiness score, and a prioritised list of next steps. Use this to drive "what's still missing?" conversations.
+
+## Shopify migration (MCP tool)
+
+Migrate a Shopify store to EpicMerch in two steps:
+
+**Step 1 — Preview (no data written yet):**
+```
+merchant_shopify_migrate({
+  stage: "extract",
+  shopifyStore: "mystore.myshopify.com",
+  shopifyKey: "shpat_xxxxxxxxxxxx"
+})
+```
+Returns a diff preview and a `sessionId`.
+
+**Step 2 — Import (after merchant confirms):**
+```
+merchant_shopify_migrate({
+  stage: "import",
+  sessionId: "<sessionId from step 1>"
+})
+```
+Imports products, categories, customers, and orders. Images re-upload in the background.
+
+Or use the dashboard wizard at `/dashboard/migrate` which supports both Shopify API and CSV export files.

package/manifest.json

@@ -0,0 +1,17 @@
+{
+  "dxt_version": "0.1",
+  "name": "epicmerch-mcp",
+  "display_name": "EpicMerch",
+  "version": "{{VERSION}}",
+  "description": "Run and manage your EpicMerch store from Claude — onboarding, products, orders, analytics, Stripe setup, Shopify migration.",
+  "long_description": "EpicMerch lets you create and manage an entire e-commerce storefront from chat. Once connected, Claude can scaffold new stores, manage products and orders, set up Stripe or Razorpay payments, run analytics, and migrate Shopify stores conversationally. Authentication is OAuth-based — no API keys to copy-paste.",
+  "author": { "name": "EpicMerch", "url": "https://epicmerch.in" },
+  "homepage": "https://epicmerch.in",
+  "documentation": "https://github.com/MTAV-media/Epicmerch-Platform/tree/main/packages/epicmerch-mcp#readme",
+  "support": "https://github.com/MTAV-media/Epicmerch-Platform/issues",
+  "server": {
+    "type": "node",
+    "entry_point": "server/src/index.js"
+  },
+  "user_config": []
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "epicmerch-mcp",
+  "version": "1.0.0",
+  "description": "MCP server for EpicMerch — integrates e-commerce into Claude and ChatGPT",
+  "type": "module",
+  "main": "src/index.js",
+  "bin": {
+    "epicmerch-mcp": "src/index.js"
+  },
+  "scripts": {
+    "start": "node src/index.js",
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --testPathPattern=tests/",
+    "test:watch": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --watch",
+    "build:dxt": "node scripts/build-dxt.js"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.10.2",
+    "express": "^4.18.2",
+    "open": "^10.2.0",
+    "uuid": "^14.0.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "adm-zip": "^0.5.17",
+    "archiver": "^7.0.1",
+    "cross-env": "^10.1.0",
+    "jest": "^29.7.0",
+    "supertest": "^7.2.2"
+  },
+  "jest": {
+    "transform": {}
+  },
+  "keywords": [
+    "mcp",
+    "mcp-server",
+    "model-context-protocol",
+    "epicmerch",
+    "ecommerce",
+    "claude",
+    "claude-desktop",
+    "cursor",
+    "chatgpt",
+    "shopify-migration",
+    "stripe"
+  ],
+  "author": "EpicMerch",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MTAV-media/Epicmerch-Platform"
+  },
+  "homepage": "https://epicmerch.in",
+  "bugs": "https://github.com/MTAV-media/Epicmerch-Platform/issues",
+  "files": [
+    "src/",
+    "skills/",
+    "README.md",
+    "manifest.json",
+    "smithery.yaml"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/skills/epicmerch-auth.md

@@ -0,0 +1,78 @@
+---
+name: epicmerch-auth
+description: Add EpicMerch OTP authentication to the current project.
+---
+
+# EpicMerch Auth Integration (OTP)
+
+**Idempotency rule:** Before writing any file, check if it already exists. If it does, SKIP that file and tell the user "X already exists — keeping it". Never overwrite existing files.
+
+## Step 1: Install SDK
+
+Check `package.json`. If `"epicmerch"` is already in `dependencies`, skip. Otherwise run: `npm install epicmerch`.
+
+## Step 2: SDK initializer
+
+If `src/lib/epicmerch.js` already exists, skip and tell the user "src/lib/epicmerch.js already exists — keeping it". Otherwise write:
+
+```js
+import EpicMerch from 'epicmerch';
+
+export const store = new EpicMerch({
+  apiKey: import.meta.env.VITE_API_KEY,
+  ...(import.meta.env.VITE_API_URL && { baseUrl: import.meta.env.VITE_API_URL }),
+});
+```
+
+(For Next.js projects use `process.env.NEXT_PUBLIC_API_KEY` / `NEXT_PUBLIC_API_URL` instead.)
+
+## Step 3: Login component
+
+If `src/components/Login.jsx` already exists, skip and tell the user "Login.jsx already exists — keeping it". Otherwise write:
+
+```jsx
+import { useState } from 'react';
+import { store } from '../lib/epicmerch';
+
+export default function Login({ onLogin }) {
+  const [phone, setPhone] = useState('');
+  const [otp, setOtp] = useState('');
+  const [step, setStep] = useState('phone');
+
+  const sendOtp = async () => {
+    await store.auth.sendOtp(phone, 'phone');
+    setStep('otp');
+  };
+
+  const verify = async () => {
+    const result = await store.auth.verifyOtp(phone, otp, {});
+    if (result.token) {
+      store.setCustomerToken(result.token);
+      localStorage.setItem('customerInfo', JSON.stringify(result));
+      onLogin(result);
+    }
+  };
+
+  return (
+    <div>
+      {step === 'phone' ? (
+        <>
+          <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="+919876543210" />
+          <button onClick={sendOtp}>Send OTP</button>
+        </>
+      ) : (
+        <>
+          <input value={otp} onChange={e => setOtp(e.target.value)} placeholder="Enter OTP" />
+          <button onClick={verify}>Verify</button>
+        </>
+      )}
+    </div>
+  );
+}
+```
+
+## Step 4: Tell the user what's next
+
+List the files you CREATED in this run (skip the ones already present). Then:
+
+> "Auth integrated. Your API key goes in `.env` as `VITE_API_KEY`. If you don't have one yet, ask me to generate one — I'll create it via the MCP. Import `<Login />` into your app and pass an `onLogin` callback."

package/skills/epicmerch-merchant-agent.md

@@ -0,0 +1,74 @@
+---
+name: epicmerch-merchant-agent
+description: A shopkeeper-style assistant that runs your EpicMerch store from chat — onboarding, products, orders, analytics, and Shopify migration.
+tools:
+  - merchant_quick_setup
+  - merchant_diagnose
+  - merchant_list_products
+  - merchant_get_product
+  - merchant_create_product
+  - merchant_update_product
+  - merchant_delete_product
+  - merchant_list_categories
+  - merchant_create_category
+  - merchant_list_orders
+  - merchant_get_order
+  - merchant_update_order_status
+  - merchant_update_payment_status
+  - merchant_list_customers
+  - merchant_get_analytics_stats
+  - merchant_get_sales_trend
+  - merchant_get_top_products
+  - merchant_get_cart_abandonment
+  - merchant_send_notification
+  - merchant_get_abandoned_carts
+  - merchant_get_settings
+  - merchant_update_currency
+  - merchant_get_checkout_settings
+  - merchant_shopify_migrate
+---
+
+# EpicMerch Shopkeeper Assistant
+
+You are an EpicMerch shopkeeper assistant. Help merchants run their store via chat.
+
+## Intent → tool routing
+
+- "log in", "connect my account", "I already have an EpicMerch store"  → tell them to run `npx epicmerch-mcp login` in a terminal (browser OAuth, no chat-credentials). Wait for confirmation, then call `merchant_get_settings` to verify the session is live.
+- "set up a store", "I want to sell online", "create my store"          → `merchant_quick_setup`
+- "what's missing", "am I ready", "store health", "is my store ready"   → `merchant_diagnose`
+- "sales", "revenue", "best sellers", "today's numbers"                 → `merchant_get_analytics_stats`
+- "trend", "chart over time"                                            → `merchant_get_sales_trend`
+- "top products", "best sellers"                                        → `merchant_get_top_products`
+- "show products", "list products"                                      → `merchant_list_products`
+- "add product", "create product"                                       → `merchant_create_product`
+- "update price", "change stock"                                        → `merchant_update_product`
+- "orders", "show orders", "what's pending"                             → `merchant_list_orders`
+- "mark shipped", "cancel order"                                        → `merchant_update_order_status`
+- "mark paid", "payment status"                                         → `merchant_update_payment_status`
+- "abandoned carts"                                                     → `merchant_get_abandoned_carts`
+- "send email", "notify customers"                                      → `merchant_send_notification`
+- "migrate from Shopify", "import my Shopify store"                     → `merchant_shopify_migrate`
+
+## Style
+
+- Lead with numbers, not paragraphs. "You have 42 products and $5,231 in revenue this week." beats "Let me tell you about your store..."
+- After any setup or migration action, immediately call `merchant_diagnose` and read off the top item from `nextSteps`.
+- When the user asks an open-ended "how's my store?" question, call `merchant_diagnose` and `merchant_get_analytics_stats` in parallel and synthesise both.
+- Never invent data. If a tool returns an error, say what failed and what the merchant can do about it.
+
+## Setup fallback
+
+If the EpicMerch MCP server isn't connected, tell the user:
+
+> "Run `npx epicmerch-mcp setup` — that installs the MCP config for all detected AI clients AND walks you through browser login in one shot."
+
+## Authentication
+
+Never ask for the merchant's password in chat. If any tool call returns 401 / "Not authenticated", say:
+
+> "Your session has expired. Run `npx epicmerch-mcp login` in a terminal, then ask me again."
+
+## Installation
+
+This skill is installed automatically by `npx epicmerch-mcp setup` / `install`. No manual file copying is needed.

package/skills/epicmerch-merchant.md

@@ -0,0 +1,46 @@
+---
+name: epicmerch-merchant
+description: Set up EpicMerch merchant tools in Claude — login, manage products, orders, and analytics.
+---
+
+# EpicMerch Merchant Setup
+
+Help the merchant connect their account **via the browser OAuth flow** — never collect email/password in chat.
+
+## Step 1: Check if they're already authenticated
+
+Call `merchant_get_settings` (or any other merchant_* tool that requires auth). If it returns settings data, skip straight to Step 3 and tell them: "You're already logged in."
+
+## Step 2: Send them to the OAuth login
+
+If the call fails with an auth error, tell the merchant:
+
+> "I'll open the EpicMerch login in your browser — it's safer than typing credentials in chat. In a terminal, run:
+>
+> ```
+> npx epicmerch-mcp login
+> ```
+>
+> That'll pop up a browser window. Log in with your merchant account, click 'Allow', and the CLI will save a token automatically. Then come back here and ask me anything."
+
+Wait for the merchant to say they've completed it. Then retry `merchant_get_settings` to confirm.
+
+**If they don't have an account yet,** tell them: "Sign up first at https://epicmerch.in/signup, then run the command above."
+
+## Step 3: Show their store summary
+
+Once authenticated, call `merchant_get_analytics_stats` and summarise their store in one sentence — products, revenue this week, orders pending. Then say:
+
+> "You're connected to [store name]. I can now help with products, orders, analytics, notifications, settings, or migrate your Shopify store. What would you like to do?"
+
+## Routing notes
+
+- If the merchant asks about migrating from Shopify, hand off to the `/epicmerch-migrate` skill.
+- If they ask about Stripe / payments, hand off to `/epicmerch-stripe`.
+- If they want a frontend storefront in their codebase, hand off to `/epicmerch`.
+
+## MCP not connected
+
+If the epicmerch MCP server isn't connected at all (no merchant_* tools available), tell the user:
+
+> "First install the EpicMerch MCP: run `npx epicmerch-mcp setup`. That'll log you in AND wire up the MCP config for Claude Desktop / Cursor / VS Code in one shot."

package/skills/epicmerch-migrate.md

@@ -0,0 +1,62 @@
+---
+name: epicmerch-migrate
+description: Migrate a Shopify store to EpicMerch — one-click import of products, categories, customers, orders, and store settings.
+---
+
+# Shopify → EpicMerch Migration
+
+Guide the merchant through a complete Shopify migration conversationally:
+
+## Step 1: Collect credentials
+
+Ask:
+1. "What is your Shopify store URL? (e.g. `mystore.myshopify.com`)"
+2. "What is your Shopify Admin API key? (starts with `shpat_`) — you can create one in Shopify Admin → Apps → Develop apps → API credentials"
+
+If they don't have an API key, explain: go to Shopify Admin → Settings → Apps and sales channels → Develop apps → Create an app → Configure Admin API scopes (read_products, read_customers, read_orders) → Install → copy the Admin API access token.
+
+## Step 2: Run extract + preview
+
+Call `merchant_shopify_migrate` with:
+```
+stage: "extract"
+shopifyStore: <their store URL>
+shopifyKey: <their API key>
+```
+
+This fetches all their Shopify data and returns a preview diff. Show the result clearly, e.g.:
+
+```
+📦 Products    142 new | 3 updated | 12 unchanged
+👥 Customers   891 new | 0 updated | 45 unchanged
+📋 Orders    2,341 new | 0 updated |  0 unchanged
+🏷  Categories   8 new | 0 updated |  2 unchanged
+```
+
+## Step 3: Get confirmation
+
+Ask: "Ready to import these to EpicMerch? Your store will be live immediately once products are imported. Images will re-upload in the background."
+
+Wait for explicit yes/confirmation.
+
+## Step 4: Run import
+
+Call `merchant_shopify_migrate` with:
+```
+stage: "import"
+sessionId: <the sessionId from the extract result>
+```
+
+## Step 5: Report completion
+
+Show the final result summary. Mention:
+- Products, customers, and orders are now live in EpicMerch
+- Images are re-uploading in the background (Shopify CDN URLs used in the meantime)
+- They can verify at their EpicMerch dashboard
+
+---
+
+**Notes:**
+- The migration is non-destructive — it only adds/updates, never deletes existing EpicMerch data
+- Shopify-specific data (discount codes, blog posts, gift cards, metafields) is not migrated
+- If the merchant has no Shopify API access, suggest the dashboard wizard at `/dashboard/migrate` which also supports CSV export files

package/skills/epicmerch-orders.md

@@ -0,0 +1,153 @@
+---
+name: epicmerch-orders
+description: Add EpicMerch cart, Razorpay checkout, and order history to the current project.
+---
+
+# EpicMerch Orders Integration
+
+**Idempotency rule:** Before writing any file, check if it already exists. If it does, SKIP that file and tell the user "X already exists — keeping it". Never overwrite existing files.
+
+## Step 1: Install SDK
+
+Check `package.json`. If `"epicmerch"` is in `dependencies`, skip. Otherwise: `npm install epicmerch`.
+
+## Step 2: SDK initializer
+
+If `src/lib/epicmerch.js` already exists, skip. Otherwise write:
+
+```js
+import EpicMerch from 'epicmerch';
+
+export const store = new EpicMerch({
+  apiKey: import.meta.env.VITE_API_KEY,
+  ...(import.meta.env.VITE_API_URL && { baseUrl: import.meta.env.VITE_API_URL }),
+});
+```
+
+## Step 3: Cart
+
+If `src/components/Cart.jsx` already exists, skip. Otherwise write:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { store } from '../lib/epicmerch';
+
+export default function Cart({ onCheckout }) {
+  const [cart, setCart] = useState({ items: [] });
+
+  useEffect(() => { store.cart.get().then(setCart); }, []);
+
+  const remove = async (productId) => {
+    await store.cart.remove(productId);
+    store.cart.get().then(setCart);
+  };
+
+  const total = cart.items?.reduce((s, i) => s + i.price * i.qty, 0) ?? 0;
+
+  return (
+    <div>
+      {cart.items?.map(item => (
+        <div key={item.productId}>
+          <span>{item.name} x{item.qty}</span>
+          <span>₹{item.price * item.qty}</span>
+          <button onClick={() => remove(item.productId)}>Remove</button>
+        </div>
+      ))}
+      <p>Total: ₹{total}</p>
+      <button onClick={onCheckout}>Checkout</button>
+    </div>
+  );
+}
+```
+
+## Step 4: Checkout (Razorpay)
+
+If `src/components/Checkout.jsx` already exists, skip. Otherwise write:
+
+```jsx
+import { useState } from 'react';
+import { store } from '../lib/epicmerch';
+
+const loadRazorpay = () =>
+  new Promise((resolve) => {
+    if (window.Razorpay) return resolve(true);
+    const script = document.createElement('script');
+    script.src = 'https://checkout.razorpay.com/v1/checkout.js';
+    script.onload = () => resolve(true);
+    script.onerror = () => resolve(false);
+    document.body.appendChild(script);
+  });
+
+export default function Checkout({ cart, onSuccess }) {
+  const [address, setAddress] = useState({ street: '', city: '', postalCode: '', country: 'India' });
+
+  const placeOrder = async () => {
+    await loadRazorpay();
+    const total = cart.items.reduce((s, i) => s + i.price * i.qty, 0);
+    const { orderId } = await store.orders.create({
+      orderItems: cart.items.map(i => ({ productId: i.productId, qty: i.qty, price: i.price })),
+      shippingAddress: address,
+      paymentMethod: 'Razorpay',
+      totalPrice: total,
+    });
+    const config = await store.payment.getConfig();
+    const { razorpayOrderId } = await store.payment.createOrder(total * 100, orderId);
+    const rzp = new window.Razorpay({
+      key: config.razorpayKeyId,
+      order_id: razorpayOrderId,
+      amount: total * 100,
+      handler: async (response) => {
+        await store.payment.verify({ ...response, orderId });
+        await store.cart.clear();
+        onSuccess(orderId);
+      },
+    });
+    rzp.open();
+  };
+
+  return (
+    <div>
+      <input placeholder="Street" onChange={e => setAddress(a => ({ ...a, street: e.target.value }))} />
+      <input placeholder="City" onChange={e => setAddress(a => ({ ...a, city: e.target.value }))} />
+      <input placeholder="Postal Code" onChange={e => setAddress(a => ({ ...a, postalCode: e.target.value }))} />
+      <button onClick={placeOrder}>Place Order</button>
+    </div>
+  );
+}
+```
+
+Do NOT add any Razorpay script tag to `index.html` — the script loads dynamically only when the user clicks Place Order.
+
+## Step 5: OrderHistory
+
+If `src/components/OrderHistory.jsx` already exists, skip. Otherwise write:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { store } from '../lib/epicmerch';
+
+export default function OrderHistory() {
+  const [orders, setOrders] = useState([]);
+
+  useEffect(() => { store.orders.list().then(setOrders); }, []);
+
+  return (
+    <div>
+      <h2>Your Orders</h2>
+      {orders.map(order => (
+        <div key={order._id}>
+          <span>Order #{order._id.slice(-6)}</span>
+          <span> — ₹{order.totalPrice}</span>
+          <span> — {order.status}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Step 6: Tell the user what's next
+
+List CREATED files. Then:
+
+> "Cart + checkout + order history integrated. Set `VITE_API_KEY` in `.env` (ask me to generate one via the MCP if you don't have it). Import `<Cart />`, `<Checkout />`, and `<OrderHistory />` into your app."