#smokeoX-nextjs-webhooks
final night
flat atlas
Hi there 👋 can you elaborate on the troubles that you're facing?
Ah, one sec, copying context
maiden umbra
I am getting a
Failed to POST: Post "http://localhost:3000/api/stripepayment": context deadline exceeded (Client.Timeout exceeded while awaiting headers)
sample of my code
interface StripeWebhookRequest extends NextApiRequest {
rawBody: Buffer;
}
export default async function handler(req: StripeWebhookRequest, res: NextApiResponse) {
console.log('---------=====---------=====---------=====: ');
try {
const buf = await buffer(req);
const stripe = Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: '2020-08-27', timeout: 60000 });
const client = new MongoClient(process.env.MONGO_URL || '');
await client.connect();
const db = client.db('atlasdb');
const paymentsCollection = db.collection('payments');
const result = await paymentsCollection.insertOne({ payment: req.body, date: new Date() });
const endpointSecret = process.env.STRIPE_SIGNING_SECRET;
const sig = req.headers['stripe-signature'];
let event;
event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);
const eventCollection = db.collection('events');
const result2 = await eventCollection.insertOne({ payment: event, date: new Date() });
res.status(200);
} catch (error) {
console.log('ERROR', error);
return res.json({ error: error });
}
}
Gotcha, can you tell me more about what you did to encounter that error?
Are you using the CLI to forward to a local endpoint?
maiden umbra
yes
CLI is working and hitting the endpoint fine
stripe listen --forward-to localhost:3000/api/stripepayment
and i see this:
023-03-03 11:03:22 --> charge.succeeded [evt_3Mhb4mJ8eV4suAq61SBSU39N]
2023-03-03 11:03:22 --> payment_intent.succeeded [evt_3Mhb4mJ8eV4suAq61D7XU2dY]
2023-03-03 11:03:22 --> payment_intent.created [evt_3Mhb4mJ8eV4suAq61wS0UX0g]
Gotcha, where is the error that you're seeing being surfaced?
maiden umbra
the endpoint itself doesn't do anything inside the try block
and doesn't catch anything either
it just hangs somewherre in the middle of that code
flat atlas
Where at in that section? Did you add logging to see where it stops responding?
Additionally, it looks like you're interacting with your database synchronously while processing the Event. You should not do that. There is a 20-second timeout window for your endpoint to respond to our requests when we send it an event. Any heavy processing should be done asynchronously from you acknowledging that you successfully received the event.
https://stripe.com/docs/webhooks#acknowledge-events-immediately
If we don't receive a response before the timeout we interpret that as your endpoint not receiving the event and queue it to be resent.
https://stripe.com/docs/webhooks#built-in-retries
maiden umbra
interesting
i will try this
ok, it looks like its hanging on this process:
const buf = await buffer(req);
but looks like i need the raw json request?
what is the best way to simply use a raw request? all the advice i see online saws to use buffer
flat atlas
Yes, you will want the raw body of the request. I don't know why that function would be hanging, it looks like it is specific to the Next.js API framework (NextApiRequest), which I'm not familiar with.
I'm not familiar with the best way to get the raw body of a request within the Next framework.
maiden umbra
ok, i found a way to do it kind of, the request no longer hangs, bodyPaser is isabled for the request, and i get this when creating event
type: 'StripeSignatureVerificationError',
raw: {
message: 'No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe? \n' +
'Learn more about webhook signing and explore webhook integration examples for various frameworks at https://github.com/stripe/stripe-node#webhook-signing'
so looks like its still not a raw request, but it is
is there a way to tell if a request is "raw"? like a typeof or something?
flat atlas
That error is usually thrown for one of two reasons:
- The request body is being manipulated before being passed into that function.
- The wrong signing secret is being used.
Since you're using the CLI to forward events, did you set your signing secret environment variable to the signing secret that is displayed when you run stripe listen?
When we refer to a request body as being "raw", it isn't a specific type but rather saying the body has not been manipulated in anyway. No converting to json, no trimming, no adding spacing for formatting purposes, etc.
I typically try to log the request body to try and gauge whether its been manipulated, but sometimes that doesn't work well when logging buffers.
maiden umbra
sojust passing a pure request in:
error - TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Socket'
| property 'parser' -> object with constructor 'HTTPParser'
--- property 'socket' closes the circle
and its a boilerplate nextjs template...not sure how it would be manipulating the request any way out of the ordinary. Stripe integration into a nextjs application surely is a fairly common pattern?
flat atlas
We don't officially support next.js the way we do React, so we see questions about it from time to time but are not familiar with framework.
maiden umbra
the signing secret is correct
flat atlas
smokeoX-nextjs-webhooks
maiden umbra
i don't really know what else to try here
const rawBody = await buffer(req);
const stripe = Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: '2020-08-27', timeout: 60000 });
const endpointSecret = process.env.STRIPE_SIGNING_SECRET;
const sig = req.headers['stripe-signature'];
console.log('sig ', sig);
let event;
event = stripe.webhooks.constructEvent(rawBody, sig, endpointSecret);
and the error:
message: 'No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe? \n' +
I don't either, this is getting into the specifics of how the framework you're using operates.
flat atlas
sojust passing a pure request in:
```
error - TypeError: Converting circular st...
This gives me the impression that your parser is trying to convert to json, but I'd expect you to be able to avoid that somehow.
maiden umbra
I don't either, this is getting into the specifics of how the framework you're u...
nextjs is a massively popular framework for quickly prototyping sites to sell products 😄 I am very surprsied to see a lack of support from stripe
its the standard stack of the indiehacker community, I see a ton of references to solving this problem online but none have worked for me so far
guess i'll have to give another platform a try, unfortunate