Stripe Webhook in Nextjs issue

[Remi-dee]

Summary

Please treat as urgent,
I am working on an app with next js and i am trying to use stripe for payment. i have successfully integrated stripe, it works fine locally on my machine but it doesn't on the live vercel version, logging an axios error(500) another problem i am facing on my local machine is;
when event data is sent from stripe to my db(firestore), i dont get any response even when i console log it?, when i trigger event, stripe successfully process the events but fail to send it to the database. it logs this error;

[ERROR] Failed to POST: Post "http://localhost:3000/api/webhook": context deadline exceeded (Client.Timeout exceeded while awaiting headers)

Additional information

This is my webhook API endpoint;


import {buffer} from "micro";
import * as admin from "firebase-admin";


//Securing a connection to firebase from backend 
const serviceAccount = require("../../../permissions.json");
const app = !admin.apps.length ? admin.initializeApp({
    credential: admin.credential.cert(serviceAccount)
  }) : admin.app();

//Implement Connection to stripe
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY) 
const endpointSecret = process.env.STRIPE_SIGNING_SECRET;

const fulfilOrder = async (session) => {
    console.log("fulfilling order", session);

    return app.firestore()
    .collection("users")
    .doc(session.metadata.email)
    .collection("orders")
    .doc(session.id)
    .set({
        amount: session.amount_total/100,
        amount_shipping: session.total_details.amount_shipping/100,
        images: JSON.parse(session.metadata.images),
        timestamp: admin.firestore.FieldValue.serverTimestamp(),
    }).then(() => {
        console.log(`SUCCESS: Order ${session.id} is stored successfully in the database`);
    })
}

export default async (req, res) => {
if (req.method === "post") {
const requestBuffer = await buffer(req);
const payload = requestBuffer.toString();
const signature = req.headers["stripe-signature"];
let event;
if (endpointSecret) {




// Verify that this event is from stripe
try{
    event = stripe.webhooks.constructEvent(req.body, signature, endpointSecret);
} catch (err) {
    console.log("ERROR", err.message);
    return res.status(400).send(`Webhook error: ${err.message}`);
}
}

// Handle the checkout.session.completed event
if (event.type === "checkout.session.completed") {
    const session = event.data.object;

    //Fullfil the order
    return fulfilOrder(session)
    .then(() => res.status(200))
    .catch((err) => res.status(400).send(`webhook Error: ${err.message}`));



}
}
};

export const config = {
api: {
    bodyParser: false,
    externalResolver: true
}
}

Example

No response

[joeelmahallawy]

try to use requestBuffer when you're constructing the stripe webhook event instead of req.body. I think that should do it for you

[kirtirajsinh]

Here's my code. This is in a Nextjs repo. I'm also getting the same error

Code

import { stripe } from "../../../../utils/stripe";
import { buffer } from "micro";
if (!process.env.WEBHOOK_SECRET) {
  throw new Error("Missing Stripe webhook secret");
}
import { prisma } from "../../../../server/db";

export default async function handler(req, res) {
  if (req.method === "POST") {
    const reqBuffer = await buffer(req);
    const payload = reqBuffer.toString();
    const signature = req.headers["stripe-signature"];

    let event;
    console.log(body, "body from webhook");
    try {
      event = stripe.webhooks.constructEvent(
        payload,
        signature,
        env.WEBHOOK_SECRET
      );
    } catch (error) {
      return res.status(400).send(`Webhook Error: ${error.message}`);
    }

    const session = event.data.object;
    console.log(session, "session from webhook");
    console.log(event, "event from webhook");
    if (event.type === "checkout.session.completed") {
      await prisma.user.update({
        where: {
          email: session.customer_email,
        },
        data: {
          token: 25,
        },
      });
    }

    return res.status(200).json({ received: true }).end();
  } else {
    res.setHeader("Allow", "POST");
    res.status(405).end("Method Not Allowed");
  }
}

error:

[AhmedBaset]

Any solutions for this? I'm facing the same

[clemenspeters]

@kirtirajsinh I think you're missing

// EXPORT config to tell Next.js NOT to parse the body
export const config = {
  api: {
    bodyParser: false
  }
}

cc: @A7med3bdulBaset

Credits / References:

• https://vancelucas.com/blog/how-to-access-raw-body-data-with-next-js/
• https://github.com/stripe/stripe-node/blob/86da21e351d876bca8bd80417db7938130ec9ad0/examples/webhook-signing/nextjs/pages/api/webhooks.ts#L52-L56

[BankkRoll]

Checking here to see any info has been found. I currently have a old project working fine on vercel, using the same api format for my new project works fine local but will not work on vercel. 405 (Method Not Allowed)

• webhook secret correct
• webhook url correct
• bodyParser false
• works fine local but wont work on vercel

import { NextApiRequest, NextApiResponse } from 'next';
import { buffer } from 'micro';
import Stripe from 'stripe';
import { doc, setDoc } from 'firebase/firestore';
import { db } from '../../../firebaseClient';

export const config = {
  api: {
    bodyParser: false,
  },
};

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-10-16',
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === 'POST') {
    const buf = await buffer(req);
    const sig = req.headers['stripe-signature']!;
    let event: Stripe.Event;

    try {
      event = stripe.webhooks.constructEvent(buf.toString(), sig, process.env.STRIPE_WEBHOOK_SECRET!);
    } catch (err) {
      return res.status(400).send(`Webhook Error: ${(err as Error).message}`);
    }

    const subscription = event.data.object as Stripe.Subscription;
    const userAddress = subscription.metadata.userAddress;
    const userRef = doc(db, 'users', userAddress);

    switch (event.type) {
      case 'customer.subscription.created':
      case 'customer.subscription.updated':
        if (userAddress) {
          await setDoc(userRef, { proUser: true }, { merge: true });
        }
        break;
      case 'customer.subscription.deleted':
        if (userAddress) {
          await setDoc(userRef, { proUser: false }, { merge: true });
        }
        break;
      case 'customer.subscription.paused':
        if (userAddress) {
          await setDoc(userRef, { proUser: false }, { merge: true });
        }
        break;
      case 'customer.subscription.resumed':
        if (userAddress) {
          await setDoc(userRef, { proUser: true }, { merge: true });
        }
        break;
      default:
    }

    res.json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

[vpaul18]

@BankkRoll Have you figured this out? I'm having the exact same issue and it's driving me insane.

[BankkRoll]

No i have not, doesnt work for the life of me.... made some weird session check to complexly bypass the webhook for now.. not stable at all so not going to share how i did it. but waiting for a patch or some news, i've looked up and tried 20 methods lol. Weirdly enough i have 2 other platforms using stripe webhooks 100% fine on older versions of the API so got me leading to believe its stripes end... going to try @MightComeback 's method below later or tomorrow!

[Ecodecs]

Hi, want to comment on the matter. Definitely a Vercel issue (though I cannot explain why). I had the exact same problem as you, had been driving me crazy all day (webhook worked on local but not on vercel deploy). Every time I would create a checkout.session.complete event, the webhook would fire but return a 405 error (method not allowed). Sometimes it would fire twice for whatever reason, and the second event would get a 200 response (but that doesn't work, I need it to work 100% of the calls). So in desperation I created a Netlify deploy for the same repo and moved the webhook listener in Stripe to that endpoint, and boom, all events are now processed correctly. I hope this will help others with the same problem in the future.

[tintinthedev]

Found any solution? It's literally almost the end of the year and I'm facing the same thing. Works locally, but not on vercel. I don't wanna change from vercel to other provider (at least not now). There must be a way lol.
Any help?

[MightComeback]

This worked for me:

`import {NextApiRequest, NextApiResponse} from "next";
import {prisma} from "~/server/db";
import Stripe from "stripe";
import { buffer } from "micro";

export const config = {
  api: {
    bodyParser: false,
  },
};

const stripe = new Stripe(process.env.STRIPE_SECRET ?? "", {
  apiVersion: "2023-10-16"
});
const webhookSecret = "secret"

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "POST") {
    return res.status(405).send("Method Not Allowed")
  }

  const rawBody = await buffer(req)
  const sig = req.headers['stripe-signature']!;

  let stripeEvent;
  try {
    stripeEvent = stripe.webhooks.constructEvent(rawBody.toString(), sig, webhookSecret);
    res.status(200).send("OK")
  } catch (err) {
    if (err instanceof Error)
      return res.status(400).send(`Webhook Error: ${err.message}`);
    return res.status(400).send('Signature Webhook Error')
  }

  console.log(stripeEvent)
}`

[kirtirajsinh]

Hey thanks man it worked.

[MarianTerinte96]

It seems to have worked for me too
thank you

[e2corporation]

For Next.js V14 -- this is the solution that works after trial and error, without using Buffer. The following 2 adjustments should do the trick. Also the export config const for bodyParser has been deprecated so that block of code will need to be removed from the route.

const body = await body.text() // <------
// ...
// ...
try {
    // ...
    event = stripe.webhooks.constructEvent(body, sig as string, SECRET)
} catch (e) {
     // ....
}

[tintinthedev]

Vercel parses the body by default, which interferes with Stripe's signature verification. Disable body parsing to keep the raw body intact for verification.

* Disable body parsing to keep the body in its raw form for Stripe's signature verification.

* Pass the raw body when verifying the Stripe signature.

I tried doing that using request.text() (which is said to return the request body as string), but it didn't work. Now I'm recurring to AI. I'll try to use the config constant, but I think that has to do only with the pages router. NextJS app router's docs say you don't actually need that because you can just use request.text(), but nah, didn't work.

[BankkRoll]

Vercel parses the body by default, which interferes with Stripe's signature verification. Disable body parsing to keep the raw body intact for verification.

* Disable body parsing to keep the body in its raw form for Stripe's signature verification.

* Pass the raw body when verifying the Stripe signature.

I tried doing that using request.text() (which is said to return the request body as string), but it didn't work. Now I'm recurring to AI. I'll try to use the config constant, but I think that has to do only with the pages router. NextJS app router's docs say you don't actually need that because you can just use request.text(), but nah, didn't work.

ahhh yeah app router doesn't even allow a body parser config, believe its false by default

[tintinthedev]

ahhh yeah app router doesn't even allow a body parser config, believe its false by default

So what could be the error about then?

[tintinthedev]

I was wisely (really dumb) using the app's production URL but testing in the preview environment (which has a different URL).

Now I'm getting a different error, status code 401. I'll try to figure this one out.

[tintinthedev]

Just to possibly help someone else on the futue: if you are also using NextJS' app router, and deploying on vercel, check if you are using the correct URLs first (environment etc). Then, when constructing the payload from the webhook request (which should be just he raw request body), make sure you are using await request.text() and not await request.body() for that, since NextJS (at least in the version I'm now, 15) doesn't reply to it with the raw request body, but does when you do request.text(). After that, check for Vercel's deployment protection: it makes the webhook requests get rejected, you should probably disable it for this case.

[isaacmain254]

If you are experiencing an issue where webhooks work on localhost but fail in Vercel production, here's a solution. You will receive a new signing secret after adding your endpoint to the Stripe dashboard. Make sure to update this webhook secret in your Vercel environment variables and redeploy your application.

[vivcut]

everything works for me on NGROK hosting it locally, but whenever i host it to xyz.vercel.app/api/webhook/stripe it never works or responds to anything

[tintinthedev]

Check my latest answer on this thread if you can. I was having a similar issue and managed to solve it

[vivcut]

Done everything bro. My brain hurts. Ive been trying to fix it for the past 5 hours. also the domain protection thingy is payed plan... everythign else ive dont and it doesnt work

[tintinthedev]

Maybe try to deploy it somewhere else and see if it works. I don't remember paying anything to disable domain protection, by the way.

[syedkazmi3]

I just resolved this issue. This is quite specific to my codebase but might help someone else.

In middleware ensure that you have

export const config = {
matcher: "/((?!api|static|.\..|_next|auth).*)"
}

Previously, I had it as...

export const config = {
matcher: "/((?!static|.\..|_next|auth).*)"
}

for me, api\ is the folder containing stripe\webhook

[0xSigmoid]

I just resolved this issue. This is quite specific to my codebase but might help someone else.

In middleware ensure that you have

export const config = { matcher: "/((?!api|static|...|_next|auth).*)" }

Previously, I had it as...

export const config = { matcher: "/((?!static|...|_next|auth).*)" }

for me, api\ is the folder containing stripe\webhook

It was the matcher for me as well, changed it to '/api((?!/webhook).*)' and now works <3

[Ilia01]

There are a few concrete problems in the code you posted.

1. req.method will be "POST", not "post", so your branch never runs.
2. You already read the raw body with await buffer(req), but then you call constructEvent(req.body, ...). That should be the raw payload / buffer, not req.body.
3. res.status(200) only sets the status. It does not send the response. That lines up with the Stripe CLI timeout (context deadline exceeded while awaiting headers).

For the Pages Router version, the flow should be:

export const config = {
  api: { bodyParser: false },
}

export default async function handler(req, res) {
  if (req.method !== "POST") {
    res.setHeader("Allow", "POST")
    return res.status(405).end("Method Not Allowed")
  }

  const rawBody = await buffer(req)
  const signature = req.headers["stripe-signature"]

  let event
  try {
    event = stripe.webhooks.constructEvent(
      rawBody,
      signature,
      process.env.STRIPE_SIGNING_SECRET!,
    )
  } catch (err) {
    return res.status(400).send(`Webhook Error: ${(err as Error).message}`)
  }

  if (event.type === "checkout.session.completed") {
    await fulfilOrder(event.data.object)
  }

  return res.status(200).json({ received: true })
}

If you are on the App Router instead, use await request.text() there instead of micro / buffer.

I built HookLens for this exact local debugging loop because these failures often collapse into one vague signature error. Capturing the raw request and replaying it after the fix makes it much easier to separate wrong secret, mutated body, and no-response bugs.

[e2corporation]

This is still a wormhole in 2026. I've uncovered a new problem When using a Parcel + React Stack plus Vercel DEV in a Local Environment (npx vercel dev) with a Serverless API Route Webhook (e.g. http://localhost:3000/api/stripe-webhook). It appears that some process is already parsing req.body behind the scenes so that results in Stripe Signature Verification failure, no matter what technique is being used to obtain the Raw Request Body.

❌ Webhook signature verification failed: No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe?
 If a webhook request is being forwarded by a third-party tool, ensure that the exact request body, including JSON formatting and new line style, is preserved.

Here are some Techniques to process the raw request body that should work in PRODUCTION however, although the proper method largely depends on the integration being used. The important thing is to ensure that req.body is not consumed by any process (even console.log in some cases) before attempting to process the raw body.

Using Buffer

     const chunks: Uint8Array[] = [];
     for await (const chunk of req) {
        chunks.push(chunk);
     }
     const rawBody = Buffer.concat(chunks);
      
     const signature = req.headers['stripe-signature'] as string;
     event = stripe.webhooks.constructEvent(rawBody, signature, WEBHOOK_SECRET);     

Using @raw-body

    import getRawBody from 'raw-body';
    
    const rawBody = await getRawBody(req as any, {
          encoding: null // ensures Buffer output
    });
    
    const signature = req.headers['stripe-signature'] as string;
    event = stripe.webhooks.constructEvent(rawBody, signature, WEBHOOK_SECRET);
    

[C-Moir]

For anyone hitting this on Next.js App Router (13+), the micro/buffer(req) approach is Pages Router only. The App Router has a different pattern and honestly it's simpler.

/app/api/webhooks/stripe/route.ts

import { NextRequest, NextResponse } from 'next/server'
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: NextRequest) {
  const body = await req.text()
  const sig = req.headers.get('stripe-signature')

  if (!sig) return NextResponse.json({ error: 'No signature' }, { status: 400 })

  let event: Stripe.Event
  try {
    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!)
  } catch (err) {
    console.error('Stripe webhook signature failed:', err)
    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
  }

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object as Stripe.Checkout.Session
    // handle your session here
  }

  return NextResponse.json({ received: true })
}

Key differences from Pages Router:

• req.text() instead of buffer(req) — no micro needed
• req.headers.get('stripe-signature') instead of req.headers['stripe-signature']
• No export const config = { api: { bodyParser: false } } — that's Pages Router only
• Return NextResponse.json() not res.status(200)

Works locally but fails on Vercel? Almost always the webhook secret. Your local CLI (stripe listen) gives you a whsec_... that's different from the one in your Stripe dashboard's endpoint settings. Make sure your Vercel env var STRIPE_WEBHOOK_SECRET is the one from the Stripe Dashboard → Webhooks → your endpoint, not the CLI one.