#yen6305
serene nimbus
Hi, this is my code:
CheckoutContainer:
In the CheckoutContainer I am calling the createWebhook function:
// Create webhook
await createWebhook().catch(
(error) => {
setMessage(error.message);
setIsLoading(false);
return;
}
);
verbal lance
Hi there
serene nimbus
Hi
And this is the createWebhook function:
export const createWebhook = async (eventData) => {
try {
const response = await fetch('/api/stripe/webhook', {
method: 'POST',
body: JSON.stringify({ event: 'charge.captured' }),
// body: JSON.stringify(eventData),
headers: {
'Content-Type' : 'application/json',
},
});
if(!response.ok) {
throw new Error("Webook API request failed.");
}
const responseData = await response.json();
return responseData; // Return the response data
} catch (error) {
throw new Error("Error calling webhook API.");
}
}
Okay hold on you are just dumping a bunch of code
serene nimbus
Oh
verbal lance
Let's back up
serene nimbus
Okay
verbal lance
You are trying to verify a webhook signature, correct?
verbal lance
Okay and specifically you aren't seeing the signature in your endpoint
Have you logged out your req.headers yet?
serene nimbus
Yes i have
Can i show you my webhook.js code?
That's the file where I've implemented the code for the webhooks
But when I logged out my req.headers I couldn't find the signature header
verbal lance
No showing me your code won't help yet
serene nimbus
Okay
verbal lance
Okay
serene nimbus
I am also pretty sure that the missing signature header might the problem because I got this error from the server when making a post request to my webhooks endpoint:
AUG 17 15:02:55.13
400
webshop-nextjs-production.vercel.app
[POST] /api/stripe/webhook
No stripe-signature header value was provided.
So to me that looks like there is a redirect occurring
Something like https://stackoverflow.com/questions/75062050/stripe-webhook-returning-308-error-when-calling-vercel-serverless-function
serene nimbus
Oh okay let me try this
I've changed my endpoint to his in Stripe webhooks dashboard
https://www.webshop-nextjs-production.vercel.app/api/stripe/webhook
But i still get the same error 😦
verbal lance
Okay and what does the req.headers log out?
Overall you can't use a redirect with Webhook signature verification.
The request must be sent directly to the endpoint
Otherwise it could be handled maliciously
serene nimbus
Ah, so i really need to prevent Vercel from redirecting when when the webhook event is being processed
verbal lance
Correct
serene nimbus
Ah man
Okay im going to log the req.headers again
So i've tried to change my endpoint to this https://www.webshop-nextjs-production.vercel.app/api/stripe/webhook
And i've also tried this https://www.webshop-nextjs-production.vercel.app/api/stripe/webhook/
serene nimbus
Where can I find the Event ID?
verbal lance
You can grab it from your Dashboard at https://dashboard.stripe.com/test/events
serene nimbus
I don't see an event ID for the above test
Only for payments that have been created, so these events are coming from the payment_intent i believe
So yeah only payment_intent.created events
verbal lance
That is fine as long as your endpoint is listening for those events
I just want to look at any event that was attempted to be sent to your endpoint
verbal lance
How are you testing your endpoint?
Are you forwarding via the CLI?
It looks like your endpoint is only listening for charge.captured at the moment
serene nimbus
No i am not forwarding via the cli
I am testing it by putting console.logs in the post request or in the webhook.js file
and then i look at the vercel server logs
serene nimbus
It looks like your endpoint is only listening for `charge.captured` at the momen...
yeah thats correct
I've only added a charge.captured action
I am using WooCommerce with stripe
verbal lance
Hmm okay but you need to trigger an Event in that case for there to be a POST request to your server
serene nimbus
But now my orders in WooCommerce don't have the succeeded status yet so i want to use hooks
to pass the status
verbal lance
Sure
In your tests what are you doing in order to actually have those logs show up in your Webhook handler?
Are you just sending a request yourself to your endpoint? Or are you actually having Stripe send a Webhook Event to the endpoint?
serene nimbus
Please give me a sec, i am kinda new to full stack development so sometimes i get really confused lol
Uhm
Well yeah i make a post request myself to the endpoint
A post request
Like this:
export const createWebhook = async (eventData) => {
try {
const response = await fetch('/api/stripe/webhook', {
method: 'POST',
body: JSON.stringify({ event: 'charge.captured' }),
// body: JSON.stringify(eventData),
headers: {
'Content-Type' : 'application/json',
},
});
if(!response.ok) {
throw new Error("Webook API request failed.");
}
const responseData = await response.json();
return responseData; // Return the response data
} catch (error) {
throw new Error("Error calling webhook API.");
}
}
Okay yeah that is a misunderstanding
The signature comes from Stripe and Stripe has to send the request
So you need to actually have Stripe create the Event type that you are listening for and then Stripe will POST to your endpoint
You can use the CLI to easily send these Events using stripe trigger
serene nimbus
Ah okay, but the CLI is only used for testing right?
Is this a command stripe trigger that you have to type into the terminal?
verbal lance
Yes both of those are correct
You can also just capture a test charge via the API or your Dashboard as a way to trigger the necessary Event
The CLI basically just does that process for you if you want
serene nimbus
Ah okay,
But I want to test on the front-end but I couldn't find any examples
Because eventually I need to pass the result to WooCommerce
verbal lance
Not sure what you mean by that exactly
Nor am I familiar with exactly how the WooCommerce integration works
As we only focus on direct integrations here
serene nimbus
Ah no i didnt say it correctly
Uhm what i meant is
I understand I shouldn't make a post request myself, stripe should do it instead
gilded cedarBOT