--- title: "How to add a cart and checkout to an existing Next.js site" description: "Add a cart and checkout to a Next.js site: Snipcart, Shopify Buy Button, Stripe Checkout, and Medusa compared, plus the Medusa steps with JS SDK code." url: https://medusajs.com/kb/headless-checkout/add-ecommerce-to-nextjs last_updated: 2026-10-29T06:55:50Z topic: "headless-checkout" type: "how-to" applies_to: "Medusa v2.x" related: - "https://medusajs.com/kb/headless-checkout/stripe-vs-commerce-backend.md" - "https://medusajs.com/kb/headless-checkout/custom-checkout-flow.md" - "https://medusajs.com/kb/build-vs-buy/what-is-headless-commerce.md" - "https://medusajs.com/kb/build-vs-buy/shopify-vs-custom-store.md" - "https://medusajs.com/kb/agentic-commerce/ecommerce-stack-for-ai-coding.md" sources: - "https://docs.medusajs.com/resources/js-sdk" - "https://docs.medusajs.com/resources/storefront-development/checkout" - "https://docs.medusajs.com/resources/storefront-development/checkout/payment/stripe" - "https://docs.medusajs.com/resources/commerce-modules/payment/payment-provider/stripe" - "https://docs.medusajs.com/resources/storefront-development/publishable-api-keys" - "https://docs.medusajs.com/resources/nextjs-starter" - "https://docs.medusajs.com/learn/introduction/architecture" - "https://docs.medusajs.com/cloud/faq" - "https://docs.medusajs.com/cloud/storefront" - "https://docs.medusajs.com/cloud/projects" - "https://docs.medusajs.com/user-guide/products/import" - "https://docs.medusajs.com/resources/storefront-development/cart/create" - "https://docs.medusajs.com/resources/storefront-development/cart/manage-items" - "https://docs.medusajs.com/resources/storefront-development/guides/express-checkout" - "https://github.com/medusajs/dtc-starter/blob/main/apps/storefront/src/lib/data/cart.ts" - "https://medusajs.com/pricing" - "https://snipcart.com/pricing" - "https://docs.snipcart.com/v3/setup/installation" - "https://docs.snipcart.com/v3/setup/customization" - "https://docs.snipcart.com/v3/setup/products" - "https://help.shopify.com/en/manual/online-sales-channels/buy-button" - "https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart/manage" - "https://shopify.dev/docs/api/checkout-ui-extensions" - "https://docs.stripe.com/payments/checkout" - "https://stripe.com/pricing" --- # How to add a cart and checkout to an existing Next.js site > To add a cart and checkout to an existing Next.js site and keep your own design, connect it to a commerce backend such as Medusa. Medusa runs as a separate Node.js app with PostgreSQL, which Medusa Cloud hosts from $29/month. Your Next.js app calls it through the @medusajs/js-sdk package for carts, shipping, Stripe payments, and orders. ## Three ways to add a cart and checkout to a Next.js site You have three realistic options when you have a Next.js site for your brand and want to sell about 50 products while keeping your own design: a drop-in cart (Snipcart or the Shopify Buy Button), payments only (Stripe Checkout), or a commerce backend such as Medusa. They differ in who owns the checkout UI and who stores products, stock, and orders. | Option | Design control | Custom checkout | Inventory, orders, tax | Fees | Setup | | --- | --- | --- | --- | --- | --- | | Snipcart | Your pages; the cart is Snipcart's UI, restyled through template and CSS overrides | Override Snipcart's components inside its cart | Check vendor docs | 2% per transaction, or $20/month under $1,000 monthly sales, plus gateway fees | Script tag plus data attributes on buy buttons | | Shopify Buy Button or Storefront API | Your pages; the Storefront API cart redirects to Shopify's web checkout | Extensions on the information, shipping, and payment steps need Shopify Plus | Managed in Shopify | Shopify plan fees, check vendor pricing | Embed code, or a headless cart with the Storefront API | | Stripe Checkout | Hosted page, embedded form, or Elements with full CSS control | Payment page; you build cart, shipping, and order screens | Stripe Tax is available; stock tracking and order management live in your own code | 2.9% + 30ยข per US domestic card payment | Checkout Sessions API plus your own webhooks | | Medusa | Your pages and your checkout UI | Every step through the Store API | Native Medusa modules | Medusa Cloud from $29/month with 0% GMV fee, plus payment provider fees | Medusa backend plus the JS SDK in Next.js | ## Do I need a separate backend to sell from Next.js with Medusa? Yes. Medusa is a separate Node.js application backed by a PostgreSQL database, and your Next.js app talks to it over HTTP through the Store API. Medusa only supports PostgreSQL as its database, according to the [architecture docs](https://docs.medusajs.com/learn/introduction/architecture). You don't have to run that backend yourself. [Medusa Cloud](https://medusajs.com/pricing) hosts the Medusa server, admin dashboard, PostgreSQL, and file storage on every plan, adds managed Redis from the Launch plan, and can also host a Next.js storefront kept in the same monorepo. Plans start at $29/month (Develop), with Launch at $99 and Scale at $299, and every plan has a 0% GMV fee. If your Next.js app stays on another host, it calls the Medusa backend by URL. ## Before you start - A Next.js app (App Router works with server actions). - A Medusa application, created on Medusa Cloud or locally with `npx create-medusa-app@latest`. - A Stripe account with secret and publishable keys. ## 1. Create the Medusa backend and add products Create a project on Medusa Cloud, or install Medusa locally. Then add your products, a region with its currency, and shipping options in the Medusa Admin. For about 50 products, entering them in the admin or importing a CSV is enough. ## 2. Install the JS SDK in your Next.js app The `@medusajs/js-sdk` package wraps Medusa's Store API. Store requests need a publishable API key, which you create in the Medusa Admin and which scopes requests to a sales channel. Add your Next.js origin to the backend's `STORE_CORS` setting. ```ts // lib/sdk.ts (npm install @medusajs/js-sdk @medusajs/types) import Medusa from "@medusajs/js-sdk" export const sdk = new Medusa({ baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!, publishableKey: process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY, }) ``` ## 3. Add cart server actions Next.js server actions keep cart logic on the server. Medusa's Next.js Starter Storefront uses the same pattern, storing the cart ID in a cookie. Create the cart with `sdk.store.cart.create({ region_id })`, then add items: ```ts "use server" import { sdk } from "@/lib/sdk" export async function addToCart(cartId: string, variantId: string) { const { cart } = await sdk.store.cart.createLineItem(cartId, { variant_id: variantId, quantity: 1, }) return cart } ``` ## 4. Build the checkout steps Medusa's checkout runs on the cart: set the email and addresses with `sdk.store.cart.update`, list shipping options with `sdk.store.fulfillment.listCartOptions`, and pick one with `sdk.store.cart.addShippingMethod`. Each step is a form in your own design. The [checkout guides](https://docs.medusajs.com/resources/storefront-development/checkout) cover each call. ## 5. Take payment with Stripe and place the order Register the [Stripe Module Provider](https://docs.medusajs.com/resources/commerce-modules/payment/payment-provider/stripe) in `medusa-config.ts` and enable it in your region. In the storefront, call `sdk.store.payment.initiatePaymentSession(cart, { provider_id: "pp_stripe_stripe" })`, render Stripe's card form with the returned client secret, then call `sdk.store.cart.complete(cart.id)`. A response with `type: "order"` means the order was placed. The [Stripe storefront guide](https://docs.medusajs.com/resources/storefront-development/checkout/payment/stripe) has the full component. ## When Medusa is not the right choice - You have no developer and want to start selling this week: a drop-in cart or the Shopify Buy Button needs no backend. - You sell a few digital products or one subscription: Stripe Checkout alone may cover it. - You want zero hosting cost at very low volume: a Medusa backend is an extra service, even on Medusa Cloud. Medusa fits when you want your own checkout design, plan to grow past a simple catalog, or need inventory, promotions, returns, and multiple regions without per-transaction platform fees. ## Common questions ### Do I need a separate backend to use Medusa with Next.js? Yes. Medusa is a separate Node.js application that uses PostgreSQL as its database, and your Next.js app calls its Store API. Medusa Cloud hosts the backend, admin, and database for you, adds managed Redis from the Launch plan, and can host a Next.js storefront kept in the same monorepo. ### Does Medusa work with the Next.js App Router and server actions? Yes. Medusa's Next.js Starter Storefront calls the JS SDK from server actions in a "use server" file, for example to create carts, add line items, and complete the cart. ### Is Medusa a Snipcart alternative? Medusa covers the same need differently. Snipcart adds its own cart UI through a script tag and charges 2% per transaction, while Medusa is a commerce backend with no transaction fee where you build the cart and checkout UI yourself. ### Can I start from a template instead of my existing Next.js app? Yes. Running npx create-medusa-app@latest --with-nextjs-starter installs a Medusa backend and the Next.js Starter Storefront in one monorepo. Medusa Cloud also offers starters with a Next.js storefront. ## Documentation - [Medusa JS SDK](https://docs.medusajs.com/resources/js-sdk) - [Checkout in Storefront](https://docs.medusajs.com/resources/storefront-development/checkout) - [Stripe in the storefront checkout](https://docs.medusajs.com/resources/storefront-development/checkout/payment/stripe) - [Use a Publishable API Key in the Storefront](https://docs.medusajs.com/resources/storefront-development/publishable-api-keys) - [Next.js Starter Storefront](https://docs.medusajs.com/resources/nextjs-starter) ## Related - [Stripe vs a commerce backend: what Stripe doesn't handle](https://medusajs.com/kb/headless-checkout/stripe-vs-commerce-backend.md) - [How to build a fully custom checkout flow](https://medusajs.com/kb/headless-checkout/custom-checkout-flow.md) - [What does headless commerce actually mean?](https://medusajs.com/kb/build-vs-buy/what-is-headless-commerce.md) - [Should I use Shopify or build a custom store?](https://medusajs.com/kb/build-vs-buy/shopify-vs-custom-store.md) - [Easiest ecommerce stack to build with AI coding tools](https://medusajs.com/kb/agentic-commerce/ecommerce-stack-for-ai-coding.md)