Stripe webhooks hang on vercel deployment with mongodb

[tomtana]

Hi,

I am fighting since a couple of days getting the stripe webhooks reliably to work on vercel. Unfortunately, I came to a point where I need some help to debug the issue further.

What is happening:

• I make a request to the stripe webhook endpoints
• stripe webhooks fire but hang on the first payload.find operation in my custom webhook (see below)
• the operation continues when I refresh the admin panel in a collection (normal requests to some endpoints do not resolve the issue)
• it looks like the stripe webhooks on the endpoint /api/stripe/webhooks are somehow treated differently from others. I can't say if this is payload or vercel related but going through the source code of the stripe plugin I couldn't really find anything suspicious.
• if e.g. deployed freshly or the admin panel has been refreshed, the webhooks ususally work as expected

Other observations which might be related to the issue:

• locally in dev mode and the stripe cli, webhooks run without issues
• I ran before into another issue related to mongodb (via atlas) and transactions enabled. The stripe webhooks caused transaction conflicts because apparently a running webhook is not awaited before a new incoming webhook is processed. After deactivating transactions I didn't have any database related errors anymore.
• other endpoints work as expected

Any help or hints how to debug this any further would be highly appreciated!

Payload Config

// storage-adapter-import-placeholder
import { createPaymentIntent } from '@/endpoints/create-payment-intent'
import { customersProxy } from '@/endpoints/customer'
import { productsProxy } from '@/endpoints/products'
import { defaultLexical } from '@/fields/defaultLexical'
import { syncInstagramMedia } from '@/tasks/handleInstagramMedia'
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import path from 'path'
import { buildConfig, Payload, TaskConfig } from 'payload'
import sharp from 'sharp' // sharp-import
import { fileURLToPath } from 'url'

import { Categories } from './collections/Categories'
import { InstagramMedia } from './collections/Media/InstagramMedia/config'
import { Media } from './collections/Media/Media/config'
import { Orders } from './collections/Orders'
import { Pages } from './collections/Pages'
import { Posts } from './collections/Posts'
import { ProductCategories } from './collections/ProductCategories'
import { Products } from './collections/Products'
import { ReusableContent } from './collections/ReusableContent'
import { Users } from './collections/Users'
import { Vereinsrollen } from './collections/Vereinsrollen'
import { Footer } from './Footer/config'
import { Header } from './Header/config'
import { plugins } from './plugins'
import { getServerSideURL } from './utilities/getURL'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default buildConfig({
  admin: {
    components: {
      // The `BeforeLogin` component renders a message that you see while logging into your admin panel.
      // Feel free to delete this at any time. Simply remove the line below and the import `BeforeLogin` statement on line 15.
      beforeLogin: ['@/components/BeforeLogin'],
      // The `BeforeDashboard` component renders the 'welcome' block that you see after logging into your admin panel.
      // Feel free to delete this at any time. Simply remove the line below and the import `BeforeDashboard` statement on line 15.
      beforeDashboard: ['@/components/BeforeDashboard'],
    },
    importMap: {
      baseDir: path.resolve(dirname),
    },
    user: Users.slug,
    livePreview: {
      breakpoints: [
        {
          label: 'Mobile',
          name: 'mobile',
          width: 375,
          height: 667,
        },
        {
          label: 'Tablet',
          name: 'tablet',
          width: 768,
          height: 1024,
        },
        {
          label: 'Desktop',
          name: 'desktop',
          width: 1440,
          height: 900,
        },
      ],
    },
  },
  // This config helps us configure global or default features that the other editors can inherit
  editor: defaultLexical,
  db: mongooseAdapter({
    url: process.env.DATABASE_URI || '',
    transactionOptions: false,
  }),
  onInit: async (payload: Payload) => {
    await payload.jobs.queue({
      task: 'syncInstagramMedia',
      // input: {
      //   title: 'New Post',
      // },
    })
  },
  collections: [
    Pages,
    Posts,
    Media,
    Categories,
    Users,
    Vereinsrollen,
    Orders,
    Products,
    ReusableContent,
    ProductCategories,
    InstagramMedia,
  ],
  endpoints: [
    {
      path: '/stripe/products',
      method: 'get',
      handler: productsProxy,
    },
    {
      path: '/stripe/customers',
      method: 'get',
      handler: customersProxy,
    },
    {
      method: 'post',
      path: '/create-payment-intent',
      handler: createPaymentIntent,
    },
  ],
  logger: {
    options: {
      level: 'debug',
    },
    destination: process.stdout,
  },
  jobs: {
    tasks: [
      {
        retries: 1,

        // This is a unique identifier for the task
        slug: 'syncInstagramMedia',

        handler: syncInstagramMedia,
      } as TaskConfig<'syncInstagramMedia'>,
    ],
  },
  cors: [getServerSideURL()].filter(Boolean),
  globals: [Header, Footer],
  plugins: [
    ...plugins,
    // storage-adapter-placeholder
  ],
  secret: process.env.PAYLOAD_SECRET,
  sharp,
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
})

plugin config

import type { Block } from 'payload'

import { revalidateRedirects } from '@/hooks/revalidateRedirects'
import { Page, Post } from '@/payload-types'
import { beforeSyncWithSearch } from '@/search/beforeSync'
import { searchFields } from '@/search/fieldOverrides'
import { chargeSucceeded } from '@/stripe/webhooks/chargeSucceeded'
import { paymentIntentCanceled } from '@/stripe/webhooks/paymentIntentCanceled'
import { paymentIntentCreated } from '@/stripe/webhooks/paymentIntentCreated'
import { priceUpdated } from '@/stripe/webhooks/priceUpdated'
import { productDeleted } from '@/stripe/webhooks/productDeleted'
import { productUpdated } from '@/stripe/webhooks/productUpdated'
import { getServerSideURL } from '@/utilities/getURL'
import { formBuilderPlugin, fields } from '@payloadcms/plugin-form-builder'
import { nestedDocsPlugin } from '@payloadcms/plugin-nested-docs'
import { redirectsPlugin } from '@payloadcms/plugin-redirects'
import { searchPlugin } from '@payloadcms/plugin-search'
import { seoPlugin } from '@payloadcms/plugin-seo'
import { GenerateTitle, GenerateURL } from '@payloadcms/plugin-seo/types'
import { stripePlugin } from '@payloadcms/plugin-stripe'
import { FixedToolbarFeature, HeadingFeature, lexicalEditor } from '@payloadcms/richtext-lexical'
import { s3Storage } from '@payloadcms/storage-s3'
import { Plugin } from 'payload'

import { accessControlPlugin } from './AccessControl/src'

const generateTitle: GenerateTitle<Post | Page> = ({ doc }) => {
  return doc?.title ? `${doc.title} | LSG Burgheim` : 'LSG Burgheim'
}

const generateURL: GenerateURL<Post | Page> = ({ doc }) => {
  const url = getServerSideURL()

  return doc?.slug ? `${url}/${doc.slug}` : url
}

export const plugins: Plugin[] = [
  redirectsPlugin({
    collections: ['pages', 'posts'],
    overrides: {
      // @ts-expect-error
      fields: ({ defaultFields }) => {
        return defaultFields.map((field) => {
          if ('name' in field && field.name === 'from') {
            return {
              ...field,
              admin: {
                description: 'You will need to rebuild the website when changing this field.',
              },
            }
          }
          return field
        })
      },
      hooks: {
        afterChange: [revalidateRedirects],
      },
      admin: {
        group: 'Website',
      },
    },
  }),
  nestedDocsPlugin({
    collections: ['categories'],
  }),
  seoPlugin({
    collections: ['pages', 'products'],
    uploadsCollection: 'media',
    generateTitle,
    generateURL,
  }),
  formBuilderPlugin({
    fields: {
      payment: false,
      phone: {
        ...fields.text,
        slug: 'phone',
        labels: {
          plural: 'Phone Fields',
          singular: 'Phone',
        },
      } as Block,
    },
    formOverrides: {
      fields: ({ defaultFields }) => {
        return defaultFields.map((field) => {
          if ('name' in field && field.name === 'confirmationMessage') {
            return {
              ...field,
              editor: lexicalEditor({
                features: ({ rootFeatures }) => {
                  return [
                    ...rootFeatures,
                    FixedToolbarFeature(),
                    HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
                  ]
                },
              }),
            }
          }
          return field
        })
      },
      admin: {
        group: 'Website',
      },
    },
    formSubmissionOverrides: {
      admin: {
        group: 'Website',
      },
    },
  }),
  searchPlugin({
    collections: ['posts'],
    beforeSync: beforeSyncWithSearch,
    searchOverrides: {
      fields: ({ defaultFields }) => {
        return [...defaultFields, ...searchFields]
      },
      admin: {
        group: 'Website',
      },
    },
  }),
  stripePlugin({
    stripeSecretKey: process.env.STRIPE_SECRET_KEY || '',
    isTestKey: Boolean(process.env.PAYLOAD_PUBLIC_STRIPE_IS_TEST_KEY),
    stripeWebhooksEndpointSecret: process.env.STRIPE_WEBHOOKS_SIGNING_SECRET,
    rest: false,
    webhooks: {
      'product.created': productUpdated,
      'product.updated': productUpdated,
      'product.deleted': productDeleted,
      'price.updated': priceUpdated,
      // 'payment_intent.created': paymentIntentCreated,
      // 'payment_intent.canceled': paymentIntentCanceled,
      'charge.succeeded': chargeSucceeded,
    },
    // sync: [
    //   {
    //     collection: 'customers',
    //     stripeResourceType: 'customers',
    //     stripeResourceTypeSingular: 'customer',
    //     fields: [
    //       {
    //         fieldPath: 'name', // this is a field on your own Payload config
    //         stripeProperty: 'name', // use dot notation, if applicable
    //       },
    //     ],
    //   },
    // ],
  }),
  accessControlPlugin({ enabled: true }),
  s3Storage({
    enabled: process.env.USE_LOCAL_STORAGE ? false : true,
    collections: {
      media: {
        disablePayloadAccessControl: true,
        prefix: `${process.env.S3_FOLDER}/media`,
      },
      'instagram-media': {
        disablePayloadAccessControl: true,
        prefix: `${process.env.S3_FOLDER}/instagram`,
      },
    },
    bucket: process.env.S3_BUCKET,
    config: {
      credentials: {
        accessKeyId: process.env.S3_ACCESS_KEY_ID,
        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
      },
      region: process.env.S3_REGION,
      endpoint: process.env.S3_ENDPOINT,
    },
  }),
]

Hook example:

import type { StripeWebhookHandler } from '@payloadcms/plugin-stripe'
import type Stripe from 'stripe'

const logs = true

export const chargeSucceeded: StripeWebhookHandler<{
  data: {
    object: Stripe.Charge
  }
}> = async (args) => {
  const {
    event,
    stripe,
    req,
    payload,
  } = args

  const charge = event.data.object
  const stripeCustomerID = charge.customer
  const stripePaymentIntentID = charge.payment_intent
  let payloadUserID: string | undefined
  let payloadOrderID: string | undefined

  if (logs)
    payload.logger.debug(
      `🪝 Payment succeeded event received with ID ${stripePaymentIntentID} and stripe user ${stripeCustomerID}, now trying to find payload user and existing order..`,
    )

  try {
    const userRequest = await payload.find({
      collection: 'users',
      where: {
        stripeCustomerID: {
          equals: stripeCustomerID,
        },
      },
    })
    payloadUserID = userRequest.docs?.[0]?.id
    if (payloadUserID === undefined) {
      payload.logger.error(`User not found for stripe customer ID ${stripeCustomerID}`)
      return
    }
  } catch (err: unknown) {
    const msg = err instanceof Error ? err.message : 'Unknown error'
    payload.logger.error(`Error finding user ${msg}`)
    return
  }

  try {
    if (logs)
      payload.logger.debug(
        `Searching for order with PaymentIntentID ${stripePaymentIntentID} for user ${payloadUserID}`,
      )
    const orderRequest = await payload.find({
      collection: 'orders',
      where: {
        stripePaymentIntentID: {
          equals: stripePaymentIntentID,
        },
      },
    })
    payloadOrderID = orderRequest.docs?.[0]?.id
    if (payloadOrderID === undefined) {
      payload.logger.error(`Order not found for stripe PaymantIntentID ${stripePaymentIntentID}`)
      return
    }
  } catch (err: unknown) {
    const msg = err instanceof Error ? err.message : 'Unknown error'
    payload.logger.error(`Error querying PaymentIntentID ${stripePaymentIntentID}`)
    payload.logger.error(msg)
    return
  }

  // process event payment_intent.created
  if (event.type === 'charge.succeeded') {
    if (charge.status !== 'succeeded' || charge.paid !== true) {
      payload.logger.error(
        `PaymentIntent ${stripePaymentIntentID} is not in succeeded status, cannot update order status`,
      )
      return
    }
    if (logs)
      payload.logger.debug(`🪝 Updating Order with paymentIntentID ${stripePaymentIntentID}`)

    try {
      const order = await payload.update({
        collection: 'orders',
        id: payloadOrderID,
        data: {
          total: charge.amount_captured,
          currency: charge.currency,
          payment_status: 'paid',
          paymentMethod: charge.payment_method_details?.type,
          paymentMethodDetails: charge?.payment_method_details
            ? JSON.stringify(charge.payment_method_details)
            : null,
          shipping: {
            address: {
              street: charge.shipping?.address?.line1,
              extra: charge.shipping?.address?.line2,
              city: charge.shipping?.address?.city,
              country: charge.shipping?.address?.country,
              zip: charge.shipping?.address?.postal_code,
            },
            phone: charge.shipping?.phone,
            name: charge.shipping?.name,
          },
          billing_details: {
            address: {
              street: charge.billing_details?.address?.line1,
              extra: charge.billing_details?.address?.line2,
              city: charge.billing_details?.address?.city,
              country: charge.billing_details?.address?.country,
              zip: charge.billing_details?.address?.postal_code,
            },
            phone: charge.billing_details?.phone,
            name: charge.billing_details?.name,
          },
        },
        depth: 0,
      })
    } catch (err: unknown) {
      payload.logger.error(`Error updating order for user ${payloadUserID}`)
    }

    try {
      if (logs) payload.logger.debug(`🪝 Clearing cart for user ${payloadUserID}`)
      const user = await payload.update({
        collection: 'users',
        id: payloadUserID,
        data: {
          cart: {
            items: [],
          },
        },
      })
    } catch (err: unknown) {
      const msg = err instanceof Error ? err.message : 'Unknown error'
      payload.logger.error(`Error clearing cart for user ${payloadUserID}: ${msg}`)
    }
  } else {
    payload.logger.error(`Unknown event type ${event.type}`)
  }
}

[vipuljbhikadiya]

@tomtana facing similar issue, have you get anything on this ?

[tomtana]

Yeah, I got to the bottom of this. Not sure if it has been fixed on main but I've build a patch for my use-case. See here the pull request

#10685