Theo's Typesafe Cult•2y ago

Stripe Webhooks

Hi, I've been struggling with the Stripe Webhooks for a while. Here is my webhook route (src/pages!/api/webhooks/stripe.ts):

import type { Stripe } from "stripe"

import { env } from "~/env.mjs"
import { stripe } from "~/lib/stripe"
import { updateCredits } from "~/server/helpers/userRepo"
import { NextApiRequest, NextApiResponse } from "next"
import { Readable } from "stream"
import { buffer} from "micro" 

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

export async function POST(req: NextApiRequest, res: NextApiResponse) {
    const buf = await buffer(req);
    const sig = req.headers['stripe-signature'];

    let event: Stripe.Event;

    try {
        if (!sig || !env.STRIPE_WEBHOOK_KEY) return res.status(400);
        event = stripe.webhooks.constructEvent(buf, sig, env.STRIPE_WEBHOOK_KEY);
    } catch (err: any) {
        console.log(`❌ Error message: ${err.message}`);
        return res.status(400).send(`Webhook Error: ${err.message}`);
    }

    try {
        const session = event.data.object as Stripe.Checkout.Session;
        if (event.type === "checkout.session.completed") {
            await updateCredits(session.customer as string);
        }
    } catch (err: any) {
        console.log(`❌ Error message: ${err.message}`);
        return res.status(400).send(`Webhook Error: ${err.message}`);
    }

res.json({ received: true}) 
    return res.status(200);
}

import type { Stripe } from "stripe"

import { env } from "~/env.mjs"
import { stripe } from "~/lib/stripe"
import { updateCredits } from "~/server/helpers/userRepo"
import { NextApiRequest, NextApiResponse } from "next"
import { Readable } from "stream"
import { buffer} from "micro" 

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

export async function POST(req: NextApiRequest, res: NextApiResponse) {
    const buf = await buffer(req);
    const sig = req.headers['stripe-signature'];

    let event: Stripe.Event;

    try {
        if (!sig || !env.STRIPE_WEBHOOK_KEY) return res.status(400);
        event = stripe.webhooks.constructEvent(buf, sig, env.STRIPE_WEBHOOK_KEY);
    } catch (err: any) {
        console.log(`❌ Error message: ${err.message}`);
        return res.status(400).send(`Webhook Error: ${err.message}`);
    }

    try {
        const session = event.data.object as Stripe.Checkout.Session;
        if (event.type === "checkout.session.completed") {
            await updateCredits(session.customer as string);
        }
    } catch (err: any) {
        console.log(`❌ Error message: ${err.message}`);
        return res.status(400).send(`Webhook Error: ${err.message}`);
    }

res.json({ received: true}) 
    return res.status(200);
}

No matter how I change this, I get a 500 response without a body in Stripe. This has become a bit messy from what I had at first. Is there some config in T3 in other places that I need to modify to allow for webhooks from stripe? Or am I missing something? I have the correct webhook secret, the correct stripe api key, and it sends webhooks to my vercel url.

5 Replies

Neto•2y ago

you can check this repo about t3 + stripe

Neto•2y ago

https://github.com/nramkissoon/t3-stripe

GitHub

GitHub - nramkissoon/t3-stripe: Example Stripe integration with cre...

Example Stripe integration with create-t3-app bootstrapped Next.js application - GitHub - nramkissoon/t3-stripe: Example Stripe integration with create-t3-app bootstrapped Next.js application

Neto•2y ago

and you can use this webhook tool to test the implementation

Neto•2y ago

https://webhookthing.com/

webhookthing

an easier way to develop with webhooks locally

GodspeedOP•2y ago

Thanks, will take a look!

Gaming

Programming

Stripe Webhooks