I am currently working on configuring a webhook utilizing the Stripe platform with NextJS version 13.2.3

Question

I am currently working on configuring a webhook utilizing the Stripe platform with NextJS version 13.2.3

Upon successfully checking out my cart using the built-in Stripe page, I am redirected to the successUrl route. During this process, my local test webhook is triggered as expected. However, I encountered some errors when attempting to verify that the request originated from Stripe.

Below is my webhook setup in NextJS

import { stripe } from "@/lib/stripe"

export async function POST(req: Request){

    const payload = await req.json()
    
    const sig = req.headers.get('stripe-signature') as string
    console.log("sig: ", sig)

    let event;

    const endpointSecret = process.env.WEBHOOK_SECRET_LOCAL as string

    try {
        console.log("constructing event...")
        event = stripe.webhooks.constructEvent(payload, sig, endpointSecret)
    } catch (error) {
        console.error(error)
        return new Response(`Webhook error: ${error}`, {
            status: 400,
        })
    }
    
    return new Response("payment confirmation route received", {
        status: 200,
    })
}

I've utilized the Stripe CLI to listen for the success event

stripe listen --forward-to localhost:3000/api/checkout/payment-confirmation

After completing my cart checkout, the following events are triggered...

2023-03-23 15:51:28   --> checkout.session.completed [evt_1MowyjE7TMviQOgJNbXch10w] 2023-03-23 15:51:28   --> charge.succeeded [evt_3MowyhE7TMviQOgJ09e3Q7Hu] 2023-03-23 15:51:29   --> payment_intent.succeeded [evt_3MowyhE7TMviQOgJ0OIjeNoH] 2023-03-23 15:51:29   --> payment_intent.created [evt_3MowyhE7TMviQOgJ0ovhouJM] 2023-03-23 15:51:32  <--  [400] POST http://localhost:3000/api/checkout/payment-confirmation [evt_3MowyhE7TMviQOgJ09e3Q7Hu] 2023-03-23 15:51:32  <--  [400] POST http://localhost:3000/api/checkout/payment-confirmation [evt_3MowyhE7TMviQOgJ0OIjeNoH] 2023-03-23 15:51:32  <--  [400] POST http://localhost:3000/api/checkout/payment-confirmation [evt_1MowyjE7TMviQOgJNbXch10w] 2023-03-23 15:51:32  <--  [400] POST http://localhost:3000/api/checkout/payment-confirmation [evt_3MowyhE7TMviQOgJ0ovhouJM]

Upon inspecting the NextJS logs, I noticed...

StripeSignatureVerificationError: Webhook payload must be provided as a string or a Buffer (https://nodejs.org/api/buffer.html) instance representing the _raw_ request body.Payload was provided as a parsed JavaScript object instead. Signature verification is impossible without access to the original signed material. Learn more about webhook signing and explore webhook integration examples for various frameworks at https://github.com/stripe/stripe-node#webhook-signing

My interpretation of this error led me to believe that I needed to manipulate the payload argument. I attempted payload.toString(), JSON.stringify(payload), and using const buf = Buffer.from(payload), among other methods, in an effort to convert the object into a string or buffer. However, I am still struggling to grasp the issue. Any assistance would be greatly appreciated!

--Update--

I have made adjustments to the code, but I am still encountering the generic error...

No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe?

My response to Stripe: "I believe so?!?"

I also experimented with importing 'micro' or 'raw-body' as observed in other implementations, but encountered various errors. This prompted me to revert to the node approach. Interestingly, when passing the req.body as the first argument in constructEvent, I encountered the error message:

Argument of type 'ReadableStream | null' is not assignable to parameter of type 'string | Buffer'

👆

import { stripe } from "@/lib/stripe"
import { NextRequest } from "next/server";
import { Buffer } from "node:buffer";

export async function POST(req: NextRequest){
    
    const buf = Buffer.from(req.toString())
// <Buffer 5b 6f 62 6a 65 63 74 20 52 65 71 75 65 73 74 5d>

    const headers = req.headers
    
    const sig = req.headers.get("stripe-signature") as string | string[]
// t=1679...,v1=888050e17...,v0=cc9b94a...
    let event;
    const endpointSecret = process.env.WEBHOOK_SECRET_LOCAL as string
// whsec_...
    

    try {
        console.log("constructing event...")
        event = stripe.webhooks.constructEvent(buf, sig, endpointSecret)
    } catch (error) {
        console.error(error)
        return new Response(`Webhook error: ${error}`, {
            status: 400,
        })
    }
    
    return new Response("payment confirmation route received", {
        status: 200,
    })
}

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

typescript next.js stripe-payments next.js13

Answer 1

Answer №1

For optimal performance, refrain from utilizing micro for buffering the body. Instead, opt for await req.text() to transform the raw body into a string, after which you can pass this string to stripe.webhooks.constructEvent.

Answer 2

For optimal performance, refrain from utilizing micro for buffering the body. Instead, opt for await req.text() to transform the raw body into a string, after which you can pass this string to stripe.webhooks.constructEvent.

Answer 3

Answer №2

Have you been experiencing issues with webhooks functioning on localhost but not after deployment? If you have exhausted all other troubleshooting steps, the problem may lie in using the incorrect webhook secret. It is advised to avoid using the secret provided on the latest Stripe tutorial page, even during test mode, as it is only reliable for localhost testing.

https://i.sstatic.net/L12Pn.png

Instead, ensure to obtain the webhook secret from this source (by clicking "Reveal")

https://i.sstatic.net/1f20N.png

Answer 4

Have you been experiencing issues with webhooks functioning on localhost but not after deployment? If you have exhausted all other troubleshooting steps, the problem may lie in using the incorrect webhook secret. It is advised to avoid using the secret provided on the latest Stripe tutorial page, even during test mode, as it is only reliable for localhost testing.

https://i.sstatic.net/L12Pn.png

Instead, ensure to obtain the webhook secret from this source (by clicking "Reveal")

https://i.sstatic.net/1f20N.png

Answer 5

Answer №3

I've successfully implemented this code snippet. Feel free to reach out if you have any inquiries.

import Stripe from 'stripe';
import { headers } from 'next/headers';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!,
  {
    apiVersion: '2022-11-15'
  }
)

export async function POST(req: Request) {
  const body = await req.text();
  const sig = headers().get('Stripe-Signature') as string;
  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!;
  let event: Stripe.Event;

  try {
    if (!sig || !webhookSecret) return;
    event = stripe.webhooks.constructEvent(body, sig, webhookSecret);
  } catch (err: any) {
    console.log(`❌ Error message: ${err.message}`);
    return new Response(`Webhook Error: ${err.message}`, { status: 400 });
  }

  if (relevantEvents.has(event.type)) {
    try {
      switch (event.type) {
        case 'product.created':
          break;
        case 'product.updated':
          break;
        default:
          throw new Error('Unhandled relevant event!');
      }
    } catch (error) {
      console.log(error);
      return new Response('Webhook handler failed. View logs.', {
        status: 400
      });
    }
  }
  return new Response(JSON.stringify({ received: true }));
}

Answer 6

I've successfully implemented this code snippet. Feel free to reach out if you have any inquiries.

import Stripe from 'stripe';
import { headers } from 'next/headers';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!,
  {
    apiVersion: '2022-11-15'
  }
)

export async function POST(req: Request) {
  const body = await req.text();
  const sig = headers().get('Stripe-Signature') as string;
  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!;
  let event: Stripe.Event;

  try {
    if (!sig || !webhookSecret) return;
    event = stripe.webhooks.constructEvent(body, sig, webhookSecret);
  } catch (err: any) {
    console.log(`❌ Error message: ${err.message}`);
    return new Response(`Webhook Error: ${err.message}`, { status: 400 });
  }

  if (relevantEvents.has(event.type)) {
    try {
      switch (event.type) {
        case 'product.created':
          break;
        case 'product.updated':
          break;
        default:
          throw new Error('Unhandled relevant event!');
      }
    } catch (error) {
      console.log(error);
      return new Response('Webhook handler failed. View logs.', {
        status: 400
      });
    }
  }
  return new Response(JSON.stringify({ received: true }));
}

Answer 7

Answer №4

When Stripe sends an Event to your webhook endpoint, they initially calculate a signature based on the raw body of the Event. It is crucial that when processing the data, you ensure that you are examining the exact raw body that Stripe utilized. Any alterations, even as minor as adding a single space or changing the order of a property, will result in the signature not matching.

Many developers using stripe-node often encounter difficulties with signature verification. This is because various frameworks automatically parse JSON data they receive for easy consumption. As a result, when attempting to access the data, a different version of the payload may be retrieved even if the information within is similar.

If your code is utilizing req.json(), it is essential to access the precise raw body of the POST request, typically done through request.body. Consult Stripe's documentation here for guidance. Additionally, reviewing this popular issue on the Github repository for stripe-node can provide various alternative solutions tailored to your specific environment.

Answer 8

When Stripe sends an Event to your webhook endpoint, they initially calculate a signature based on the raw body of the Event. It is crucial that when processing the data, you ensure that you are examining the exact raw body that Stripe utilized. Any alterations, even as minor as adding a single space or changing the order of a property, will result in the signature not matching.

Many developers using stripe-node often encounter difficulties with signature verification. This is because various frameworks automatically parse JSON data they receive for easy consumption. As a result, when attempting to access the data, a different version of the payload may be retrieved even if the information within is similar.

If your code is utilizing req.json(), it is essential to access the precise raw body of the POST request, typically done through request.body. Consult Stripe's documentation here for guidance. Additionally, reviewing this popular issue on the Github repository for stripe-node can provide various alternative solutions tailored to your specific environment.

Answer 9

Answer №5

One challenge arises from Stripe's requirement for the raw body to compute a signature, while Next.js automatically parses the body. To address this, you can disable the body parser and process the data as a buffer. Here's a solution:

const stripe = require('stripe')(process.env.STRIPE_PRIVATE);

const buffer = (req) => {
  return new Promise((resolve, reject) => {
    const chunks = [];

    req.on('data', (chunk) => {
      chunks.push(chunk);
    });

    req.on('end', () => {
      resolve(Buffer.concat(chunks));
    });

    req.on('error', reject);
  });
};

const handler = async (req, res) => {
  if (!req.method === 'POST') {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
    return;
  }

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

  let event;

  try {
    const body = await buffer(req);

    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET
    );
  } catch (error) {
    console.log('Webhook invalid!', error);
    return res.status(400).send(`Webhook Error: ${error.message}`);
  }

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

    // Fulfill the purchase...
    console.log('SESSION: ', session);
  }

  // Return a response to acknowledge receipt of the event
  res.json({ received: true });
};

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

export default handler;

This approach is inspired by:

https://github.com/stripe/stripe-node/blob/master/examples/webhook-signing/nextjs/pages/api/webhooks.ts

Referenced from: https://github.com/stripe/stripe-node#webhook-signing

Trust this explanation proves helpful!

Answer 10

One challenge arises from Stripe's requirement for the raw body to compute a signature, while Next.js automatically parses the body. To address this, you can disable the body parser and process the data as a buffer. Here's a solution:

const stripe = require('stripe')(process.env.STRIPE_PRIVATE);

const buffer = (req) => {
  return new Promise((resolve, reject) => {
    const chunks = [];

    req.on('data', (chunk) => {
      chunks.push(chunk);
    });

    req.on('end', () => {
      resolve(Buffer.concat(chunks));
    });

    req.on('error', reject);
  });
};

const handler = async (req, res) => {
  if (!req.method === 'POST') {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
    return;
  }

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

  let event;

  try {
    const body = await buffer(req);

    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET
    );
  } catch (error) {
    console.log('Webhook invalid!', error);
    return res.status(400).send(`Webhook Error: ${error.message}`);
  }

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

    // Fulfill the purchase...
    console.log('SESSION: ', session);
  }

  // Return a response to acknowledge receipt of the event
  res.json({ received: true });
};

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

export default handler;

This approach is inspired by:

https://github.com/stripe/stripe-node/blob/master/examples/webhook-signing/nextjs/pages/api/webhooks.ts

Referenced from: https://github.com/stripe/stripe-node#webhook-signing

Trust this explanation proves helpful!

Answer 11

Answer №6

Recently, I completed a project with Next.js that involved integrating Stripe and a webhooks API. The project utilized the new /app router. If you're interested, you can check out the README.md by visiting the repository link: https://github.com/BastidaNicolas/nextauth-prisma-stripe

Answer 12

Recently, I completed a project with Next.js that involved integrating Stripe and a webhooks API. The project utilized the new /app router. If you're interested, you can check out the README.md by visiting the repository link: https://github.com/BastidaNicolas/nextauth-prisma-stripe

Answer 13

Answer №7

To set up a Stripe webhook, you will require the raw body content.

In Next.js version 13, you can access the raw body data with the following code:

const rawBody = await req.text()

Answer 14

To set up a Stripe webhook, you will require the raw body content.

In Next.js version 13, you can access the raw body data with the following code:

const rawBody = await req.text()

I am currently working on configuring a webhook utilizing the Stripe platform with NextJS version 13.2.3

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Is there a way to assign a value to an Angular-specific variable using PHP?

The error message "@graphql-eslint/eslint-plugin: problem with the "parserOptions.schema" configuration"

The action dispatched by "AuthEffects.register$" is not valid and will have no effect

Using the React Icon component as a prop in the Client Component within a NextJS application

Enhancing Security and Privacy of User Information with JWT Tokens and NgRx Integration in Angular Application

Zod Entry using standard encryption key

How can I change an icon and switch themes using onClick in react js?

Retrieve the property of a Typescript object using a template argument

A guide to mocking Prisma using Jest mock functionality

"Error message: Antd datepicker is throwing an error stating that date.clone/date.load is not a

Maximum Age Setting for Iron Session Cookie

Is it possible to modify the parameters of a function by utilizing a MethodDecorator without affecting the "this" value?

Sharing parameters between pages in Angular IonicPassing parameters between pages within an Angular Ionic application

Having trouble with obtaining real-time text translation using ngx translate/core in Angular 2 with Typescript

Is there a different option similar to forkJoin for handling incomplete observables?

Eliminate the eslint@typescript-eslint/no-unused-vars error in TypeScript when the index parameter is not utilized within a map function

Issue with Nextjs: Page style fails to load initially leading to oversized icons and broken CSS

Discovering the proper method for indicating the type of a variable in the middle of a statement

Guidelines for forming a composite type with elements?

Checkbox offering a tri-state option