Comment implémenter un Headless e-commerce en 2026

npx create-medusa-app@latest my-medusa-store --seed
cd my-medusa-store
pnpm install
pnpm run build
pnpm run start

# Note: Accès admin http://localhost:7001, API http://localhost:9000

const DATABASE_URL = "sqlite://localhost/medusa-store.sqlite";

module.exports = {
  projectConfig: {
    database_url: DATABASE_URL,
    database_type: "sqlite",
    redis_url: "redis://localhost:6379",
  },
  plugins: [
    `medusa-fulfillment-manual`,
    `medusa-payment-stripe`, {
      api_key: "sk_test_VOTRE_CLE_SECRETE_STRIPE",
      webhook_secret: "whsec_VOTRE_WEBHOOK_SECRET",
    },
    {
      resolve: `@medusajs/admin`,
    },
  ],
};

cd ..
npx create-next-app@15 storefront --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd storefront
pnpm add @medusajs/medusa-js @tanstack/react-query stripe @stripe/stripe-js lucide-react
pnpm add -D @types/node
pnpm run dev

import Medusa from "@medusajs/medusa-js";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { PropsWithChildren } from "react";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
      cacheTime: 10 * 60 * 1000,
    },
  },
});

export const medusaClient = new Medusa({
  baseUrl: process.env.MEDUSA_BACKEND_URL || "http://localhost:9000",
  maxRetries: 3,
});

export function Providers({ children }: PropsWithChildren) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

import { medusaClient } from "@/lib/medusa";
import { useQuery } from "@tanstack/react-query";
import { Providers } from "@/lib/medusa";

export default function Home() {
  const { data: products } = useQuery(
    ["products"],
    () => medusaClient.products().list({ limit: 12 }).then((r) => r.products)
  );

  return (
    <Providers>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
        {products?.map((product) => (
          <div key={product.id} className="border p-4 rounded-lg">
            <img src={product.thumbnail || ""} alt={product.title} className="w-full h-48 object-cover" />
            <h3 className="font-bold mt-2">{product.title}</h3>
            <p>{product.variants?.[0]?.prices?.[0]?.amount / 100}€</p>
          </div>
        ))}
      </div>
    </Providers>
  );
}

import { useCart } from "medusa-react";
import { useEffect } from "react";

export function useManagedCart() {
  const { cart, setCart } = useCart();

  useEffect(() => {
    if (cart?.id) {
      localStorage.setItem("cart_id", cart.id);
    }
  }, [cart?.id]);

  const restoreCart = async () => {
    const cartId = localStorage.getItem("cart_id");
    if (cartId && !cart?.id) {
      await setCart(cartId);
    }
  };

  return { cart, restoreCart };
}

import { loadStripe } from "@stripe/stripe-js";
import { medusaClient } from "@/lib/medusa";
import { useCart } from "medusa-react";
import { useState } from "react";

const stripePromise = loadStripe("pk_test_VOTRE_PUB_KEY");

export default function Checkout() {
  const { cart } = useCart();
  const [loading, setLoading] = useState(false);

  const handleCheckout = async () => {
    setLoading(true);
    const paymentSession = await medusaClient.clients.retrievePaymentSessions(cart!.id);
    const stripeSession = paymentSession!.find(s => s.provider_id === "stripe");

    const stripe = await stripePromise;
    await stripe!.redirectToCheckout({
      sessionId: stripeSession!.data!.metadata!.session_id,
    });
  };

  return (
    <div className="max-w-md mx-auto p-8">
      <h1>Total: {cart?.subtotal / 100}€</h1>
      <button
        onClick={handleCheckout}
        disabled={loading || !cart}
        className="w-full bg-blue-500 text-white p-4 mt-4 rounded"
      >
        Payer avec Stripe
      </button>
    </div>
  );
}