Stripe webhook not working with Nextjs

Answered

Scale parasitoid posted this in #help-forum

Open in Discord

Scale parasitoidOP

2023-12-02T09:18:35.000Z

I am trying to integrate Stripe in my Nextjs application, but I am facing errors implementing the webhook in the API.
The error that I get from the console is: { message: 'No stripe-signature header value was provided.' }

To make stripe working, I need to get the req.headers['stripe_signature'] however i am not able to access the property of this JSON, so the sig variable is undefined. I am following the Stripe docs, and this is what it does in the documentation as well.

Has anybody had any experience trying to implemente the stripe webhook that can help solve this problem?

import Stripe from "stripe";

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

export async function POST (req, res) {

    const sig = await req.headers['stripe-signature'];

    console.log("printing the signature:" + sig); //prints undefined
    
    let event = req.body;

    console.log("before the try catch");

    try {
        event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_WEBHOOK_SECRET_KEY);
    } catch (err) {
        console.log(err);
        return res.json({ message: "hello" }, { status: 403 });
    }

    console.log("before the switch");

    switch (event.type) {
        case 'payment_intent.succeeded':
          const paymentIntentSucceeded = event.data.object;
          console.log("Webhook verified");
          break;
        // ... handle other event types
        default:
          console.log(

Unhandled event type ${event.type}

);
    }

    console.log("before the last return");

    return res.json({ message: 'finished' }, { status: 200 });

}

console output:

see screenshot attached

Answered by Ray

also the second parameter is not res object for route handler in app router

View full answer

53 Replies

2023-12-02T09:23:09.000Z

try const sig = req.headers.get('stripe-signature') instead

2023-12-02T09:24:06.000Z

also the second parameter is not res object for route handler in app router

Answer

2023-12-02T09:24:54.000Z

and you cannot access body directly
you should do stripe.webhooks.constructEvent(await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET_KEY);

and use NextResponse.json({}, { status: 403 }) instead of res.json

Scale parasitoidOP

2023-12-02T09:36:44.000Z

const sig = req.headers.get('stripe-signature')still gives me undefined result

2023-12-02T09:38:08.000Z

try make a post request with postman or something

Scale parasitoidOP

2023-12-02T09:38:16.000Z

ooooh wait I got it

i was doing const sig = req.headers.get['stripe-signature'] instead of const sig = req.headers.get('stripe-signature')

I had to replace the square braces with round ones

2023-12-02T09:39:26.000Z

yea because it's a function

Scale parasitoidOP

2023-12-02T09:40:29.000Z

now it's telling me that NextResponse.json is not a function

2023-12-02T09:41:25.000Z

did you import it

Scale parasitoidOP

2023-12-02T09:41:46.000Z

yes

2023-12-02T09:41:55.000Z

import { NextResponse } from "next/server";

Scale parasitoidOP

2023-12-02T09:42:02.000Z

import NextResponse from "next/server";
import Stripe from "stripe";

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

export async function POST (req, NextResponse) {

const sig = await req.headers.get('stripe-signature');

console.log("printing the signature:" + sig); //prints undefined

let event = req.body;

console.log("before the try catch");

try {
event = stripe.webhooks.constructEvent(await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET_KEY);
} catch (err) {
console.log(err);
return NextResponse.json({ message: "hello" }, { status: 403 });
}

console.log("before the switch");

switch (event.type) {
case 'payment_intent.succeeded':
const paymentIntentSucceeded = event.data.object;
console.log("Webhook verified");
break;
// ... handle other event types
default:
console.log(Unhandled event type ${event.type});
}

console.log("before the last return");

return NextResponse.json({ message: 'finished' }, { status: 200 });

}

2023-12-02T09:42:10.000Z

import { NextResponse } from "next/server";

name import

Scale parasitoidOP

2023-12-02T09:42:27.000Z

even with that it's not working

import {NextResponse} from "next/server";
import Stripe from "stripe";

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

export async function POST (req, NextResponse) {

const sig = await req.headers.get('stripe-signature');

console.log("printing the signature:" + sig); //prints undefined

let event = req.body;

console.log("before the try catch");

try {
event = stripe.webhooks.constructEvent(await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET_KEY);
} catch (err) {
console.log(err);
return NextResponse.json({ message: "hello" }, { status: 403 });
}

console.log("before the switch");

switch (event.type) {
case 'payment_intent.succeeded':
const paymentIntentSucceeded = event.data.object;
console.log("Webhook verified");
break;
// ... handle other event types
default:
console.log(Unhandled event type ${event.type});
}

console.log("before the last return");

return NextResponse.json({ message: 'finished' }, { status: 200 });

}

@Ray and you cannot access `body` directly you should do `stripe.webhooks.constructEvent(await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET_KEY);`

2023-12-02T09:43:05.000Z

this

const sig = await req.headers.get('stripe-signature');
you don't need to await on here

Scale parasitoidOP

2023-12-02T09:44:05.000Z

I removed it now

but still doesn't solve the problem with NextResponse

what is weird is that at the import it's telling me that it's value is never read

2023-12-02T09:46:22.000Z

try restart typescript server

remove line 10, you cannot access req.body

oh nm you not using typescript. try restart the dev server

Scale parasitoidOP

2023-12-02T09:52:09.000Z

I restarted the server, still nothing unfortunately

2023-12-02T09:52:43.000Z

what error you got

Scale parasitoidOP

2023-12-02T09:53:12.000Z

NextResponse is still greyed out, and it's still giving me NextResponse.json is not a function

2023-12-02T09:54:03.000Z

try use new Response.json()

Scale parasitoidOP

2023-12-02T09:55:42.000Z

error TypeError: Response.json is not a constructor

2023-12-02T09:56:04.000Z

node -v

Scale parasitoidOP

2023-12-02T09:56:18.000Z

this is so weird because I am already using NextResponse.json() in another API route

2023-12-02T09:56:31.000Z

ah

Scale parasitoidOP

2023-12-02T09:56:47.000Z

node -v: v20.6.1

2023-12-02T09:57:01.000Z

try comment out every thing and just put return NextResponse.json({}) there

Scale parasitoidOP

2023-12-02T10:00:33.000Z

same problem

NextResponse.json is not a function

2023-12-02T10:00:54.000Z

ok i see the problem

export async function POST (req, NextResponse) {

remove the NextResposne here

Scale parasitoidOP

2023-12-02T10:01:58.000Z

it works

so the POST request only accepts 1 parameter?

2023-12-02T10:02:28.000Z

two

export async function GET(
  request: Request,
  { params }: { params: { slug: string } }
) {
  const slug = params.slug // 'a', 'b', or 'c'
}

https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments

Scale parasitoidOP

2023-12-02T10:03:00.000Z

but this is a POST not a GET

2023-12-02T10:03:05.000Z

it same

2023-12-02T10:03:24.000Z

POST(req: Request) {

It does not seem so

2023-12-02T10:10:17.000Z

problem solved?

Scale parasitoidOP

2023-12-02T10:16:59.000Z

yes problem is solved

thank you