Creating an order in the database with Stripe webhooks - React and Node.js E-Commerce

Watch Part 1 - Stripe Payment: • Stripe Payment Integra...
Full Course: • Complete Shopping Cart...
Sections:
00:00 - intro
01:08 - install stripe CLI
05:07 - create webhook endpoint
15:50 - handling checkout success event
25:45 - create order model
31:26 - save order to database
✨ Join My Discord Server
/ discord
Donate 🤑
📍Donate with PayPal: www.paypal.com/cgi-bin/webscr...
SUPPORT MY CHANNEL
📍SUBSCRIBE: / @chaoocharles
📍Become a Channel Member: / @chaoocharles
📍Join My Fun Channel: / @chaaoo
GET IN TOUCH:
📍 Twitter: / chaoocharles
Disclaimer: This video is not sponsored

[@JulioSCayo]

Thank you very much bro, I had a lot of questions about how to handle the customers and orders data after the payment but didn't find out anywhere with an explanation of that process, you left it very clear for me :)

[@chrisqiuu]

Thank you again sir! very helpful tutorial, it's a miracle I came right into your videos. You are a great teacher!

[@teetanrobotics5363]

bro i see the effort you put in with the terminal, powershell, scoop, etc. I used to do this a long time back. Then I switched to Ubuntu (Linux distro). Trust me life is so much easier and would recommend you too. You won't regret it.

[@ChaooCharles]

Thanks bro

[@UddhikaIshara]

Thank you very much! This was so helpful! Easy to understand! Thank you very much again! ❣

[@supravatsarkar5866]

Thank you so much bro for your effort. I am trying implement stripe payment with webhooks through stripe doc but I not properly understand that in last two day. Now your video clear my concept. ❤from India.

[@toshitsingh7270]

Thank you soo much the videos, I was looking for integrating stripe to a website, it helped a lot. Quick tip for viewers it's ok for the tution purpose but in production check the product price in server side.

[@ankitanand3324]

Thank you for the content. I hope to see more amazing contents like this.

[@abrehamtilahun4820]

Thank you, you help me a lot. please keep going.

[@feevah-fvwrldprod8792]

You are a really good teacher. Thank you❤

[@SurajSingh-lu8ei]

for an entire video I thought my right earphone is gone, then suddenly music played, LOL :)

[@lennoxcharles6092]

Thanks for the Tutorial Charles

[@informationhub7199]

thanks for your content bro..iam happy and subscribed

[@michaelrose1761]

You are good bro. It is helpful thanks.

[@alanye7542]

Thank you so much!!!

[@Manuevaral]

Exactly that's what i wantedddddddd....

[@developedbynick]

The error occurred because you placed the route handler after calling a body parsing middleware. So to fix that, just cut it and paste it before calling a body parser.

[@jacerchetoui709]

Thank you so much, you saved me!

[@bilalahmed4455]

@@jacerchetoui709 where? tell me

[@jeremyacton6378]

you hero. I've been stuck for hours on this issue. you saved me!

[@user-ex8tg3ii5l]

Help please I have a problem with constructEvent it shows me an error No signatures found that match the expected signature for the payload. Are you forwarding the raw request body you received from Stripe? And I collected express.raw({ type: '*/*' })

[@SonThai-cx6jt]

Thank you so much

[@joeyywill1234]

greate video again!

[@ChaooCharles]

Thank you!

[@vishalsolanki9234]

if my stripe listener not in running mode at the the web hook endpoint run automatically by stripe?

[@umairyatoo8490]

I have to integrate stripe in my application. Apart from the "checkout.session.completed" event, is there any other key event that I must need to handle and could you please elaborate the events a bit more, like which one is a must to handle.

[@funnysphere4669]

Thanks

[@lucavera4737]

TE AMO

[@josephuzuegbu7431]

This is the best tutorial. Can i build a fintech app using stripe apis?

[@birdboy4774]

Quick tip you should make your microphone on both left and right channels instead of just the left

[@neeraj_minhas]

Thank you for new earphones , After listening to your video i found one side of it not working , purchased new ❤ thanks

[@vishwachandral5576]

could you please implement a frontend for the user order details

[@barackouma2552]

you can try modifying this const body = request.rawBody.toString(); instead of parsing the whole request body then call the body in the event function instaed of req.body

[@toothless.tarantula]

Nice video, be aware that stripe metadata key value object has per key size limit, could be an issue for large amount of cart items use case.

[@Dhanushsaji]

Do you find any alternatives?

[@tutoring-academy]

Hello, Thanks for amazing tutorial. Do you have github link for this project.?

[@katrinarossi1381]

Thank you for this video! I do have a question- how do we create orders from customers who are not logged in? Then we won't have a userId to pass to create a customer through Stripe. Thanks!

[@listingmaster15]

So before checkout redirect user to login page so then you will always have user I'd

[@dharmeshgohil9375]

Expecting login using gmail, facebook, Instagram using react

[@harshiilllll]

i get error if i add multiple products in my cart, error is that we can not add more than 500 characters in metadata, how do i handle that?

[@ChaooCharles]

Hey, proceed with the course the solutions to metadata I included in the React Dashboard video..

[@ChaooCharles]

Currently you can set the cart to be an empty array and order model at products you set it to just array without specifying the properties..

[@harshiilllll]

@@ChaooCharles cool! i'll check that video

[@LordR123]

Someone have idea how to show customers orders?

[@Dhanushsaji]

The size of the metadata is a problem..do you have any alternatives?

[@devcaand]

You can create a pending transaction on your backend, you need to specify transaction 'id' it could be uuid() and pass as many items as you want in there, really the limit at this point is your db. Then, you pass that 'transaction id' into your payment intent as metadata. When you receive your webhook with "checkout.session.completed", you parse that metadata and grab your transaction id from it. Then, run a function to update that transaction on your backend from pending to success. Likewise in case of error, you can delete that transaction or write a script which will be deleting all pending transactions once they are 1day old or something.
That way you can avoid transferring cart items back and forth and dealing with 500 character limit.

[@Seedley]

Can you post the source code?

[@natnael-oqp5082]

mern stack app with typeScript nextjs graphql

[@narayanthapa6609]

it throws error when i pass cartItems inside metadata while creating a customer.

[@ChaooCharles]

Yeah, pass an empty array.. in the next videos we are using an alternative

[@engineermaxwel6732]

I have question this endpoint secret in webhook should be inside .env or its okay

[@devcaand]

if you deploying it live then better to keep it in the env. If you just playing around in your sandbox, do whatever you want

[@harshitpahuja7186]

i am getting paymentIntentId null

[@spacehuru1023]

is there a way to collect global payments from Kenya as we cannot access stripe here?

[@cowboyuniverse7258]

Do you not see? Read it “For local dev” …

[@NCS8331]

Do you all hear any sound?

[@Kris-to7vh]

15:20 I was able to verify the endpoint by adding these lines:
app.use('/api/stripe/webhook', express.raw({ type: 'application/json' })); //

[@Isaac-eh6uu]

Life saver.

[@devsuthar6795]

bro Thank you so much... Very good Detailed video and Easy To Understand 🫡

[@KristijanStosic]

Hi, I need some help with stripe payment, can I contact you privately somehow?

[@big-jo89]

about the Webhook error i found this to be working for me :
const payload = req.body;
const payloadString = JSON.stringify(payload, null, 2);
const header = stripe.webhooks.generateTestHeaderString({
payload: payloadString,
secret: ENDPOINT_SECRET as string,
});
let event;
try {
event = stripe.webhooks.constructEvent(payloadString, header, ENDPOINT_SECRET as string);
console.log(`Webhook Verified: `, event);
} catch (err) {
console.log(`Webhook Error: ${(err as Error).message}`);
res.status(400).send(`Webhook Error: ${(err as Error).message}`);
return;
}
// Handle event types ....

[@ChaooCharles]

Hey, thank you for sharing

[@big-jo89]

@@ChaooCharles keep up the good work, you're doing great man

[@DividendCompass]

Nice one! This solved it for me, thank you

[@yaaaayeet745]

thanks mate!

[@simmypayyappillyvarghese4801]

I got the issue resolved by using the middleware app.use('/webhook', express.raw({type: '*/*'})) and removed the middleware from the post router