Medusa Has a Free API That Lets You Build Custom E-Commerce in JavaScript

#ecommerce #javascript #api #opensource

Medusa is the open-source headless commerce platform. Its API gives you products, carts, orders, payments, and fulfillment — fully customizable.

API: Products

// List products
const { products } = await fetch("http://localhost:9000/store/products").then(r => r.json());

// Get product by handle
const { product } = await fetch("http://localhost:9000/store/products/my-product").then(r => r.json());

// Search
const { products } = await fetch("http://localhost:9000/store/products?q=widget&limit=20").then(r => r.json());

// Filter by collection, category, price
const { products } = await fetch(
  "http://localhost:9000/store/products?collection_id=col_01&category_id=cat_01&price_list_id=pl_01"
).then(r => r.json());

Cart API

// Create cart
const { cart } = await fetch("http://localhost:9000/store/carts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ region_id: "reg_01" }),
}).then(r => r.json());

// Add item
await fetch(`http://localhost:9000/store/carts/${cart.id}/line-items`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ variant_id: "variant_01", quantity: 2 }),
});

// Update shipping
await fetch(`http://localhost:9000/store/carts/${cart.id}/shipping-methods`, {
  method: "POST",
  body: JSON.stringify({ option_id: "so_01" }),
});

// Complete order
const { order } = await fetch(`http://localhost:9000/store/carts/${cart.id}/complete`, {
  method: "POST",
}).then(r => r.json());

Custom API Routes

// src/api/store/custom/route.ts
import type { MedusaRequest, MedusaResponse } from "@medusajs/medusa";

export async function GET(req: MedusaRequest, res: MedusaResponse) {
  const productService = req.scope.resolve("productService");
  const products = await productService.list({ status: "published" }, { take: 10 });
  res.json({ products });
}

Subscribers: React to Events

import { SubscriberConfig, SubscriberArgs } from "@medusajs/medusa";

export default async function handleOrderPlaced({ data, container }: SubscriberArgs<{ id: string }>) {
  const orderService = container.resolve("orderService");
  const order = await orderService.retrieve(data.id, { relations: ["items"] });

  // Send notification, update inventory, etc.
  console.log(`New order: ${order.display_id} — $${order.total / 100}`);
}

export const config: SubscriberConfig = {
  event: "order.placed",
};

Medusa JS Client

import Medusa from "@medusajs/medusa-js";

const client = new Medusa({ baseUrl: "http://localhost:9000" });

const { products } = await client.products.list({ limit: 20 });
const { cart } = await client.carts.create({ region_id: "reg_01" });
await client.carts.lineItems.create(cart.id, { variant_id: "var_01", quantity: 1 });