Cloud PricingDocsFor EnterpriseCommunity HelpBlog
New projectLogin
New projectLogin
npx create-payload-app my-project -t ecommerce

Build E-commerce Smarter, Not Harder

Eliminate providers like Shopify from the mix and build e-commerce the right way. Powered by Payload and Next.js, get a full, custom headless e-commerce backend alongside a storefront—integrated with Stripe and ready to sell.

POWERED BY

  • Next.js with Payload E-commerceNext.js with Payload E-commerce
  • Payload's e-commerce template uses StripePayload's e-commerce template uses Stripe
  • Payload LogoPayload Logo

It’s time to build e-commerce the right way

01

Drop Shopify

Onsite checkout eliminates the need for Shopify, providing you and your team the flexibility you need while keeping costs down.
02

Custom Headless E-commerce with Next.js

A production-ready front-end is built with the Next.js App Router, served right alongside your Payload app in a single Express server.
03

Free and Fully Open Source

All source code is freely available on GitHub, and your data belongs to you. Leverage the support of the Payload community via Discord or GitHub.
04

Payments by Stripe

All payments are processed and billed using Stripe. Write hooks to sync product meta automatically, and open your own endpoints to leverage Stripe webhooks.
05

Customer Authentication

Payload provides for powerful and customizable Authentication out of the box, allowing you to provide customer accounts securely and responsibly.
06

Enterprise-Grade Admin Panel

Manage all content—including marketing copy and product details—in one place, eliminating burdensome workflows and disparate systems
07

End-to-End Type Safety

Written entirely in TypeScript, customize and build your store efficiently with Payload’s end-to-end type safety.
08

SEO Control

Pre-configured with the official Payload SEO Plugin, get complete SEO control from the admin panel, with data fully integrated into the front-end.

The Power of Payload

The Payload config is tailored specifically to the needs of most e-commerce businesses. It is pre-configured through the use of collections, enabling developers to extend this functionality how they see fit.

Users are auth-enabled and encompass both admins and customers based on the value of their roles field.

const Users: CollectionConfig = {
slug: 'users',
admin: {
useAsTitle: 'name',
defaultColumns: ['name', 'email'],
},
access: {
read: adminsAndUser,
create: anyone,
update: adminsAndUser,
delete: admins,
admin: ({ req: { user } }) => checkRole(['admin'], user),
},
hooks: {
beforeChange: [createStripeCustomer],
afterChange: [loginAfterCreate],
},
auth: true,
endpoints: [
{
path: '/:teamID/customer',
method: 'get',
handler: customerProxy,
},
{
path: '/:teamID/customer',
method: 'patch',
handler: customerProxy,
},
],
fields: [
{
name: 'name',
type: 'text',
},
{
name: 'roles',
type: 'select',
hasMany: true,
defaultValue: ['customer'],
options: [
{
label: 'admin',
value: 'admin',
},
{
label: 'customer',
value: 'customer',
},
],
hooks: {
beforeChange: [ensureFirstUserIsAdmin],
},
access: {
read: admins,
create: admins,
update: admins,
},
},
{
name: 'purchases',
label: 'Purchases',
type: 'relationship',
relationTo: 'products',
hasMany: true,
hooks: {
beforeChange: [resolveDuplicatePurchases],
},
},
{
name: 'stripeCustomerID',
label: 'Stripe Customer',
type: 'text',
access: {
read: ({ req: { user } }) => checkRole(['admin'], user),
},
admin: {
position: 'sidebar',
components: {
Field: CustomerSelect,
},
},
},
{
label: 'Cart',
name: 'cart',
type: 'group',
fields: [
{
name: 'items',
label: 'Items',
type: 'array',
interfaceName: 'CartItems',
fields: [
{
name: 'product',
type: 'relationship',
relationTo: 'products',
},
{
name: 'quantity',
type: 'number',
min: 0,
admin: {
step: 1,
},
},
],
},
// If you wanted to maintain a 'created on'
// or 'last modified' date for the cart
// you could do so here:
// {
// name: 'createdOn',
// label: 'Created On',
// type: 'date',
// admin: {
// readOnly: true
// }
// },
// {
// name: 'lastModified',
// label: 'Last Modified',
// type: 'date',
// admin: {
// readOnly: true
// }
// },
],
},
{
name: 'skipSync',
label: 'Skip Sync',
type: 'checkbox',
admin: {
position: 'sidebar',
readOnly: true,
hidden: true,
},
},
],
timestamps: true,
}
Login using Payload e-commerce

KEEP IT SIMPLE

One platform to manage content.

Whether it’s an admin managing content or products or an engineer building new features, everything happens seamlessly within Payload. Our open-source e-commerce starter kit equips you with all the essentials to power e-commerce businesses and online stores of any scale.

Payload Ecommerce: 1

Payload LogoPayload Logo

CONTENT

Payload E-Commerce: 2

Next.js with Payload E-commerceNext.js with Payload E-commerce

STOREFRONT

Payload E-Commerce: 3

Payload's e-commerce template uses StripePayload's e-commerce template uses Stripe

PAYMENTS

An enterprise-ready admin panel and a beautifully designed, production-ready front-end enables the sale of physical products to digital assets like premium articles, courses, or videos behind a paywall.

WHY PAYLOAD

Build anything. Extend everything.

App frameworks give you a backend, but lack CMS-grade admin UI. Payload gives you both. Its extensibility allows it to power everything from enterprise websites to native apps, and everything in between.

Learn More
Payload Headless Ecommerce

SOMETHING BECAUSE THIS IS REQUIRED

01

Custom React Components

Customize existing views or field types with an extremely intuitive API
02

Localized Content

Localize content on a field level
03

Authentication

A highly secure and customizable user Authentication out of the box
04

Vercel Visual Editing

Navigate from the content rendered on your front-end to the fields in Payload that control it
05

20+ Field Components

A variety of both simple and complex field types
06

Custom Endpoints

Add express endpoints for custom functionality
07

Extend with Hooks

A powerful pattern to add your own logic
08

Manage Versions & Drafts

Preview drafts and store version history

Launch your store in minutes

Deploy with Payload Cloud to get everything you need to run your app in the cloud,
including file storage, CDN, email delivery and more.

Clone and Deploy on Payload Cloud