Composable Commerce

April 07, 2026

Payload CMS Ecommerce: Add a Full Commerce Backend to Your Next.js Stack

API-Firstcomposable commerceHeadless Commercenext.jsopen sourcePayload CMSTypeScript

Payload CMS handles content. Spree Commerce handles commerce. Together they form a fully open-source Next.js stack with zero platform fees, typed APIs, and no vendor lock-in.

Key Takeaways

Last verified: April 2026

The gap: Payload CMS ships rich content editing but no native product catalog, checkout, or payment processing.

The stack: Payload manages content inside your Next.js app while Spree Commerce provides the full commerce engine through typed REST APIs.

Why it matters: Both platforms are free and open source, which means zero platform fees on both sides, and you deploy the entire stack on your own infrastructure.

The result: One Next.js storefront pulling content from Payload and commerce from Spree Commerce, with no SaaS dependency between them.

Payload CMS Has 41,000 GitHub Stars but No Commerce Engine

Payload CMS has become one of the fastest-growing content management systems in the open-source ecosystem. Built as a native Next.js application, it gives development teams a TypeScript-first CMS that runs directly inside their existing project. Rich text editing, media management, access control, localization: Payload covers the content layer thoroughly.

But content is not commerce. When a project needs product catalogs, variant management, cart and checkout flows, payment processing, or multi-currency pricing, Payload’s own ecommerce plugin covers only the basics. It ships no built-in B2B module, no marketplace capability, no payment provider abstraction, and no production-grade order management.

The default answer in the Payload community? Reach for a SaaS commerce backend and accept the platform fees, the vendor lock-in, and the architectural compromise. There is a better path.

Spree Commerce is an API-first headless ecommerce platform that fills exactly the gap Payload leaves open. It ships everything a commerce backend needs as native, built-in modules:

• Product catalog with unlimited variants
• A promotions engine for coupons, discounts, and bundles
• Multi-currency Markets with per-country pricing rules
• Payment sessions across multiple gateways
• A production-ready Next.js eCommerce storefront

Both platforms are open source. Both speak TypeScript. And together, they form a composable ecommerce stack where you own every layer.

What Does the Payload CMS Plus Spree Commerce Architecture Look Like?

Your Next.js application sits at the center. Payload CMS runs inside it as a plugin, managing all content: editorial pages, blog posts, media libraries, and localized copy. Spree Commerce runs as a separate backend service, exposing its full REST API with OpenAPI 3.0 specs for every commerce operation.

When a visitor loads a product page, your storefront makes two API calls. One goes to Payload’s local API for the product story, the editorial content, and the rich media. The other goes to Spree Commerce’s Store API for the live price, variant availability, and cart state. Both responses arrive as typed data. Your frontend renders them together.

This separation matters for every team involved. Content editors work in Payload’s admin panel without touching commerce data. Merchandisers update pricing and promotions in Spree Commerce’s admin without affecting published content. Developers deploy commerce updates independently of content releases. And when traffic spikes during a product launch, you scale the commerce backend without touching the content layer.

The developer experience is clean because both systems share a language. Payload is TypeScript-native. Spree Commerce’s official SDK is TypeScript with full type definitions generated from OpenAPI specs. Your storefront, your CMS, and your commerce API calls all live in one typed codebase. No impedance mismatch. No language-switching between frontend and backend integrations.

What Commerce Capabilities Does Spree Commerce Add to Payload?

Payload excels at structured content. Spree Commerce adds everything commerce requires. Here is what that looks like in practice.

Product management goes far beyond what any CMS offers. Spree Commerce handles unlimited product variants with option types (size, color, material), stock tracking across multiple locations, and taxon-based categorization with unlimited nesting. A fashion brand using Payload for lookbooks and editorial content gets a real commerce catalog without rebuilding what Spree already ships.

Checkout and payments work across providers without lock-in. Spree Commerce’s payment session management across multiple gateways abstracts Stripe, Adyen, and custom payment methods behind a single API surface. Your Next.js storefront starts a payment session, renders the provider’s UI, and completes the transaction. No direct gateway integration in your frontend code. Switch providers without rewriting checkout.

When the standard ecommerce transaction fee runs 2.9% plus $0.30 per transaction (Stripe’s published rate as of 2025), a brand processing $10 million in annual GMV pays over $300,000 in payment processing alone. Owning your payment integration means you can negotiate directly with providers, add local payment methods for European markets, and never get locked into a single gateway’s pricing.

Promotions run natively without third-party apps. Coupon codes, automatic cart-level discounts, buy-one-get-one offers, and free shipping thresholds are all built into Spree Commerce’s engine. A DTC brand managing content through Payload and running flash sales through Spree Commerce does not need a separate promotions SaaS subscription.

Multi-currency pricing connects to Payload’s localization. Spree Commerce’s Markets feature lets you configure per-country currencies, payment methods, shipping rules, and tax calculations. Payload handles the localized content for each market. Your German customers see German-language editorial content from Payload and EUR pricing from Spree Commerce, all served from the same Next.js application.

How Is This Different from Using a SaaS Commerce Backend?

The critical difference is ownership. When both your CMS and your commerce engine are open source, you control the entire stack.

According to Forrester’s 2024 Total Economic Impact research, enterprises switching from proprietary SaaS commerce to composable architectures report 20-30% reductions in total cost of ownership over three years. The savings come from eliminating platform fees, reducing integration complexity, and gaining deployment flexibility.

With a SaaS commerce backend, you accept three constraints that compound over time.

• Platform fees scale with your success. Transaction fees, GMV percentages, and tiered pricing mean your commerce costs grow faster than your revenue. Payload and Spree Commerce are both free and open source. Zero platform fees on either side, regardless of transaction volume.
• Payment provider lock-in limits your options. SaaS platforms often push their own payment processing or restrict which gateways you can use. Spree Commerce’s payment sessions work with any provider. Add Mollie for the Netherlands, iDEAL for German banks, or Adyen for enterprise multi-currency without asking permission.
• Deployment depends on someone else’s infrastructure. Self-hosting Payload and Spree Commerce means you choose where your data lives. For teams operating in the EU, this matters. GDPR, NIS2, and the Digital Services Act all create obligations around data residency that SaaS deployments make harder to satisfy.

“Open source isn’t just a licensing model. It’s an operational strategy,” notes the Linux Foundation’s 2024 State of Open Source report. “Organizations that deploy open-source infrastructure retain architectural control that SaaS-dependent teams gradually cede.”

When Does the Payload CMS Plus Spree Commerce Stack Make Sense for B2B?

The combination gets particularly powerful when a project needs B2B commerce capabilities that no CMS ships natively.

Consider a manufacturer building a wholesale portal. Payload manages the product documentation, technical datasheets, training materials, and support content. Spree Commerce’s B2B ecommerce with buyer organizations and approval workflows handles the commerce layer: customer-specific pricing visible only to authenticated buyers, purchase approval chains where a junior buyer submits and a procurement manager approves, and organization-level account management.

This is not something you bolt on. Spree Commerce’s B2B module is a native feature with dedicated data models for buyer organizations, roles, and price lists. A wholesale distributor processing 500 orders per day needs this to be a core platform capability, not a third-party plugin that breaks on upgrade.

For teams building SaaS products with Payload as the application framework, Spree Commerce’s Enterprise Edition for complex commerce scenarios adds multi-vendor marketplace with vendor payouts through Stripe Connect, and multi-tenant white-label commerce platform capabilities for per-client storefronts. An EdTech platform managing courses through Payload could add a course marketplace with instructor payouts through Spree Commerce without building payment splitting from scratch.

GoDaddy runs over 10,000 stores on Spree Commerce’s multi-tenant infrastructure. That scale proves the commerce engine handles production workloads that Payload’s native ecommerce plugin was never designed for.

How Do Agencies Benefit from Standardizing on This Stack?

For Next.js-focused agencies, the Payload plus Spree Commerce combination solves a recurring problem: every client project needs both content management and commerce, but the stack changes every time.

Standardizing on Payload for content and Spree Commerce for commerce means one architecture pattern across all client projects. Both platforms are TypeScript. Both are open source. Both deploy on the same infrastructure. An agency delivering a DTC fashion site, a B2B wholesale portal, and a multi-brand marketplace uses the same core stack for all three.

The B2B digital commerce market reached $20.4 trillion in 2024, according to Statista, growing at 14.5% annually. Agencies positioning themselves with a proven B2B-capable commerce stack are not just delivering projects. They are capturing a share of the fastest-growing commerce segment.

There is also a direct financial incentive. Spree Commerce offers a 30% lifetime commission on Enterprise Edition licenses sold through agency partners. Every client deployment that uses Spree Commerce EE for B2B, marketplace, or multi-tenant features generates recurring revenue for the agency.

What About Existing Next.js Ecommerce Sites Running on Spree Commerce?

Spree Commerce already powers Next.js eCommerce sites already in production across fashion, health and wellness, home goods, and specialty retail. Adding Payload CMS to an existing Spree Commerce deployment is an incremental step, not a replatforming project.

Your Next.js storefront already calls Spree Commerce’s Store API. Adding Payload means installing it into the same Next.js project and connecting its content API alongside the commerce API calls you already have. Product pages gain rich editorial content. Category landing pages gain custom layouts. The blog gets a real CMS instead of markdown files or a separate WordPress instance.

For the enterprise SaaS CMS approach to composable commerce, Spree Commerce also integrates with hosted CMS platforms. The difference is cost and control. Payload is open source and self-hosted. A hosted CMS adds another SaaS bill and another data dependency. Both architectures work.

The choice comes down to a clear trade-off. Teams that prioritize operational simplicity and delegate infrastructure to vendors choose hosted CMS options. Teams that want to own their content data, deploy on their own infrastructure, and eliminate recurring SaaS costs choose Payload. For projects where data sovereignty is a requirement, the self-hosted path is not a preference. It is a mandate.

Getting Started with Payload CMS and Spree Commerce

The fastest path to a working stack starts with two commands.

Scaffold a new Payload project. Then scaffold a Spree Commerce backend with its open-source Next.js eCommerce storefront. Connect Payload’s content types to Spree Commerce’s product catalog through their respective APIs. Your storefront renders both.

For multi-currency and multi-region commerce, configure Spree Commerce’s Markets to match Payload’s locale settings. Each market gets its own currency, payment methods, and shipping rules. Payload delivers the localized content. Spree Commerce delivers the localized commerce experience.

Spree Commerce’s webhook system notifies your Next.js application when commerce events occur: order placed, inventory updated, shipment dispatched. Payload can listen to those same events to trigger content workflows. A product going out of stock updates the storefront in real time. A new product launch triggers an editorial template in Payload’s admin.

The ecommerce site search integration layer is the final piece of most composable stacks. A dedicated search service indexes both Payload’s content and Spree Commerce’s product catalog, giving customers a unified search experience across editorial content and products.

Payload CMS and Spree Commerce represent a composable commerce architecture where both the content layer and the commerce layer are open source, TypeScript-native, and fully under your control. The days of choosing between a great CMS and a great commerce engine are over. Build with both.

Talk to our team about Spree Commerce Enterprise Edition to explore B2B, marketplace, and multi-tenant capabilities for your Payload-powered project.

Frequently Asked Questions