Add webhook handler for Next JS 14 API router

[AbdullahAhmadAAK]

Why?

This is to help developers in NextJS 14 by giving them a working example of a webhook handler. That way, they won't be confused as I was for 2-3 hours by not being able to follow the other pages router example.

Addresses #2100

[cla-assistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[jsteele-stripe]

@AbdullahAhmadAAK Thanks for your contribution! Please let me know if you've any questions about my comments/suggestions. Once resolved we can get this merged.

[jsteele-stripe]

Can we remove this import as it looks like code specific to your application and may confuse others.

[jsteele-stripe]

Redundant as there'll always be a Stripe-Signature header.

[jsteele-stripe]

Application specific – remove.

[jsteele-stripe]

We can simplify this:

Suggested change

	const reqArrayBuffer = await req.arrayBuffer()
	const bodyBuffer = Buffer.from(reqArrayBuffer)
	event = stripe.webhooks.constructEvent(bodyBuffer, sig, webhookSecret);
	const body = await req.text();
	event = stripe.webhooks.constructEvent(body, sig, webhookSecret);

[jsteele-stripe]

Can we remove getErrorMessage usage please.

[jsteele-stripe]

This file is redundant I believe.

[jsteele-stripe]

Can we add a canonical example for event handling? Doesn't need to be extensive

Suggested change

	switch (event.type) {
	case 'product.updated': {
	}
	case 'product.created': {
	}
	// other cases as you please
	}
	ry {
	switch (event.type) {
	case "checkout.session.completed":
	data = event.data.object as Stripe.Checkout.Session;
	console.log(`💰 CheckoutSession status: ${data.payment_status}`);
	break;
	case "payment_intent.payment_failed":
	data = event.data.object as Stripe.PaymentIntent;
	console.log(`❌ Payment failed: ${data.last_payment_error?.message}`);
	break;
	case "payment_intent.succeeded":
	data = event.data.object as Stripe.PaymentIntent;
	console.log(`💰 PaymentIntent status: ${data.status}`);
	break;
	default:
	throw new Error(`Unhandled event: ${event.type}`);
	}
	} catch (error) {
	console.log(error);
	return NextResponse.json(
	{ message: "Webhook handler failed" },
	{ status: 500 },
	);
	}

[jsteele-stripe]

Let's be consistent and use NextResponse.

Suggested change

	return new Response('Event received', { status: 200 });
	return NextResponse.json({ message: "Event received" }, { status: 200 });

[jsteele-stripe]

Can you rename the directory so it resembles the Next.js project structure (app/api/stripe/webhook/route.ts)?

[seanzhang-stripe]

headers is an async function ( ref ), and we need to use await here . For example

const headersList = await headers();

Alternatively, we can get the headers directly from req

const headersList = req.headers;

[xavdid-stripe]

closing in favor of #2259.

Thank you for your interest though!