Plugins

Payload comes with a built-in Plugins infrastructure that allows developers to build their own modular and easily reusable sets of functionality.

Writing plugins is no more complex than writing regular JavaScript. If you know how spread syntax works and are up to speed with Payload concepts, writing a plugin will be a breeze.

Example use cases:

Automatically sync data from a specific collection to HubSpot or a similar CRM when data is added or changes
Add password-protection functionality to certain documents
Add a full e-commerce backend to any Payload app
Add custom reporting views to Payload's admin panel
Encrypt specific collections' data
Add a full form builder implementation
Integrate all upload-enabled collections with a third-party file host like S3 or Cloudinary
Add custom endpoints or GraphQL queries / mutations with any type of custom functionality that you can think of

How to install plugins

The base Payload config allows for a plugins property which takes an array of Plugins.

1import { buildConfig } from 'payload/config'
2// note: these plugins are not real (yet?)
3import addLastModified from 'payload-add-last-modified'
4import passwordProtect from 'payload-password-protect'
5import { mongooseAdapter } from '@payloadcms/db-mongodb'
6import { postgresAdapter } from '@payloadcms/db-postgres'
7
8import { viteBundler } from '@payloadcms/bundler-vite'
9import { webpackBundler } from '@payloadcms/bundler-webpack'
10
11
12const config = buildConfig({
13  bundler: webpackBundler() // or viteBundler(),
14  collections: [
15    {
16      slug: 'pages',
17      fields: [
18        {
19          name: 'title',
20          type: 'text',
21          required: true,
22        },
23        {
24          name: 'content',
25          type: 'richText',
26          required: true,
27        },
28      ],
29    },
30  ],
31  db: mongooseAdapter({}) // or postgresAdapter({})
32  plugins: [
33    // Many plugins require options to be passed.
34    // In the following example, we call the function
35    // and pass it options accordingly
36    passwordProtect(['pages']),
37
38    // This plugin takes no options and just
39    // needs to be passed directly
40    addLastModified,
41
42    // ..
43    // To understand how to use the plugins you're interested in,
44    // consult their corresponding documentation
45  ],
46})
47
48export default config

When Plugins are initialized

Payload Plugins are executed after the incoming config is validated, but before it is sanitized and had default options merged in.

After all plugins are executed, the full config with all plugins will be sanitized.

Simple example

Here is an example for how to automatically add a lastModifiedBy field to all Payload collections using a Plugin written in TypeScript.

1import { Config, Plugin } from 'payload/config'
2
3const addLastModified: Plugin = (incomingConfig: Config): Config => {
// Find all incoming auth-enabled collections
// so we can create a lastModifiedBy relationship field
// to all auth collections
const authEnabledCollections = incomingConfig.collections.filter((collection) =>
  Boolean(collection.auth),
)
10
// Spread the existing config
const config: Config = {
  ...incomingConfig,
  collections: incomingConfig.collections.map((collection) => {
    // Spread each item that we are modifying,
    // and add our new field - complete with
    // hooks and proper admin UI config
    return {
      ...collection,
      fields: [
        ...collection.fields,
        {
          name: 'lastModifiedBy',
          type: 'relationship',
          relationTo: authEnabledCollections.map(({ slug }) => slug),
          hooks: {
            beforeChange: [
              ({ req }) => ({
                value: req?.user?.id,
                relationTo: req?.user?.collection,
              }),
            ],
          },
          admin: {
            position: 'sidebar',
            readOnly: true,
          },
        },
      ],
    }
  }),
}
43
return config
45}
46
47export default addLastModified

Available Plugins

Payload supports both official plugins, maintained by the Payload team, and community plugins, developed by external contributors.

You can discover existing plugins by browsing the payload-plugin topic on GitHub. These plugins offer a wide range of functionality. Some are maintained by the Payload team, while others are community-built. While we encourage users to explore them, please note that only official plugins are maintained and supported by the Payload team. For community plugins, support may vary as they are developed and maintained independently.

For maintainers building plugins for others to use, please add the topic to help others find it. If you would like one to be built by the core Payload team, open a Feature Request in our GitHub Discussions board. We would be happy to review your code and maybe feature you and your plugin where appropriate.

For a list of official plugins, check the Payload monorepo.

Stripe Plugin

Plugins

Payload comes with a built-in Plugins infrastructure that allows developers to build their own modular and easily reusable sets of functionality.

Writing plugins is no more complex than writing regular JavaScript. If you know how spread syntax works and are up to speed with Payload concepts, writing a plugin will be a breeze.

Example use cases:

Automatically sync data from a specific collection to HubSpot or a similar CRM when data is added or changes
Add password-protection functionality to certain documents
Add a full e-commerce backend to any Payload app
Add custom reporting views to Payload's admin panel
Encrypt specific collections' data
Add a full form builder implementation
Integrate all upload-enabled collections with a third-party file host like S3 or Cloudinary
Add custom endpoints or GraphQL queries / mutations with any type of custom functionality that you can think of

How to install plugins

The base Payload config allows for a plugins property which takes an array of Plugins.

1import { buildConfig } from 'payload/config'
2// note: these plugins are not real (yet?)
3import addLastModified from 'payload-add-last-modified'
4import passwordProtect from 'payload-password-protect'
5import { mongooseAdapter } from '@payloadcms/db-mongodb'
6import { postgresAdapter } from '@payloadcms/db-postgres'
7
8import { viteBundler } from '@payloadcms/bundler-vite'
9import { webpackBundler } from '@payloadcms/bundler-webpack'
10
11
12const config = buildConfig({
13  bundler: webpackBundler() // or viteBundler(),
14  collections: [
15    {
16      slug: 'pages',
17      fields: [
18        {
19          name: 'title',
20          type: 'text',
21          required: true,
22        },
23        {
24          name: 'content',
25          type: 'richText',
26          required: true,
27        },
28      ],
29    },
30  ],
31  db: mongooseAdapter({}) // or postgresAdapter({})
32  plugins: [
33    // Many plugins require options to be passed.
34    // In the following example, we call the function
35    // and pass it options accordingly
36    passwordProtect(['pages']),
37
38    // This plugin takes no options and just
39    // needs to be passed directly
40    addLastModified,
41
42    // ..
43    // To understand how to use the plugins you're interested in,
44    // consult their corresponding documentation
45  ],
46})
47
48export default config

When Plugins are initialized

Payload Plugins are executed after the incoming config is validated, but before it is sanitized and had default options merged in.

After all plugins are executed, the full config with all plugins will be sanitized.

Simple example

Here is an example for how to automatically add a lastModifiedBy field to all Payload collections using a Plugin written in TypeScript.

1import { Config, Plugin } from 'payload/config'
2
3const addLastModified: Plugin = (incomingConfig: Config): Config => {
// Find all incoming auth-enabled collections
// so we can create a lastModifiedBy relationship field
// to all auth collections
const authEnabledCollections = incomingConfig.collections.filter((collection) =>
  Boolean(collection.auth),
)
10
// Spread the existing config
const config: Config = {
  ...incomingConfig,
  collections: incomingConfig.collections.map((collection) => {
    // Spread each item that we are modifying,
    // and add our new field - complete with
    // hooks and proper admin UI config
    return {
      ...collection,
      fields: [
        ...collection.fields,
        {
          name: 'lastModifiedBy',
          type: 'relationship',
          relationTo: authEnabledCollections.map(({ slug }) => slug),
          hooks: {
            beforeChange: [
              ({ req }) => ({
                value: req?.user?.id,
                relationTo: req?.user?.collection,
              }),
            ],
          },
          admin: {
            position: 'sidebar',
            readOnly: true,
          },
        },
      ],
    }
  }),
}
43
return config
45}
46
47export default addLastModified

Available Plugins

Payload supports both official plugins, maintained by the Payload team, and community plugins, developed by external contributors.

For a list of official plugins, check the Payload monorepo.

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

Plugins

How to install plugins

When Plugins are initialized

Simple example

Available Plugins

Stripe Plugin

Plugins

How to install plugins

When Plugins are initialized

Simple example

Available Plugins