#strmzi-cli-webhooks
clever sky
the event is not* showing up in the events tab
dense mulch
Do you have a Webhook Endpoint ID I can look at?
clever sky
sure, where do I see that?
dense mulch
Ah. Apologies, you said local listener. Can you just drop an Event ID for one of the Events that you generated in your trigger command?
You can find them here: https://dashboard.stripe.com/test/events
They look like this --> evt_abc123
clever sky
ah now I know why I didn't see the events, I was in live mode
anyway: evt_3OIf5dHvKmtkdhL00BvMWUiZ
dense mulch
Okay, so yeah. The webhooks are reaching your webhook handler, since we're being sent a HTTP 200. What is making you think it's not hitting your endpoint? Are you looking for something specific to verify?
clever sky
Well the first line in my endpoint is "event received", but it's not getting logged
so I thought it wasn't working
dense mulch
What does your webhook handler code look like?
clever sky
export async function POST(request: NextRequest) {
console.log("event received");
const body = await request.text();
console.log("Event body:", body);
const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!, {
apiVersion: "2023-10-16",
});
let data;
let eventType;
// Check if webhook signing is configured.
const webhookSecret =
"webhooksecret"; // Update this according to your secret configuration
if (webhookSecret) {
// Retrieve the event by verifying the signature using the raw body and secret.
let event;
const signature = headers().get("stripe-signature") as string;
try {
event = stripe.webhooks.constructEvent(body, signature, webhookSecret);
} catch (err) {
console.log(`⚠️ Webhook signature verification failed.`);
return NextResponse.json({
status: 400,
error: "Webhook Error: Invalid Signature",
});
}
// Extract the object from the event.
data = event.data;
eventType = event.type;
console.log("Data:", data);
} else {
// Webhook signing is recommended, but if the secret is not configured in `config.js`,
// retrieve the event data directly from the requestuest body.
// data = request.body.data;
// eventType = request.body.type;
}
And then the switch case thingy below
dense mulch
Can you redact your webhook secret?
I realize it's only in test mode, but this is a public server
clever sky
ah shit my bad
dense mulch
All good!
Are none of your console logs outputing anything? Like, which one specifically are you looking for output from?
clever sky
None of them are outputting anything
dense mulch
I notice you export this handler function. Are you trying to get this output in the browser console? Or in your server logs?
clever sky
my terminal... Is that not the way to do it?
Last time I worked with stripe was a few months ago and I just copy pasted the file, but I remember it working that way
dense mulch
It's fine either way, I'm just trying to narrow down where the issue is.
Okay, so you have a terminal instance running your server and you're looking at that same server instance for the output of your log lines, yes?
clever sky
yep
dense mulch
Did you add these log lines after you started the server? Like, do you need to restart it to pickup the changes?
dense mulch
Once you restart it and trigger another event, can you post the full output of the command you used? Make sure to redact things like IP addresses and such if those are present
clever sky
./stripe trigger payment_intent.succeeded
Setting up fixture for: payment_intent
Running fixture for: payment_intent
Trigger succeeded! Check dashboard for event details.
you want me to show you the event data from the dashboard?
dense mulch
That's from the Trigger command. I'm looking for the server output when you start it. Like, where is the server for localhost:3000/api/webhook running?
clever sky
This?
dense mulch
Yup. There's no output there when you trigger the event? The issue might be with how the server is being started if that's that case
One other thing, can you open that page in a browser and inspect the console log there?
clever sky
nope, no output... Btw, should it say "completed" under step 2?
dense mulch
No, I mean open up http://localhost:3000/webhook in your browser and inspect the consol log there. Since this is a React app it might be that the outputs are going to the browser instead
clever sky
oh it says the page isn't working...
dense mulch
My hunch here is that the issue is that your exporting the handler to some React code which surfaces it in the client, rather than directly on the server. Can you try creating a route that renders an empty web page when you navigate to http://localhost:3000/webhook ?
clever sky
alright done
dense mulch
Okay, so now you can visit that webpage without getting a "Page isn't working" error?
clever sky
yeah
dense mulch
Okay, and when you open developer console, do you see the logs there?
clever sky
no...
dense mulch
Can you send a screenshot of the developer console so I can see what you're seeing?
clever sky
dense mulch
Is that Chrome?
clever sky
yeah
dense mulch
Hmmmm...
clever sky
indeed 😂
dense mulch
Out of curiosity, where is that webhook handler function being exported to? Like, what does the code look like that's accessing it?
clever sky
i'm using next js, that's just how it works, i have a folder /api/webhook and inside a file called route.ts
dense mulch
This may or may not be helpful, but can you add a log line to your route and confirm where it's sent? (e.g. server log via the terminal instance or browser console log)
Like, just a regular log line that outputs some arbitrary string
dense mulch
Okay, and you added that log line to the route that's defined for your webhook handler? Or did you add it to a different route?
dense mulch
Can you copy/paste the code block that shows all your routes along with the newest log line you just added?
Again, redact things like API keys, webhook secrets, etc.
clever sky
So you want the entire API endpoint?
dense mulch
Just the code from the file that has your webhook route defined in it
clever sky
import { NextRequest, NextResponse } from "next/server";
import Stripe from "stripe";
import { headers } from "next/headers";
export async function POST(request: NextRequest) {
console.log("Endpoint reached");
console.log("event received");
const body = await request.text();
console.log("Event body:", body);
const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!, {
apiVersion: "2023-10-16",
});
let data;
let eventType;
// Check if webhook signing is configured.
const webhookSecret = "mywebhooksecret"; // Update this according to your secret configuration
if (webhookSecret) {
// Retrieve the event by verifying the signature using the raw body and secret.
let event;
const signature = headers().get("stripe-signature") as string;
try {
event = stripe.webhooks.constructEvent(body, signature, webhookSecret);
} catch (err) {
console.log(`⚠️ Webhook signature verification failed.`);
return NextResponse.json({
status: 400,
error: "Webhook Error: Invalid Signature",
});
}
// Extract the object from the event.
data = event.data;
eventType = event.type;
console.log("Data:", data);
} else {
// Webhook signing is recommended, but if the secret is not configured in `config.js`,
// retrieve the event data directly from the requestuest body.
// data = request.body.data;
// eventType = request.body.type;
}
switch (eventType) {
case "payment_intent.succeeded":
const invoicePaymentSucceeded = data!.object;
console.log("Reached here");
// Then define and call a function to handle the event invoice.payment_succeeded
break;
case "checkout.session.completed":
// Payment is successful and the subscription is created.
// You should provision the subscription and save the customer ID to your database.
break;
case "invoice.paid":
// Continue to provision the subscription as payments continue to be made.
// Store the status in your database and check when a user accesses your service.
// This approach helps you avoid hitting rate limits.
break;
case "invoice.payment_failed":
// The payment failed or the customer does not have a valid payment method.
// The subscription becomes past_due. Notify your customer and send them to the
// customer portal to update their payment information.
break;
default:
// Unhandled event type
}
}
that's the entire file
dense mulch
And which log line is working?
clever sky
the first 2, then I get errors because of the headers etc
dense mulch
Okay, that probably would've been the best place to start. I didn't realize you had error output from your server.
dense mulch
Wait, so you get the console log when you don't trigger it from Stripe CLI, but when you DO trigger from Stripe CLI you don't get the console log?
clever sky
yes exactly
dense mulch
You're running the Trigger command from a separate terminal instance right?
clever sky
yes
dense mulch
And your app is using the test API keys from the same account you logged into via CLI when you ran stripe login?
silk nymphBOT
winter wolf
👋 I'm hopping in here since @dense mulch has to head out
clever sky
alright, thanks @dense mulch :)
winter wolf
Is the current stat still that you're listening locally using stripe login but your server isn't successfully responding with a 200 and you're getting errors?
clever sky
yup
well no i'm not getting errors
i'm getting nothing
when I do stripe listen --forward-to localhost:3000/api/webhook, and then trigger an event, it doesn't hit the endpoint
winter wolf
It doesn't hit your endpoint at all? Didn't you say earlier that the first two log lines were working and then youstarted hitting errors?
clever sky
that was when I used curl, not the stripe CLI
If I do:
curl -X POST http://localhost:3000/api/webhook
it works and the first 2 lines get logged (then some errors),
if i do:
stripe trigger payment_intent.succeeded, nothing happens
winter wolf
Gotcha - it's when you literally curl your own server that it works
clever sky
yep
I mentioned it earlier, but just to be sure, should this really not say "completed" under step 2?
winter wolf
I'm not sure what the logic is for marking that as completed, but let's put that aside for now
Can you try running stripe listen --log-level debug --forward-to localhost:3000/api/webhook and tell me what the first few lines of output is?
winter wolf
okay and in a new tab/terminal window can you run the stripe trigger event?
clever sky
:o it worked
winter wolf
awesome!
when you were trying earlier, were you cancelling the stripe listen command by accident?
that would explain why it wasn't working
winter wolf
👍 it's an easy mistake to make - glad we could get it cleared up!