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