Stripe webhook signature verification

[fredrik-sogaard]

I'm trying to get Stripe's signature verification to work. Currently tried many variant of this:

export const stripeHandler = async (c: Context) => {
  const body1 = c.req.raw.body
  // const body2 = await c.req.text()

  try {
      event = stripe.webhooks.constructEvent(body1, sig, endpointSecret);
    }
    catch (err) {
      response.status(400).send(`Webhook Error: ${err.message}`);
    }
}

Stripe is saying either Body is unusable, or No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe?.

Stripe's NextJS docs does this:

const body = await buffer(req);

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

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

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

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

But Hono throws an error saying req.on is not a function.

Do anyone have a suggestion on how to do this? I've been Googling for a while...

[yusukebe]

@hideokamoto-stripe Can you help with this?

[hideokamoto-stripe]

Related to #1561

According to the Cloudflare Workers blog, the implementation method seems to be slightly different from the one introduced in the Stripe Docs using Node.js.
https://blog.cloudflare.com/announcing-stripe-support-in-workers
https://docs.stripe.com/webhooks/quickstart

However, since Hono works across multiple runtimes, this may not be the cause of the issue you're facing.
What environment are you trying to run Hono in? Node.js? Bun, or Cloudflare Pages or Workers?

For Cloudflare Workers, Stripe has published sample code. It includes the implementation of Webhooks as well, so I would recommend trying that out.
https://github.com/stripe-samples/stripe-node-cloudflare-worker-template

[fredrik-sogaard]

I'm using node.js and NextJS.

[hideokamoto-stripe]

Thank you.
There're an examples for Next.js with Stripe Webhook:

Page Router

import Stripe from 'stripe'
import {buffer} from 'micro'

const endpointSecret = 'whsec_xxxxxx'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

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

export default async function handler(
  request,
  response
) {
  const sig = request.headers['stripe-signature'];
  const buf = await buffer(request)

  let event;
  try {
    if (!sig) throw new Error("No signature provided")
    event = stripe.webhooks.constructEvent(buf, sig, endpointSecret);
  } catch (e) {
    const err = e instanceof Error ? e : new Error("Bad Request")
    console.log(err)
    response.status(400).send(`Webhook Error: ${err.message}`);
    return;
  }

  console.log(event)

  return response.status(200).end()
}

App Router

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

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

export async function POST(request: Request) {
  const signature = request.headers.get("stripe-signature");
  if (!signature) {
    return NextResponse.json({
      message: 'Bad request'
    }, {
      status: 400
    }) 
  }
  try {
    const body = await request.arrayBuffer();
    const event = stripe.webhooks.constructEvent(
      Buffer.from(body),
      signature,
      process.env.STRIPE_WEBHOOK_SECRET as string
    );
    console.log({
      type: event.type,
      id: event.id,
    })
    return NextResponse.json({
      message: `Hello Stripe webhook!`
    });
  } catch (err) {
    const errorMessage = `⚠️  Webhook signature verification failed. ${(err as Error).message}`
    console.log(errorMessage);
    return new Response(errorMessage, {
      status: 400
    })
  }
}

@yusukebe
Do you know how we can rewrite these code from Next.js REST API to Hono?

[fredrik-sogaard]

Thanks! I managed to get it working like this in Hono:

export const stripeHandler = async (c: Context) => { 
  const sig = c.req.header('stripe-signature')
  const body = await c.req.raw.arrayBuffer()

  const event = stripe.webhooks.constructEvent(Buffer.from(body), sig, endpointSecret)
  // ...
}

[hideokamoto-stripe]

@yusukebe
It's out of my curiosity, what do you think about adding a new page about Stripe Webhook integration to hono.dev.

Another idea, should I try to create a new middleware or adapter for it? In that case, I'm curious about how we can detect the runtime name or the difference.

[yusukebe]

Hi @hideokamoto-stripe, Thanks for answering.

It's out of my curiosity, what do you think about adding a new page about Stripe Webhook integration to hono.dev.

That's great! A document is better than writing middleware because we want to reduce maintenance costs.

Currently, we have a "snippets" section on the website: https://hono.dev/snippets/top

How about creating a page about Stripe in it?

[hideokamoto-stripe]

@yusukebe
Sorry for the late.
I made a new pull request about it:
honojs/website#347

Please feel free let me know about your question or concern.