Subscription Storefront for Reorder - Medusa Subscription Plugin

Customer-facing subscription storefront built for Medusa.js and integrated with the Reorder plugin.

 

What is Subscription Storefront?

subscription-storefront is a Medusa storefront adapted for subscription commerce flows powered by the Reorder plugin.

It extends the standard Medusa Next.js storefront with customer-facing subscription behavior across Product Detail Page, cart, checkout, and account management.

The project stays aligned with Medusa storefront patterns:

• server functions for data access
• sdk.client.fetch for Store API integration
• customer-safe DTOs owned by the storefront
• account UI built on the existing Medusa storefront design language

 

What it includes

• Product Detail Page subscription offer selection
• Subscription-aware cart
• Subscription checkout
• Account subscriptions list
• Account subscription detail
• Customer self-service actions

 

Current scope

subscription-storefront currently focuses on the customer-facing runtime for Reorder.

Today, the storefront supports:

• subscription offer resolution on Product Detail Page
• subscription purchase mode in cart and checkout
• customer subscription list and detail in account
• customer self-service actions for the implemented Store API routes

The storefront assumes Reorder is installed and configured in the Medusa backend that it connects to.

 

Feature highlights

• Product Detail Page subscription frequency selection
• subscription-aware cart rendering
• subscription checkout completion
• customer subscription lifecycle management
• customer address override for subscriptions
• skip next delivery with projected next delivery dates
• retry payment for retry-eligible recovery cases
• scheduled product swap with pending plan change preview

 

Installation

subscription-storefront is meant to run against an existing Medusa backend with Reorder enabled.

1. Prepare the backend

Make sure your Medusa backend is running locally, typically on port 9000. Instruction how to setup can be found here: Reorder - Installation

2. Configure environment variables

mv .env.template .env.local

Set the values required for your backend connection, such as:

• Medusa backend URL
• publishable API key
• payment provider public keys if used locally

3. Install dependencies

yarn install

4. Start the storefront

yarn dev

The storefront runs locally on http://localhost:8000.

 

Requirements

• Node.js environment compatible with the Medusa Next.js starter
• Medusa backend running locally or remotely
• Reorder plugin enabled in the connected backend

 

Architecture

subscription-storefront is organized around Medusa storefront-native building blocks:

• server functions for Store API access
• local DTOs for Reorder customer-safe contracts
• modular UI for Product Detail Page, cart, checkout, and account
• capability flags for customer-facing feature rollout
• read-model driven rendering for projected subscription state

The storefront keeps domain logic in the backend whenever possible and consumes the resulting Store API DTOs instead of re-implementing backend rules in UI code.

 

Documentation

Project documentation lives in docs/.

Useful starting points:

• docs/README.md
• docs/architecture/
• docs/api/
• docs/storefront/
• docs/testing/
• docs/roadmap/

 

Contributing

Before changing behavior:

• read the runtime docs in docs/
• keep storefront behavior aligned with documented backend contracts
• follow Medusa best practices for Store API integration and storefront data loading
• preserve the existing Medusa-style account UX when adding customer actions