🔴 AMAZON REACT.JS Challenge | Day 4 (Stripe Checkout & Webhooks | Firestore | Next.js)

what's going on papa fam welcome back to day four of the five day amazon challenge i'm excited guys this is gonna be so much fun get ready for this you know get your coffees ready because this is going to be a challenge let me know who made it from day one all the way to now because there is gonna be a drop-off only the ones who are not gonna quit not gonna you know afraid to push through it are gonna make it welcome to day four guys let's do this go ahead and comment where you're watching from right now let's do this guys this is awesome we can see jotish says i am not going to quit siddharth natasha sam akeb sai pranay arjun i'm recognizing a lot of these names ben says he's watching from canada right now we've got india in the house we have united states we have france we have a bangladesh we have egypt whoa this is insane guys welcome to day four of the amazon challenge now like i said this is gonna be the big one okay so we already have built on a crazy powerful application yesterday we added in authentication and we added in the stripe checker i don't know we added in the redux checkout portion of the build today we're going to be adding in the stripe checkout functionality firebase and we're going to be setting up our first web hook so it's a lot we're going to be doing a lot today so get ready for this guys without further ado let's jump in juliana says i'm so tired but i'm not quitting that's the attitude i want to see today right so you guys are going to notice we're going to get a decline in the numbers as we go on but remember stick around and push right it's not about quitting and like i said guys if you haven't already reserve your spot in day five remember we're all doing a challenge right now which means there are prizes available so if you want to be and get get yourself a chance at winning that prize first link in the description make sure you go ahead and sign up right now okay guys go ahead and register you know what to do right register and hit the like button subscribe if you haven't already there's so many people watching right now who aren't subscribed so you know what to do guys let's continue on hey we got africa is here with you sonny i love that guys remember like i said we have we do have an official papa fam discord server where you can go ahead and ask uh ask and answer questions and we also have the facebook group now the facebook group has been awesome anyone who's been in the facebook group you guys are insane like the amount of support everyone's giving each other it's what i want to see it's what i love and this is why we do what we do and it's why we're pushing the pop fam to its limits right now this is crazy stuff guys 2 000 members in that group by the way remember share us on your socials to get those extra points and guys remember did you register the five day challenge because day five tomorrow tomorrow is the big day tomorrow i open up the doors to our flagship course we're gonna reveal the winners of the secret challenge we have an exclusive surprise for every single person who registered and turns up tomorrow so do not miss it it's going to be so much fun it's just going to be like one massive party okay guys and remember we're going to go through the ultimate full stack roadmap okay so we're going to go show you how you can take the skills that you've learned throughout these days so i hope you've learned a bunch and if you have smashed the like button right and we're going to go ahead and show you how you can take that to go ahead and land your dream job so guys let's continue on first link in the description sign up i'm waiting you know what to do guys get the energy up sign up and remember like i said the prizes diamond mentorship three platinum boot camp experiences and 10 winners of 50 of our platinum experience so this is huge this is the biggest prize funnel we've ever done it's gonna be so much fun guys and on day five like i said we're opening the doors to our flagship course right and this we're gonna be offering something we have never offered before and it's only gonna be available in that session tomorrow so like i said sign up and be there okay guys this is awesome stuff point systems one point for sending a message two for sharing on socials three for helping someone with their homework four or four referring someone and five for anyone who has done their homework all right so motivational relaxation says hard day but fun time that's what we're doing guys it's hard but it's going to be a lot of fun right so like i said you must be a part of the facebook group submit your homework like we showed you but let's go through some of the fun stuff right so some of you actually pulled through right it was crazy i thought to myself i was like you know what i am challenging them here it's not an easy build let's see how many people do it and i was blown away by the response yesterday's homework was to build the checkout page with redux that means you're going to have a checkout page where you can add items to your basket remove them and so forth and i also set a bunch of you know additional challenges i also set a task to implement your google sign-in with next auth authentication okay so that was an additional task i went ahead and threw on top of that so yeah guys it's a big amount to go ahead and check in um but yeah we received over 300 submissions i couldn't believe it i was like you know i said to jay i was like jay maybe i'll be happy if we get 60 but we had 300 which means people are watching these videos afterwards jumping in the challenge late let me know if you jumped in the challenge late but you are committed to crushing it right let me know right now this is incredible to see we have shops right here sunny's on fire we have tara news saying what's up blue octopus is back what's up shoprise hello guys how's it going i love to see all of you back and watching again okay as usual you guys killed it so we're gonna go ahead and review some of your homework builds okay remember if you see yourself right now shout out right you're gonna get you know this is your time to shine you guys deserve this let's have a look we have yap yi kang came in clutch followed everything down to a tee looked amazing great job brother and uh also been messaging me on instagram i love that i love the you know the engagement all that sort of you know positive energy so thank you well done juliana absolutely crushed it looks great she actually had some flags sort of at the top right there so i'm guessing his internationalization looks amazing well done fatima mohammed nelson colin again both of you crushed it with your builds if you're watching right now you know what to do make some noise and awesome job guys we have a worthy jana rogers good stuff again followed all of it like they had to do for the homework and they crushed it right and guys the extra 10 points these ones are insane are you guys ready to see who crushed it and got the extra 10 points look at this i can't even believe like how crazy these are i loved this build by jm cleary sorry if i pronounce it wrong dude but check this one out guys firstly we've got this lovely animation right so as i hover over everything it's got such a nice animation and then boom this is so clean look at the top right that is so clean there's an animation which basically goes ahead and it stacks it even stacks so if i spam it it stacks up on top of each other so when you add an item to the basket boom and he didn't just stop there he added quantity to the basket which does work yes it does and if i go ahead and add three and remove he actually removes the entire item with a slick animation you killed it man you absolutely killed it and if you're watching right now i think it's jm ninja oh yeah it's jay and ninja absolutely sick job dude i loved your build and uh that's that's awesome incredible incredible stuff man let's check out the next person dash santosh you guys i had to feature it again right he went above and beyond he actually oh james ninja says it also works on mobile i didn't expect anything less dude amazing stuff dash santosh as we saw yesterday look at this like animations everything redesigned from the ground up if we go ahead and add a bunch of stuff to the car we can also bookmark so you can see the bookmark item came in here and also if we go to the cart you can actually add additional things he's even got sale prices how sick is that right and then you've got the ability to remove from car and i love this custom screen everything is slick that is crazy dash santosh you are killing it dude and uh i really honestly i was impressed by this one uh this one actually took me back a bit i was shocked when when jay showed me that one roman loco i'm not gonna pronounce it right i'm sorry dude but you went ahead and did something very unique so you went ahead and added so you've done all the adding to item basket functionality but what i love here is he's grouped it by the category so here we've got men's clothing but let's go ahead and check out a few other things right so let's go ahead and add in like say woman's clothing uh some electronics so you see the categories over here and jewelry and check this out guys it's actually grouped in your basket by the category so if i go ahead and add another item to the basket he's then got quantity so that's awesome i really love that if you've already done the work for the quantity i would have loved to have seen a little you know a plus and a minus here but dude amazing job looks clean as hell i love that and uh yeah awesome awesome amazing stuff we have the final one khalid amazing redesign okay so let's check out khalid's build we've got nice little animations we did have oh there we go oh nice oh wow this was new i didn't see this one earlier that's oh that's slick that is slick look at this guys that's super clean i love seeing this and look he's even got is this gonna work let's have a look oh it does it does the filtering does actually work amazing job dude and look he's got different colors being assigned to each one so if i was to go ahead and click on the yellow it shows that that's sick well done dude i love that look check all products i wonder what that one is if we click add to basket add to basket and there we go we got a basket we've got the uh you know the addition minus buttons if we remove it okay you can remove it like that but if we hit the minus there it doesn't get rid of it so a little addition remember ux is everything but incredible job well done man that's that's honestly good bloody job people this is looking incredible super proud we just broke 200 viewers watching right now this is awesome guys we are literally we just almost about to beat 150 likes keep on smashing that like button if you're enjoying this right now and uh let's carry on guys the papa fam community is on fire lately right so like i said there was points for helping each other right and you guys are killing it right look at this we had loads of questions or some about you know the sort of you know parameters that were going into reversal i saw you guys helping each other out and what i've done is every time i kind of see something and if i haven't don't worry but i'll go in and i'll like or i'll heart the comment that where i saw somebody help someone else if you have seen me do that then shout out to you because that's awesome on you right i see loads of different help and sort of you know sort of questions and answers and you can see i love it when somebody gets that satisfaction where it help you know they've conquered their problem they were probably facing for ages it's incredible right looks really really lovely and and guys like i said so much love during this challenge right now and uh and you guys show me so much love so this is some awesome you know i always read your comments but i always want to take a second out to appreciate it and tell you guys that i you know i wouldn't be here right now if it weren't for you guys so awesome stuff but guys we've already done you know we've done a lot of the sort of homework checking and all that stuff but now it is time to focus okay it is time to focus it is time to get a bit serious right now and what i'm actually going to do is i'm actually going to go ahead and start off a little bit suspenseful right it's day four and this is gonna be the tricky build okay i'm not gonna lie to you all right if you thought the days you know one and two are a little bit tricky this one is the one where i'll say you're challenging yourself so do not quit right you're right at the finishing line and what makes you different from every other developer out there is if you make it to that finishing line despite what bugs you're gonna face along the way so use the facebook group use the discord make it happen and do not quit until you reach the finishing point today okay let's go ahead and see what we're gonna be doing today check this out guys all right so today we're gonna be building the strike payment right so this payment screen a custom web hook which allows us to then push data into a database and then all of the ui for the your orders page all of that is happening today all right i'm going to give you a quick demo and like i said before if you haven't already first link in the description make sure you sign up for tomorrow tomorrow is going to be huge it's going to be the biggest part about this entire challenge so make sure you're there sign up first link in the description all you have to do is click save my spot literally we have less than a day left now guys i'm going to show you a quick demo of what we're going to be doing today okay so i'm going to quickly sign into my account let's go ahead and quickly sign in right now hopefully it works oh this is getting tense is it going to work let's go ahead and hit sign in right now i'm not showing my screen because i'm quickly signing in okay let's go ahead and do this right now okay oh two-factor authentication it's kind of dragging it out but we're good we're good keep it a second and let me know which part you think is going to be the toughest right which part do you think is going to be the hardest about the build today so we're going to go add some items to our basket click on the add and then we're gonna click on proceed to checkout and this is what you're gonna have if you get it all working okay so if you keep on pushing to the end of today so i'm gonna hide the details for a sec here you can enter anything pretty much because it's dummy details so there we go i'm just entering in some details the test card details whenever you're doing stripe is four two four two okay so this is the moment of truth is it gonna go through is it gonna trigger a custom web hook that you guys are going to build today okay so this is going to build a stripe and we're going to build a striped check update and this is going to trigger a stripe web hook and if it does i'm going to get the energy back up in this way so here we go nice awesome okay and now what we're gonna do is we're gonna click on go to my orders and boom there's the order that i just placed okay i don't know i've got a habit of placing the same order apparently but yeah that's what we're going to be doing today okay i i was trying to get everyone's you know get your heart rate up a little bit julianna's like oh my god i'm worried now but don't worry guys i'm just giving you a little bit of a you know a freak out it's going to be a lot of fun okay i'm going to break it down for you but like i said we're going to have all that functionality in today's build so we're going to be carrying on from yesterday so if you haven't finished yesterday's work don't worry just watch along you're going to learn a lot just by watching and if you do want to participate then feel free to follow all the videos up until this point and like i said do not freak out do not quit main thing is don't quit okay quick water break and then we're going to go ahead and get started for today's build i love looking at these comments oh avnish says i bought two jackets from your store hell yeah dude that's what i'm talking about honestly you repping that papa fan much anyone who says i don't know what a web hook is i'll explain what a web hook is don't worry once we get to that point i'll explain what we're doing okay so let's go ahead and jump in guys right we're gonna go ahead and start the build off today so this is where we left off in yesterday's a build okay so we pretty much had all the authentication happening so we don't have this screen in yesterday's build we simply had the ability to add items to the basket we had our authentication flow and then we had this screen right here so i'm gonna hook it up so that one that way when we press proceed to checkout it goes ahead and creates a stripe session okay so i'm gonna show you guys what we're gonna be using so it's called stripe session checkout okay so this is what we're going to going to be using okay so it's actually going to be called a stripe checkout now you guys can feel free to look at this website i always love to show you you know what the actual sort of reference is to the place that we're looking for right and again if you guys are excited smash the thumbs up button let's push past 200 to get this video started off and we need to get this video spread out so that way everyone can learn and benefit right so this is what we're actually going to be doing so you see that page that we landed on earlier right you can go ahead and theme it as you want but that page belongs to stripe okay so that's actually a page that they build right what we're doing is we're passing when we have items in our basket we click checkout we pass the items from our basket to stripe stripe then returns to us a checkout session and then we redirect our user to that session the user fills out their card details all of their address and all that good stuff and then once it goes through it it can either succeed or it can either you know fail or be cancelled in which case we provide the urls as to where the user's going to go after but they're going to get redirected back to our website after that so you see what actually happens they start our website they get redirected to stripe and then they come back to our website after the payment's done that's how it works okay so rivan says hey someone was busy with work from two days sap all day today completed day one and do day two awesome stuff man i saw so many views just it blew up on views so incredible incredible stuff juliana says can you show that page again please yes it's this one right here stripe checkout okay so you can go ahead and pretty much click accept the payment or have a look yourself but i'm going to show you guys a quick rough intro as to where you can begin if you get stuck this is the reference to the stripe documentation that you can follow but i'm going to dumb it down and you know make it super simple but this is basically what you can follow and all you need to do is click on react for the instructions and then pretty much follow it along now you're gonna see different parts where you're gonna see things like server side or client side bits of code right so let me see if i can show you and you also when it has the example make sure you click on node but wherever you see node that's actually back-end code and wherever you see react that's actually front-end code so i'm going to go ahead and make it extremely clear but i think the best way to show you guys is pretty much to go ahead and just start okay so the first thing we need to do is go ahead and install stripe so this is the command that they're telling us to do i'm not using npm so i'm going to go ahead and click the dependency go to my code hit command j to bring up my terminal and then instead i'm going to do yarn add stripe okay so this will go ahead and pull in the stripe dependencies into my project okay so now let's give that a second while that's loading up what we're gonna do is we're gonna go ahead and check out the rest of what's going on okay so let's see what's happening right now okay now guys we're about to break 200 likes we are so close let's keep on going all right so you see here we need a checkout button now we do already have a checkout bar but no it stairs has a row of link right so this is always good to have the correct syntax so what we're going to do right now is go ahead and add in that missing syntax i'm going to go to my checkout page like so i'm going to hide this terminal now because it's already installed and then you see we've got the button which says proceed to checkout so i'm going to go ahead and add in the row of link to this button okay so you should always be syntactically correct right and then that's going to help you out so this is going to be you know your seo needs to be on point as well um and seo if you don't know what that is that's your page ranking in google how you basically get you know pushed up in top of the ranks right it's that way people actually land on your site okay so that's the first thing right we did that the second part is you see we have another dependency called stripe and stripe.js now the good thing is is that we don't actually have to you know worry too much about installing dependencies on client side or server side um because next year is kind of you know it covers everything right and i'll explain as to what i mean by that but it keeps it very simple when we're installing our dependencies and the way that we're going to do it today is all we have to simply do is go ahead and copy at stripe forward slash stripe js okay so we're going to copy that open command j oh we just broke 200 likes let's go guys keep the energy up that's what i'm talking about we have 250 viewers right now across platforms that's awesome i'm going to type in yarn add stripe forward slash stripe js okay so we added in stripe and then we also added in stripe four stripe js they're not the same the two different things right so you see if you're using node.js on the server which we are you need to install both the stripe and stripe.js packages all right so you see stripe is used on the server side and stripe stripe.js provides methods for client-side right so i'll explain what's going on there and we'll make it super simple in just a sec okay so the first step is we need to go ahead and configure our sort of front end code okay so we can hide this with command j and then what i'm going to do is go ahead and actually pull up my localhost so i'm going to go ahead and say localhost okay there we go let's go ahead and pull up the localhost nice wait a second let me go ahead and actually pull this through right now right there we go this is looking great we have our local host up so what i'm going to do is i'm going to pull this one over onto this side so that way you know we can have our nice little coating set up in place okay great let me move the music a little bit there we go all right we'll get into a little flow state together guys so now if i go ahead and add some items to the basket there you go you can see it's all added then and this is where we want to be to so when i click this button now i want to do something and i want to go ahead and create a checkout state all right so i want to go ahead and create a checkout state to restart button should have been um sort of you know should have been checked out but that's fine all right so we want to go ahead and create a checkout state when this button is um uh yeah when this button is pressed so the way we do it is we need to create an on-press function on click sorry function okay and this on click function needs to go ahead and trigger off some kind of you know some kind of create checkout session uh function okay so what i'm going to do is i'm going to go ahead and create a function called create checkout session so i need to go ahead and create this so i'm going to go to the top i'm going to say const checkout create checkout session and then we have our function so remember like i said guys the way it works is we the user clicks proceed to checkout then we send the basket items and a bunch of other information over to stripe right now how do we do all of that i'll show you how we do that but we need to go ahead and send it over to stripe and then it will create a session and then we can go ahead and redirect the user to that session okay so i'm going to show you how we can do all of this stuff so the first thing we need to do is go ahead and actually at the top of the page we need to have something called a stripe promise so i'm going to say construct promise equals load stripe right i need to import that from stripe for stripe.js and what we need to do here guys is we need to pass in something called a public key okay so we need to install something called a public key and what the public key is voice is our public key which means it can be visible to everyone else but we're still going to store it in the environment files and that this public key is going to be used to get access to our stripe account okay so i'm going to go ahead and reduce the music a bit because this one's going to get a little bit more intense so we're going to go to our environment.local okay and inside of here what you need to do so this is available in the starter template but your keys are going to be different to mine but your public key is the one that needs to go here okay so what you need to do is need to load on uh login to stripe so i'm just going to log into a stripe right now stripe is a payment process that we're going to be using today if none of you have ever heard of strike before what's up samba right so none of you have ever heard of stripe before it's an awesome payment platform and you can see it's a it's a great way to accept car payments if you're wondering who is used by deliveroo booking.com xero a lot of amazing places monzo that like it's huge especially in the uk it's massive um so we use stripe all over the place okay now i'm going to click on start now and i've actually already got an account for stripe so i'm going to go ahead and hit sign in right so i'm going to quickly sign in but you can go ahead and create a free stripe account and it won't take long it should you should just need to go ahead and enter into a few basic credentials but i'm going to go ahead and log into my stripe account right now just give me a one second and then i'm going to go ahead and show you what you should see there's going to be an option to create a new store okay so all you need to do is go ahead and create a new store it's completely free and uh simple to do that and then um give me one second i'll show you how you can get the credentials uh once you are logged in so i need to do one of those little capture tests right guys let's spot the traffic lights then you all love this game i'm not gonna lie it kind of gets on my nose but yeah you know it's all right is let's go ahead and see if i'm in the correct one so once you've already once you're inside you want to go ahead and go to the top i've got a few different ones but you're going to click on new account i've already got one i'm going to go ahead and go into my amazon demo so this is the one i'm using today the amazon demo okay now once we are in here okay what we're going to do thank you so much samba for the positive comments right we've got knack coming back for the fourth day and um what's the command to create the import line please all right which import line are you referring to i'm not sure but the import the command is this one here i mean that might be the one um okay let's carry on right so and that's actually an automatic thing so as i type that in i'm wondering if that's what you meant so as i was typing in load stripe it automatically pops in that's just built into vs code okay and then you hit enter and but if it doesn't come up don't worry okay don't get don't rely on that as a shortcut but uh it's probably just a local problem okay so now what we need to do is you see the publishable key down here right but the place where we're all gonna find it consistently is if you go to developers on the left and then you need to go over to api keys okay this one so publishable key is our public key okay this is because it's the one that we can allow to be published we don't care about it being shown right so i'm going to click on copy so this is the key that i care about right now okay so i'm going to go ahead and go back to my code and i'm going to go to my environment file and i'm going to go ahead and paste it in there right like that okay so you've got primary key and then you can test it out right so you've got the stripe public key like so and what i'm also going to do is i'm going to grab my secret key okay so i'm going to go ahead and click reveal right now and then i'm going to copy my key that popped up so it's a very simple copy and i'm going to go into my secret key area in my environment variable and then i'm going to paste it so i'm going to show you a little section of it so it's fine okay so now you can see i've got my public key and i've got my secret key okay so this one here right so that looks pretty good now we don't need to worry about the signing secret yet okay so this is still everything is looking pretty good so this gives us access to our stripe account now so we've got all of our keys set up so now i can save this i can close the environment file and i'm going to go ahead and open up my uh localhost 3000 once again all right let's go ahead and carry on okay looking good guys we're looking great we're nearly at 300 likes let's keep on pushing right so now what we're going to do is we have our load stripe so what i'm going to say is process dot n dot stripe okay and it's going to be underscore public underscore key okay so this was actually referring to this one over here right so stripe public key okay oh actually oh oh actually so what we need to do here is for this one but only for the stripe public key can you notice how i'm not using uppercase here right so for the key that i need to be public there's a special way that i need to pull it into our next js right so the way i need to do is go to my next config.js and inside of here just for the public key okay i've stressed this point enough right i can't stress it enough you do not put private details inside of your next config.js because i know so many people are saying this do not put your private secret keys in nextconfig.js because it will be exposed publicly to the web okay so you don't do that here we're going to say environment oops environment and then what you do is you say stripe so this is the one i'm using so stripe underscore public underscore key and then in here we say process dot environment dot stripe and this is the capitalized one stripe dot public key so do you see what we're doing here right we're actually feeding so remember our environment file is located here okay and then what we're doing is we're using a variable from there to feed it into our next.js config this gives us an xjs environment variable could strike public key and it correctly exposes it on next.js that's the way that you have to do it okay so go ahead and hit save and we don't care because this is a public key it's a publishable key it doesn't matter right so with that bit said we can go to checkout.js and now i will have access to the stripe public key okay so if you try and use the capitalize one it's not gonna work all right so you have to be careful with that okay so now what i'm gonna do is go ahead and do command j and i'm gonna go ahead and actually restart my server in this case i wasn't running the server but i'm going to go ahead and restart my server again so i'm going to say yarn run dev i actually had another build running okay and now there's a few things you want to look out for here okay you want to see that it loads in some environment files if it doesn't you need to go ahead and make sure that works right and then the next thing you want to do is make sure you your tailwind is kicking off if your tailwind is not kicking off go into your tailway config file and hit save hit save on that and then you should be able to see in just a second uh there you go you have enabled the jit engine shiva arati thank you so much for that lovely donation coming in clutch already with the donations okay awesome stuff so now we have our connection to stripe initialize okay so this right here we've got stripe promise over here so now what we're going to do is we can use the stripe promise so i'm going to go to the checkout page so checkout.js okay and then i'm gonna go ahead and i'm gonna go ahead and cut that off there we go nice so now inside of the checkout page what we're gonna do is i'm gonna go ahead and say const i'm gonna say stripe equals a weight stripe promise okay so here i'm saying await stripe promise and what this is going to do guys is it's going to go ahead and pull in a stripe variable that i can use right to go ahead and do what i need to do okay so this is gonna asynchronously load it but we have to load it in this form otherwise you don't you don't wanna have this inside of your render otherwise you're gonna load tons and tons of stripe instances okay yeah sorry about that we're gonna hide the terminal uh upbeat thank you for that dude so now what we're going to do is we're going to go ahead and get our instance and now we've got access to a stripe js variable okay the next step is to go ahead and say um call your back okay so the next end is going to go ahead and call the back end to create a checkout session okay now what back end are we talking about this is actually our own backend that we need to now go ahead and create okay so first thing we're going to do is hydrate right so quick little hydration right now before we get started in this right now we're going to go ahead and actually create our first api back-end endpoint okay if anyone says this isn't a full stack build you tell them to shut up that's this is an api endpoint we're about to build okay and what we also need to do is because we're using a weight here i need to chuck in an async okay if you chuck in in a weight without an async it will not work right so jm ninja good uh good catch dude all right so now what we're gonna do is we're gonna create a uh checkout session now how do we do this okay so striper quite strict about this we need to go ahead and actually have a specific endpoint so inside of api so here are our pages right i'm going to close everything that i don't necessarily need and now here you've got the pages now pages is where we have all of our stuff so we have index checkout page but we also have our api okay so where we have the api over here we're going to go ahead and hit this and then inside of here you can see it's a little bit messy but you want to make sure you just click on the api and then click add new file okay now here what i'm going to say is i'm going to do create dash checkout dash session dot js okay so this is going to be the back end the sort of uh the sort of back-end endpoint so the endpoint here is actually going to be you see it's not inside the auth folder it's inside the api photo so pay close attention to this okay um so and now we're going to go ahead and and if you if you have to make a call to this the call would literally be the host name forward slash api forward slash create checkout session okay so it'd be something like this create checkout session so you can basically fetch from the endpoint now okay so how do we then go ahead and create an api endpoint well stripe well next year's actually make this quite easy for us okay so all we have to do is go ahead and do the following so if you've ever worked with express or anything like that you'll be pretty familiar with what's happening with this one but this is actually all you need to actually say that this is an endpoint in xjs okay so let me go ahead and make this actually a bit bigger right now because it's actually super small right there we go right so we've got the asynchronous uh sort of a function over here right so this is going to be what what is going to get called when we hit this endpoint okay so does that make sense so far okay so now what we need to do is go ahead and again initialize our stripe endpoint okay so remember here we have a backing code anything underneath api is a backend code okay so anything in this folder right anything inside of this folder api is backing code anything inside of pages which is not inside the api example this stuff and like index check out this is all going to be front end code okay so this is front end code not backend code okay and then api is back in code right so that means it's running on the server now what we're going to say is we're going to say cons stripe equals require and then here i say stripe so we're going to use the stripe dependency and then i'm going to also go ahead and add another parenthesis and this one is going to say process dot environment dot stripe secret key so remember we had two keys that we set up the public and the secret key so here we're going to go ahead and do the stripe secret key okay now this one we don't mind showing here we don't have to load it in a special next yes way this is because it's a secret key and it's only loaded on the back end which means it's never going to get exposed to the user's browser okay so that's why we can go ahead and be sure that this is okay all right so now what we're going to do is we're going to go ahead we've got our stripe object here now we need to go ahead and firstly we are going to need a few things from the sort of request right so we need to actually like i said we need to pass all of the items from the front end to the stripe checkout session and like i said guys if you haven't already sign up for tomorrow it's going to be huge day five of the event make sure you reserve your seat because i'm going to be closing that webinar very soon so that way we have a reserved seating for everyone who turns up tomorrow so yeah make sure you are there guys uh so sign up to see first link in the description okay so let's carry on what we're gonna do now is we can use the stripe sort of api to go ahead and create a checkout session but i'm going to need a bit more details at the moment all right so what i'm going to do is i'm actually going to first install something called axios right so axios is something that we're going to use so we've actually fixed this issue so we can get rid of that but we're going to use axios now axios is how we're going to make our sort of network cause so i'm going to say yarn add axios okay and um let's focus so you can see upbeat says done nice stuff ahmad sadiq what's up all right so you're on axios now we've got axios installed okay so what we need to do now is actually make a request to this endpoint okay so right now it doesn't do much but we're going to super up so it has a little bit more power behind it so what we're going to say now is we're going to say okay const we're going to create a checkout session because remember we want to send the user to one of these stripe checkout sessions okay i thought it says yo access one of my favorite libraries yeah it's an awesome library for making requests um now we're going to say await right and here i'm going to say axios dot post because it's a post request whenever you're doing any kind of api work you need to make either a get post put update there's different types of api rest requests the one that we're going to be doing today is post okay so we're going to be pushing some information up with the request and firstly we need to specify what the url is that we're making the request to in this case it's going to be forward slash api forward slash create checkout session right so this will go towards this endpoint that we've created okay so we're creating a little endpoint here this is some full stack development we're happening right now we're going to hit a comma inside after the url and this is basically called the body so when you make a post request it this is where you push some data up with that request okay so in our case what i'm actually going to do is i'm going to push up some stuff so i'm going to push up the items and i'm also going to go ahead and push in the email because i want to actually have the user's email as well so i'm going to say session the items is actually going to be directly linked to this so we can go ahead and just do items items oops uh let's do this items items and you can shorthand that if you want and then here we're gonna say email is session.user.email okay looking good guys right so this means we're going to basically make a request to this backend endpoint check out oops little typo thank you so check out uh create checkout session then here we're going to pass in two variables the items and the email right so this is super important right now okay so we're going to go ahead and make this request and then what we're going to say is when we get the request how do i access those items that i pass through right to access those items what we can say is we can go ahead and it's actually part of the request dot body so i can do something called destructuring so i can say destructure the items and the email out of what's up cesar dev good to see her and then i'm going to say out of the request dot body so this is going to go ahead and pull out the items in email from a requested body it's the same thing as saying dot items and dot email okay it's the same thing as doing that but we're pulling it now into two variables i can use further down okay so this is how i get those little variables and to prove that that works what we're actually going to say is console.log items i'm going to say console.log email right and i'm going to show you how you can test this one out yourself all right so now this is getting triggered off when we hit create checkout session create checkout session is hit triggered on the on click right thank you ajit appreciate that dude he goes joining amazon as a software developer thanks to your video that's incredible dude amazing stuff right um thank you knock as well for explaining that okay so i'm gonna go to the amazon so i'm gonna go to my home screen and then i'm gonna start adding some items to my basket let's go ahead and add a few things click my basket and i'm gonna go ahead and open up my terminal okay and then what i need to do is obviously i need to sign in first so i'm going to go ahead and finish my sign-in flow so let's go ahead and quickly sign in so i'm going to go ahead and just knock out my sign-in it might have to do a quick two-factor authentication okay all right we're almost done and then yes i do have to do much factory authentication okay better to be safe than sorry if you don't have two-factor authentication make sure you start enabling it okay so awesome stuff so now i'm actually logged in so i'm going to go ahead and add a few things there we go add add boom click on basket and now we can see proceed to checkout so i want you to pay close attention to the server that's running here right so this is where our server stuff is running so the logs on the back end actually appear here so if on the front end is my checkout and the back end is my checkout session so what i'm going to do now is i'm going to go ahead and click that button so i'm going to click the button and that should trigger create checkout session which should go ahead and make a call to the back end right and then what i'm doing on the back end is i'm just console logging so here i should see a console log when i click proceed to checkout okay so boom there you go i get a bunch of stuff right so if you see this i get the email which is the second part console.log email and then on top of it i get all the items well these are two items you see it's an array with an object inside so these are the items they're getting pushed over to the back end okay very important stuff that you understand this right now okay so that's looking pretty good at this point you can test it like this great great great okay so let's go ahead and then close our terminal so that's a good way of debugging if you ever get stuck and you know if you're not sure that you're pushing it to the back end correctly all right and somebody just says i completed the linkedin clone that's awesome okay so now what i'm going to do is we actually have to prepare our items so we can't just push in the items over to you know stripe it doesn't just accept any old items they have to be of a certain format because imagine think of it this way if stripe just accepted everyone on everyone's items how the hell would they know where the name is where the title or the price of that object or where it is in that object that's getting past them so it has to be in their format okay so i'm going to show you a nice little transformation that you can do which turns the array that you just saw into the one that we need to transform for stripe okay so i'm going to go ahead and show you that how you can do that right now so the way that we transform this is we say const transformed items transformed items and this is the part where most likely i can guarantee someone is going to write a little typo even me all right and this can cause a few problems so really take your time with this right now okay so here i'm going to go ahead and say enrique what's up because hey sunny thank you so much for your tutorials it's much better than all the courses i got dude i love that make sure you're there tomorrow because i have a big surprise for you man it's first link in the description i will see you then man all right so here i'm gonna say dot map okay and then i'm going to go ahead and say so open this up and i'm going to say for every single item i want to do a return so be careful here guys so you see i have just have i've open a closing parenthesis but now i'm going to do is i'm going to add in parentheses and then add in curly braces and then i hit enter okay so this is doing something called an um implicit return okay so what we're going to do here j says intense is getting intense guys so here what i'm going to say is a price data so this is actually what they expect from us inside the price data so what we're doing is we're going through every item and i'm basically returning it back in the object so what i'm doing is i'm taking every item and i'm kind of like shaping it into the item that stripe expects and then throwing it back into an array okay and that array is called transformed items so now i'm going to go ahead and say the price data i'm going to say currency is gbp okay uh you can change that to whatever you want but make sure you keep it consistent i'm going to do location gpp sorry and then here i'll say product oops product data right so if you do change that number uh that value remember it has to be it has to sort of you know be allowed from stripe send okay so gbp is one of them usd is another one and i'm not sure about the rest but you know you just make sure you check up the values i think it will come up if you actually input an incorrect one the next bit of information we need to do is product data okay so here what i do is actually pass in something and here i actually need to do two things first i'm gonna put a name okay so i'm gonna say a name is going to be item dot title okay and i see people asking is it possible to add in this i didn't know guys make it work first and then you know commit your code and then kind of try and improve it because trust me if you mess up something here you might get stuck in a little bit of a rabbit hole okay so we've got name item title and then here i'm going to say images colon and then here we actually need to pass in an array but i only have one image so it's going to be literally an array of one thing so here i say item dot image because images expect an array okay so that's how we do that and then what i'm going to say is i'm going to go outside of my product data okay so outside the product data and then where are we on the same level as the currency so in fact what i could do is i could put it up here i can say unit underscore amount right now in stripe they take every currency in its sub currency which means that if i'm talking about pounds it's going to be in pennies and if i'm talking about us dollars it's going to be in cents right so what you can typically do for pounds you take your total and you times it by 100 because there is 100 pennies in one pound right so whatever your sub currency is you just have to do the conversion in our case it's pretty simple you just go ahead and um you simply go ahead and times it by 100 so here we say item.price times by 100. okay so it's looking pretty good guys and then what we're gonna do is we're outside the price data right now okay so outside the price there what we can do is and i can actually put this above here to be honest it'll make it easier for you we can say description right so it's gonna be the description it's gonna be item.description okay and then we're going to have quantity and this is going to be one now if you have implemented right you know that sort of you know the quantity difference or selections this is where you have to be careful right now i just have a flat array and even if i have two items they're going to be separate objects in that array hence each one will have a quantity of one if you add some logic in which you groups things together make sure you account for it here okay so just take that and bear that in mind when you're doing this so here we have a quantity of one so it'll map through every single one and this is the new shape that we need to have our sort of items in so transformed items now should look great right so this should be in the perfect shape that we expected it in that's pretty good right so the next step is i need to communicate with stripe to say okay here's my items create the checkout session all right juliana says i'm amazed by this project wow thank you so much okay kjs says thank you so much which this tutorial can change our life thank you so much that's honestly amazing right so here what we need to do is we need to go to and we say const session equals await and here i'll say stripe dot check out which is the checkout sessions that we're using so this is all checkout sessions if you noticed here i was accepting a payment and it was checkout sessions so add a checkout button and so forth so that page that you're looking at right there that's a checkout session okay so here we say stripe.checkout.sessions.create okay and then here you pass open parentheses and then open this the curly braces okay now once we've got this open a few details need to go inside of here okay 300 likes that's what i'm talking about we're not even talking about life but with that said a little bit of a water break amazing stuff guys thank you so much i love it when we hit the milestones it helps pump us up have a quick water break and let's do this together wow it gets it gets super thirsty when you're concentrating all right let's carry on guys so concession equals awaitstripe.checkout.sessions right so now what i need to do is go ahead and actually pass in a few different things now if we go down here i think they have it so you can see roughly the same formatting and so forth um so you can hear as you can see here right so they have an example at the bottom of the page where you can see a few different things that they're expecting right so something is payment method types card and then you've got a success url and a cancel url now think about that very like carefully right what's happening there if you come out of the checkout session so this session and you complete your payment it will redirect you from stripe it needs to know where to go right if you don't tell it where to go how the hell does stripe know where to put you right so that's the success url the cancel url is if anything goes wrong or if you cancel it so if you click back where do you where does stripe send you back to okay so really be careful about that uh upbeat the uh please don't spam but because you've been awesome so far dude but the link for the website is i think if you're asking for paparazz.com or just you know be careful with that so now what we're gonna do is we're gonna go ahead and add in the following so the first thing we need to add in is the payment method type right so types and this is an array and we're going to accept card payments right so you can go ahead and look into what else you can add in right that's the first thing and then what we're going to do is we're going to pass in the line items right line items is all the objects that we are going to be having on that order right so in this case we've already transformed them already for us so we can go ahead and just say line items is the transformed items really pretty simple right the next thing we're going to do is we're going to say mode is payments we have to tell it a special mode and this mode is we're trying to make a payment okay the next thing we're going to do is we're going to go ahead and give it a success url okay so we're going to say success underscore url okay now here what i'm going to do is use backticks right so this part is very important as well this success url think about it it changes right so if i'm locally developing the yeah there's a huge um i'm just trying to check what's going on here um yes you can actually go ahead and change some of those things but we're gonna you know we're gonna touch about the security things that's a different topic right but right now the success url so if you have your sort of if you're developing on a local environment it's gonna be localhost 3000 forward slash api blah blah blah but if you deploy it it's going to be like sunnysanger.com forward slash so we need a place to set our host url so the way i've done it is if you go ahead and open up your environment variables uh rousshan says can you share your playlist if you sign up to the papa fam newsletter you will get the playlist yeah okay so we're going to go ahead and go down to our environment file and inside of here i've got the host you see this right so this is very important so here it's localhost but on versal when i set it it will be the deployment url very important to check that okay so this will be the deployment url okay and um so now we've got backticks we're gonna go ahead and say process dot end dot host okay forward slash success so we're going to create a page on our site called success and i'm going to go ahead and create another one whoa ryan de veni what's up man he goes definitely the best coding channel on youtube just wondered what your computer specs are that's incredible dude thank you so much for the five dollar donation my specs on my computer is a macbook pro 16 inch 2020 but i'm i'm waiting for the m1 16 inch there you go right but it's a fully maxed out 2020 at the moment you need the you need it when you're when you're coding uh at this level right so not coding but when you're live streaming 320 likes just keep on pushing guys i wonder if we can hit 400 let's keep going all right okay now what we're going to go ahead and say is we're going to william gecko keep on going man um i think that's pronounced that wrong side dude uh he will say cancel url okay this is the next step back ticks and then again we say process dot environment dot host okay and then we say forward slash and here i'm going to say check out okay because if i cancel or think about where i came from i came from the checkout page okay so we're going to go ahead and check that rick rick card says m2 macbook yeah i hope so yeah whenever that comes i'm grabbing it and then what we're going to do is we can also pass in something called metadata so this is just additional data that we want to pass along okay so what i'm going to pass along is the email that we passed along with the request body because you see what we're doing here this is very important guys this email that we pass through as a metadata is extremely important um because it's going to be part of the crucial operation which allows us to push information in from that stripe page into the correct place in firebase okay so that's very important for later on the metadata over here going into the metadata down here right gwen says m2 who knows it could be m1x who knows all right let's get off apple topic here we say images i'm also going to pass in the images but for images you have to be a bit more careful so i'm actually going to i only want the item image but i want it all as an array okay so what i'm actually going to say is jason stringify right well actually i'll show you the simpler way i'll say items.map for every single item i'm going to return the item image and now because we're sending this across the internet basically i'm going to simplify my life i'm going to say stringify and this will go ahead and actually just uh basically make the array one massive string that's the simple way of doing it right so it's going to go ahead and do it and then that makes it easier when you're sending it across the web and then the final part is deliveries okay so obviously we're building like a shipping website so we need to go ahead and actually allow for deliveries and if you don't include anything additional here it won't ask you for the um you know like the the collection or the address information so what we need to do is we need to add in another line called shipping underscore address underscore collection right and then we do colon open curly braces and let's fix that and then basically inside of here you have a key called allowed countries right so allowed countries and then basically you include an array of the countries that you allow now again these are explicit like these are special values and if you do enter an incorrect one check the logs because it will scream at you and it'll give you a massive list of the ones you can use the ones i'm going to say is gb so great britain i'm going to say us and i'm going to say canada okay so great brand us and canada for this example okay so we have these three countries that let's say we're going to ship to and then the final thing is going to be like how about if we want to add in shipping rates so you know like for next day delivery and so forth and things like that so this is actually a very cool feature that you can do pretty easily inside of stripes i'm going to show you how you can do that right now as well so the way we can do it is if we go over to our stripe right so we're heading over back over to stripe now we go down to i believe it was let's just double check it's products yep so you go into products and you click in shipping rates okay so right here you can see i've already created one but i'm going to go ahead and create another one as an example okay so i'm going to go ahead and create a shipping example and then my uri says before coming across this channel i used to think how to kill my sundays and saturdays now i'm utilizing my weekend i love that i love that comment thank you so much dude i really appreciate that one all right so here i'm gonna say let's go ahead and say something like it's gonna be 6.99 for next day delivery and it's going to be gbp okay there we go 6.99 and let's just say the description is going to be next day delivery let's just say next day the next day shipping we'll say yeah and you can see now this is how it'll come across on the bill right so you can see next day shipping and you can even add in between one and three max business days or you know however you want to do it right so there you go and obviously this is just the billing process this doesn't actually ship anything right this is how you build someone for it right so now what we're gonna say is click save okay and this is what we get to okay so now we've just created a shipping rate so what we can do is we can click on this over at the top right and i can click on copy so this is the shipping rate id or you can get access to it over here where i see the raw so i'm going to go ahead and copy that and now what i'm going to do is come over here to the stripe checkout session and go to and add something called shipping underscore rates and you can see that and you can see this actually takes an array so you can add more than one shipping rate and then you can go ahead and toggle between which one you want now i'm going to go ahead and just copy and paste my shipping rate inside of there so now by default they're going to get charged next day delivery right because that's the only one that i've actually given them okay so this is looking pretty good right looking pretty nice at this point so this is actually everything that we have and need to get this up and running so everything looks pretty good there hopefully we haven't got any errors in our code but that's pretty good so make sure you take your time with that and then you know like if you come into any errors like i said you can console log and check the terminal to see what's coming out okay that's your way of debugging the final step whenever you make any api call okay you need to send a response back because think about it we're making a request to a backend api right api is just like some kind of endpoint that's on the server and it needs to rest it needs to reply otherwise that's just rude right because then you need to reply when you have api calls as in genuinely it's not rude but you know how it is right you need to reply to that so you have something called a response okay so here i'm going to say res dot status right 200 right which means 200 is okay a 404 is not found 500 is server error you get used to these codes right so here i'm going to say return adjacent value and then we're going to include some some value here and here what we need to do is we simply have to pass back an id and the id is actually something called session id okay so here i say session.id so this is what we're going to return think about what's happening here i told you that we're going to create one of those checkout pages so the session pages so one of these pages remember we pass a bunch of information over we give it to stripe and it gives us back the id now i can redirect the user somewhere right so what i'm going to do is hit save on this file go back to my checkout page to the front end now and this is where that call was happening right so checkout session now should actually receive some kind of id right so what we need to do on the front end is go ahead and actually let's say we need to redirect the user or customer to check out right and in fact it's going to be the stripe checkout okay so here what i want to do is i'm going to say const result because we're going to get some kind of result out of this and then i'm going to say await right stripe dot redirect to checkout okay and what i do here is i pass in an object and part of the object i say the key is session id and then the value i'm going to give it is going to be the checkout session and remember as part of the response it's not just id you actually have to say dot data dot id okay so it comes back inside of a data variable because that's where the request actually happens again so we need to go ahead and do that first now guys remember if you're enjoying this right now and if you're learning anything new at all smash the thumbs up button and subscribe let me know if i'm doing a decent job or is half average or it's just crap let me know guys yeah and uh hopefully you're enjoying this right now let's keep on going and remember sign up for tomorrow's session going to be huge the biggest five-day finale that we have done first link in the description let's carry on guys so this will go ahead and redirect the user to a checkout page okay so once this is done what we can actually do in the meantime is i can actually go ahead and say if there was a result so if for any reason result had an error right so you see that's why we captured it as a const there then i can go ahead and alert it on the screen right so there could be a number of reasons where it could go wrong and then you can do dot message okay and that's the message that comes back cool this is looking great okay and then because this is a one-liner you can actually go ahead and just simple do a one line and say if alert there you go cool so think about what's happening now so it's going to go ahead and make a request to our back end our back end creates a checkout session comes back to the user uh so the front end and then the front end redirects them to the checkout page okay so at that point it's in stripes hand and then it's down to the success and um cancel url razor what's up man he goes dude you are doing an awesome job thank you so much man okay so guys quick water break because god damn it really is killing me today with the war i don't know why okay let's carry on amazing stuff guys let's go ahead and smash the thumbs up button i wonder how many likes are away from 400 right now all right chef he says papaya you're definitely doing a great job man thank you so much honestly really appreciate you all right so now what i'm going to do is go to my checkout page and what i want you guys to do because we changed a bunch of environment variables down a bunch of stuff just just for safety go ahead and restart your server at this point make sure do your little check make sure your environment variables are being loaded back in 355 amazing stuff just push to 400 guys awesome stuff right so now you can see we get a bunch of node.js warnings don't worry about that because we haven't set a few config stuff don't worry jrt engine perfect okay nice this is good hide that and now i can do is go ahead and add a few items to the basket okay now guys moment of truth moment of truth you know what let's get let's get real intense right now all right so we've done a bit of work here we added in our first api end point i clicked on a few things you know so now i'm hoping to do when i click this magic button is that it goes ahead creates a request on our backend so it's going to make a connection to our api backend and it's going to pass the information then we're going to create a checkout session on the back end return it to the front end right and then from the result we get an id and then some from the checkout session we get an id that we can use and we're going to redirect the user there so if we've done it all good and we haven't messed up anywhere we should be redirected when i click this magic button okay hopefully hopefully hopefully hopefully hopefully hopefully all right now let's go ahead and click the button oh okay all right oh my god there we go nice look at that guys that is awesome check that out guys so hopefully you get to this point as well and yeah that's incredible we have the items already in there and that was a first time bang as well amazing stuff so you should see your store name at the top and it should say test mode and basically if you want to switch it to a live mode remember in test mode it won't charge any card but no card will go through unless it's like a specific card so you want to do four two four two four two four two that's the test card details but in this case what we can do is i can go ahead and enter a bunch of details in so i'm gonna go ahead and enter in a bunch of random stuff here so you can say a at a.com and then even for the shipping address and all that stuff you can go ahead and add in some random stuff i'm not going to show it on the screen right now in case uh autofill comes in so i'm going to go ahead and pop in some details and then pop in a few card details and this is what i do when i'm testing right you can literally do the same thing i just do this so so four two four two four two that's the magic card details that you want to use and these are known as the stripe details okay so the sort of stripe check out details now when i click pay it's going to do one of two things it's either going to throw me back to our checkout page or in which case something went wrong or it's going to redirect me to forward slash success right and because we don't have a page called forward slash success i should see a 404 from next js okay so i'm going to hit processing and wait for it wait for it and this is 195 pounds okay so remember that 195 pounds 23 right so processing ooh suspense okay went through 404 nice right and this is because it threw us back to the success page that's awesome let's make sure it actually went ahead and processed the payment so i'm gonna go back to my store go to payments and we should see 195 pounds there you go boom and here's the items in stripe so you see we sent the items over to stripe we even had the next day shipping of 6.99 amazing stuff smash the thumbs up button if that is damn awesome because that is pretty powerful didn't take long to set up and you can you can imagine how powerful of an app now you can go ahead and build like that's honestly an e-commerce like that's the start of an e-commerce app right there right you can go ahead and do that netflix we did the subscription side of things here we did the payment side of things you know how your boy does it we cover all the grounds on this channel and uh yeah i hope you guys like that right let's go and get back into our flow state let's go it worked right that's awesome stuff right so now we need to build the success page but just when we thought that was it right just when we thought that was all right so what actually happens here is i'm gonna go ahead and actually draw this one out for you guys um oh if my mask decides to work okay there we go so i'm gonna go ahead and draw this one out for you okay so ignore the 404 for now but i'm just going to draw on this page so here on our here is on the left hand side is our app okay so this is the checkout page oh okay let me freeze it here on the left hand side is our checkout page okay so this is the checkout page that we just went ahead and you know we had the items in the basket we went ahead and hit proceed at checkout so there was a button somewhere which said oops let me change the color a little bit there we go there's a button somewhere which said proceed to check out okay cool so when i hit this button right so when i kind of click this button right when i hit that button then it went ahead made a request and it sent me to the stripe checkout page okay so it sent me to some other additional page now this page was known as oh god damn it i'm not showing my page sorry guys i made that mistake okay here's our checkout page okay here's the one that we had and then here you can see it had a proceed to checkout okay so we hit this proceed to checkout button and then what we did is it redirected us oops it redirected us over to stripe okay so it redirected us to a stripe checkout session okay so this is a stripe checkout session over here right so we entered in all of our card details we done card details and then we got a nice little check and then it redirected us over to the success page right so this is back on our app and it redirected us to another page and this is back over on our application so technically it's over there but you know so this is our app again and this is going to be the forward slash success page okay so it's going to be for success okay so this is what happened we had our checkout page redirect us to stripe hit the success and all good now how do we know right because all it did was a redirect so we do not actually have any information on our end as to like did the payment yes for the user it went through but i want to go ahead and actually kind of push that order into a database somewhere right so imagine our database we have a magic database over here right so let's just say we have a firebase database down here right what i ideally want is i check out i do a stripe checkout session it pushes a value into the database when it succeeds and then it redirects the user that would be the ideal situation okay and uh guys yeah not very good point just you know the redirect status code is three or two that's very handy the old point right so that would be the ideal situation we check out hit stripe checkout session um we push the value into firebase database and then we get redirected to the success page okay but what's actually gonna then happening is kieran just said oh nice that's awesome stuff thank you all right so now what's actually happening is what we want what we actually want to happen um well what is really happening right now is stripe proceeds to you know it completes this checkout and it does actually fire off a bunch of these things called events right but we're not we're not doing anything with these events and we're not listening to these events now this is something called a web hook okay so these are called web hooks and now whenever stripe does anything whenever it creates a customer whether whenever it you know creates a new payment whenever a payment succeeds it fires off these events into this web hook right now right now we don't have anything listening on the web hook so it does nothing with that information right so now we are building out our first web hook so get excited this part is actually very intricate uh take your time with it once again and because it's very important that you get this bit right okay now with this web hook we can have a bunch of information being passed to it right so when this kind of you know process happens we can get some information from the web hook right so why is that so important because you see how this is the missing piece to pushing information into the database we cannot simply go to the forward success page we don't have any information once we're over here okay i don't have any of the order information and you might be thinking yeah but you can go ahead and you know pull it from your store or local storage you should never do that because you know you don't know the state of what happened at the checkout session so stripe actually has it handles this for us we just need to go ahead and provide some code that can go ahead and work with the web hook that goes ahead and does what we needed to okay so this is the ideal scenario that we're going to build out we have a checkout we hit proceed to checkout takes us to our strike checkout session we fill out our details hit you know complete or proceed or you know like uh proceed to payment or whatever it is and then it's going to go ahead and trigger a web hook on behind the scenes and then inside of that web hook we're going to go ahead and you know push this order into firebase and then it redirects the user to success right we actually does both of these at the same time okay so let's build our first web hook okay now in order to mimic a web hook right because remember these are real events that we need to listen to we can't just you know tap into wherever stripe is doing their magic and go ahead and you know like use their web hook like i said we can't just you know use that stuff we have to kind of use a local emulator when we're developing this stuff so what we need to do jason says 12 more likes to hit 400 let's go guys so what we need to do now is use the stripe cli right so i'm going to go ahead and show you guys how we can use something called the stripe cli to actually go ahead and set this up so i'm going to go ahead and create uh go to the stripe oop stripe cli and then here this is again the page you're gonna you want to find stripe cli over here and you can see there's a bunch of stuff about web hooks and all sorts right they have a nice little gif you can check and watch but what we're going to do is you've got a bunch of different steps as to how you want to install your stripe cli okay so right now here what we're going to do is we've got homebrew as an option so if you know what homebrew is um so i want it guys i want to answer this one question we're not using any blaze plan stuff today this is completely free you don't need any of that stuff okay that's netflix this is different right so you can install it using homebrew uh if you don't know what homebrew is do not worry right but what i would recommend is i'm going to show you how to do it with mac okay so for the mac what you want to do is download the latest kind of you know edition so i'm going to go ahead and click this to go ahead and open this up and in this case i have a x86 64 you know bit mac not the new apple ram one so i would click this and download it okay so i'm going to go ahead and download this file right now okay then what i want to do is you can see it says unzip the file blah blah blah and then it says optionally install the binary in a location where you can execute it globally right so there's a few different ways you can literally use any of these methods to install it right khalid says woohoo my payment was successful amazing stuff awesome so what i want you to do is i want you to copy this right and then what i want you to do is open up your terminal right so open this up and then i want you to go ahead and type in cd and then copy that into a cd user local bin and then i wanted i want you to press open dot okay now check this out right then once you've got this up you can see i've already got my stripe in there but what you can actually do is what i would want you to do is you won't actually have stripe in there right so what you would want to do is go ahead and open your download so i'm just going to make sure i haven't got anything in my downloads right so you want to do is open up your downloads you'll have a stripe folder inside your downloads unzip it okay and then once you've got that sort of file selected what you will have is the following okay so i'm not going to show everything in my downloads let's just go ahead and show this bit so what you can see is right now i'm showing my downloads at the bottom here so you'll see a stripe download right so you have a little kind of file you guys should be able to see what's going on there but that's basically you want to drag that into that folder right and then you can go ahead and see it will say you want to replace it wherever in this case i'm not going to go ahead and replace it but you guys will go ahead and add it in okay once that's done you've just inserted stripe onto your machine as the cli command okay homebrew is another easy way to do it okay so definitely make sure you're checking out uh blue octopus code says sonny you're the main one of the main reasons i stay hydrated amazing stuff boom 400 likes with that said guys quick water break amazing stuff energy is firing today because honestly on a day 4 build usually i see such a decline but you guys are killing it so keep it up guys nice jason says i see 401 likes exactly right this is looking good guys so now what we're going to do is we need to log in with the stripe account all right so to test it this will work to open up your terminal simply type in stripe okay now if you see that you're in it means you've you've set up your cli work like correctly because it says the official command line tool to interact with shrine nice so then what we're going to do is we're going to type in stripe login okay and then hit enter and then this is the part you have to pay attention to it says your pairing code is blah blah blah like some random few strings so i'm going to hit enter to open the browser okay and then my browser just opened up on the screen you see this one here so i've gone ahead and entered in a passcode and oops let me go ahead and pop in a correct passcode right now okay nice uh okay i've actually entered in the wrong passcode one second let me go ahead and do it again so you can do stripe login you're gonna open up your browser and then i'm gonna go ahead and enter in the passcode okay awesome stuff so what you should see is this you should see allow stripe to access your account information now i have made this mistake before so definitely check this one out right do not click like the wrong store right because i did it and i was wondering why the hell i wasn't getting the right events i'm telling you because i made this mistake right so i've got my papa amazon demo here right so you want to make sure this matches whatever you see in your command line so in this case it says trump fresh champ golden so you can see that's authenticated right so now what i'm going to do is click allow access done okay oh sorry about that i screamed into something like right so that's amazing stuff and then what we're going to do dude i saw and now saw for 43 200 on youtube 200 followers in one hour honestly dude it's crazy man we're going at such an incredible speed this is the papa fam this is what we're about all right so look you see it's authenticated now this is the incredibly important part right actually no not yet not yet oh yeah this is good okay so you see this right it says the stripe tli is configured with the account id this key will expire in 90 days okay so remember that it's just a handy thing oh it does have a limiter on it yep you're right you're all right good stuff man yeah i heard it in my own mic i kind of was like oh that's awesome right so uh now if i can click this and there we go and then i'm going to go ahead and go down it says run your first command so you can do that stuff but we're not going to do that right the bit that i'm going to do now is take you back over to the code right so i'm going to go ahead and run this emulator like i said we're going to emulate to get you know to develop a solution to this we're going to fake listening to these events right so we're going to actually well we're not actually faking it we're forwarding the events to our local development right so what we actually do here is that we're gonna say command j to open up our server okay and then inside the correct directory what you need to go ahead and do guys is just go ahead and type in so i'm gonna just check my command it was actually listen to here so i say stripe listen to a listen dash dash forward to and then it's a local host so i'm going to go ahead and copy this in one second let me make it clearly for you okay this one here stripe listen dash dash forward to local host 3000 and then api forward slash web hook now we don't actually have our web hook uh stuff coded up right now right but this is what we're going to have okay aaa this is not pre-recorded no i said stripe listen forward to right so you can see this everything looks pretty good right but if i try and run this now you see what's going it says getting ready your web hook signing secret is this right but we don't actually have we actually have an api web hook yet so we need to create that api endpoint but this is the important part this little secret okay so this secret we're going to copy it okay so i'm going to go ahead and copy this secret and then what we want to do is go over to our environment file now this secret bear in mind okay guys this secret has a tendency to change because it's local development right so if the terminal session changes or if it dies out that secret might change so just make sure that that variable is what you expect it to be okay so we're gonna go ahead and copy that and then i'm gonna go ahead and go to my environment files and this is where again just don't rush take your time okay open your environment files here and then i'm going to go into where i've got the stripe signing secret i'm going to paste it in okay so you see how now we've got all of our credentials nicely looking pretty good over here all right so we've got the signing secret which means we've just changed our environment file which means i am going to have to restart my local server so this is looking pretty good right now so i'm going to go ahead and close my server and run it one more time sunny is interactive nice now i love to interact with you guys let's see it's what makes us have this kind of community spirit that's what's awesome right um okay so we're gonna go ahead and create and you can see don't worry if you see all this stuff for now that's fine you're gonna get this is kind of two listeners we've got a server running and we've got this stuff happening on the left and again i haven't got my jit sort of make sure if you don't get your jit get your jit there we go okay looking good so now what i want to do is create the web hook okay so this is the bit where i need your full attention guys full attention again and you guys are doing awesome honestly i'm really proud of everyone watching right now the retention is incredible and i know this bit is a bit tricky but you guys are doing an incredible job of staying with it right so let's carry on so what i'm going to do here is create another file inside of my api not inside the auth inside of api and this one is going to be called webhook now you can call this one whatever you want i'm just going to call it workbook for simplicity but web hooks technically have more than one event that gets fired to them right so but what we're doing is we're just going to call our endpoint webhook and we're just going to listen to one specific event which is when the payment checkout succeeds right but know that you can you know you can have different endpoints for the different webhook events that get fired off right okay let's check this one out um anton says should i set up additional security software for like web application firewalls with setting up uh no you don't have to worry too much about that the main thing is is programming practices like your environment variables stuff like that don't expose your secrets basically uh that's gonna be the main thing to remember okay remember these guys who are doing stripers they are the ones who have to make sure that that's all secure right if they don't have a secure thing on their end and uh then they've got a big problem but make sure when you do your deployment try and serve your websites on a um https so make sure you've got a s you know like a a security certificate on your website right so make sure it's https right uh jason says sunny these channels are doing a great learning from to-do list to us gets repaired after 100 did i agree with you i hate them so now what we're going to do is in a in a sort of traditional express app you have you know app.getapp.post right when you're using next.js the way that you check if uh if it's get or post is you simply say if request dot method is a post request so this is how you do it inside of um inside of next yes right and then if you want to check for get as well you can do you know like you can check for the get requests so rather than you know like the expressway of doing app.getapp.post and so forth in this case this is how you do it in xjs okay nice okay so it's looking pretty good at the moment um i think we're almost at 500 likes let's keep pushing guys oh just as i said that the sun came on nice okay so now what we're going to do is i'm going to go ahead and pre-fill some of the things at the top that i need to focus on okay so at the top of the page i need to do a few things now just bear with me okay so we're going to need a package called micro and i'm going to show you why in just a bit but i'm going to go ahead and we've got our forwarding happening right i'm going to cut that for now because i don't need it just yet okay i'm going to say yarn add micro okay yarn add micro and then what we're going to do is this is going to go ahead and install it and then i'm also going to need something called firebase admin okay so yarn add firebase admin and this basically is because remember guys anything inside of the api folder is on the back end right so technically think of it this way anything inside the api folder is running node.js not normal javascript right there are differences right don't worry they're very similar but there are differences which means that your dependencies so if you try and use the regular firebase dependency inside of the node.js files you're going to notice you're going to get crazy errors it doesn't work right that's because you need to use the node.js dependency right this is there are two separate dependencies so the firebase admin dependency is run on the server side because the server side is secure right your user isn't on the server they're not sitting on top of the server that's secure hidden away behind you know your versa deployment so that bit safe so what we can do is the firebase admin we can install it and then we can actually interact with our database through that sdk okay so i'm going to show you how to do all of that now as well okay so what we need to do is the first thing i'm going to do is say import buffer from micro this is going to be used for later on okay so i'm gonna just gonna go ahead and prepare ourselves for now don't worry you're probably wondering what the heck is that for i'll explain that one in a bit and then what we're gonna say is we're gonna say import or as admin from firebase admin oops firebase admin there we go okay and then what i'm going to say one second guys okay nice um so now what we're going to do is we've imported everything as admin from firebase admin and then what i'm going to say is let right so we've got our ad uh sort of admin but what we need is we need to authenticate our admin so the admin technically has access to everything okay um so it actually has access to everything okay nice so what we're gonna do now is but we have to give it the special permission for so that it can go ahead and actually go into the database and do what i need to do if you can't just say you know as the admin it doesn't know how to get access to your account and you're probably wondering yeah but we did a firebase config over here that's different that's the front end this is the back end right so what we need is something called a we need a special json file which gives us access to all of this information so we're gonna go ahead and get access to our firebase uh sort of you know database right now so i'm to go over to firebase right now so we're going to go to over our over to our console and this is the console that we saw yesterday now what you want to do is click on project overview no it's not this one it was in where's it gone firebase database i think it was in project settings yep it's in project settings you want to click the little cog and then you want to click on project settings cool and then what you want to do is go to service accounts okay very important steps service accounts nice and now what you want to do here guys is you want to go ahead and you see this is what we're about to do right now so we've just imported firebase admin we did that over here so we imported everything as firebase admin and then what we're going to do is we're going to go ahead and we need to get a service account so we actually need the service account.json file okay so we need this this special file over here so what i'm gonna say now is and then we can initialize the application with it so i'm gonna click on generate new private key okay so i'm gonna click on generate key and then it's gonna basically go ahead and download the file okay so i'm gonna go ahead and grab that file right now okay so i'm gonna go ahead and actually grab the file that it downloaded so if you didn't see what i did i clicked generate new private key and it downloaded a file okay so i'm gonna quickly grab that file right now one second and that is simply like it's got some squiggly you know weird naming to it but it's dot jason okay so what i'm gonna do is i'm gonna pull that into my code so you guys can't see my screen yet i know don't worry i'm gonna pull that next to my firebase.js right so give me one second and i will show you guys the screen do not freak out okay awesome nice so now what you can do is you can get this screen okay so you should be able to get this this was the longer like you know weird json that you're going to get right so what i want you to do right and don't worry if you're late to the party you can go ahead and follow this afterwards but what i want you to do now is i want you to go ahead and and rename this file right because it's a bit messy right i'm just going to say permissions.json that's a bit nicer right it's going to be permissions.json and this file is going to be the sort of you know the magic to letting us you know have access to that back-end database right great okay so we have our permission json file so now what i'm gonna do is go over to our um so we have that already set up now i'm going to go back into my web hook now inside the web hook what i'm going to do is i'm going to say uh const service account okay equals require and what i'm going to do is pass in the directory for so i'm going to go upper directory upper directory upper directory until i get to the permissions.json okay so you see what we're doing we're actually going to go ahead and and get that file right so we're gonna go ahead get that file and you can do an import statement i'm showing you both there so you can do import from but in this case i'm showing you how to do it this way and then i'm gonna say const and we need to initialize the wrap but on the back end remember you need to be careful of double initialization you don't want to initialize your app twice right so i'm going to show you how to protect against that as well so here we say const app equals um admin dot apps dot length right so this means if there is no app already initialized then i want to go ahead and initialize the app so i'm going to say admin.initialize app and i basically pass in an object and inside that object i say okay for the credential i'm going to go ahead and say admin dot credential dot certificate and that certificate i'm going to use is the service account one so i'm using this okay and then because we're doing it uh sort of you know an optional here ternary operator we're going to go ahead and say or we're going to use the admin app that was already configured okay so i've already got i've got my rocket working here one second we can close that there right or we're gonna go ahead and say um i've done some silly mistake here one second oh admin app admin dot app there we go hit save nice right this looks good at the moment okay so we've got the app and then we've got um and remember if you're running into any issues just take your time and go ahead and you know we can debug it afterwards in facebook right so that's what the facebook group is all about so we've got the app and we're initializing it if there is no app already initialized otherwise use the app that has been initialized okay so this is looking good at the moment so the next step that we're gonna do is we're gonna go ahead and say um let's go ahead and say at the top we're gonna go ahead and pull in our stripe right so we've got our firebase this is basically secure let's go ahead and say all of this is actually secure a connection to firebase yeah from the back end okay that's that bit and then what we're going to do here is actually go ahead and connect i sort of let's go ahead and say uh establish connection to stripe so i'm going to do here is going to say walter says juicy content thank you man here we're going to say cons stripe equals require stripe so i'm going to use that stripe dependency that we had earlier and then there's a second argument i'm going to say process dot environments we're using our environment files stripe underscore secret underscore key okay so i'm using my secret key here okay so it's looking great guys i think we're almost at 500 right almost at 500 likes someone let me know where we're at right now and quick little water break but this is fun right guys we're killing it today all right let's keep going okay so 452 oh 455 nice let's keep going guys 500 let's push i swear to god i just want to get a number higher and higher let's keep going guys okay so we've got the uh stripe being initialized over here and the next thing i want to do is get the endpoint secret so here i'm going to say const endpoint secret and this is going to be the endpoint secret that i'm when we set up our listener so remember that emulator all right someone say process dot end don't worry juliana take your time and debug it after the session okay stripe signing secret right so signing secret remember this is an environment variable that we set up earlier okay so let me go ahead and check that and then what we want to do is we're going to go ahead and say this is where we actually go ahead and and sort of do the next more complicated part okay so guys this is where i want you to you know take your time with it right really take your time with it oh doom's web thank you so much five dollar donation um it says greetings from germany appreciate you dude thank you so much you're donated through a different link but thank you so much man all right let's have a look so now we're gonna go ahead and say if the request method is a post now this bit guys just stick with me on okay so this bit is basically part of verifying what we need to do right is whenever that web hook gets triggered off right so remember the web hook that we spoke about earlier so this one right here whenever this web hook so remember we check out we have the stripe checkout session and we get pushed to the success page but then a web hook gets fired in between that whenever this happens we need to verify that and to say that how do i know that this event is from stripe right so they use something called certificates right so we need to verify that this is actually a genuine event otherwise anyone could just you know send an event to us and then you know like cause havoc right they could literally send an event in the perfect shape and format and then you know all sorts of craziness can happen so what we're going to do now is we're going to say const session equals event dot data oops event sorry data um object i'm sorry i'm looking at the wrong thing i'm looking at the wrong thing the first thing we need to do is say const request buffer okay so what we actually need to do is const request buffer equals await buffer request okay so this again just stick with me on this okay so we're pulling in a buffer from before we had this micro package and this is because what we need to do is generate something called a certifica okay so we actually need to kind of get all these in we need to consume the stream so that request as a buffer of information so that's for anyone who wanted to know that otherwise don't worry bravo says he has a good hair point thank you so much dude i do cut it in i'm not gonna lie right so here we say cons payload equals request buffer dot string okay oh we say two string sorry two string and then what we say is const sig right and this is basically going to represent a signature and then here we say rec dot headers so basically just copy this one up rec.headers stripe signature okay now if you are wondering how the hell is he finding all this stuff what's going on here like he might be just making this up i don't know if he's you know talking crap then basically what you can do is go ahead and check out the stripe page over where's it going over here oh basically you can go ahead and check out the documentation and type in and then you'll see connecting web hooks and all this other stuff and this is basically where you'll see it you'll see loads of uh you'll see a few different yeah here you go so you see like this is basically what you're gonna get but i've done a modification of it which will make it easier to work with next yes okay so we've got a con payload and this is where the signature is built and then we're going to have this empty variable called event because we're going to use this event afterwards but it's a let because i'm going to change it okay so i'm going to change this one in a second all right so let's continue on guys moving on strong we're going to go ahead and say try because this is a bit where it can fail all right and this is basically what we're doing here is we're saying verify that the event posted came from stripe so remember that web hook just verify that it actually came from stripe and the way we do that is we say event equals stripe dot web hooks dot construct event and then here what we do is we pass in three things we're gonna pass in the payload we're gonna pass in the signature and we're gonna pass in our endpoint secret so this is actually gonna be you know the sort of emulator that we're using okay and then we're going to say catch the error if there was any errors for whatever reason i want to catch it right so we've got a lovely message here temurbeck he says bro that is amazing thank you very much i appreciate you so much dude um so here what we say is we i'm just going to do a very simple return here and say return res dot status of 400 and then we'll say send um a message saying webhook error and then i'm just going to go ahead and say error dot message nice okay and then what i actually want to do is i want to kind of have some feedback so i'm going to say console.log i'm just going to go ahead and pop in an error when it comes back i'm going to say whoa whoa whoa error and then i actually just want to have the error message in case it kind of you know freaks out i want to see it in my terminal okay so we're going to verify that the event came from stripe okay so guys remember this is a bit where it gets a bit tricky don't fall off do not quit hit the like button and just keep on smiling don't worry it's a learning curve it's intense okay so this is where we verify that the event came from stripe the next thing we can do right if it gets past this phase the event is going to be legit all right so what we now need to do is handle the special it's called a checkout session completed event right and think about where that's coming from that's coming from that minute that we go ahead and complete the stripe checkout session it fires off that checkout session completed event right so i'm going to go ahead and check on that right now okay so here i'm going to say if the event dot type right is equal to checkout dot session dot completed right so if the checkout if the event type is equal to checkout session completed then what i want to do is go ahead and say const session equals event dot data dot object okay so i'm going to pull out an object from it right so we've got the session actually here and then what you want to do is you just want to fulfill the order right so think about what this means right so you want to fulfill the order at this point so once we go ahead and verify that all of this is legit and we have the order content so the session i need to fulfill the order which basically means put it inside of a database so that way you can show your user that it's there you can push that database you know you can show it on a screen for you know the uh the department inside your company which is responsible for you know shipping the actual product you need to store the information somewhere right yes it's stored in stripe but you need to store it as well and we want to store it somewhere so that way we can actually go ahead and have it here now this is one way of doing it you can go ahead and pull it straight from stripe but this is just an example of how we're gonna do it so we're gonna fulfill the order at this point okay uh fuzzy says i got a job after subscribing to sunny thank you so much i love that man i love that so much gamerboy says thank you so much i appreciate you dude for watching alright so now what we're going to do is we're going to create a function we're going to simplify this a bit we're going to create a function outside of all of this called const fulfill order okay fulfill order okay so i'm gonna say fulfill order and this is gonna be an asynchronous function which takes a session as an argument okay so it's gonna take a session as an argument and then i'm going to say is um we're going to do a console you can do a console log at this point so i'm just going to put a bit of code here to say fulfilling order and then you can go ahead and comment another session you guys can have this uncommented if you want to okay so that way you know that you're hitting this point right so i would recommend that you honestly put that in when you're starting to do it i'm not going to put it now because it's going to spam my uh terminal right but you can pretty much put that in and that's what helped me out in the beginning when i was kind of you know doing it tekken app says hello what's up dude newbie and says just finished day three homework and joining day four that's what i'm talking about it's the energy i want to see well done dude so now what i'm going to say is i'm going to go ahead and do return app dot remember we we initialized the app up here right we initialized the app over here so now i'm going to say return app dot almond says loving the build awesome stuff dude so we're going to go ahead and connect to our firestore db right now okay but before we do that we're gonna hop over to firestore and just make sure that we've set it up so we're gonna go to firestore database and then i'm gonna click on create database click in start in test mode and obviously you can extend this build afterwards if you want to to add in your security rules i'm going to click enable we can only fit so much into a session so i'm going to make sure that we can just go ahead and do it it sean says you're the manager thank you so much dude appreciate you check this out now wait for this okay now while that's loading this is not waste time we're gonna do app.firestore dot collection and basically the way i'm going to structure the db is we're going to have a collection of users okay and then the document for every user is going to be we're going to determine what what document we're going to push this data into and what day am i talking about i'm talking about where to push that order information into you okay so we're gonna have a forward slash users all right so it's gonna be four session users for slash and it's gonna be session.metadata so remember we pushed in metadata earlier into our order that's where we're grabbing it now so you see how it's important now right and then inside of that we're going to say go into the collection for that user go into their collection of orders okay and then after that i'm going to say dot go into the document and the session id right so what session id am i talking about this session id so this stripe checkout session okay so go into that person's session id and then we're gonna go ahead and set right so set means i want to go ahead and push some information into that location right so into that document so i'm going to push an object in and what i'm going to say is i'm going to push in an amount and the amount is going to be the session amount total so this is what this we do get information about that checkout session so i'm just pulling into that and what i'm going to do is i'm going to divide it by 100 because remember we use the sub currency so i need to get it back to the regular reading currency when i push it in the database right so obviously it feels like 10 pounds it would be times 100 in the in the checkout session so i want to kind of get it back to our normal sort of 10 pound understanding right um so there we go and then here i'm going to say amount shipping is gonna be the same thing okay so this one's actually a bit more interesting so this is a bit more nested this one is session dot total details dot amount underscore shipping and then again that's in the sub currency so we go ahead and change it like so and then remember the images we done a json stringify okay so now what i'm going to do is go ahead and so luca says yo sonny what's good are you planning to make any short format videos in the future yes dude in fact after this challenge that's exactly what i'm gonna do i'm gonna focus on short formats uh and the kind of you know more consumable bits of content this was kind of you know a big bang to get everything rolling and then it's gonna be also focusing purely on the course all right so images json.pass and then i'm going to say session dot metadata so make sure you subscribe guys if you want to see that right session.metadata dart images okay so now that i have that this will give me the images back so jason stringify the opposite is called jsonpass it gives us back the javascript object and then i'm going to go ahead and say timestamp okay and uh i think we've broken 500 now well i think we have right uh and i will be bringing in typescript yes uh not today but in future builds and then i'm gonna say the timestamp and this one's very important guys so pay attention to this one here what we do is we say admin okay so i do i say admin dot firestore dot filled value dot server timestamp okay and this basically is going to go ahead and get a time right now the reason why this is really important is because i'm in london you guys might be watching from anywhere around the world right we need to have a synchronized time right so the way we can do that is if we all use the server's timestamp then we're synchronized and we just render out in our local time that's the way we do it so that's what we're going to do we're going to use the server time sum and that's how you get it okay but she says you're my first react teacher sonny i got my first job on upwork thank you that sounds awesome man well done all right so this will go ahead and push it into the db and then i click then and i'm going to go ahead and do an inline function and basically this is just for my sort of sanity i'm going to say console.log and i'm just going to say okay if it was a success i'm going to say success and then i'm going to say order and then i'm just going to put the session id someone say order session id has been added to the database awesome right so this is the fulfill order function okay so this is looking really good okay so let's go ahead and uh ship says you and the subscriber awesome stuff man so i'm going to go down now to fulfill the order okay so here what we do is we say return and then i'm going to go and say fulfill the order and i'm passing the session in as an argument and the session you see how we got it from the event that was dispatched what event exactly remember i'll keep on saying it we created a checkout session and then we entered in all the payment details that dispatched a checkout event which is hit by it which hits this web hook and that's where we do this fulfill order stuff okay so now i'm gonna say is i'm gonna say dot then if it was successful then i'm gonna say then i'm i don't want to do anything with the response difference i don't care so i'm going to say then i want to go ahead and say um res dot status of 200. so 200 means okay all right otherwise i'm gonna say catch and i'm gonna say um get the error and do something with the error so i'm going to go ahead and say get the error and then with the error i'm going to return and we'll say res dot status i'm going to say res dot status of 400 which means there's an error send um i'm web hook error so i'm going to say web error and then i'm going to pass in the error.message okay guys i know i know that was a lot i know that was hefty but we are almost there okay now there is one more final step to making this web hook work so typically all of this code is for a normal next js kind of endpoint whoa we broke 500 likes let's go thank you guys that's incredible we're gonna have a water break in just a sec but let's carry on right so let's carry on for a little bit and then we'll have a water break so here we had the uh this is a typical next js kind of you know endpoint right but sometimes we need to you know not handle it in the next js way so what you can do in xjs is you can configure each endpoint with a config file and you can you can change that config file by doing this now i'm going to change the api settings here and i'm going to disable something called the body parser right because what we actually need to do here is when we're handling a web hook we don't want something called a body parser right now if you know what a body password is then great job if you don't don't worry too much but in this case we just want to have the entire sort of you know request as a stream rather than a sort of past object so that's the kind of quick way to think of it right so now i'm gonna go ahead and hit comma and then i'm gonna say external resolver so this one you can just go ahead and copy external resolver is true and that just simply means if uh we're basically gonna send a request this is being resolved not by us but by strike so when this sort of you know when we go ahead and get an event and we sort of respond to it this is actually going to be externally resolved it's not handled by us okay um crow just says if i can summarize invite an entire video pay attention this is hard stuff yeah guys it's not hard honestly it's it's just practice right i'm not gonna say anything's hard it's just take your time and practice right so this is looking pretty good right so now we need to test it right so we need to test to see if this is working okay so what i'm going to do now is i'm going to get our environment set up so i'm going to hit command j i'm going to run our local emulator with stripe listen so remember this one stripe listen forward to localhost 3000 api webhook hit enter it says getting ready okay give it a second okay it says the signing secret is here you want to make sure that signing secret is the same so in our case let's go to our environment variable and let's just double check r4n4e yep there we go similar must be the same right so this is now running okay so pay attention to this server okay now this is where this is where we need to go ahead and check out so i'm gonna go to my localhost and obviously we haven't built at the success page yet but that doesn't matter at this point in time just yeah what i'm going to do now is we are logged in so i'm going to add items to the basket i'm going to click my basket okay great now i'm going to click proceed to checkout now we should see some kind of event here when i create this session so if i proceed to out okay so can you see what's actually happened here it says payment intent created so you can see this is correct right now because it's starting to pick up those events remember i said as soon as you do anything in that and that sort of you know it's not just the checkout complete it's also any other event gets hits his web hook okay so this is showing us that it's coming through okay this is coming through right now so what i'm going to do is i'm going to fill out these details so i'm just going to hide my screen quickly while i fill out these details let's go ahead and just chuck in some random details and you might see an error where it says i'll show you in a sec okay this is looking good okay so now let's go back to our screen and let's have a look okay so you might see this error where it says failed to post you know context deadline excuse exceeded client timer don't worry about that honestly it's okay i've tested it thoroughly it's all right for now it's working right so what we're going to do now is i'm going to click on pay so pay when i click pay a few things are going to happen okay it's going to you know process a payment through stripe which should go ahead and trigger a web hook to go ahead and get fired off then i'm going to go ahead and fulfill the order which means i should get a message in here saying you know everything you know i should go ahead and add that sort of order to the firebase database and it should say success order has been added to db i should then see an order over here in firebase which means we fulfilled our order okay so now i'm going to click pay and let's just see hopefully first time okay charge succeeded payment success payment 10 credit checkout session completed so you can see it says checkout session completed and now oh there we go guys look on the server success so that you see the web hook fired off and then on our server it hit the server and it said order has been added to the database okay okay and then it redirected us to the success page which we haven't built yet amazing this is looking so cool right now okay let's go back and refresh and hit the like button there we go that's how you do it that is how you do it first time that was uh that was intense but we did it smash the thumbs up button and now we can see papa react.team that's my email orders you can see the order come through the amount for the other the shipping of 699 the images for the items and the time stamp wow right this is incredible guys remember if you're making it right now to this whether you're watching this from a replay or whether you're sticking it through from day one keep on going you will get so much satisfaction when you get all of this working and it's on your portfolio jm ninja says works for me also first time nice dude it didn't even work for me first time i had to take ages doing it so that's incredible natasha says hey let's go uh we got hail says grateful um thank you so much guys this is awesome this is awesome right let's carry on i think we're near 600 likes i think i don't know i can't i can't see my likes right now um okay but now we've got the orders in the database which means we are fulfilling orders right so obviously this is running and again don't worry if you get this error voices error referred to post context deadline exceeded do not worry about it right we can go ahead and check that one out all right 524 guys hit that up let's go to 600 right and then what we're gonna do now is have a quick water break and then we're gonna continue on avnish is working as well that's so cool we are killing it guys you know i've ran out of water switch what about okay i drink so much water guys so if you guys should too okay there's no way i could focus if i don't have more water okay so let's go ahead and hide this out so now i'm going to direct says please create a telegram we have a discord dude so check it out and we have a facebook which is crushing right so now we have this looking great okay now what we're gonna do is we're gonna go ahead uh and create the success page okay so let's create the success page let's get back into react let's get the energy back up and get hyped up right so this is where we get back into our fun flow and we are used to this stuff okay so we're gonna close out the api for now we're gonna create a new page called success dot js right and guys we're succeeding right now right we're doing well this is good let's carry on seeing you from chile dude hey let's go man nice so now what we're gonna do is we're gonna go ahead and build out the success page right so this is the success page right here and what we want to do is go into this and hit we're going to say the background should be gray so bg gray 100 and then we're going to say this should be the height of the screen oops okay and now we should be able to see this page will actually not be a 404 anymore but it'll be a grey page okay and if you don't believe me i'm going to make it green just for you know just for the hell of it there we go light green all right so it's gray now nice so now what we're going to do is go ahead and say we're going to import our header right so we're going gonna have our hair component like so and we should see our amazon head up component pop in boom that's what i love about reusable components it just the page comes together so quick because you don't you just reuse your components it's just incredibly powerful right so we've got the main popping in over here and guys i want to do a reminder before we continue on if you haven't already subscribed firstly because i don't know there's like 60 70 of you which aren't subscribed please subscribe it's gonna help the channel grow and also guys first link in the description sign up for tomorrow's event it's gonna be so much fun we have a full training be there first link check it out right so now i'm gonna go ahead and we've got the main now this page right here for the success page is if i go ahead and try and get a demo for you let me go ahead and actually try and get you a quick page example okay so we want to get this page built up which says thank you your order has been confirmed so this is what i'm trying to build right now okay so what we want to do is we have a sort of a main and then inside of that i'm going to have a div right but the main section right now remember all of our pages so far have been following a max width principle so it's going to be a max width and we're going to say the screen should be a larger slightly smaller so you can see the max width of large that's why on a small screen it's taking the forward on a large screen it maxes up and then we're also going to say mx auto to center the contents awesome and then inside we've got a div which is going to contain everything that we see and then i'm going to have a check circle icon which is going to represent this right i'm going to import it like so good stuff and what i'm going to do is i'm going to just do a three-quarter split there we go and it helps us out okay now inside of here guys i've got a few different sections this itself is a div right and then we've got the underneath contents right so inside of this i've got another div and inside of here i've got a circle to check circle icon okay and this is going to have a class name and this is going to be a green color someone say text is green because uh an icon is actually a bit of text really it's like an svg but you can style it with the text principle okay so then you can do that okay we've got our tick nice and now what i'm going to do is go ahead and say h1 nice h1 guys your attention is incredible i can't believe how many of you fight through this and then we'll say your order has been confirmed boom nice okay h1 class name there we go great stuff and then here i'll say text is a 3xl tailwind is just so clutch honestly it comes in so handy right so then this div is going to be a class name it's going to be a flex div we're going to center the item so item center and then i'm going to go ahead and say space oops space between the x components you see right now they're touching too much on the space of two i want to march in the bottom of five so that way whenever we introduce something next to it it's gonna have a bit of space now for the parent div right we're gonna go ahead and drop the class name and here we're gonna say flex i wanna use the full width so i'm going to say flex column because by default you use up the full width and then we'll say give it a padding of 10 because right now it looks too cramped up so here padding at 10 you can see it looks a bit better and i want the background of this container to be white okay nice great we got qatar in the house what's up all right this is looking good looking good and then we've got the div nice and then outside the dip i'm gonna have a p tag inside that p tag i'm gonna have a thank you message so you can go ahead and have a thank you message or whatever you want to have i've got a thank you message here okay looks great and now you can see look on a small screen on a big screen looking pretty nice same thing over here awesome stuff and then outside the p tag i'm going to have a button what's up priyanshi good to see you man and then here we're going to say go to my orders okay then this is going to have a class name of button because remember we have our predefined styling utility we created our own custom utility we've been reusing it throughout the days so that's where that's coming from and then margin top of eight to push it from the p text above it all right looks good okay so the final step guys is that when i click this button i want to get redirected to the my orders page okay so it's going to be forward slash orders right so all i need to do is do a redirect on this click right and i wonder how many likes we're out guys are we are we hitting 600 yet i think we're close i think we're down close right so when i click this if i want to do a redirect how do i do that i say on click on click and then i'm going to say inline arrow function but before we do that let's actually go ahead and import the router okay so here i'll say const router 540 let's keep going guys all right we've got the router that's actually crazy i didn't actually think we'd even hit that today this is the final day is usually the hardest one right but let's push to 600. right we've imported this nice we've got the router here and then what i'm going to say is on click i'm going to do router dot push oops we need to inline function i'm going to root it up push and i'm going to push the orders page so forward slash orders awesome nice looks good okay so when i click this button technically now it should actually say a 404 okay great because i don't have that page built right so that's correct i don't have this page built so that's what we expected so what we're now going to do is go ahead and create an orders page we are getting there guys we are moving now we are moving fast so what does the orders page look like the orders page looks something like this oh please sign in to see your orders i forgot to sign in let me go ahead and quickly sign in all right so i'm going to quickly do my sign in i have to keep on doing this it's super annoying this is my this is my machine this is not how the typical behavior is and this is because i haven't got chrome open because chrome kills me when i'm live on the stream right quick two-factor authentication okay pronunciation is so clean which headphones are those i think they're audio technica's i can't remember the name to be honest thank you so much uh vivishan great job bro thanks for the pressure for dude thank you so much so this is going to be the orders screen okay this one right here okay so let's go ahead and build this out now and this will be interacting this is going to have a combination of our firebase information and i'm going to pour information from stripe so i'm going to combine the best of two words and then i'm going to show it on the screen okay remember guys if you're enjoying what you're seeing right now you know what to do um you know to subscribe if you haven't already okay so underscore rfce we're gonna change this to your capital there we go orders and now let's go ahead and see what we're doing okay so for the orders i'm going to change the main uh the div sorry this should be a diff i'm going to enter but firstly pop in the header and then hit save and then let's refresh our page so we should see a header now nice so we are currently on the orders page okay this is looking good oh well it's all nice and then what i'm going to say is a h1 okay and then here i want to do anyway anyone from norway here oh what's up norway in the house all right so i'm going to say this is going to be a main tag sorry it's going to be a main tank this is going to be the body right so this is what we're building right now guys whoa i'm insane 10 euro donation hey bro i just want to say thank you for your amazing work i've been contacted by many companies here in paris by improving my coding skills doing your projects and following your videos mercy dude thank you so much i appreciate you you are definitely a core part of the papa fam this is why we do what we do thank you so much dude for the donation and i wish you the best man you know keep in the community and keep doing your thing that's what makes the papa fam the pop fam i love that comment thank you so much for that beautiful donation dude right so guys we're going to build this out right now we've got a h1 tag and then inside the hdmi say your orders okay and then the div over here i'm going to say the class name is going to be max width screen large remember that we said we want it to be a max width right we're going to constrain the width so max width large and then what i'm going to do is i'm going to go ahead and say mx auto to center it nice and then we'll say a padding of 10 okay it's looking good guys and then for the h1 i'm going to say a class name of text three excel okay hit save denmark and norway in the house oh this is cool international guys we've got text 3xl now i'm going to hide that one there we go looking good and then i'm going to say a border bottom margin bottom of 2 padding bottom of one and i want to give it a border yellow oops border yellow of a 400 okay looks good wait for a sec ah there we go look at that look it's clean look how nice that little little things in front end that did that make it work you know all right so let's carry on so now we've got the orders looking great and then i'm going to go ahead and say if there is a session so you see how before it actually said please sign in to show your orders right so what i'm gonna do is i'm gonna go ahead and do the same principle okay so i'm gonna go ahead and do um i'm gonna go ahead and pull my session and remember how we've done that in the previous bill uh previous video we use the use a session hook so i'm going to go ahead and put that in right now and this will give us the user's logged in state so now what i can do is i can say if there is a session then i want to show h2 tag saying orders dot length right all those oops no actually you know what before i do this i'm going to show you something we're actually going to pass in orders as a prop here all right so we're going to do a server side render to pre-fetch the orders okay so i will show you that in a sec but we haven't already done that yet okay so right now this all of these orders are pre-fetched so this is server-side rendering okay so it's going to do some pre-fetching here so that way there's no you know there's no lag or anything like that almost to 600 let's keep going guys okay so here i'll say if there is a session then on a render h2 tag and that h2 tag will say let's just say some orders right so in this case let's just say like x orders because that this needs to be replaced with a number right otherwise if there's if you're not logged in it's going to say h2 and it's going to say please sign in to see your orders hit save okay so now it says x orders so it doesn't actually have the orders in there yet okay and then what i need to do is i need to go ahead and render this out okay so we're going to prep it so the div containing all that information is going to have a class name the class name is going to be the class name is going to be a margin top of 5 and a space between all the y components of four and that gives all of this spacing between all of this stuff okay all right nice so now what we're going to do guys is we need we need those orders so how do i get them orders i do a server-side render okay so in order to do a server-side render remember a server-side render is very important it's before the user hits the page remember they make the request it hits the server first we can get a bunch of information at this point and we can pre-render the page up right so what's actually happening is we're going to fetch a bunch of like data beforehand and then we're going to render the page and then the user delivers it so by the time the user sees the page it's fully rendered with the information that's needed okay so we're gonna go ahead and do that right now okay so i'm gonna say export and we're gonna have a quick little water break i'm feeling it okay so we're going to say export async function we're going to say get server side props and this gives us something called the context okay now the context we're going to need to do a few things here so i need to have access to stride and i need to have access to the user's authenticated state right so this is where next doors came in and a few other things jm ninja says get seven props yes you guessed it dude right so i'm gonna say const stripe equals require remember anything in the get server side props is basically node.js okay so remember that anything in the get server cyprops is basically node.js okay so you you need to have your node dependencies here so i'm going to say constant require where it's well it's similar i mean let's just kind of think about it very simple this okay ignore that keep it simple for now so you can't stripe and then here i'll say process dot m dot stripe secret key secret key okay nice and then what we're gonna do is we're gonna go ahead and say we need to get the get the users logged in creds all the credentials yeah oops yeah nice get nice and then what we're going to do we're going to say const session equals and rather than using use session on the front end on the server render we say get session and what we need to do is pass in the context the context contains the request the response all the other stuff right nice so now what we do is we say if there is no session then what we do is we actually end it there we just say return a bunch of empty props so we just say return some props which are empty okay we don't want to continue on with execution if the server if it's empty okay so what i can do is i can simplify this to basically go ahead and do that no actually just keep it nice and neat there we go okay so if there is no session when ended there otherwise if there is someone logged in then let's go ahead and continue on we're going to say const right now says let me go fill my ball exactly dude stay hydrated const stripe orders equals a weight all right remember this is a synchronous function right so now i'm going to say a weight db so i need to import the db from our local firebase file okay so now we need to go ahead and set up our firebase file right so remember i said we set up a firebase file before but now i'm going to go ahead and set up a firebase file on the front end so let me go back to firebase and this is where we left off yesterday okay so we need to go ahead and initialize the app on the front end so we say remember we need we want to double check in case we have a double initialization so we say if there are any apps already right then if there is not any apps already then we want to initialize the firebase app so we say initialize the app with the firebase config and remember we got the config yesterday from the firebase um dashboard otherwise if you know if it was already initialized we say get firebase.app okay looking good right uh thank you so much sachin and then here i say constdb equals app.firestore so i'm basically getting access to the db here and then i'm going to do an export default this time because i don't actually need anything else here so there you go i've got my db coming from my firebase file okay and then i'm going to go back to orders and now inside of my orders what i want to do is i want to go ahead and say await db dot and i'm going to go out and access that collection so remember the collection that we were pushing information to now i'm just fetching it right so i'm going into it on the front end now and i'm fetching this someone say go into the collection of users uh go into the document for the session user email oh session or session dot user dot email oh god damn it what am i doing session.user.email yeah and then we're gonna go ahead and say uh let me toggle wide wrap so you guys can see there we go okay so session.email and then i'm going to go ahead and say dot collection of orders so we're going into the orders and i'm actually going to order them by order by i'm going to order them by the time stamp right and this is built in function firebase so we're going to order by descending so the most recent orders are going to come to the top guys what was it 600 razzle is right let's get to 600 likes let's keep pushing guys this energy is insane today let's keep going guys okay and now instead of on snapchat as to what we're used to we're going to type in get okay so we're simply going to get the information here okay so this will go ahead go into the app that place and get the information for us so this will get all the orders so these are the stripe orders from the the database and then what i'm going to do here now is i'm going to go ahead and actually get the orders from so this is a stripe order from the firebase database let's say firebase db and now i'm going to go ahead and get access to stripes so this is stripe orders and what i'm doing is i'm getting information from both and then i'm going to go ahead and you know present it on the front end okay so oh thank you oh zed i didn't know that i'm not going to press it in case it's not but you never know when you're online all right here i say const orders equals a weight and now this is a clever thing we're doing right when you have an array that you want to go through right because we're basically we've fetched a bunch of firebase documents but now i want to you go through every single firebase document and get the sort of corresponding stripe information from stripe api so i need to go through a loop and i need to make a request on each one but then so that's actually going to make a promise for each one and because each one is an asynchronous request so i wrap the entire thing in something called a promise.org right and that means that it will wait until all those promises are resolved then it will proceed okay so really important stuff to understand that rural chaos gaming says seriously doing a great work dude watching yours and causes videos since last week and learned lots and lots of stuff thank you so much dude i appreciate you man here i say await promise dot or open parentheses and here i'll say stripe orders stripe orders dot docs dot map and i'm going to say map every single asynchronous order okay so i'm going to do a parentheses map every single asynchronous order and return parentheses it's curly braces that's where we're implicitly returning an object right and i'm going to go ahead and get the following so i'm going to get the order id uh and then i'm going to get the amount so i'm going to say the amount is order data this is actually from firebase so amount and then we've got a bunch of other information so i'm going to go ahead and paste this in right here so we've got the amount shipping the demand shipping and we have the fontes says would this video be compiled into one video i can do that if that helps all right so if i'm about shipping and images and then i'm going to go ahead and say timestamp oops uh let's go ahead and choose timezone now timestamp's an interesting one so when you have a firebase timestamp if you're doing any kind of api work it's not as simple as you expect to go ahead and send a timestamp across you may send it across if you string a file but you lose the actual date sort of uh the format of the object or the format of the variable right the data type so what i recommend you do is you translate it to something called a unix a unix value is simply like a string of as well as like a number right so it's like a long number and i'm not going to get into how unix works but it's like uh you can convert that number back to the actual date okay it's to do with epoch and stuff like that in case anyone cares right but here i'm going to go ahead and get the timestamp and we're using something called moment right so what i need to do is import moment and then store moment right so import moment and i'm going to go ahead and do yarn add so i'm going to go ahead and cut my emulator for now and just say yarn add moment okay so this will go ahead and add a moment into my code good stuff right and then what i'm gonna do is go back down and type in i'm gonna say items okay now for the items what i'm doing is i'm opening up some parentheses and this is because what i want to do is i want to fetch some information and then access it and this is asynchronous so it's a little trick for you guys so i'm going to go to stripe go to checkout go to sessions right go to list line items and this basically goes into a session and gives me the items that came back and all i need to do is pass in an order ide and i can pass in an optional sort of set of parameters so this is an object afterwards and i say limit 100 okay and then what i can do is after all of this so outside of the parentheses i can go ahead and say dot data right so look what's actually happened there guys okay so it's a very interesting line of code that one right so oops let me go back to here right check this out a day just about yeah you can you can use either one or whatever you want dude so here you can see items so this is actually an asynchronous call that will return some information and then i'm accessing the data and that's being mapped to the items key right so very interesting one if you ever want to do that that's how you do it right and then once all of that's done so you see the entire sort of promise is done so we access the firebase db then we use those orders from the firebase db to go ahead and sort of you know add on to the information so we have now have the firebase orders sort of you know souped up with the uh stripe information right so now we have the line items as they actually came through okay so what i can do now is i can say return props and i can say orders are going to be part of the props and this will then mean that the orders come through as a prop so now i have the orders through as a prop to our orders component which means i can now map through the orders okay so if you want to prove that this actually works you can just go ahead and say console.log orders and then if we go ahead and pop this to the side okay like so and we're gonna go ahead and do an inspect nice and then here i'm gonna go ahead and say console and now you can see if i go ahead and refresh it says db is not defined okay so i need to inversely pull in my db so i'm going to go ahead and import my db if it's not there just do a simple import to go ahead and pull it from your firebase file okay let's do another refresh cannot read property email of undefined okay interesting let's check this one out so session dot user get session is the context there we go so let's check this one out if there is no session session.user.email oh thank you we just got oh we just got a ammon sing oh dude another 10 euro donation you absolutely deserve it papa fam is on fire thank you so much dude appreciate you all right so this is a uh thank you so much man that's so kind to you right so this is an interesting box we've got dark session user email okay cool so let's actually debug this a little bit okay so we've got the session here oh okay got it the reason being is because i wait we need to do a wait to get session otherwise it was a promise it was trying to access there we go so you see debugging happens to all of us guys okay cool so now what i'm gonna do is inspect and then we're gonna go ahead and do console and let's check out what we're actually getting okay so you see it's returning an array right and that array is the order so this actually might be hard to see but you see that's the array of the order and inside of it now we have the images for the object we have the items inside the object so you see everything kind of came back as we wanted it to okay so can you see now here there we go this is all the objects and this even has the images and so forth so now we have all the information from the orders that we require and yes i do use chrome when i'm actually coding but safari is better when i'm live streaming okay otherwise chrome just kills my ram and we all know that chrome loves ram all right so now what i'm going to do is underneath here guys i think we're i don't know how many likes we're at let me know someone let me know right wow you're the best honey i'm from ethiopia ah awesome dude thank you so much all right so here what we say is orders and we're going to protect ourselves with optional chain and we're gonna map through the optional chain just means that if it's undefined for whatever reason it's not gonna freak out right and then here i'm gonna say map through every single order and return something okay in this case we're gonna return an order right so oh we're so close to 600 guys let's keep pushing right we've got we're going to return an order item okay so i'm actually going to go ahead and create an order item oh or the component sorry or the component right so i'm going to create the order dot js component okay order.js component boom underscore rfce nice right looking good guys looking good and then now well we have the order let's go ahead and open up our order okay and this order is going to take in a bunch of different props okay so what i'm going to do here is i'm going to go ahead and actually say that it takes in all of these sort of props here so id amount amount shipping items timestamp and images and if i go back to my orders.js what i'm going to do in this case is i'm going to destructure right wait for it i'm going to destroy so i'm going to destructure the item and pull out those values okay so in the order item here i'm going to go ahead and say and uh right give me one second guys i'm just going to do a quick thing i'm not going to go anywhere it's gonna go ahead and do a little trick which will free up some ram okay there we go we are back nice good stuff okay should have freed up some ram little trick that we do right so now i'm going to go ahead and do this boom and then i'm going to go ahead and pop in so let's go ahead and pop in so we're destructuring the id amount amount shipping items timestamp and images okay so what i'm going to do is you see it says cannot find order that's fine we're going to import it from order there we go from my older component hit refresh it says please sign in to see your orders okay that's fine right so we can go ahead and sign in sign in with google and hopefully it doesn't ask me again okay good there we go i'm gonna sign in there we go and this is x orders call and now what i'm gonna do is we get the destructuring here and then basically i'm just going to pass everything through as a prop and the key is going to be my id in this case okay so we're going to go ahead and pass in those values as so okay so there you go looks great at the moment and then over here for the order this is where we need to style it out okay i'm gonna go ahead and wrap there we go so we're so close guys we're so so close to the end right the deployment step is another little bit tricky because we have to go ahead and just do a few configuration things but otherwise do not worry we will get there okay so the final order component all right so i'm going to order i'm going to import the things that we might need all right we need moment and we need currency so i'm going to go ahead and get those moment and currency and then what i'm going to do is i'm going to go ahead and start signing out okay so the parent div is going to be and this is going to be fun now because you're going to see everything pop up it's going to be relative because i'm going to have something absolutely positioned inside of it okay and then i'm going to say border and rounded md somebody said your computer has virus no it's not virus it's just um it's just uh intense on the stream there we go but there we go so nice then what we're gonna say is we're gonna have a div inside of this oh we're so close and then we've got the div stripe is done yes we've done stripe we've actually conquered stripe already so then we got this and then we're going to go ahead and say for this one we're going to say cast name is going to be flex items are going to be center so what i'm building right now guys is this so i'm building this top portion at the moment okay so i'm building this top portion at the top right so this bit at the top and what i'm actually going to do if we go back to our orders rather than saying x orders i'm going to say orders dot length hey we beat 600 let's go guys anyone new who's watching hit subscribe hit the like button if you're enjoying what you're seeing and hit that first link in the description and sign up for tomorrow's event it's gonna be so much fun wow guys it's been amazing so far look at this guy's at one order nice so we can see our order and then here i'm going to say div and then uh inside this we've got item center space of x of 10 right padding of five and then i'm going to go ahead and do background should be gray 100 and i want the text to be small oh no oops see that's what happens when you start losing concentration then we're going to go pop this in there and then i'm going to say the text should be gray and it should be a shade of 600 nice so you can see right now we're building out the top portion okay water breaking in a second because right now i can feel the bladder starting to creep so here we're going to have a div and right now you can see there's going to be three diffs it's gonna be one two and possibly no it's going to be one two and then it's gonna be p tags right so we're gonna have a div first and this one's gonna have a p and this one's gonna say order place i'm just gonna do capitals and say order placed and it's gonna be a class name of font bold text extra small right someone says sonny your voice has so much bass that my table is vibrating on full volume i love that when i wake up in the morning then it's like ultrabase and then here i say moment.unix timestamp dot format so i'm actually going to go ahead and change that unix timestamp the one that we used when we were pushing it through the api and we're going to format it to the following thing we're going to say dd mmm yyyy and this just gives it a date which is a pretty format you can change that if you want just check out moment docs so the moment.jstocks and it will go ahead and work for you okay so that looks pretty good right so then we've got the div done and we've got another div and this div is going to have a p tag which is gonna say total and it's gonna have a class name of let's just say text extra small and then we'll say font bold okay and then we're gonna have a p tag and inside that p tag i'm gonna have the following okay so i'm gonna put two values in here i'm gonna have currency and the first one is gonna say amount and the second one is amount shipping and you can see i'm sorry quantity amount and the second currency is amount shipping they're both gbp in my case and i'm gonna have next day delivery next to this one so you'll get this as the output after this okay looking good guys and then after this div we're gonna have the number of items so i'm gonna have this one three items okay um so now what i'm going to do is i'm going to go ahead and say items.length items.length items so i'm going to basically say like so many items there we go and for this one i'm going to style it up a little bit different i'm going to say the text should be extra small although it says just say small let's say white space no wrap i don't want to have a wrap around and then both on the small screens and above i want the text to be extra large okay and then i want to be self end which means it's going to push itself all the way to the end okay and then i'm going to say flex 1 so it should take up the majority of the room oops well next one and i want it to do text right so i want it to go be positioned to the right and i want it to be blue once we go ahead and apply all this together check it out boom there we go right so you see how it's smaller but on the bigger screens it goes into a bigger size all right it looks pretty good nice and then we're gonna have underneath that we're gonna have another one which says order id right so this one's gonna say order number and this is gonna have in jsx the id right so you can see it's massive at the moment so i'm gonna go ahead and obviously make that a little bit nicer so we're gonna say class name should be absolute so right now i want that to be in the top corner like so and i want to truncate after a certain size okay so here we're going to say absolute right and then we'll say top two top two right of two right of two width should be 40 and no more on the mobile see that and then we get this horrible nastiness right and i'm going to say large should be width of 72 so i'll change it don't worry with the 72 and then i'm going to add in truncate means if it's bigger start cutting it off you see that and then it stops wrapping around right so that's how we do it and then we'll say the text should be extra small and i want it to be white space no wrap nice okay so now you'll see it will grow accordingly and then on the big screen there you go there we go it looks pretty good right um cesar says so how much time have you spent on this build this project is huge and super cool i honestly just didn't sleep for like a few days it was about um three three or four days of really intense work and i kind of just broke it down and attacked it right so we've got a p tag here and then i'm gonna go ahead and say div and uh here i'm gonna have a and this is where we have the images guys so i'm going to have these pictures now okay so i'm going to have a div with a different side of it and the div at the top is going to have a class name of apparent p of five right and uh over it to that i learned from saying now have my own channel awesome stuff dude and i'm gonna say on the small screens and above so the bigger screen so i'll give padding a 10 right and then i will in a sec dude give me one sec so he says can you show an orders jess when it comes from get session uh orders suggest because you've been watching dude you're an og i'll show you there you go okay that's what you do you probably need to await that's all okay so i'm gonna go ahead and do so we've got the div inside and then what i'm going to say is for the div inside i'm going to say that has a class there so actually let's just start rendering the images i'm saying for the images i'm going to say map through every single image and return the following thing i want to see an image tag and for the source i'm going to have the image itself and then we can go ahead and sign it up i've made a typo don't do that image hit save okay so right now obviously i mean it looks decent but it's just huge so there's a problem with that so i'm going to give a class name to this and i'm going to say wait for it last name equals and we'll say height of 20 right object contain and small screens in the so anything above a small screen should be a height of 32 okay and that should fix an element there okay cool looking good guys looking good and then the final step you can probably beat me to it it's actually flex we're gonna give it a space of x on the x-axis of six and then i'm gonna say overflow x auto right which means that when it overflows if we've got an order which is big enough let me see if i got one here like this one for example if it gets big enough you can see it goes ahead and just scrolls across all right so it looks pretty good there right everything looks pretty good nice okay so this is looking pretty to be honest i don't want to say it but i think we might have just finished right so and look at that the music is awesome so you know what guys let's go ahead and test out the entire build right now i'm gonna go ahead and make sure you smash the thumbs up button already because this is crazy right so we might have honestly just finished the front end of this bit right now right so you can ignore this bit for now and i do want to show you a little hack by the way so right now when we refresh notice how it has a little glitch at the top where it says sign in and then it says no sign in right so to get rid of that glitch on whatever page you want to do it for if we go to index.js right i'll show you how you get rid of that trick right so go to index.js for example very handy little trick actually and you can go ahead and say const session equals await get session get the context behind it and you just return that as a prop right return it as a prop and already because we're going to be using the uh i think anything underneath that after we'll then have the session already loaded into it so if i go back to my amazon home page now notice when i refresh there's no glitch there see that it's already fetched it fetched on the see that it fetched on the server right but it's page specific so if i go to returns and orders or oh we need to do that actually we need to make that route to the page returns and orders so we'll go to your headers we're almost done anyway all right so for the header where is it gone so inside of our header we're gonna say on click of where has it gone accounts and orders this one we'll say on click of accounts and orders returns and orders we're going to say um if there is a session so only if you're logged in we want to push them otherwise don't push him to that page you can do if you want but it's up to you it depends on how you want to do ux all right to be honest it's probably better because we actually do account for it so yeah let's do it we still account for it really stop push orders there we go okay and now if i go ahead and do it so if i click on root returns and orders there you go nice right if i refresh this page you can see how it glitches right so you need to just go ahead and add the same thing to that page and it will prevent the glitch from happening right so that's awesome stuff right it works really kind of simply and it works simple with that now right i want to go ahead and play some you know let's go ahead and get real where's it going okay there we go all right there we are that's the one i was looking for okay this is the moment of truth guys so we've done all the front end work right now don't get me wrong we still have to do a deployment but let's see if it works from end to end right it's a moment of truth guys right get ready for this we're going to do a test run first and then we're going to deploy okay so first thing you want to do when you run this application now come on jay you're going to start your listener for your stripe webhooks so it's getting ready we have our webhook listener we have our application running all right and then we're going to go ahead to our application we are logged in so everything is good on that front great stuff and then we're going to go ahead and add a few items to the basket oh it's getting me give me shivers right all right and then we're going to click on proceed to check out okay so we can see three items in here okay so if i proceed to check out 148 okay now it's 148 with 6.99 shipping that's why it's 155. everything has come through perfectly i'm gonna go ahead and add in the details okay i'm adding in my details right now four two four two four two four two for the card details okay right let's do this guys hey uh oh is it gonna work guys i'm not even gonna check the server logs okay and if we see the order right now that is so goddamn cool [Music] look at that guys that worked like that was perfect that was so perfect that was a full run through and the app is working i thought that was amazing that is so so fun all right guys hit that thumbs up button if you enjoyed that run through i know it's a little bit suspense before we try something a little bit different the comments right now are incredible right i love the positivity the fact that you not still have energy after that insane run through right marty goes the music has been so intense i know that's what i was trying to push for you know that bit of intensity guys the next step is a little bit of configuration for the deployment and then it's golden okay there's a tiny bit of configuration for the for the you know the finishing touch and then we are golden okay so i'm gonna go ahead and you know we'll go back into a little bit of a focus mode and then we'll get back hyped up when we wrap up right but guys we are doing amazing right now we are doing amazing right now let's keep on going jm ninja says fail got an empty order away at the end don't worry dude i had it i'm telling you i had it this is just probably going to be your web hook this is guarantee it's there so check your signing secret make sure it's make sure you you do stripe login and it's the correct account okay but keep on going dude right so what i'm going to do is i'm going to go ahead and try and do a deployment now so i'm going to firstly push this code this is already hooked up to a github account on versa so it's already connected to my virtual account so what i'm going to do now guys is i'm going to go ahead and push this code so i'm going to say git add all git commit and we're going to say day 4 day 4 build so there you go and you can see now the 13 goes away because we've just committed all those files and then i'm going to say get push so this would push my code to my github awesome stuff right oh my god another 200 followers says honestly i don't know what's going on man i really don't know it's crazy stuff though i don't know are we close to 700 likes but all i know is for day four that's impressive man i'm i'm blown away myself all right j ninja don't worry dude keep it up that's awesome man all right so now we're gonna go ahead we've deployed it okay so i need to go ahead and check out on reversal so let's double check what's happening on versa okay so now there's gonna be a bunch of environment variables that i'm gonna have to set up okay so i'm gonna go ahead and click continue with github and i'm gonna have to quickly log in on this one guys and do i have my creds here okay give me one second guys i'm just gonna get my okay i'm gonna i'm gonna i'm gonna risk it all i'm gonna put chrome on because i just can't be asked for that i'm going to put grumman oh we're back from chrome guys what's that cpu and ram get eaten right so now we've got the amazon 2 amazon starter template where has it gone this one right here okay this is the one i'm looking for okay so you can see this was just created a minute ago because we just deployed okay so that's looking great so if we go over to our deployments we can see that it says day four build awesome stuff looking great okay so now what i'm gonna do is i'm gonna go to my settings right yeah honestly schweitzer says it she's like whoever coded off with me today hats off like and guys i'm not even just joking that was well done for everyone who stuck around their attention right now for the build that we just did is is insane like really honestly crazy stuff salmon says now i feel my confidence and react suddenly increased so much thanks to you that's awesome man that's what i want to hear thank you so much dude i'm going to click environment variables and here you can see i've got my google secret and google id but i'm going to go ahead and pop in the rest okay so this is your final steps all right so what i'm going to do is i'm going to get my stripe public key this is the first one and then i'm going to go ahead and pop that in i'm going to click add and obviously i'm just showing you and then i'm going to deactivate this so it's all good for me but don't share your stuff stripe secret key goes here i'm going to put in my secret key like so there we go click add and then i'm going to also put in we've got the next url so this one we're gonna have to configure in a sec same for the host right so these two things i'm gonna have to configure in a sec but what i want you to do actually to sort of save time is you want to click on your deployments okay and then once this loads up i want you to go to this url okay so not the short url i want the long url okay so i want the one which says a look so if you click on amazon 2 amber then you're going to click sign in you're going to get if i click on sign in you see how it redirects me again this is the url that i care about amazon to this one okay so you want to get the long ugly one or you want to grab that long ugly one and then you want to make that your url okay so in this case what i'm doing guys is i'm saying for me it's going to be next warth underscore url okay and then i'm also going to say one second i'm also going to say um so this one add it there we go and i'm also going to change this host and if you do get a domain name you can definitely go ahead so for example at this point i was saying www.san but you in this case you're going to have to do you know the one that we've got here i'm going to grab this value again there we go okay awesome stuff we're going to click add nice okay so we've got google id google secret stripe public key stripe secret key next source url and the host okay so now we should have everything in play so i'm gonna do is i'm going to go over to my overview and there's still more to do so don't worry we're going to we're going to get through this together okay so i'm back to my application i'm going to click visit okay so this is the deployed apps you see the long curly url not the short one the long curly one okay and now what i'm gonna say is i'm gonna go ahead and say sign in and let's firstly check that this is all working so sign in and you can see the redirect is not working it does not match the authorized one so we have to go ahead and update this i'll probably change that actually that's probably my bad so let's go ahead and uh i'm in the wrong one so i'm going to go into a different account let's go into the correct account so you can use a short one give it a try but you know like this is where you can trial an error okay my honest advice here would be if you've done this much work then definitely go ahead and just get yourself a custom domain and put it on there right that's what i'd recommend okay so then at this point we've got the uris so i'm gonna go ahead and pop in oops uh no not that one no no no i'm gonna go back to my sign in where did it go where was it this one here so it says http request i'm going to add this in the url so here so it authorized redirect uris i'm going to pop it in there okay and then for the uri i'm going to go ahead and do it the same thing but i'm going to get rid of everything past the app okay i'm going to click save awesome i see loads of people asking for um jay i see you so i'm going to go ahead and do that okay cool and then what i'm going to do is um let's try again now so i'm gonna go back i'm gonna go back to my app so let's go back again stick with me guys we are so close to the end now okay so i'm gonna click on sign in sign in with google okay and boom okay we get this now you can click properly team awesome stuff okay now once you've done that right you can see it's all looking great so i'm going to go ahead and add to basket add to basket basket click on this click proceed to checkout let's see if it worked that means our secret keys have been set up correctly if it shifts us to a stripe if it doesn't then it's not done correctly yet okay so when i added those credentials in i didn't trigger a redeployment so that's probably why yep that's why so what i need to do is i need to go back to my to build i need to go to deployments and i need to go ahead and say redeploy nice okay this will go ahead and redeploy the build with the new environment variables that i added in okay now guys while this is loading i'm gonna give a massive shout out to the guys over a hostinger right so they're the ones who made it possible for me to get the custom domain sunnysanger.com for like a cheap amount okay so remember guys we do have an awesome code over there code sunny make sure you use it at checkout and what you can do guys is once you're done you can change your next auth and your host environment variables to simply the one that you bought right so imagine if you bought like uh let's imagine it was like in this case sunnysanger.com you just need to go ahead and hook it up in the way that i'm going to show you afterwards so i'll give it a go i'll go ahead and show you how you can do it afterwards but for now um let's go ahead and just get this up and running but it's extremely easy to actually get up and running with hosting uh domain names okay so let's go ahead and check this one out okay we're almost done guys almost there okay refresh let's see if it's done there we go created one minute ago now let's double check if it's doing what we need to do awesome stuff build done visit the page and hopefully the cache is done okay nice sign in okay let's sign in one more time and then i'm going to sign in with my account and you install stripe cli with npm um yeah you can of course you can um i know i don't know actually i don't know but guys don't worry if you don't if you want to do it via the cli install homebrew and then install stripe it's easy to do okay so now we're gonna click add product add product there we go at the basket sorry proceed to checkout and now we should see a redirect here okay let's double check what's happening something here has been changed so it says integration invalid value for stripe api key should be a string you specified undefined okay so that's what's happening here so we haven't passed in our environment variables correctly so i just need to double check what our environment variables are and then if we've done it right so let's go over here settings and this final part is the bit where again you know you have to like be patient keep moving with it and just double check all your values so in this case we've got host we've got yes that's great now we are going to also do the stripe signing secret in a sec we've got the google id yes google secret we've got next auto url yes and this one is just to double check it trip secret key five one i s x blah blah blah okay looking great and then you got the public key you got the google screen group key nice okay and then we've got the host key which is looking good as well okay and then what we do need to check as well is that the next config was set up correctly as well so stripe public key that was working on our local which means that it most likely is the correct over here okay so once that's done what you can do is but basically i've probably maybe made a little step up here but guys what you want to do is do the same thing i'm going to show you my build and uh we can go ahead and work through it the same approach so here we go so this is my build same exact thing i've just set up the environment variables save us a bit of time so here we go the environment variables so you see we've got all of our keys that you can see and the final one that we were missing is stripe secret key i'm going to show you where you can find the secret key so previously the secret key that you guys were using was the one that you got from this stripe listen to command okay but the one that you actually need guys is this one over here so you want to go over to stripe um i'm gonna go over to stripe okay you're gonna go to your developers and you're gonna click on web hooks okay now inside of webhooks you want to go ahead and do not worry about that when you're doing it it's probably a minor little thing you're gonna click add endpoint and then here your api endpoint okay so this is where you want to go ahead and push in your endpoint so in this case what i've done before is do api web hook but in the previous case when we had you know the sort of ugly url that that vessel gave us let me go ahead and show you nope not that one nope not that one in this case when we're on versal so this one over here okay then what we can actually do is change this round so we can add endpoint and then we go ahead and pop this in here and we get rid of this and we say forward slash api forward slash web hook okay and this is the web hook that will go ahead and receive the stripe events okay so you now you can see this is how you replace it so that way obviously we don't have an emulator once it's on versa so now we're pushing it to this one instead select the events to send okay so here we say checkout session completed so now you can see this is how you want to configure it okay then you hit add endpoint right now what this is going to do it's going to give you a signing secret so we're going to click on the signing secret copy here go over to our versal deployment and go ahead and pop it in there and say stripe signing secret then what you want to do is head over to deployments go ahead and redeploy and it will work okay so i've just made a little slip up on the other one like it most likely one of the environment variables a character was wrong when i copied and pasted it but that is how we do it okay so these are the values that one that you would want to do i really recommend guys that you uh you have a water break that's the first thing i really recommend the other water break right now okay now what i would recommend guys to wrap this build off right which makes it look like work perfectly is rather than messing around with a messy domain name right you've come this far right you've worked so hard to get to this final point now why would you you know like use some ugly domain name right so what i'd recommend guys is instead you go and grab a domain name of hostinger okay so hosting are an amazing platform they offer incredibly competitive prices for their packages we do your boy proper react has actually hooked you up with a discount code so use code sunny at checkout and you're going to be able to save yourself a bunch of money when you get your domain name okay so you can see they've got a bunch of different plans here but i would recommend you can pick whichever one you want um and you can pretty much go ahead and grab yourself a domain okay so what i'm going to do is i'm going to log in and show you how i was able to go ahead and connect my domain name up to hostinger okay and then that way hopefully it should help you guys do the same thing so that you can use it when you're doing it now we're going to play a quick game of select the boat you know how they make us do it sometimes i question i'm like is that actually a boat have you guys ever had that i get it all the time so i've actually failed to capture before i'm like wow okay i guess i'm a robot and there we go um let me log into i think i'm in the wrong account okay seems like i've got the wrong details let me go ahead and try again okay did honey actually help you ever yes i actually did use honey okay let me go ahead and try my login one more time my god my two-factor authentication today is going crazy let's try this out one more time okay i'm just logging into my hosting home nice and this will mean that you guys will finish it off with your own really beautiful like host name that you like that's what i want for you guys to have a very nice kind of host name you know you can connect all right so i was in the account but it was the wrong account oops all right so i'm gonna go and try and log in one more time okay logging into my second account let's go ahead and try this out blue octopus says the capture even said i was a robot yeah honestly i feel you man i feel you okay so once you've gone ahead and order got your domain so i went ahead and bought my domain sunnysanga.com because guys honestly it's a nice flex right that you can have like a very nice portfolio it doesn't matter what you're doing but you want to go ahead and grab your domain name click this the h panel makes it extremely simple to go ahead and set this up right so if you click on dns name servers over here right you get the manage dns records page now to connect this to your versal deployment so for example this ugly url if you want to change this to the really nice deployment go to your settings tab inside your versatile deployment and then go to the domain section okay click on add right so i'm going to go ahead and add a little test one let's just type in imagineersabc.com and i click add right then you can go ahead and you want of course want to redirect all the abc traffic to that as well so you can go ahead and do that as well nice uh okay so let's just do abc test one two three nice let's just try a random one okay and then what you're gonna get is this right here so all you need to do guys is copy this value it's easy right you copy this value and you can do the same thing for the cname right so you're going to copy this value and then get the record details go over to your h panel and you simply go ahead and paste it in so it's honestly as simple as that you just go ahead and pop this in and you would change that value over here so you would have an a at 76 so in this case a at 76 click add record give it a while and before you know it you'll get a little tick and you have a custom domain name it makes all of those checks before you know the next auth and the uh host sort of environment variables so much easier right so i am going to pop in a link in the description i'll get jay to do it now but basically what we're going to do is underneath the homework sort of link we'll have a link for a special link that you can use that will give you a discount off of your annual plan on hosting all right or you could use code sunny at checkout guys do it honestly because it's a really nice thing to have after you've done all of this work you want to have a nice domain name at the end of it right so that would be a great way to finish the build off but guys what we want to do now is uh make sure if you can't find that link i'm going to add it right now afterwards um but make sure you use code sunny at checkout and it will work s-o-n-n-y okay so that's going to be a nice little finish natasha says yes exactly that's the energy we want to have and guys before we you know before we wrap up let's go ahead and do a full run through of the app that we built in this five-day challenge right so we're not finished yet day five is tomorrow the biggest day ever and guys we're gonna go ahead and give you a complete run through of the application that we built today let's check this one out right so uh jay just let me know if you did add that in right so we're gonna we're gonna go ahead and add in a bunch of the items there we go and i'm actually going to sign in first so let's do that first that'll make sense and i'm going to sign into my account okay nice i'm going to sign in like so awesome stuff and then here i'm going to go ahead and add a item to mask here add this add this nice and then i'm going to go ahead and check out there we go proceeded to check out great and then here once we're here i'm gonna go ahead and add in the details okay so let's go ahead and pop in my details somebody said why don't you show your screen even though it's dummy details because auto pop like the auto fill comes up with actual details and that's not cool guys that's really not cool so uh obviously we don't want to have that come up okay so guys now what you want to do is click pay and then we went ahead and have all of this you know we had all this working this will trigger the trigger the web hook that we saw earlier which will go ahead and you know hit our endpoint our backend endpoint push the information to firebase so we fulfill the order at this point and then we get the thank you confirmation page and then if i click go to my orders we're going to have our firebase information combined with some stripe information to represent our order incredible incredible stuff all right really really nice um so that's looking awesome guys harsha says sir hosting size how much we need um you don't need honestly you don't need much at all so like if you want to choose the cheapest one go for the cheapest one but just you just want to get the name i'm not sure what everyone's laughing about but uh yeah i couldn't really i couldn't see the chat i moved too quick um but yeah this is amazing stuff juliana says sunny since day one i deployed with my own domain but yesterday during the aust when i check it goes back to the ugly url um maybe it does behind the scenes but when you actually white list those values that's going to get you past it right remember if you run into any trouble at the google stage it will give you it literally gives you the the urls to white list if you run into any trouble afterwards it's going to be with the environment variables take your time with this guys because you can see it does work we have it on sunnysanger.com so if you want to mess around with it there you can use it there to sort of play around with it see how it should be working but remember what we said guys is so i think the link isn't working correctly at the moment oh there we go yeah jay just chucked in the chat you can go and check it out we're going to include that in the description as well like i said guys have a beautiful looking you know fancy hosting a name you know domain name hooked up to this site and it will look really really clean and uh guys i think this was an incredible few days now before we wrap up go ahead and i want to have a chat with you guys did you enjoy this build right we learned over we learned so many different concepts in this build i'm going to go ahead and actually write them down right now right so we learned so many different things in this build and i'm actually going to get used something called i'm going to get a blackboard here i'll say blackboard black screen i think it's called yofla but it's quite cool yo there we go okay so check this out guys we have a black screen there i'm gonna go ahead and go over and list out everything that you guys learned in this build today okay so we went ahead and we learned next js right so we have next.js oops again we have next js right we have we learned about server side rendering so ssr right you learned about redux right so you guys will actually got some use out of redux so you can put all of these things on your portfolio that you got in day one we learned about tailwind css right so how you can build amazingly responsive websites right so not only normal things but we learned about responsive websites right so that that's why our website looks crisp and looks so goddamn beautiful we learned about next auth authentication so we have next auth authentication so this was uh yeah so this is looking amazing now we have google login you also saw how simple it was to add in more providers so some of you actually did it you had google facebook github login incredible stuff right and i'm reading your comments this is incredible guys i love it i love the energy but as i'm listing out everything comment down saying i am registered for tomorrow because we're going to end this with a massive bang it's going to be a huge party tomorrow i want to see you there and uh yeah as i continue on here let me know in the comments saying i am ready for tomorrow right we learned about apis right so we actually use the fake store api right so we learned about the fake store api we had so much stuff inside of this build we had hero icons for svg icons right so svg icons it was looking great so look at this we have so many people right here so we have a blue octopus he goes avnish abdullah amman crowe pierce your status nice guys the le the hosting at um discount code by the way is now in the description so you can check that out razor ammon schweiter ben i see you natasha says i'm ready for tomorrow this is what i'm talking about guys this is the energy that we are after right we had next year's redux tail and css next thought api hero icons and of course everything underneath it react js right so much stuff happening here and obviously all of these things branch out into all sorts of stuff here we had you know we had next router we had you know especially optimizing the images with next image you know the image um component we learned about you know good design right jm ninja the project is deployed to my sub domain on my portfolio do i really need to buy a domain for the challenge it's completely up to you dude completely your call you don't have to there's no extra points but uh it's just a nice finishing touch right it's real be a really awesome touch for you um to have even for your portfolio right to have sunnysanga.com as opposed to versa dash abc is it is a lot better right so um yeah and also guys of course we learned about web hooks right we learned about web books we learned about strive right so stripe checkouts we did all of this good stuff and we learned about firebase all right so we had firebase oh this is crazy guys all of this in these days you guys have picked up on now think about your cv now right your cv is jacked it's powerful right so don't worry if you're late with your submission again even if you miss the training like even if you missed tomorrow or you as in you missed the deadline don't worry about it turn up because there's a prize for everyone who turns up tomorrow just for tomorrow okay so you get a prize for that uh joe says i'm so ready for tomorrow been ready for day five before this challenge started let's go hi sisters please tell me about it nice just feel free to follow dude uh yeah guys we absolutely crushed it and guys the papa fam absolutely came through with this build we crushed it guys almond says deadline for homework uh yeah so if you want the points it's gonna be before the build tomorrow which is an ask it's a tricky one right i don't know if i'm gonna extend it or not i don't think so all right but guys overall we killed it in this build i'm gonna end it as it needs to be ended with the only thing which is right the proper fam anthem a lot of you will know what this anthem is but if you don't know get to know it right uh and uh gwen says the best price for yourself is your partition participation during these days exactly i want to say again a massive thank you we have so many new subscribers this is where i don't have music we have so many subscribers during this challenge i want to just take a second now to say thank you so much everyone for giving me your time giving me your focus you could have been doing anything during these few days but you gave it to me and i just want to say yeah let's absolutely crush it let's finish it with a bang and guys this is what it's about right this is what it's about i'm gonna go ahead and just read out these these uh comments as it comes through sign up for day five tomorrow and we're just gonna carry the energy on tomorrow when that beat drops guys i'm officially gonna be wrapping up and ending this right now 43 000 subscribers crushed it guys we built amazon just insane just insane the things we do as a as the papa fam we brought this guys incredible incredible stuff just say well done to yourself guys [Music] i'll see you all tomorrow peace [Music] [Applause] [Music] [Applause] [Music] you

Channel: Sonny Sangha

Views: 32,331

Rating: 4.9353275 out of 5

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: 4E0WOUYF-QI

Length: 192min 27sec (11547 seconds)

Published: Sat May 22 2021