🔴 NETFLIX REACT.JS Challenge | Day 4 (STRIPE Checkout/Payments & Firestore Database)

[Music] what's going on guys welcome back just got a major donation thank you so much jessica crazy crazy stuff guys day four of the netflix five day challenge and today we're going to be building the rest of the payment processing using stripe it's going to be a hell of a lot of fun stuff i'm telling you guys it's hard to get me excited now but this is some fun stuff we're gonna be building today so guys let's go ahead get hyped up in the chats where were you watching from let me go ahead and know right now i'm just checking out these comments and guys in the meantime i'm gonna go ahead and show you guys what we're gonna be building all right let's dive into that right now so guys yesterday we left off with this netflix build right we left it off over here we had access to netflix we can go ahead and sign in you know all that beautiful stuff we go ahead click get started let's do us log in right now so yeah gmail.com abc abc and then we click sign in and then you guys can see the edit profile screen came up so we were perfectly placed okay perfectly placed for building the remainder of the app which is essentially this section right here so if we go ahead and click on subscribe it's going to go ahead load up a stripe checkout session that's going to go ahead and pull up a checkout for us right this is all using stripe right and it's using a really cutting edge brand new stripe and firebase extension to do this which is so goddamn cool i'm not joking it is a lot of fun and we're gonna really dive into that today all right so this is gonna work and we can pretty much go ahead and enter our card details and i'll show you how to enter a test card detail and it will work guys and this is gonna be a hell of a lot of fun and then it goes ahead and updates us in the database so guys if you're excited for that right now let me know where you're watching from right now and smash that thumbs up we just crossed over 100 likes on this video guys we got over 200 video uh 200 homework submissions how insane is that let's go ahead and see who's in the house we've got brazilian oh brazilian and portugal here brazilian brazil and portugal kenya africa bosnia us sweden italy sudan daytona nottingham what's up uk we've got nigeria in the house greece uzbekistan morocco germany this is what i'm talking about guys this is international look at the energy that is the energy that we thrive on that's the energy that we go ahead and and we just kill it with right so guys without further ado are you guys ready to jump into day four i'm damn sure i am and i'm ready to go ahead and get this day started okay so let's go ahead and see what we're gonna be doing on day four let's go ahead and jump in guys so day four i hope you're excited this is the final technical day guys right so get your coffee get your water i've got my three glasses of water here as standard and we're gonna kill it okay and we got india in the house nice switzerland in the house nice and the u.s what's up guys right what's up sam good to see you here right so day four right i want your full attention it's time to focus right now okay no messing around everyone can wait if they want to text you call you so go ahead and cesar's in the house go ahead and turn your phone on do you understand guys oh my god yes we just today we broke 20k we broke 20k on youtube that's insane and i'm about to break 20k on instagram as a result just for you guys i'm actually gonna go ahead and up the bonus treat that i was gonna do yesterday tomorrow in day five so i spoke to jay and i thought you know what let's do something even bigger than what we originally planned so day five i'm already gonna be dropping something for all of you but i've already i've just thought in my head right now right now that i'm gonna be upping the treats that we have tomorrow okay just because we hit 20 000 on every platform so let's go ahead and carry on with the day guys it's time to focus okay welcome to day four of the netflix react js challenge guys okay so i'm gonna go ahead and lower the music a little bit there we go welcome to day four the react js challenge i hope you're excited we've just touched 151 viewers okay and today we're going to go ahead and complete the build which means integrating a payment processor which we're gonna use stripe for right we're gonna use stripe to handle this and we're actually gonna use a really cool cutting edge firebase and stripe extension now the fun part here is i guarantee you there is no tutorial on youtube right now which is use this extension you know why because i watched the firebase conference and it is fresh this is a brand new extension so i'm teaching you something which has not been used on youtube yet so come at me developers we are gonna do this for the first time so i need your full attention in today's world okay so guys the agenda for today we're gonna start off with adding the stripe checkout functionality to process the monthly subscriptions for the user all right we're gonna have three different plans we're gonna process all of that stuff make it all work then we're going to go ahead and integrate a database we're going to use firestore which is firebase's real-time database okay and then we're going to be using this really powerful extension that i mentioned called the firebase and stripe extension okay we're then going to end with keeping track of all of the subscription information so that we can then go ahead and update the ui to tell you which package you're currently on okay and that will be today's homework as well okay so guys remember to be a part of this challenge to win all those beautiful prizes that seven thousand pound prize pool you need to go ahead and reserve your spot and challenge okay so this is just that i know who's in the challenge makes it all easy if you haven't already done that then please please please go ahead and sign up to that right now but most importantly use the facebook community okay the facebook community i don't know if you guys have seen it but it's amazing right we've absolutely like it just shows what the papa farm is all about everyone is constantly helping each other i can't stress enough how really amazing you guys have been inside that community and um yeah go ahead join that facebook link the link for that is in the description it's actually number three so the the link number three in the description there are five labeled links in the description so go ahead and join that okay so guys let's go through some positive notes to begin this video okay firstly i just want to say look at these messages i've been receiving i got an email which gave me a full testimonial from stephanie guy mahesi guys it just made my morning right and what he's saying here is he's pretty much saying that he was ready to quit right he got stuck he got he got into a debugging situation and he said to himself i'm gonna quit i remember you said sonny and you know what guys this is the truth look in the beginning right we had literally over a thousand people join this live right in the in day one and look how it slowly dips out right because there are people who won't have what it takes to make it to the end but you guys are here right you guys are here and you guys are here to win this challenge and you are here to stay okay so i want you guys to go all the way now you're already at the end line just push a little bit further give me your attention today and sign up for the event tomorrow okay that's the first link in the description because if you're gonna be if you already made it this far come on guys push to day five and it's gonna be huge so amazing emails like this look at avnish helping everyone out in the community i see it so much guys we've got ken who's literally going ahead and dropping how he's been helping people out in the community you've got laszlo who's got help from avnish again avnish has literally been killing it guys asha see again avnish he's literally a clutch right now and guys this is just the positivity of the chat i want to highlight here look how amazing this is honestly that the energy you guys bring crazy crazy stuff okay so these are a few more lovely messages from our fans everything has been absolutely insane and i really do read these messages like rasheed's message right here and it makes my day it makes everything worth it and it's why we do what we do okay i love this one yours truly i read this after the stream yesterday because i don't know what's better your top tier skills are your highly contagious energy i love that dude thank you so much it's hard to keep this level of energy but i mean i drink i drink a bit of coffee let's play that way right so look again more positivity thank you so much and this actually i wanted to highlight i just added this in last minute david came at me with an email and said i'm not going to be there for day five but he has kids and he has commitments that he wants to make but look how much effort he put in to go ahead and just share a bit of gratitude guys like i said be a good person and this it doesn't take a lot and that is so amazing to me and for that reason i'm gonna be rewarding david um after this session and going and sending them a little package right so it's amazing stuff like this which makes the papa fam okay so this is what we're about this is what we're from okay so let's talk about quickly the prizes that you guys can win remember we have a point system in play right the first place diamond membership second place flat three platinum memberships that's already four winners already four winners right there and then we have third place which is ten people are going to get fifty percent off coupons okay so you're going to be able to get all of that good stuff we just hit 200 viewers across the platforms welcome guys let's absolutely crush it we're about to break 200 likes as well let's keep going right on facebook on the events tab you've got the schedule for everything okay you've got the schedule and we've got all of the things that are going to be happening you've got all the links that you're going to need to go ahead and register for these events but the final one that we're interested in is day five now day five even if you don't win any of these prizes guys everyone who turns up to day five okay is going to win something all right they're gonna get a like an exclusive something i'm looking at i almost slipped it an exclusive bonus that's only available to you guys and with that said i'm gonna go ahead and raise our little papa papa fam anthem right here all right so yeah don't miss that honestly i can't i'm not going to give it back i'm not going to give it to the people who weren't there so you have to turn up to that event okay joe reactors i missed the previous days don't worry dude just turn up to day five and it will be worth it everyone who comes to day five is going to get that tree okay so let's go let's go again and get the energy up so all you need to do is go ahead hit that first link in the description to sign up for the final day where you are guaranteed a free prize and then go ahead and hit save my spot okay you just need to hit save my spot and that's it and we start that tomorrow same time so be there this is the point system guys i'm not gonna go through it too much but one point for sending messages in each of the communities two points for sharing on platforms three for helping someone else out with their homework four four referrals and five for every piece of homework that you submit okay so get your homework done it's gonna drastically increase your chance of winning those prizes okay let's go ahead james podus says amazing content sending you simply the best thank you so much dude remember guys share it on socials for bonus points right so if you guys can already see here i saw loads of you guys holding out your phones and going ahead not seeing you but i when i saw you on instagram sharing this out and tagging me in it so i really love and appreciate that because i get to know you guys a little bit better which is always nice to see who's beyond the street i want to see who those 20 000 subscribers are okay and look now we've got over 200 strong viewers almost at 200 likes let's go ahead and push it guys let's get a video out as many people discord server if you haven't joined it's a great place to go ahead and socialize so here is the challenge this is where we were at okay let's break this down we went ahead and we built this portion of the app already right we built this out we built the actual app on day one and then on day two we went ahead and built out the login page with full user authentication and the edit profile screen but we don't have the plans yet we don't have the plans nor do we have the actual checkout process so we're gonna go ahead and build all of that today okay so what the hell is happening today exactly like i said we've got this portion here but we're going to fill out the plans that are available and you guys i'm telling you it's not the regular kind of checkout that we're going to be building today it's really honestly i was impressed when i built this today um and it's really it's cool it's really cool you guys are gonna like this right so we've already built this stuff with this this good stuff on the right so we're gonna go ahead and carry on right we just officially crossed 185 on youtube and loads more on other platforms now just came in 50 other people on different platforms yesterday's homework i couldn't believe it i honestly every single time there's a challenge or something it's natural that the sort of submissions come down okay but you guys are incredible i can't believe i said to jay i put up an instagram story about like not very long ago and i said it was over a hundred by over a hundred submissions that were that had people who had submitted their homework and like and literally in in about 60 60 to 90 minutes you guys went ahead and hit the 200 mark on the homework submissions that's ridiculous that is that is crazy for the final day technical 200 submissions wow abhishek thank you can't express my feeling right now i love you bro i love you guys too honestly thank you so much guys samuel thank you so much because can we take one minute to show our appreciation to sunny thank you so much dude appreciate you it's never too late to submit the homework i saw some of you guys going ahead and saying you know i came in late i came in a day late or something like that don't worry remember if you're in this challenge you are here just to if you have already participated even by turning up you're already winning okay you're already winning that's what we want to go ahead and do it's not about just the end prize right you being here you learning something is the winning part right you being a part of a community they care about each other that's what the puppet farm is about that's what we're here to do and change the world with okay so let's go ahead you guys killed it day three for the homework and let's go ahead and actually look at some of those things that you've done right so lee mcfarland right amazing build thank you so much shashank another donation appreciate you did lee mcfarland i saw your build it's incredible i've got a few notable mentions as well in a bit richard absolutely smashed it as well really lovely ui front-end build robert amazing stuff he actually went ahead and implemented the rest of the uh front end so right now you can see he's pretty much got it to the point that was looking at he just needs to connect that payment part and it's going to work right emerson thank you so much this guy is awesome so friendly thank you dude fantanus is somebody sonny simply the best thank you so much dadan says hi sonny thank you for this challenge i actually got a real job because of this whoa that's cool that's so cool bridget thank you so much i wish i had a professor like this with your energy and skills thank you honestly i i didn't like the way i was taught at uni that's why i'm here doing what i'm doing but guys you guys make this worth it okay johnson amazing build check out johnson he did the exact same thing as robert kiyoda okay we've got paul gonzalez carl jose buena right if you guys see yourself drop some fire in the chat i always love seeing someone who submitted their homework and then they see themselves on the screen like whoa nico mariscotte what's up and we've got dion nikiri if i pronounce that right right amazing amazing builds guys now i do want to go ahead and award some bonus points okay so i want to go ahead and award a few bonus points you guys know how we do it let's go ahead and get a little bit suspense right now okay so notable mentions some bonus points we're gonna award six bonus points to the people that i'm about to drop and we're gonna go ahead and show their clones out right now okay so you guys whoever submitted the homework you already get five points okay you already get five points but these guys over here are gonna get an extra six points each okay so let's go ahead and check it out dash santosh right crazy crazy build let's have a look look at this build guys incredible literally as a complete redesign right completely redesigned and look at this i love that you had sign up with google you can go ahead and sign in and he done a bunch more work as well behind this right so we're gonna go ahead and go through all but look at the just the overall design right here right really really nice changed all the colors different design different themes amazing stuff robert says he saw himself amazing awesome stuff dude right so we have dash santosh coming in at place number two we have joseph iraq right let's go ahead and check your one out movie glow i actually really love this one if i could get started i actually i'm going to create an account for this one saying gmail.com i'm going to go into the abc abc yeah register look at this oh i need to do one more character there we go register guys there was a whole theme behind it look it's no longer netflix you get the movie galore theme right which i really like i really like this sort of initiative that you took here with this one look you even got my profile screen which is also customized and they went ahead and added this and so you deserve six extra points dude so well done that is awarded to you amazing amazing stuff number three avnish ago you guys know you must know about avnish if you're following the community crazy crazy build over here looked really really nice honestly and it was mainly he just helped out everyone right here let me go ahead and log into his he had some amazing stuff in this build let me go ahead and sign up you guys can see look we have a drop down over here manage profile screen which is incredible right you can go ahead and go into your account and you've got everything built out this is incredible and you've got a header section at the top that's amazing that's what i call taking homework and just running with it so avnish incredible stuff and i'm noticing the stuff that you're doing dude so incredible incredible work all right amnesia is actually very proactive as well let's go ahead and give in ken white perfect stuff look at this animations purely for the animations dude i saw it and i was like okay six points straight off the bat that's really really cool man to see that so we have an amazing amazing build over there and number five coming in is the final place with the extra one jeremy gross let's go ahead and check this out all right i'm gonna go ahead and log in and you guys can see he's got the the nice little typewriter at the top and then we go ahead and check and look he actually made this an input field that you can type okay so if you go ahead and click edit it became an input field and you can go ahead and type it in and then click save amazing amazing stuff guys i want to go ahead and say well done to all of those people who got the extra points i think it's always incredible that everyone takes the homework and just takes it that step further i think that's what it's about you take a tutorial you take what you see and you go to the next level okay you go to that next level and that's what it's about right so yeah extra six points guys extra extra six points right and i also want to say guys i just realized we are at nearly 300 viewers across platforms incredible incredible stuff let's keep on growing that number we're about to break 200 likes come on let's keep going break the 200 not a mark okay let's go ahead and carry on right so testimonial video chance right so this is your chance before day five if you want to get that chance at winning an extra 10 points so i'm not giving six points or anything like that ten points and the reason why i put such an emphasis on this right is because this is what makes it human this is what makes the papa fam human okay this is what makes it human i don't wanna just see work i wanna see you guys but i wanna see i want to hear from you guys i want to go ahead and see this which is why i put a big amount of points on this final thing okay so let's go ahead and check this out right so guys your chance to rack even more points all you need to do is submit a video now the way i would say it is if you literally just grab your phone it doesn't have to be the fanciest video grab your phone place it down somewhere okay and just shoot a video just shoot a video like this just go ahead shoot a video and uh and all you need to go ahead and say is one what made you join the challenge okay all of this is inside the homework right we have the submission link in the homework all you need to do is go ahead and say what made you join the challenge what have you learned so far and how will it help you how i make learning easier and how why do you why did you decide to be a part of this community and why would you recommend someone else to join the papa fam okay now this is not only to go ahead and spread the love this is to allow me to improve and to be able to deliver more amazing content like this and to be able to help you guys out a lot more okay so this is my main mission and this is my way of going to help you guys out this is available in the homework submission so the second link in the description is going to be a link to day 4 homework where you can capture those extra homework points but this is going to get you an extra 10 points if you submit a video okay so make sure it has to be you can't just be a voice over i want to see your face right i want to see your face if you've got a nice setup go ahead and you know rock this up do what you need to do and that's what we're going to be what's we're going to be running with okay so that is in the second link in the description so guys before we carry on i just want to say make sure first link in the description let me know if you've registered already because tomorrow is a huge event okay tomorrow is a huge event let me know by commenting right now i am registered right i am registered that is it that's all you need to let me know and that's it the first link in the description okay with that said i want your full attention i want your everything in this final final build guys like i said sign up to that event we have a huge surprise on day five everyone who turns up is gonna win something so i mean if you don't be there and you and you think you're gonna watch a replay i can't promise anything guys you have to show up you have to have to show up okay oh i see loads of new faces in the in the crowd today is amazing nice stuff guys everyone's dropping the fact that they registered awesome awesome stuff let's go ahead guys we're gonna go ahead and build this right now we're gonna jump into the clone let's go ahead and get started with today officially okay we're gonna go ahead and get started with today i'm gonna have a quick water break while we go ahead and let the hype come in i love reading the comments and everything like that richard if you can't be there and if you absolutely can't be there it's okay i'll do something but um yeah guys everyone that can i can't promise you know any kind of replay stuff but yeah it's gonna be amazing tomorrow oh the playlist is a tree maybe [Music] 220 likes i think we're gonna break 300 soon all right let's go ahead this emerson says glass bottle water gang that's it dude you know how we do it okay let's do this guys so we were at this point yesterday in yesterday's build right we had the edit profile screen now we had the empty plans we don't really have much underneath it right we want to get to this point okay so you can see a bunch of ui change but the main bulk of the work today is going to be under the hood right so it's going to be more functional it's going to be more like how can we charge customers how the hell do we even set all of that up okay now i just want to say if you can't follow some of these steps today it's okay right it's okay if you run into a technical issue if you run into some kind of thing not working it's okay right don't get disheartened still be there tomorrow remember guys it's not about winning or losing it's about giving it and your best effort and it does not matter if you if you finish this homework if the fact that you guys submitted what you did then that is it right that is all that matters that is all that that i care about okay it doesn't matter that you can't finish something but give it your best shot to get everything built today okay so follow me with a fine comb and tooth in today's build okay so i want to get some free um somebody says what is the free gift i want to get your full attention okay let's do this so the first thing that we're going to do is we have our code up and running okay so the first thing we do is actually head over to our firebase right so we're going to go over to firebase right here and i'm going to go to my build so make sure in the correct account you want to go to it should be at the top right you want to click the build that you had from yesterday okay now we already enabled authentication which is why it was able to go ahead and work in the first place right the second thing we're going to do is actually set up our database we need the database because we're going to be storing the user and their subscription inside the database so we're going to go to cloud firestore right now okay now what we're going to do so ali says zoom in a tiny bit yep sure i got you dude that should be a little bit better now cloud firestore you guys can see here right i want you to click on create database now here you want to go ahead and click start in test mode right once you've done that click next now over here it doesn't doesn't really matter what your location is the servers are extremely quick you want to click enable right so once you click enable everything is going to go ahead and set itself up all right so we're going to give this just a sec and then it should go ahead and work right so guys i just want to say again the numbers are going up 250 viewers right now incredible stuff i just can't believe the fact that so many people continue to show up day after day of the day i love it i love the energy and this is what keeps me going okay so it's just setting up the security rules and today we will also be actually manipulating some of those rules but yeah here we go we have the cloud fire store in place right the next thing that we need to do is go ahead and go over to the extensions tab okay now you're probably wondering like i've never used the extension so today we're going to be using this together okay so i'm going to pretend as if it's a first time run through show you exactly how i would do it my thought process behind it exactly step by step because in this build today it's actually going to be quite a tricky one to get every step right right so i want you to follow give it your best effort okay so we're going to go down here run subscription payments with stripe we're gonna click on install okay now you can see it says controls access to paid content by syncing your subscriptions with firebase authentication okay so i'm gonna go ahead and close this one out and then basically what it does guys is it creates a bunch of different cloud functions for you which is actually extremely powerful okay if you've ever used cloud functions before you'll know that in today's build it will go ahead and actually do this for us right so uh sanjay said remove the if conditioning rules okay so you can do that if you want but i'm going to show you guys because we're going to change that file in a bit as well right let's carry on so we're going to go ahead and click next and then here we need to set up billing okay so you guys see that we do need the blaze plan in in order to use extensions now this does not charge you okay i think it charges you like one penny right or one cent on your account maybe like possibly okay but i would recommend that even like if you feel uncomfortable with that honestly just get over it and put the card on the account it's not going to charge you but the thing i will say is just try it okay try it before you knock it and kind of be like oh i'm not going to do it because i have to put a card on the account right do that give it a try and if you don't if you absolutely can't then i'd recommend that you just watch and you enjoy okay but remember like i said put a card on the account set up your billing and then this will work so here i'm going to click upgrade project to continue okay so you'll say blaze plan pay as you go and here we're going to click purchase right now you might not have this you might have to set up your billing it won't take long okay it won't take long to go ahead and do this but remember go ahead and do that right so you're going to click on the purchase and then here you see you've successfully upgraded your project perfect okay and if you really want to you can set a budget a lot right so if you're really kind of scared then go ahead set up a budget alert and then it will let you know if you went over five pound or something okay which obviously you won't but you know it's going to just be to give you that peace of mind if it's just making you a bit kind of nervous what's up muhammad he goes yo sonny right so now what we're going to do is review access grant into this extension so we're going to click it and you see it gives certain permissions to the extension okay so extensions are like think of it as like power ups for firebase okay it's a firebase set of tools provided by google we've got the database we've got authentication all this other stuff cloud functions the extensions are this kind of relatively new feature where you can basically like just upgrade your app literally you just install it by doing what we're doing and it just levels up your app and gives it really powerful stuff okay so this is really really cool stuff now red says i am too young dude we have 11 year olds inside of our course 14 year olds who are making like crazy amounts of money so yeah you need to do it right so let's go ahead and carry on i'm going to click next perfect now here we're going to go ahead and say configure the extension so we're going to leave this to be default and now here what we're going to see is without products and pricing plans collection so here we can go ahead and leave it as products if we want here customers this will be the where the customers get stored so it's you notice how it says collection it's going to make this collection in the database so it's obviously a nosql style database okay now here sync news users to stripe customers and cloud firestore here i'm going to click sync okay so every time that somebody registers it will go ahead and sync them to our database i want that okay now stripe api key with the restricted access right so we need to get a stripe api key so what you need to do is head over to stripe so i'm going to go ahead and type in stripe and google and then you guys will see stripe this one right here you want to click it okay now once you're inside stripe you want to create an account right so you need to create an account with stripe now if you're wondering what the heck is stripe let's go ahead and have a look at what stripe is okay um i'm just going to double check that my account currently isn't logged in so i'm going to open up stripe and then you guys can see i'll show you an example of what stripe is so you can see payments infrastructure for the internet so loads of companies use stripe delivery uh a bunch of others but it's extremely powerful it allows you to charge cards it allows you to have apple pay on your website it allows you to have a bunch of other things on your website okay so this is really really powerful right guru rav what's up dude amazing stuff uh to see you here so you can see it's pretty much it's a backbone for many internet businesses because it powers the payments which is very tricky if you do it manually okay so this is what we're going to go ahead and set this up with right now okay so we're going to go ahead and create an account so you want to click on dashboard or sign in or register at the top create your account and then we'll move over to the next step so once you've done that at the top hand corner you're gonna see like uh my business something you'll click here and a pop-up will come up saying enter enter a company name so in this case i've gone ahead and just done papa youtube demo and i had this before for practice but we're going to do papaya youtube demo or whatever you want to call it it's completely fine once we've done that we can now get started okay so in this case because it's a test app i really don't mind showing the key but obviously keep your keys secret in the future okay so here you can click on get your api key and then it shows you a bunch of things okay so you can see it says secret key and publishable key right so at this point what we want to do is go ahead and if we go and check out our the extension steps they said we need the live key okay we need the live key now whenever you're using a payment processing platform you're probably wondering okay sonny but i don't want to get charged right how am i help i want to test the app but i don't want to actually test a real card right the way you do that is you have two sets of keys right whenever you give like whenever you set up your app you have a test key and then you have a live key right so we're only going to be using the test key today and the test key allows you to process a fake card and there's a special number we put into the card field and basically you type in 4242 for that the card number and basically it will just pretend to charge a card okay and he'll test the payment but that's how we essentially prevent that from happening okay so here what we're going to do is we're going to go ahead and say reveal test key okay so you guys obviously want to keep this a bit more of a secret okay so now what i'm going to do is just to make this a little easier i'm going to go ahead and pop this on another desktop like so so i'm going to go ahead and do this so that way we don't keep having to keep swap so we need the live key okay so i need the secret key okay so this is stripe api key with restricted access so i'm going to go ahead and use i'm sure it's this key let me just double check api keys and then i'm going to go ahead and reveal my my actual key perfect yeah so is it going to be the secret key okay or it might be the restricted key let me just double check no it's not the restricted okay it's going to be our secret game so i'm going to copy that and then i'm going to go here and i'm going to paste it in okay you can actually go ahead and create a restricted access key but in this case i'm going to just use our test key i'm sure it's the test key i'm really really sure it's a test key okay so now what we're gonna do is you see here it says fill in from post install so you actually leave this one you leave that blank okay you don't actually touch that one for now and i'm gonna double check with the key for a sec let's go ahead and check it says go ahead and create keys restricted api keys publish key okay so that's fine for now we can use this key at the moment okay public key test key let's just go ahead and double check oh yeah yeah we're going to use this one it's fine if it's the wrong key we can go ahead and change it anyway okay but this one you see it says fill in from post-install so we leave that as it is okay so i'm going to go ahead and click on install extension all right perfect now you can see it says it should take three to five minutes okay so while that's loading we're gonna go ahead and just i'm gonna explain a few things that we have to do so let's go ahead and click view details on how to use this extension in the meantime and you guys can see a bunch of stuff comes up now you see we have to set a few things in place okay so typically this is where you have to pay attention and you don't just run ahead and guess and things like that because it won't work and then you're going to send me a question saying i don't understand why i didn't work and i'll be like guys you have to have to follow these things because it allows this stuff to work there's a lot happening under the hood right the first thing we need to do is set the cloud firestore security rules okay so here what this is doing is it's actually allowing only the authorized users to access their checkout sessions and subscriptions okay so like you guys can have a look into this a bit more but what it's going to do is inside of firebase right now inside of our firestore collection that extension is gonna actually go ahead and automatically populate customers their subscriptions pricing plans inside the firestore all by itself that's pretty cool right all by itself right so what we're going to do here is go ahead and copy this go to the um go over here and while this is loading i'm going to go ahead and just i'm going to open up a new tab for the cloud firestore okay so why that's obviously i don't want to move this away i want to kind of let that do its thing and then here i'm going to click on rules dinesh what's up dude nice so here what we're going to do is i'm going to go ahead and grab this grab all of this and paste the new rules okay and i'm gonna click publish okay so something didn't copy over correctly let me just double check um i've not done it correctly let's go here i actually need this over here so let me go ahead and copy it again and let's go ahead and paste oops yeah paste there we go and publish right so we've got a few errors here it says params customers collection let me just double check guys i'm going to go ahead and double check on my other build that i did and just make sure that we get this perfect okay because i don't want to mess this one up because this one is actually a little bit tricky okay so i'm going to go ahead and pull out my netflix thumb and i'm going to get my previous rules okay and this is the one i needed yeah also i thought it looked a bit strange right so what we're going to do here is you guys can pretty much pause the video and copy this out if you would like or i'll go ahead and i'll put in the chat so you want to go to the rules go ahead and copy this in right so this is the overall thing that we need inside of our rules okay so i'm going to go ahead and paste that i don't think it will paste into the chat right now i mean we can try we can definitely try okay so it's actually going to limit um this sort of thing but what you can do at this point is pause it and then you can go ahead and uh and pretty much just copy this out okay so what this is going to do is only going to allow the authenticated users access to the specific parts of their um of the database okay so what we're going to do now is publish okay so we're publishing this and let's go ahead and check up on our stripe payment so it's still setting itself up okay so while that's doing itself what we can do is go ahead and we'll close this tab for now and uh please don't spam the chat with asking questions guys if i'm not answering or miss for a reason so let me go ahead and do the following so let me go to the uh this one right here okay so it says configure stripe web hooks okay so this is a step that's absolutely necessary okay so you can see we need to go to the stripe dashboard so i've got the stripe dashboard over on where's my tripod actual one i've got my stripe dashboard over here so we can close that one i've got the stripe dashboard over here i'm going to click on the web hook section over here click it right and what i'm going to say now and web hooks are essentially whenever something happens on stripe for example a product is created updated deleted and all these things we need to go ahead and actually sort of like send an event to our firebase application okay so we need to go ahead and set this up so what we're going to do is we're going to go ahead and say use your url of your extension function as your endpoint url um so i need to actually go ahead i'm going to go ahead and try and find the actual post install stuff so where is my let's go ahead and once this is set up it will give us instructions which have our code available on it okay in the meantime let's go ahead and see what's happening in the chat syrup says sunny how to prevent previous data loss when you switch between profile and home every time i switch there is again fetch how to stop this so a lot of this stuff is architecture guys like i can't give you a one straight answer in in a sentence this stuff we cover typically inside of like coaching calls inside of zero to full sakura but i can't answer those kind of questions because they're kind of architecturally speaking it takes a little bit a bit more understanding to answer those things because there's different solutions to it but you guys can see it says install complete so now i'm going to click on get started so i would recommend you just wait for that because these instructions are a hell of a lot better than what i was looking at so these ones will work if you copy that okay so you'll copy the rules so remember you guys rather than copying what i was doing and sort of um for like writing it out manually you guys can copy the rules over here go to your firestore and then just paste them like so and that will be perfect there you go then you see it says configure stripe webhooks now here you get a unique url so here's my web hook event okay so what i'm going to do at this point and i just want to say as well we have a huge amount of support right now let's hit 300 likes 250 people watching incredible guys we're going to copy this i'm going to go over to the stripe dashboard okay so where's my stripe dashboard right now okay it's over here webhooks and i'm gonna click on add endpoint okay now the endpoint url i'm gonna go ahead and pop in my endpoint url so you see that long that long string that he gave us over there right and now i need to activate it for these events so what i'm going to do to make this a little bit easier is i'm going to go ahead and pop this on the same screen and show you guys right so this is what i have over in stripe right now so i'm going to add the endpoint and i'm going to basically go ahead and paste that launch piece of text in and then what we're going to do here is we don't need a description you can if you want i guess explain it but here you want to go ahead and say product dot created and you need to actually go ahead and actually manually add these okay so the next one is going to be product deleted and and updated so that we know we go let's add those three in so that you see the three are here right so that's the top three and we also need price price dot created we need price dot updated we need price dot deleted okay so now we have six perfect and then we have checkout session completed and what's going to happen is every time these events happen in stripe it will tell our application right so this is how the communication happens and here we'll say completed so every time a checkout session is completed it'll work and then here we can go ahead and say customer subscription created customer subscription deleted right so you guys can see if i go to the top is adding them and then customer subscription updated so customer subscription updated okay so now i've got those three and the last one are tax rate and and they're optional but we will add them for now just in case you want to do stuff like that so i'm going to say tax underscore rate created and i want updated okay so guys remember go ahead and follow this and you guys can go ahead and check this out right so um anyone who's sort of like in the chat right now if you're asking you know beginning questions there's nothing wrong with that guys so even uh regarding richard's uh sort of question right there or comment guys it doesn't matter if some things don't make sense to you okay having exposure to how we solve a problem how we mess around with new tools it's going to increase your coding knowledge regardless one way or another okay so being exposed to this stuff is with the important thing right so here we've got a bunch of stuff that's been kicked off and now we should have if you count it it will match 12 events okay perfect now what we're going to do is we're going to go ahead and do this we're going to click on add endpoint okay perfect so we've added this in and then it says use the firebase console or firebase cli reconfigure your extension with the web hook signing secret so you can see over here it says signing secret so it says click to reveal so i'm going to click to reveal it and it gives me the special secret key okay so what we're going to do here is we're going to go ahead and click on the we can click on the reconfigure link so this will should take us to the firebase console uh actually no don't click on that one you want to go to your firebase link so let's go to another firebase tab go over to extensions and then you can see where we've got the run subscription payments click manage and then click on extend reconfigure extension okay and if we go down here you see where it said fill in from post install okay so what we do here is we simply paste this secret key from stripe so we paste it in there okay so uh yeah guys we're almost at 300 likes incredible right so go ahead and paste that key in right so once you've done that you can see it will go ahead and update on this screen then you want to make sure you click on save right so again it says it's going to take up to three to five minutes because it has to propagate that change throughout okay so that's going to be as we expected and it's going to look pretty good now we're going to just go back to our instructions so let's go ahead and make this full screen so this was the instructions the configuring step and then you guys can see here so it says now you need to create your product and pricing information now this is the cool bit okay this is a really really cool bit yes so lewis says aren't you not supposed to show anyone that secret key yes you're not supposed to show people that key i'm showing you for demonstrational purposes i'll take the key off afterwards and make the key and active so but you shouldn't be sharing that key okay make that key that's a secret key for a reason but i'm sharing it to show you guys you know make it easier rather than you know doing the whole blurring out rubbish where you guys are confused is it that one that he's talking about right so this is pretty cool at this point right now we just need to go ahead and create products inside of stripe so inside of stripe what you can do striper's a very nice ui if you've never used stripe before okay you go over to products on the left hand side you click on add product okay so here what you've got is different products okay so let's go ahead and have three types of plans on netflix they have the basic plan they have the standard plan and then they have the premium plan okay now the basic plan i think it does only like 720p the uh the standard plan does 1080p and then the premium does 4k and hdr content okay so we're going to go ahead and do that right now simon says sunny is that papa so he can go ahead and show us exactly dude uh let's go ahead and check that nice paris says hey son i just wanted to mention that i react build a very informative load of valuable content i'm a software engineer myself i get to learn new things thank you so much honestly incredible stuff so here i'm going to start with the basic plan i'm going to say basic plan okay and then here in the description what i'll say is i'll say okay let's just say 720p right and then you can upload images and all that good stuff but right now we're going to leave it now here for the pricing we're going to do standard pricing and i'm going to say let's just say the the basic was like i think it was a 7.99 or something right but you can determine the pricing here if you want right wherever you decide so let's just say it's 5.99 for basic 8.99 for um standard and then 13.99 for premium i'm sure that was roughly it so we're going to leave it in we can do it in pounds because i'm in i'm in the uk so i'm going to say six pounds so recurring subscription monthly okay so perfect we have a recurring plan and then i'm going to go ahead and click save and add more right so i'm going to click save and add more that will go ahead and add the product to our list of products right so the next one is going to be standard right so basic plan and this one did i say plan or did i say did i say i think i just did standard plan right i did say plan right it wasn't just basic i think i had a basic plan i can't remember let me know and then here in the description we'll say 1080p okay and then what i'm going to do is i'm going to go ahead and nice emerson that's what i'm talking about because you know what i will watch all the past videos make this netflix till tomorrow night hell yeah dude and make sure i see you there tomorrow right learn says appreciate your work thank you so much hey man's in the house sunny road basic plan thank you thank you bridget nice okay so now what we're going to do is go down to the pricing and then here we'll say okay so we did 5.99 so i'm going to say 8.99 gbp for the standard which is 1080p and then perfect monthly and it's recurring you see and we go ahead and say save and add more perfect okay and then what we're going to do is add the premium plan so we'll say premium plan okay the premium plan is going to have 4k plus hdr okay now here i'm going to go ahead and say standard pricing no the upstanding go ahead and do gbp and this one's going to be i think it was 13 and 99 a month okay that gives you 4k in hdr and then perfect i'm gonna hit save product on this one rather than save and add more save product and this should take me to the product screen right so if i go ahead and click on products now i can see look three payment plans right so this is really nice right because what we're actually going to go ahead and see is is like everything in a very nice ui right and szechuan says only because you're making a reactor whether it seems so easy as as a newbie you're kind of just gold also trying my best to complete the assignments uh keep on going exactly you keep on going doesn't matter if you get stuck i'm using mac os guys not ubuntu i'm using mac uh in all of my builds okay oh nice we're about to break 300 likes guys i'm gonna have a quick water break let's see if we can break it in that time also if you don't know i also stream on twitch twitch is amazing the quality is incredible over on twitch okay louis says it's possible to use payment paypal you can use something called braintree if you newspaper but it's a nightmare to integrate over stripes stripe is very nice compared to this right so here we have the products set okay this is really nice so now what we can do is go ahead and look down and you've got the everything sort of set up right we've done this bit the next thing that we can do is you can actually add custom rows to products okay you can actually add custom rows to products and what this will do is it will allow you to basically have so let's go down here what what's really cool about this one is it will actually go ahead and upgrade sort of like for example if we this is our rules right our firebase function rules and i don't usually go over rules a lot but what actually tends to happen here and we're about to break 300. about to right there i just come on one more person guys smash that like and we're going to hit the t1 we hit the 20k mark today we are literally creeping on it i'm looking at it right now yay there we go 300 likes thank you so much guys nice it always gives me so much energy when you guys drop that stuff so i really love that all right i know it might be a little bit irritating but you know i like to keep the energy high all right mark thank you he goes great work i couldn't follow consistently don't worry dude just be there tomorrow a huge training is going to be incredible okay right so you can see here right this is really cool because basically look what's happening it says allow the reading of the content which is in basic like the basic sort of section of our database and then the premium section of our database is here but allow the access of basic if the person has basic subscription or they have premium subscription okay you can actually do that which is really cool and you can also add rules to like the premium section if they're only and you see here it only allows the premium subs not the basic subs so you can actually at the database level restrict who has access to what now that's really powerful right that's actually really powerful because that literally will go ahead and stop you know unwanted access requests and things like that we also do that to protect against unauthorized users from accessing other people's information okay so this is gonna really help you out quite a lot right um anyone who doesn't have a credit card or anything like that that they can put on the account then you guys can always kind of you know you can you can experiment kind of with other approaches but guys don't take it to heart okay like just go ahead and remember learn something from it and then keep pushing okay so uh mono says is today the final day in terms of the build yes today is the final day but sign up tomorrow if you haven't first link in the description day five is gonna be huge okay we've got a training and we're gonna be uh awarding bonuses to everyone okay so we're not gonna do that top bit at the moment configure the customer portal okay so what you can do is here you can actually go ahead and you need to actually enable all of these things right so again this is to allow the extension to work so i'm gonna pop this over to one side right now and we're gonna go over to our settings okay now inside of settings we should have a branding section so down here we have branding right now for branding what you can do is you can actually add icons logos all that good stuff and this will go ahead and set up how that screen looks so do you remember that screen that we went ahead and processed the payment with okay so i think it's over here right so let me go ahead and show you guys so if i go ahead and click subscribe and then it's async so it does take a second you you guys as in the sort of extension once we're done you can add a loader if you want that but you can see this element this sort of look and feel if it had a product image by the way so if we gave the netflix standard plan here a product image it will come up at this point right but we can add logos and stuff like that inside the branding section so here i'm going to change the brand color to maybe just a sort of red just to resemble a bit of netflix nice and then the accent color let's go ahead and say just a black okay so it's that kind of netflix kind of colors okay and you can see here look it shows you the mobile view the sort of desktop view this is how it will appear on the phone you've got the customer portal and all this sort of beautiful stuff over here right so this looks really really clean we're gonna click on the save changes but before we finish that off i'm just gonna go ahead and see you see configure the customer portal settings okay so i'm going to go ahead and make this full screen save the changes here right but then what i'm going to do is go ahead and check out let's see customer portal all right and then i'm going to go to settings we've done the branding where is the custom report customer portal is over here at billing yeah so we're going to click customer portal now here you see there's a few options that we have to enable okay so the options that we want to enable here are actually going to be these ones so it's going to be toggle on allow customers to update their payment method okay nice so we're almost guys i think we can break 400 likes i'm telling you we can do it right allow customers to update their payment method we're going to toggle that perfect allow customers to update their subscriptions and cancel subscriptions we're going to we're going to toggle the council subscriptions in here what's really cool is you can cancel at the end of the billing period so imagine like you pay for a month of netflix and cancel your subscription they give you access for the month so that's how you decide if you want to do that here and then you've also got the update description bit right so this one was important we want to allow customers to update subscription quantities right so yeah let's go ahead and do allow customers to switch to a different pricing plan that's the one that we wanted right and then here you can say issue an invoice at the end of the billing period or issue the invoice immediately right so in this case you would usually issue an invoice immediately if they switched plan okay so that's exactly what they want to kind of do nice a guy from tanzania but you are giving me a lot of energy sonny doing coding i think i'm par uh part of react now you are genius thank you so much dude appreciate the kind words all right so at this point we've enabled all the right things so your screen should look a bit like this right now okay and then we're gonna go ahead and let me just remove the cookies god sake and then we're gonna go down here and click on um let me just make it full screen so you guys can see we're gonna click on save okay okay so when updating a description oh so we need to actually select the product sorry so here we go ahead and add all the products it applies for so we're gonna go ahead and add the basic premium and standard okay so you have to go ahead and do that and then you see terms of service okay so here right now if your website had the terms of service i'm gonna use literally just gonna use a blank example.com.terms right so because obviously i don't really uh we're not doing the terms and service right now but here if you had a privacy and terms you would put it in here okay then you want to click save and guys this is actually sort of you know this is going to allow you to build those apps that are actually e-commerce apps with full payment systems integration everything now if that's not powerful i i like this is powerful stuff okay so now what we're going to do is go ahead and click on save and i can see people following over on twitch thank you so much we've got cena thank you for following right so go ahead and click save now there we go my changes to the following sets only apply to test mode so if you do switch the mode you need to go ahead and update that as well a second time okay so now here it says using the extension okay so here add the bit add the product set up the required business information and links the final thing that you would have had to do is at the top over here if it said like a business name or something you have to click it and give it a business name now trust me you can't skip that step because it will bite you later on okay you need to make sure you go ahead and do that okay look at that guys pretty boy that says hi everyone i just got off with a react position so happy switching from angular incredible dude incredible stuff all right so using the extension right so it shows you a bunch of stuff you have a demo application over here but then you guys can see look let's go ahead and check this out so you guys can go ahead and read the docs at this point but i'm going to show you how to implement it okay so here you can see look list available products and prices db collection it shows you a bunch of stuff and you can see start a subscription with child stripe checkout so we've got a bunch of instructions here okay so we're going to go ahead and implement all of this stuff and you can see it go you can do so much stuff you can apply discount coupon codes add multiple prices all sorts of stuff but we're going to kind of keep it relatively somewhat simple so at this point if i go over to cloud firestore look at this guys all right so if i go ahead and refresh give it just a second and we should have netflix on youtube perfect yes if we give it a second our products should start coming through over on this side right now i am going to quickly check a quick setting on the extensions right now to see if i've given it the correct key right i do want to double check one thing real quick so that way i make sure that i'm giving you guys correct information so there is a key that we need that we gave earlier the secret key and yes i have given it the correct key perfect okay this is good so what we should see now is if we go over to our build let me go ahead and pull out the netflix on youtube nice and then let's go back here nice so what we should see eventually is some products over here okay and those products will go ahead and push in our products from our stripe database okay so what we're going to do now is actually go ahead and pull those products from the database so this should actually have the products here right now now let's go ahead and and sort of see why that's not happening so let's go ahead and click extensions go ahead and run subscription payments there we go and remember it said it would take three to five minutes okay so you might need to go ahead and synchronize it but to test this that it works what i'm going to do is actually go ahead and register a user okay so here is our application netflix but it's on localhost 3001. i'm going to go ahead open this up let's go ahead and create a user so i'm going to go ahead and create a new user let's go sign up sign in let's go ahead and say stripe gmail.com and i'm going say abc abc sign up now okay so signed up as this user okay if i go ahead and go back to the netflix clone right now and hit refresh this the cloud function should have fired off at this point there we go you see it created a customer and actually went ahead and added them into the into the database so you see how i did that right which is incredible right it went ahead and just did that automatically right so at this point we should be seeing some customers come in uh some products also at this point so what i'm actually gonna do just to double check that we've done this correctly is i'm gonna just see our functions right so over in the functions field what we can do is here you can see all the different functions that have been created let's check the logs out all right so we can see a bunch of stuff happened here okay okay so at this point says create a new customer so that is where the customer was created okay nice so this is looking pretty good at this point so far go back to cloud firestore what we may need to do is re-add the products right because i mean i think it has a synchronization period but i kind of want to force the synchronization so what we should see at this point if i go into my previous build you should see the customers that we've added and then if we go into the products you'll get the three products for example netflix standard netflix basic and netflix premium and you see it will have the description it will have active and then it will also have the appropriate prices alongside it inside of another section over here okay so we'll have all of those things inside of it okay so i'm gonna go and switch back to the actual boat hey mabon's in the house nice so i'm going to go over to the actual stripe now where is our stripe what do we put stripe let me find it yep there we go let's go over to stripe and then let's go ahead and check out the products okay so let's open our products right here and what i'm going to do is i'm going to add a test product right now okay so i'm going to say this is a test product and then it's got a description of testing one two three and then here i'm gonna go and say this is a 123 product recurring monthly go ahead and click save product okay josh says using restream no i'm using streamlabs to do this right it has something called multistream right so at this point i just added a product right so now i'm going to go ahead and check to see if it's synchronized okay so you can see i added in that new product right which means that i actually sort of should have waited until i added those products after so what i'm going to do at this point is i'm going to go ahead and recreate the products just to just to force a push in because it will do it after some time but i don't want to wait while we're live okay so at this point i'm going to go back to my stripe and i'm going to quickly recreate those plans okay so what we do here is i can go ahead and right now it's very simple to delete plans okay so right now this can't delete it because it's being used in a transaction okay so what we're going to do is i'm actually going to create three additional plans because these ones aren't synced up right now um okay yeah so you see it's being used right now okay so let's go ahead and first here i just want to see if this does sync up finally if it does it'll make life easier if not we can just create new plans it's fine okay so right now i'm gonna go ahead and create new plans so i'd recommend adding the product afterwards and then it would work okay so what we're going to do here is click add product and here i'll say premium so right now it will actually show all of these plans which is fine i guess no it'll be fine i'm going to add product hey gorgeous merman's in the house so here i'll say premium and then i'm going to go ahead and say 4k plus hdr okay and i'm going to go ahead and say the standard sort of you know 13.99 and we're going to change it to gbp okay and then what i'm going to do is type in save and add and add more and then here i'll go ahead and say basic okay and then what i'm going to do is type in 720p okay and then here i'm going to do standard pricing and i'll go ahead and do i'll say 100 and um give me one sec guys i'm going to go ahead and do another 100 so the the basic plan was the cheapest so it was 5.99 gbp okay and then i'm going to go ahead and say save and add more okay so i'm going to add the final one which is the premium oh we've done the premium it's going to be the standard plan standard plan and this one was gonna be 1080p okay and this one was actually going to be 8.99 gbp okay nice and then we're going to go ahead and click save product right so now let's go back to our products and have a check so you see i've got duplicates here so ignore everything underneath here we're focused on these ones standard basic and premium okay and what i would recommend is after you set it up then go ahead and double check so it syncs it so synchronizes so now you can see on our firebase it's successfully synchronized the products okay so i don't want this product the one that has testing 123 in it so i'm going to go ahead and remove that okay so i don't want that one but we've got the perfect three things in here so i've got the premium i have the basic and i have the standard should be the final one and each one's got an appropriate description and inside of it it's got a prices collection which has all the pricing information so firstly guys that is pretty cool right i don't know about you guys but that's actually pretty cool okay um aaron says uh you just needed to add edit the old product and then save yeah you're right dude i realized after i added the first one i was like hang on an update product would have pushed it as well but yeah it's completely fine you can either edit it and then save it and then it would have triggered the update webhook and pushed it to the firestore or you can go ahead and you know read it it's fine for now though right so at this point what we're gonna do is we're gonna go ahead and say but thank you for the for the good suggestion dude all right drew thank you so much all right so now we've got the customers over here and then we got the products over here so you guys can see it's actually automatically doing all this stuff right so let's go ahead and actually you know hook this up in our firebase right so i'm gonna go over to our code this is back to the fun stuff now and we're gonna go back to our application so this one right here okay so this was the sort of you know the stripe that we had sort of this is the actual finished one but i'm going to go ahead and this is our angle right now i'm going to go ahead and do this can you repeat what you said about doing first before setting the plans on stripe so no bridget i'm not going to repeat it because it's quite an intricate set of steps so please rewind watch the video back and follow those steps you know like go ahead and rewind pause it and things like that follow those steps because that's really kind of like they're kind of quite detailed steps but if you kind of are following everything through and you kind of get lost at any point because there are a few steps to follow just remember guys go into so even if you don't know where to find this go into the extensions on the left okay go over to extensions literally go ahead and go to manage and then click on how this extension works and you'll get all of the instructions step by step and i just went through these that's all i did right i went through these um cesar says dude thanks as always for all the explanations you're welcome dude that's what i'm here for i like to break it down make the complicated stuff simple right so sunny you're so damn amazing man i've learned a lot from you thank you so much ryder really appreciate it all right so now what we're going to do is we've got our product set up again it's not nice that we have these typically you shouldn't have these you should just have your main but you know you can get you can delete these later it's fine okay so now what we're going to do is we've got five our stuff stored in firestore so we can actually just go ahead and actually pull that information inside of our app using the typical approach okay so i'm going to go ahead and go to our code right here perfect and then i'm going to go ahead and remove this so the first area i want to tackle is actually i guess the plans page right so we're going to go over to the plan screen and inside the plan screen i want to have a so let's go over to the plans where oh my haircuts are frozen okay plan screen we don't actually have the plant screen right now we have the where am i we're at the profile screen okay so i didn't add the plans yet okay so here we have the profile screen which is responsible for this part i keep moving things around because i want it to be clear for you guys okay so here we have the profile screen which is responsible for this area right here okay whoa almond says four likes and then we are literally at 350 that's what i'm talking about guys so yeah samuel i think this is not gonna last longer than two hours to be fair okay so go ahead you know give me a full attention and then we can go ahead and crush it okay so amazing stuff and uh two likes away from 350 and we are literally sitting at 250 viewers right now across our platforms i actually really like this beat in the background he goes i am here with 200 attention that's what i'm talking about dude i'm gonna go ahead and repeat that one i really like that nice let's carry on so we have the plans right here all right fantana says really starting to see how powerful this can be oh yeah 350 likes that's what i'm talking about guys that's it let's keep going nice i love it honestly i can't believe every day you guys show up and you got the same energy and you still believe in me that's what i'm talking about all right so at the profile screen okay what i'm gonna do is here we have the plans right now the sign out button lies here so underneath plans i'm gonna actually go ahead and just sort of render a planned screen all right and the reason being is this guy has a plans screen okay now the reason being is because it's it's going to be a lot of right now this where is it let me go ahead and pop this where's my app okay so this is the final finished app okay this one right now this entire section i want it to be its own sort of clever component okay i want to be the it's on clever component so can you share your playlist oh i'll see about that i'll see about that okay well maybe maybe we'll see if we can hit maybe 500 likes then maybe you know all right so here we've got the plan screen so i'm going to go ahead and create that component right now so i'm going to go and actually go and say plan screen so plans screen dot js there we go and here i'll say rfce boom text enters accidentally click this link and here i am welcome dude i guarantee you're not gonna regret clicking that link dude so here is a plans screen dot css and dude if you're new here if anyone's new here then go ahead and check out the first link in the description where we have a huge training tomorrow right it's gonna be a massive massive event we literally have like a thousand people signed up to that event tomorrow plus like a thousand plus we have two thousand people sign up for this overall then absolutely crazy stuff absolutely crazy stuff but you have to be there so first thing in the description you have to be there to win like a free prize with everyone who goes there will get a free prize so why not all right so let's go ahead and choose our pan screen go css so at this point i'm going to say import thank you so much for the donation same ali for the 5 donation appreciate i did plans screen dot css there we go and then here i'll say class name equals uh plan screen nice and what we're gonna have inside the plan screen right now okay inside the plan screen it's gonna be a few different things really so at the top we're gonna have an info section okay so at the top i'm gonna have like an info section which will be the product so each one of these things i'm going to basically let's think about this how we're going to do this right so we actually need to firstly get the product okay hey twitch sub another donation thank you fame ali amazing shasmaat says it's your music that keeps us even more and gross for one two hours hell yeah honestly i think i've mastered the the music on the clothing stuff all right so firstly we're gonna pull the products from the database okay so here i say const no i'm not allowed to play a real song because it's uh it's going to be copyright so i use epidemic sounds and i love epidemic sounds products and then here we'll say use state so we're going to use a state hook use stator there we go this is a real song just this is a good damn song right so we're going to make it an empty array by default and then we're going to import use tape there we go saved right and then what we're going to do is go ahead and do this and you have you have quite strict music uh right so you'll go ahead and actually take the video down or demonetize it if we go ahead and use a song which you don't want to happen on your youtube videos they don't get happy with that okay so what we're gonna do is we're actually going to have a use effect okay so we're going to use effect and we want to fetch the plans from the database okay so remember that extension actually went ahead and pushed these sort of products from stripe into our database right so what we're going to do is go ahead grab those products that went into the stripe database and then load them up on the screen so let's do it so here what i do is i go ahead and say use effect like this and i go and this has an arrow function inside i only want this to run once on the component mount what's up kian good to see you here again man hopefully i see you here tomorrow as well dude and guys keep it positive in the chat okay otherwise you will get blocked all right so here i'm going to go ahead and pull the db my girlfriend's popping up again what's that member they're gonna say db and then we're gonna say dv dot and i'll say collection and then i'm gonna say collection of products okay now why am i doing a collection of products because if we remember inside of firebase collection of products so i'm going to go ahead and fetch these three products so here i'll say products and then i'll go and i'll go ahead and say where [Music] active is true and the reason why i want to filter it is because you see here it says you can have different products which are either active or false right so here i only want to get the active product okay so here i'll say where active is equal to oops and you have to put a comma there my activity is comma true okay so save and then what i'll do is i'll say dot get so we usually use on snapshot but i don't really care for the real time listener because it's not likely the plan is going to change so why do i need to then real time listen to it so instead i'm going to use something called get right and what get will do is it'll give us something called a query snapshot because we queried by active okay so here i'll say this is the query snapshot okay and what do i do with this query snapshot well firstly i'm going to go ahead and say let's go ahead and create an empty products object okay so i'm going to create an empty project um products object okay then i'm going to save it and uh then i'm going to go ahead and say i know shazam says this song pumps me up um i think everyone should plan a surprise dinner for slime because he's providing such a valuable learning i agree with you guys i agree hi dre thank you dude i'm actually super nasty 210 viewers already as well still watching and almost at 400 likes [Music] okay let's keep going so now we've got the products here right so we're going to go ahead and say query snapshot and this will return a bunch of docs because it's an array so i'll say for each for each of the docs i want to go ahead and save and this bit's actually very important all right so i'm going to say async right because i'm going to have some asa async await stuff here this will give me the product doc okay so every time i go through give me the product doc okay samuel the reason why you get 190 is because i'm looking at multiple platforms right now so twitch i'm looking at youtube and i'm looking at facebook i stream to all the platforms so it may look like one night on youtube but it's actually i have a lot more in the grand scheme of it because people are watching from different platforms so here what we do is we'll say products right so i'm going to go ahead and populate my object with the information so i'll say okay go inside this object and go to where we have the product doc.id okay so product.id and i'm going to go ahead and set that to the product.data now what is product.data all right if i go ahead and do this this is going to be the data inside so this stuff right here okay this is the one that goes and say it sets up so i'll go ahead and do colon there we go and then i'll semicolon and i'll say const and this is where i basically need to go ahead and basically remember guys each product inside of the collection has its own variables and then it has its own inner collection of prices even though it's one price and this has the pricing information so how do we get that right how do we go ahead and get that okay so what we're going to do right now is uh thank you so much amen that's a really really kind uh kind what sort of comment there um because because it's true honestly we me and me bomb both me and me both really kind of work hard in sort of what we're passionate about she's really like pushing her dance career i'm really pushing the coding space and guys like together like and we have to sacrifice that time with seeing each other and would lock down all that headache just to go ahead and deliver you know keep on delivering and keep on pushing ourselves so um i did see marvin's messages he does she says he supports me so much i see baby okay so now we say cons and now here i say price snap okay so price snap and then here what i'm going to do is i'm going to say await because we're making like an async request okay so i'm going to say product ref and this is pretty cool right because what we're going to do here is i'm going to say product docs sorry so i'm going to get the product doc and i'll say dot ref okay so say product dot dot f and i'll say collection so probably the ref dot dot collection how do you switch your camera so fast i use a stream deck and then here i'll say go into the prices of that document and i'll say get okay so this will go ahead and get me the price right so go ahead and get me the prices box then what you need to do because there could be the possibility of having more than one price price snap dot docs so if this is kind of overwhelming just break it down with me as you watch it okay and then i'll say pricesnap.docs.for each and then i'm going to say for every single doc so all of the prices essentially i use streamlabs obs dude so i'm gonna go ahead and do this and i'll say yep and then here i'll say products product doc dot id because i'm going into that product doctor id that we're basically creating our own little kind of object here and i'll say go and set the prices of our own little object and i'll say set that object inside of that to be pro to have two things i'm going to say a price id and this is going to be the the price doc dot id so here what i can actually say is i'll rename this to price to make it a little bit easier and i'll say rename it to the price id and then here i'll say price data yeah um and then this will be uh dark or so it'll be price sorry.data okay and this again we'll go ahead and go inside the prices dock and then get this information which is the data inside of our price okay so that's what we're essentially doing here right so it might have seen a bit kind of hefty what we're doing there right so at this point what we're going to do is we're going to go underneath here and we're going to say set products okay so set products i'm going to set that to our product object outside okay so set products now what's going on what i'm going to do here to test that this thing is actually working and it's operating as i want it to it's outside the user effects on all the renders i'm just going to render the product i'm going to see if it's pulling in the information and passing it okay and i recommend you do this as well because there are many areas where you could have gone wrong there okay so make sure you do this step to see if you're still doing right i'm gonna do this and then i'm gonna make sure i'm rendering the plan screen correctly so in profile screens i'm gonna go ahead and import the plan screen so at the top here import refresh and i'll pull out my inspector and then let's go ahead and make this full screen for a sec and it says the use effect is not defined so let's go to our plan screen we need to go ahead and import the use effect save and then let's go ahead and check out so refresh and we can see this right so what i'm going to do here is i'm actually going to go ahead and pull this underneath there we go so you guys can see a little bit easier i'm going to click console and then what i'm going to do is you see here right so it's actually given me an object okay so it started and it's giving me an object now here what i'm seeing is three different product products now if you see what i've done here is i've created an object based on these products right and then what i've done is i've got the information right i've got this information and i basically gone ahead and then got the prices information and added this to that one product okay so now in this one sort of product object we have the product itself with the description the name and the price of that product including the type if it's recurring if it's one off and all that sort of stuff so at this point is pulling that information from sort of remember the extension communicates with stripe populates our firestore database and then this will go ahead and pull from our firestore database okay and all of the interactions between firebase go ahead and uh and it's all mapped out now um okay so now what we're going to do is we're going to go ahead and continue on so i want to actually going to map that on the screen so how do i map that on the screen because it's an object you can't literally map through it like you would an array okay so the way you map through an object is you basically go ahead and say object dot entries now the music is coughed because we've literally gone ahead and uh finished that entire place so i'm going to start from the beginning and i do love this song so check this one out this one's always kind of upbeat nice positive song all right thank you so much michael he says sunny is giving us all he can possibly afford for free so let's keep it positive thank you so much dude really really appreciate that he goes let's show him some love and motivation thank you so much dude i really really appreciate that all right um almost at 400 likes almost a 400 likes right object dot entries all right so object or entries and what this will do is it will go ahead and give me basically a array back and it'll give me like the key in value pairs as an array okay so here what i do is i pass in products and then this is a kind of an es6 function here i'll say map through okay and what we do here is basically we put the parentheses okay we put a parenthesis and then what we do is we go ahead and we destructure right the array that comes back because it will come what will be inside of it is the first thing will be the product id and the second thing will be the product data why is it like that because look the first thing will be the key so this is the product id and the second thing will be the product data inside of it so the first part product id and then the second part product data that's why we go ahead and open it like that thank you shashwan for the donation because uh said can't think can't thank you enough for this go content i appreciate that so much right let's carry on guys i'm gonna go ahead and say an arrow and then we're gonna go ahead and have our code yeah and now what i'm gonna do is i'm gonna go ahead and actually have a um so here at this point i'm gonna eventually add some code here so i'm gonna add some add some logic to check if the user's subscription user subscription is uh active right so we'll add some stuff over here afterwards oops so that's what to do right so we call this to do's when we're coding where you can go ahead and do something like this and i've got an extension which highlights the to-do's so that looks pretty good at this point but what i'm gonna do after is i'll say return and then what i'm gonna return is gonna be the following right so this is gonna be the rest of the sort of plan section so our goal here is to build this out now from the data that came back from the db okay so i'm gonna go ahead and refresh and just see nice so at this point it's crashing because there is nothing that's being returned in case we need to fix that so and also the return should not be an object it should be parentheses there we go so here i'm going to have a div okay and this is going to have the plans screen planned because this is going to represent each because what we're doing is we're looping through the objects and we're gonna basically push out this then we'll loop through and push out this then we'll loop through and it'll push out this right so that's why it's happening okay so at this point what i'm gonna say is say plan screen inside of it plan screen under squad underscore info okay and inside of here this will represent the left hand side okay so the left hand side over here what we're going to have is we're going to have the product data dot name and this will give us the product data the plan that we're on right so inside of here this will actually be a so i'm going to cut this for a second i'm going to have that inside of a h5 tag and then i'm going to have a h6 tag and this one will be product data dot description okay so right there the description and then underneath that i'll have a button okay so underneath that i'll have a button thank you so much amen for some honestly really really helping out right now in the chat nearly at 400 likes guys just keep pushing and like i said if you haven't already first link in the description if you're new here and you've just joined in with a huge event happening tomorrow and let's go ahead and bring up the energy again with the uh with the challenge song right so you can ignore this sort of error for now we'll fix that in a sec but then what we're going to do is have a button which basically will say this like a subscribe option okay so say some kind of subscribe inside of it okay so let's go ahead and see why this isn't obvious oh nice look at that yeah there we go so now i'm gonna close this up and you guys can see look at that it pulled in that data and we've rendered it out on the screen so this is coming from fire firestore the database right and remember firestore is getting populated based on stripes information because we have the extension so look think of it this way we have firestore over here we have stripe over here and then we have the extension which basically bridges the two things together right and every time we add a product in stripe it goes ahead and updates firebase right the firestore database and then we can basically interact with each and it basically stays in sync because of that extension right so that's how it goes ahead and does it so what we can do at this point is we can basically go ahead and say so we've got the subscribe button over here so i need to know right i need to basically know what plan the person is on i need to know what exact kind of plan they're on right so i need to go ahead and access their i need to go into where the user is and their customer id is what we've logged in as and then what i should have inside of here is i should have the um let me go ahead and double check something one sec subscriptions oh yeah so once they go ahead and subscribe to it there will be a another collection in here for the active subscriptions okay so what i'm going to do is go ahead and basically have it so that the next step here is actually going to go ahead and implement implement firstly when i click a subscribe button it's going to go ahead and load the checkout right so that's the first step that we do okay so on the click of that button so on this button click so i'm gonna say on click what i want to do is i'm gonna and i'm gonna make this a bit smaller because it's hard to see at the moment so i'll go ahead and say load checkout okay load checkout and what i'm gonna pass to this is the current because remember we're rendering rows here right i'm gonna pass this the product data dot prices oops got prices oops comprises dot price id okay perfect and then and guys just focus on the positive stuff don't worry about all the the negativity that's fine honestly we got we're stronger than that right so we're gonna hit save and there you go right now i'm going to create the load checkout function so i'm going to say const load checkout and there we go all right so we've got the load checkout function now the load checkout we passed it a parameter this is going to be an asynchronous function okay so what i'm actually going to do then we'll say async and it takes a price id we pass the price id in here because think about it right what we're doing here is we're actually rendering the list style right that list and then oops it says cannot reproperty price id of undefined that is because what we need to do is um at some point it can be undefined so we need to go ahead and protect ourselves let me go and check that out oh yeah oops sorry what am i doing that's wrong here we should do one click this should be an arrow my bad there we go otherwise it's just going to invoke the function straight away okay there we go so on click when we do it it will go ahead and trigger off the load checkout function okay so at this point this is where we have um this is where we go ahead and have the checkout functionality so it should when i click the subscribe button redirect but firstly let's just style that because it's kind of throwing us off by looking at right it's kind of like being a bit confusing by looking at that so i'm going to go ahead and open up my plan screen underneath okay so i'm going to open up plan screen underneath and then here we have the planned screen info on a bunch of stuff okay so what i'm actually going to do here is open up my plan screen css so i can have a look and then what's up alexandros good to see you in there dude right so i'm going to go ahead and pull this a little bit higher and here i'll say plan the screen and screen oops my screen underscore underscore plan and then here i'll say display flex we're going to flex on that right so save and then it should go into a row so by default flex goes into a row perfect and then what we're going to say is justify the content to be spaced between so that way it should use up its available space you now you see now the two children to this and the subscribe button are pushing apart from each other right so that's exactly that looks very good right now and then i'm going to say give it a padding of 20 pixels because i don't want this to kind of be too i want it to be kind of like that that looks a bit cleaner and then what i'll do is i'm firstly also going to make this a little bit nicer to see there we go so you guys can see a bit easier and then i'm going to have underneath that a opacity of 0.8 and there's a reason why right because i want to have this nice hover effect when i hover over it so to get the hover effect i'm going to target the plan screen plan when i hover opacity of one and this is a nice little trick so when you hover you see how it goes ahead and changes the opacity when i hover over the appropriate div okay so this looks really really good okay there we go so at this point what i'm going to do is and guys remember when you post error messages in the console it's really kind of i mean you can't expect someone to help you with that kind of level of sort of error message right so at this point i'm going to target the button inside of the plan screen info thank you so much walmart beaumona he says we all owe you honestly as long as you guys are sticking with me it's all good man that's why that's all i care about i want you guys to learn that's it so i'm going to go inside the plan right i'm going to target the button okay the facebook group is the place to to push the error messages that will help you out okay so over here what i'm going to do is i'm going to say the button should have a padding of 10 pixels by 20 pixels save it and you can start to see it gets a little bigger right i'm going to give it a font size of one rem a color of white and a background color of the netflix color right so you can see it starts to look already a lot nicer right richard said girlfriend's mad because i'm spending all these nights on youtube i don't care bro this is for our future i feel you dude i feel you even members feeling the neglect right now uh so i i feel you man what's proper react slack channel uh slack channel is for inside the community but right now we have discord and we have a facebook community that you can feel free to join calvin um but calvin be there for tomorrow's event the first link in the description all right so the next thing i'm gonna do is font weight 600 border none to give it that flat clean look and a cursor pointer because obviously when i hover over this i want it to have that that clickable ui sort of you see when i hover it goes into a click element right that looks better live streaming coding is mad difficult so props to you thank you so much lee robinson thank you it's true it's actually very true it was extremely tough in the beginning so i appreciate that dude all right so we have the styling down so this will make it a little bit easier for you guys to sort of visually see what's going to happen right so i'll sort of space it out like this there we go right so now what i'm going to do is go ahead and implement the load checkout functionality okay so the load checkout functionality the first thing i want to do is get the users i'm going to make something called so when we're using stripe right when a user checks out when a user basically has like stuff in their basket or like they want to kind of buy something you start something called a stripe checkout session and then that allows stripe to basically go ahead and say okay i you want to buy something i'm going to set everything up for you and then you can use the link to go ahead and redirect the user to our payment form okay so i'm going to go ahead and set that up right now right so uh whoa literally three likes away from 400 guys come on you can do this right so i'm going to go ahead and say const doc ref right so document reference i'm going to say await because this is going to be a async and i'm going to say db dot and then we'll say collection of customers nice we broke 400 that's what i'm talking about guys i love that 400 likes broken incredible man xxx's bro i'm 399 that's what i'm talking about dude right db.collection and then i'll say customers right and then what we'll say is dot doc right and then i'm going to go ahead and target the user's uid now remember we used redux yesterday where we basically after the authentication step push the user into the redux uh sort of store right so in the user slice of the redux or so we created a selector to be able to pull that from redux so what i'm going to do now is go ahead and pull the user from the redux store the way i do that is i say const user equals use selector thank you so much cj williams appreciate that donation dude five dollars amazing dude i think we can break 500 likes today guys it's so crazy the energy you guys are giving me select user right so that's the selector we created appreciate that honestly i'm gonna go and get some sushi tomorrow all right so you selected there we go and then we've got the user here okay so now what we can do is i can go down to here and i can say doc is going to be because what i'm trying to do here is i'm trying to go into the customer and the this id right here this is going to be the user that's logged in so here i'll say user i love this song let's say user.uid right and then what i'll say is um dot collection now this is the new collection that i want to basically go ahead and create okay so this collection has to be specially named and this one i'm going to say is simply going to be checkout sessions okay so it's simply going to be checkout sessions and then what here i'm going to say i'm going to add a checkout session remember the extension has a lot of clever stuff behind this right we're going to add the checkout session and here i'm going to say the price of the checkout session is going to be the price idea passed in right as a pro as a sort of prop to the function so this one you want to click it sort of this one is going to have the id of this row this one's going to id this row it's going to have the price id of this row and then i'm also going to go ahead and pass in two things called the success url and the cancel url now when we redirect the user to that payment page we need two routes right we need the success url to cancel url if the user was to cancel anytime where do where does stripe send them back to you right and then also if the user is successful in their payment you want to send them to a confirmation screen do you want to send them back to the screen they came from you can pass in those variables okay so what we're going to do here is we're actually going to use the current screen the user is on right so whether or not they succeed or fail they'll come back to this screen the way we do that very easily is we go ahead and pass and we use something called window.location.origin right which kind of is kind of self-explanatory so i'm going to say the success url and the cancel url is the window location origin that means that we basically go ahead and um and and we basically go ahead and have come back to the screen that we're on which is basically whatever url it was on okay so with that said that's all looking pretty good at this point and then what we're gonna say is this document reference okay we're gonna basically add something called the on snapshot because what's gonna happen here is that firebase stripe extension will see that you added in a new checkout session okay it's going to give us that checkout session right so it's going to generate and do some funky stuff in the background and then it will go ahead and we want it to basically redirect the user and throw them towards the uh the checkout page okay so um oh everyone goes i miss you richard i told you i told you dude they they go the girls feel it when am i coding like this guys it's the most i've seen sunny all day i love that screen transit no one has used it in live tutorials before thank you dude i love that screen transition too dude so here what i'm going to say is document reference i'm going to say on snapshot okay and this is going to be an asynchronous function and here i'm going to say get the snap right so the snap or whatever you want to call it snapshot is fine and here i'm going to say okay so from that snapshot i'm going to destructure so it's something in es6 right where we basically break apart the object to go ahead and do this right so we're going to say break apart and here it's going to be error and session id right so this is going to destructure the snap.data object and it's going to get the error and session id now here what we're going to do is we're going to say if error right so if error so if there was any error at all right i want to basically alert the user okay so what we can do is they've actually given us this sort of filler code and this is pretty much what i would recommend as well okay so i'll go ahead and pop this in so show an error to your customer and inspect your cloud function logs in the firebase console to see what went wrong okay so obviously you should handle things a bit nicer so maybe you can go ahead and refactor the alert to be a nice kind of pop-up which is whoa whoa whoa something went wrong on our end right um and then you can go ahead and do that um i'm not sure what unknown queen means it's bad you can go to jail you can't it's fine um so mehrbahn says i just made a tick-tock about me i said it's relationships i miss them so much amazing nice so now what we're gonna do is yeah we're gonna have this and then we're gonna say okay if there was an error that's fine right so i'm gonna say if the session id right if there was a session whoa nice michael barrett says the stripe checkout team is tuning in amazing work so far thanks for using checkout happy to answer questions here feedback dude that's got me so excited man yeah i'm using the i saw your conference on um udani stripe like the global conference event and i was watching that and i saw the integration you guys done with firebase and stripe that was incredible that's huge that you guys are watching this that's so cool to know that you guys are seeing this right now because i've been using stripe in all of the sort of uh react builds and uh and and also i've been using like firebase like like anything so the fact you guys are watching this incredible stuff guys feel free the literally the stripe team are inside the community the chat right now so feel free to ask questions and and yeah let's carry on guys that's incredible right so now we're going to say if session id and then here we'll say okay so this is the actual sort of comments that come back right we have a session that's redirect to checkout so what we need to do is initialize stripe that's crazy guys smash that thumbs up button because that has literally like whoa that's insane right so at this point we need to load up stripe okay so we're gonna load strap into a variable and the reason why we do it here is that we basically and also thanks for the donation dude really really appreciate that i'm actually going to go ahead and screenshot that one for memories nice that's incredible that's so cool honestly that's like a geeked out moment right there that's a huge geeked out moment uh let me go ahead and save that one nice okay so what we're gonna do now is we're gonna go ahead and say um where am i okay i'm gonna go ahead and load stripe right so stripe typically we don't want to load it in the beginning when we don't need to so we only load it when we basically want to go in and have the checkout sort of initialize now load stripe is a function that we need to import okay so we need to import this from stripe.js so we need to actually set this up as well so load straight from stripe stripe.js so we need to go ahead and install that so i'm going to go ahead and pop open my my terminal open up this and then wait a sec and then here what i'll say is yarn add stripe stripe.js okay i can't believe that geeking out right now that's so cool i've always said i would love to get sponsored by stripe or firebase and the fact i got a donation from the team incredible stuff right elon musk is the next guy i wanna i want to drop by i'll be so cool all right so now what we're gonna do is we're gonna go over to load stripe okay so here it takes a key right so this will go ahead and take a key so i've imported it at the top and then we need to pass the key now obviously this is a secret key you shouldn't be showing this right so obviously i'm doing it for the demo purposes where i'm going to show you guys my key but you shouldn't show this key to anyone so what you want to do is go over to your developer settings over here and then when you go into your api keys you should have two keys you have the publishable key that you don't really care about everyone can see that and then you have the secret key oh i've already showed you the secret key why we already used that when we set things up right now what we're going to use is something called the publishable key and this one is something it's called like a public key you don't mind if people see this because it takes both keys for that like sort of encryption to work right so so it's fine to share your public key but in this case i'm sharing key secret group i'm going to click this one and then i'm going to go here and paste okay so i've pasted in my test key there we go and then you guys can tell it's to test you because it says test if you have lives there yeah remember also by the way if you use your test key you have to use the test secret key if you use the live key you have to use the live secret key they have to be in tandem you can't use like one test key one live key has to be the same key okay so let's carry on so now we've loaded up stripe what we're going to do is we're going to say stripe dot redirect to checkout okay and then what we do is we pass in the session id because remember the session id came back from the snapshot okay so here i say redirect to session that with the session id and then we go ahead and click save okay and then remember because we passed in the success url it will come back to this screen if everything went accordingly right if everyone everything went to plan so let's go ahead and see if all of this amazing magic worked right and i again i really do love this extension because the power behind it so we've got these plans right so i want to go ahead and click the premium plan so i'm going to open up the and i will just see if it works right so i'm going to click subscribe it's asynchronous so right now i clicked it it's loading up stripe and then it should redirect me in just a sec if everything was set up correctly right boom nice look at that guys it just went ahead and created a checkout session right during that time it created a checkout session the firebase extension with stripe went ahead saw that i added the checkout session and then basically populated it with some more information like a session id and all that sort of stuff and then it came back to us and then we used that information to redirect and throw the user to this page like how cool was that right that's really really cool michael says wow what a free checkout session i know and what's really cool about this guys is it's completely mobile responsive so and if you've ever had to code any kind of payment stuff yourself it's just easier to use what they're using right now i'm not going to click the card information because i think my cards might pop up so in this case what you want to do is where it says card information the way i'll show you how to do this is let me go ahead and say do this right now so inside this one what you want to type in is the following okay so on the card information bit you want to type in 4242 and this is the test card that you want to use okay so it's literally gonna be four two four two right oh no wait one sec let me do this and let me keep it on the screen oh no damn it okay so over here what you want to do is for the card number this is your card number that you use when you're testing okay and there are different ones and the good thing about stripe is you can basically pass in different card numbers to mimic different behaviors right so if you want to sort of do like a a like a payment failed test they give you a card number for that and then everything else you just put four two four two four two in right so just get used to just four two four two four two whenever you're testing this stuff out so what i'm going to do at this point is go ahead and populate this out and i'm gonna hide my screen because i'm sure yeah see my cards came out so i'm gonna do four two four two four two four two four two in the month and year i'm gonna say four two four two and then cvc four two four two and then the name one card at this point could be anything so i could just say abc and then for the billing address i'm just gonna say like abc or something like that right and then abc it doesn't matter when you're testing right london abc right so what i'm going to do now is show you the screen so you should see this right now okay so you see the card there is 4242 and you've got everything on the screen okay so this is a live payment that's about to go through on stripe and i'll show you and i'll prove to you that it goes through and it processes and it's even gonna the crazy part is that so much stuff is gonna happen here right it's gonna actually go ahead process a payment in stripe and remember but stripe is here firestore is here we have the extension connecting these two things so once it processes that payment in stripe the extension kicks and says well remember the web hook fired off and it will go ahead and populate and update the sort of firestore database which is incredible right we don't have to do anything else besides that this extension will do all of that for us which is amazing okay so let's go ahead and do subscribe and let's see what happens and if it's all successful it will redirect me to the success url which was the profile page okay so it's processing ticked nice and the music dropped this minute that happened and look at that it redirected us to the app right so that's so sick and then we go back here that's so cool right so now what we're gonna do is let's go actually and test out so you guys might be thinking but maybe it didn't actually process the payment right maybe he's lying right and go ahead and smash the thumbs up if you thought that was cool basically if this works hit the thumbs up okay that's all i ask you right so i'm gonna go to stripe i'm gonna go payments boom 13.99 click it subscription update stripe gmail.com was me that was me that i typed in remember i said abc abc this was the sort of details of the address and then you guys can see a subscription a premium subscription has been created and then uh yeah look at that and it also goes ahead and shows you sort of the exchange rate the fee because uh payment processors do typically charge a little fee which i always get a question of why did they charge a fiat code that myself believe me payment processors do a lot of stuff for you i use stripe paypal and all my sort of apps and and yeah like it's fine they take a fee they handle a lot of stuff for you they also manage fraud and a bunch of other things that you guys might not account into so it gives you a bunch of information over here which is awesome okay so this looks really really good at right now and it seems to have worked let's check if our firestore went ahead and updated as well so i'm going to go ahead and click refresh and let's see what happened so we've got the customer this is me logged in you've got the checkout session which was created right so this one is the one that we created now remember when we created it all we did is passed it as a cancel url a success url and a price and then what that extension did is actually went ahead and gave a session id and it created tags all right and then we redirect to session id and we did all our magic then what happened is we basically paid for a product on that screen so what it did is it went to the customer that was logged in went to the subscription and boom we now have that customer's subscription data inside of firestore so this is literally look their status is active the current period end and start and start and we also have the exact sort of um we have the actual product itself so look at that it has everything that we need inside of it right this is incredible it worked everything looks really really good at this point all right so now what i'm gonna do is i'm gonna check i'm just wondering i'm just checking something we've got create that period create that quantity no okay stripe link right so what i actually do what i was looking for here is let me show you guys an example if i go to my the netflix clone i built before and i go ahead and check a let's go ahead and see where did i one of these customers would have a subscription there we go subscriptions and we click this one you guys can see it has a row here right row of premium the reason why it has a row is because on the rules what i actually did was i modified the rules slightly i think it was where did i do that i basically no it wasn't rules why did i where did i change the rule to add in the row i wonder where i did that let me just go ahead and check let me go back to the other build netflix clone youtube and we have here the subscription and let's click the subscription and then where is row so right now the row is null i'm just wondering um oh yes that's right that's right okay so i'm going to show you guys a little trick so right now you see the row is no right so right now we have the product id but what you might not want to do is then have to go and fetch the product id and do all that sort of magic wizardry and all that stuff so at this point what i'm going to do is i'm going to run another example by you so let's go back to stripe and what you can do is you can give a piece of metadata to each of the products okay so what i'm going to do is i'm going to quickly check what i added to the the last set of products you basically add a piece of um let me go ahead and say netflix so let me go ahead and where is it yeah here we go so you can add a piece of metadata to your product all right so you see here if you add metadata firebase row this will basically help you because it adds that into firebase and that's very powerful because now we don't have to do a second query to fetch what what plan we're on or anything like that so what i'm actually going to do here is i'm going to add metadata with firebase row to all of our ones i'm going to go back to our the shop that we were working on and then yeah six more likes until we get 450 likes let's go ahead and edit the products okay so here i'm going to see where is a firebase papa youtube demo okay then we're going to go into our products and then you can see the method there okay no products okay why is it kicking me out let me go into product youtube there we go then i got the product so the standard product let's go here and let's go ahead and click edit okay and then i want to go to additional options and then is it additional options no it's not additional options it's here metadata edit metadata and then key is firebase raw now you have to use firebase row because that's how the extension works and then here i'll say standard okay so standard i'll click save right so standard i wonder if that will update the firebase record let's check if that does it otherwise i'll go ahead and repeat the test but here we go basic let's go ahead and do um here metadata keys firebase row and here i'll say basic save and then here i'll go into premium and i'll do the metadata firebase row and i'll do premium and basically this is actually very powerful right because what you don't what you might want to do is you save yourself a request by doing this because now when the subscription is created it will add an additional section there so let me go ahead and refresh and see if it did that if it didn't i'll just create another account and show you um so just to make this sort of demo quicker so there we go we've got the subscription boom and then you can see okay so the row isn't there right so at this point what i'm gonna do is i'm gonna run this test again to show you how it works okay so let me go ahead and go here and let's go ahead and sign out and let's go ahead and say i made a new account called sunny gmail.clone.com sorry abc abc now go ahead and sign up okay oh i'm already making an account so let's just do sunny s sign up okay so we've got an account here i've got all of these different plans okay so see i actually poured in all this all of the plans now because it's synced right it's synchronized up so remember before we added those other plans so it does sync up okay so here we're actually coming to uh we won't be too long now until we're finished right so we click on subscribe so let's go ahead and say subscribe to premium and then it will go ahead and load it and then i'm gonna go ahead and quickly fill out my card details so four two four two four two four two four two four two four two four two four two four two let me go ahead and do that four two four two name one card let's just say s abc abc abc london abc all right and then i'm going to click subscribe nice there you go subscribe and now what it's going it's going to do it's going to push this into it's going to basically create the subscription and then we'll go ahead and update it now everyone's jumping in for too nice so we're gonna go to this and now we should see okay so ignore the extra plans here the additional duplicates because that just shows you that okay it does synchronize by itself it's fine um and now what we're gonna do is we're gonna go over here to the actual um checkout session so which customer was it i think it might have been this one so yeah so you can see the row is now premium okay so this is really handy so you have to manipulate the metadata of the product in order for the row to come up here okay so that's that's exactly how we do that and i wonder now if we go to our product if we'll go ahead and delete it right so let me go here all right so if i go here and i say delete product let me go ahead and try and okay so you can't delete those ones that's fine for now um so we're just going to have to ignore them for now as part of the demo but row premium okay so what's really handy about this right i i did see the message i see the messages right if only your row card number was that easy to guess yeah if only all right so now we go here and then we're gonna have to do the following so now what i want to do is i want to show which one is subscribed okay so i need to go into this point inside that user who's logged in and get their subscription okay i'm gonna get their subscription so now what i want to do is i basically want to say const subscription yep so i want to go back to my code sorry i started typing in the wrong thing all right so i'm going to go here oh we just broke 450 likes damn guys you guys are on fire today we have stripe in the hours we have like everyone's energy is up the roof damn here i'm going to say const subscription and then i'll say set subscription and then i'll say equals use state because we want to make it local state and then uh here i'll say uh let's just say the subscription in the beginning is no okay so then what we're going to do is we're going to go ahead and create a use effect okay so look at the chat right now right so we're going to create a user effect so it runs right so we're going to say use effect there we go use effect i love this one this one always gets me pumped up right so now we do this and inside this use effect we'll start with the empty dependency array okay now inside of here what we'll do is we'll go ahead and say db.collection of customers okay so the collection of customers and we got the user who's logged in right because it's stored in the redux database so here i'll say user.uid because that's the user now what we do is we found the user themselves okay so we now have the customer and the user id the next thing we'll do is go into the subscriptions so we're going to say collection of subscriptions subscriptions nice and then what we're going to do is say get and then i'm going to go ahead and say then and then what inside we'll do here is we'll say the query snapshot so query snapshot boom and then we'll go ahead and pop this up and then what we'll do is we'll say query snapshot dot for each okay now for each it's going to be async it's going to be the subscription for every single subscription that's inside of there we'll go ahead and do this right so inside of this bit i'm insane have my fanboy moment december 27th i might even remember that time it was 7 30 isd yeah i'm indeed i remember when me and uh me and um almond first jumped on so funny all right okay so now what we're gonna do is we're gonna go ahead and say async subscription i'm gonna say console log subscription data so you can go ahead and console log it out if you want to debug at this point i'm going to actually just go ahead and say set the subscription so set the subscription and then here i'll say set the subscription to an object and i want to do row dot subscription dot data no sorry row is subscription.data subscription.data and then i'll go ahead and do this dot row okay because basically what we're doing at this point is we're going inside the subscription we're looping through for each and then what i'll do is i'll say dot row right so here we've got the row remember that comes in because we modified the metadata okay so what we do now is we get the row like that and then we've got two other things i'm curious about right the current period start and the current period end okay now why is that kind of handy right because i want to know when the period ends when that person sort of signed up when they end because then that way you can show it in the ui right because remember the ui that we won is this one where it says renewal date okay so over here i want to say subscription.data and you can destructure at this point at the higher point here if you do want to do it right but then what i'll do is i'll say data dot and then i'll say dot current period end so dot current period end there we go dot seconds right so what this does is it gives us like a time stamp back so here i would say dot seconds okay dot seconds okay perfect and then i'll say comma and then here i'll go ahead and do the same thing for the current period start okay so go ahead and pop that in there we go save all right still having my fanboy moment the fact that the stripe team were in there that's so sick man let's try check our team so could see that all right so now what we're going to do is this use effect is dependent on a few things so it's user id is dependent on that and it's also whenever we're using a dispatch we should go ahead and pop it in there right so that way it's gonna oh we're not using dispatch here because i'm not pushing into redox sorry so it's gonna be the user id there we go save all right so at this point subscription should be valid right so we should be able to get the user subscription so if i console log and i say show me the subscription so let's go ahead and do f12 and now if i go ahead and refresh okay so it says no so ignore this at the moment we should be rendering lists with keys but i'll show you that afterwards but plan screen 51 so now you can see look here we go we've got the current period and current period start and the current plan which is premium at this point which is amazing right so it's working it works really nice and it works really well so how do i update the ui to show if it's gonna basically be if they've already got it okay varon you always get a shout out dude don't worry i got you i got you little kids killing it man right so now what we're gonna do is i'm gonna basically have a little helper function inside of before the return so remember i hear i said the to-do right ah there he goes he goes let's go that's it i like the energy dude honestly i appreciate that keep up that energy don't let anyone take it right so now what we're gonna say is before we have the return i'm going to say i'm going to get rid of this to do but we'll keep it there while i'm currently i'm going to say const and i'm going to say is it the current package all right so i'm going to create a variable is current package and then what i'm going to say is product data dot name okay then i'm gonna say okay so if the product data dot name um which is which could be undefined right so i'm gonna say firstly put it to lower case right so i'm gonna make it a lowercase that way it's easier to check i'm gonna say if it includes because i want to cross basically check if it matches this subscription role okay so basically here what we'll do is every single list item in this list i'm checking if this the name of the product in this case premium if it matches the pro the row so remember the metadata actually has to match the name of the product so here i can say if it includes the subscription dot row and again i'm just protecting myself against optional um against this is called optional chaining it basically says if this is undefined then it won't just die so this will we can use this now we can say okay if it's the current package right so this one should be true for premium so it should be true for the premium one this one and the reason why i done to lower case is that way because it will actually match now even if it's there i think we can get to 500 likes before this video i really think we can the retention has been insane so here now instead of subscribe what i'll say is okay let's go ahead and save if you if it's if the current package is if this is not your current package then what i'll say is um sorry if it is your current package then i'll say i don't want to complicate it like i say then show that this is the current package as the text otherwise show us subscribe okay show us subscribe all right perfect and then what i'm going to say is only trigger the load checkout if it's not the current package because obviously you don't want to keep subscribing right dr drunkenstein just make sure you sign up in that link dude i will see you tomorrow if you're getting tired all right so let's go and say if it's not the current package then go ahead and load the checkout okay so let's go ahead and save and wait for it guys wait for it right current package right and obviously it found the remember we had the duplicates right so they actually found the premium plan right and the way it's done is it's found premium inside of here so it's remember we have duplicates in this demo right because of what we have but this is basically what you should see when you do it right you should see this where it says current package now obviously the styling on r1 isn't there yet okay so r1 right now there's a duplicate so we'll ignore that for now but the styling we want to basically go ahead and fix that okay so how do we go ahead and do that i've niche i can't see your messages dude just coding right so now what i'm going to do is i'm going to go ahead and say for the class name for the so firstly over on the div so remember that key that we should be using so here i'm going to say the key for the div that we're going to render in the list is going to be the product id because that's going to be unique every time so that's a good one to use and for the class name i'm going to use some string interpolation so i'm going to go ahead and put some jsx here i'm going to change it to backticks boom boom and then what i'll do is i'll go ahead and do the following so here what i'll say is i'll say if it's the current package or if it's current like it's current package then i want to basically go ahead and show so firstly this should be outside of this there we go if it's the current package i want to basically go ahead and add on a disabled class name okay so i'm going to say plan disabled right so bam we're doing bem naming convention it we should go ahead and then um have the disabled class name okay so that's how we do that okay so at this point now what i'm gonna say is um we need to style the disabled oh my god thank you so much insaf 200 donation uh much more fire and learning today i keep well i keep all learning joy from today's session might increase my learning thanks honey this time from india react developer to thank you dude thank you so much dude and we still have 250 people watching what the hell today wow come on guys smash the thumbs up let's get to 500 right and if you're frustrated and you're getting stuck use the facebook community afterwards do not give up okay do not go give up all right so let's keep on going guys you guys see your super chat came on the screen there we go nice dude all right so what we're going to do now is i'm going to go ahead and change this style so let me go ahead and pop in the plans screen dot css perfect nice now what i'm going to do is say i'm going to add the following style in over here right so pan disabled button okay perfect there we go right nice now you can see we're that's the current package that we're on right so now obviously we've got to the same point as this all right so this looks really good at this point right so you've got the current premium renewal day and so forth now what we can do at this point is i'm going to add in the renewal date okay so let's go ahead and add in this renewal date section so what we're going to do at this point is say um okay so i'm going to go ahead and say on the plan screen let me go ahead and find it so only so the renewal date let's go ahead and do this so on top of the plan screen right here so before we start rendering out the items here i'll pop in a renewal day and what i'll do is let's go ahead and do something like a p tag oops let's do something like a p tag and let's go ahead and say renewal date and then here what i'll say is but i only want to render the real date if the subscription is if we fetched it yet okay so if it's not no so i'll say subscription and then render out the renewal date there we go all right so only render it out if the subscriptions s now if we refresh you should see a p tag at the top renewal date right only comes when the subscription is fetched so now what we can do is we can actually go ahead and do some jsx here and i say okay new date right open parentheses and now what i'm going to say is subscription subscription current period end okay and you times it by a hundred because this is a time stamp uh you times it by a thousand sorry it's a time stamp in seconds emerson thank you dude i really love when you comment that the most friendly guy on youtube keep up the good work thank you so much dude honestly really appreciate that five euro donation thank you man all right so we've got seconds here so i'm gonna times it by a thousand and then we're gonna convert it to a date which is why we do that okay the next thing i'm gonna do is after the parentheses i'm going to go ahead and add a dot and i'm going to say two locale date string okay and then we save it now let's go ahead and check it okay and if you guys can see it look renewade boom there we go all right and just for very simplicity sort of styling here what you can do is you can go ahead and like style it as you want i'm just going to quickly add a break here just to test the style let's go and see look at that guys we've got the renewal day perfect nice oops there we go moving on uh there we go here nice look at that awesome right so now what i'm gonna leave as a surprise sort of a challenge for this homework right so i'd like to go ahead and show you firstly guys we just created a checkout completely hooked up to payments charges everything so so powerful right so if you found that was fun just simply smash the thumbs up it will go a long way to getting this video out as many people as possible but guys like look what we just built right we literally have all these subscriptions over here and 400 something like so far for day four is incredible right so we have the current subscriptions over here on our building obviously we have the duplicates from earlier's mistake um which is fine it's completely fine it happens right and you can go ahead and clean that up afterwards but you guys now know that it will go ahead and add in and the reason why i did is because i changed the plan so it went ahead and resynced okay so at this point what we can do is uh as for your challenge right so your homework right now is we know how to push things into redux okay we know how to push things into redux we've done it with the user okay so what your homework for today is going to be right and this is going to be something which we will check and then we will basically go ahead and me and jay will play around with the apps that you submit and then we will actually go ahead and see did they do the homework did they kind of mess around with this stuff and add it in or not right and again don't feel disheartened if you do not do this work okay because this one was actually a bit more sort of a lot more finer details than kind of getting it right again if you do do it five extra bonus points and we'll select the top five with the extra six on top of the five for just notable mentions okay so we'll go ahead and do that now the first thing we'll say for the homework okay so again get to the point of here right where we go ahead and have full sort of payment functionality you can click on a plan and you can go ahead and subscribe to that plan okay so here we can go ahead and do this right so it goes ahead and works make sure it got processes it actually goes ahead and does what it needs to do and then for your homework i want you guys to go ahead and this is in a different component right now where it says current plan premium this is actually upper level inside of the profile screen component okay so your homework would actually be how do you actually get up a level in components right so it's a little bit of a thinking trap i've done here so what i would recommend is you use redux you push the value into redux for the subscription and you basically go ahead and use it in the higher level you can do it that way that's a solution maybe okay and then what i want you to guys got to go ahead and do is to take that a little bit further all right so right now if we look at my finished build right here because we're currently subscribed in the package i can access netflix okay i can access netflix but let's go ahead and sign out and let's go ahead and say if i sign in to someone new so this is actually the finished build this isn't this wasn't part of what we did today but if i say abc abc abc sign up and now right now i'm not on a plan right so i'm not on a plan but if i try and click netflix it doesn't let me access netflix it kind of throws me back right throws me back to this page until i get a plan right so if i was to go ahead and let me go ahead and log in with someone with a plan so we don't have to do everything over again but go and say sunny gmail.com and right now i'm on a plan netflix loads up for me right so how do you do that all right so you would push the value into redux and you can use it at certain points throughout your app possibly check it in the react router section just gonna throw a few hints out there okay but let me know guys any questions with that homework and if what you need to do is it's the second link in the description you can submit the homework now remember we talked about those extra 10 bonus points for tomorrow okay so my hand i can see that bb's even saying hey amazing stuff and aaron sons got a little smiley face yeah i'm gonna drop a few hints you know like you know me i'm not gonna leave you hanging right but the testimonial video i do want to mention this right so this one right here okay if you want to get those extra 10 bonus points and even if you got stuck with the homework submit the testimonial video and just send the link of your previous homework to show me that you gave it your best effort right it doesn't matter i remember in the end of the day you can go ahead and just as long as you've participated you're a winner in this tournament okay not tournament in this challenge right so everyone who submits a video is going to get 10 points okay all you need to do is go ahead and say the following things on camera so literally imagine you have a camera set up and you basically just need to go ahead and film quick little video doesn't have to be long please don't make them too long maybe 30 seconds a minute is enough right and then we're going to go ahead and just say things like what made you join the challenge what have you learned so far and how do you think it's going to help you progress in the future how do i help you learn how do i make it simple and why did you decide to be a part of the papa femme community and why would you recommend someone else to join the papa fam right that's all we need to do and guys if you haven't already the first link in the description right first link in the description will take you to the sign up page for the final day webinar okay so this was the this should take you to this link over here this link is less than 21 hours away okay so i'm going to go ahead and show you the screen so the first link in the description will take you over here to the final final webinar where we basically have 21 hours okay so to reserve your spot there please just go ahead and just all you have to do is click save your spot all right we haven't decided yet if we're going to be putting this anywhere else so you have to be in this event to one claim any sort of prize if you're eligible for it otherwise i will have to give away your prize to someone else okay i don't want to give it away i want you guys to win what you deserve so all you need to do is go ahead and sign up and yeah guys it's absolutely going to be so much fun tomorrow i'm going to deliver an ultimate roadmap i'm going to show how i was able to make uh 250k by age of 23 and how i was able to do it using freelancing income from a job teaching all of those different revenue streams how i grew my income with investments all that sort of stuff i'll be running it through tomorrow your ultimate roadmap to becoming a full stack react.js developer in the year 2021 right we're going to go through all of those things and it's going to be a hell of a lot of surprise and everyone who comes tomorrow is going to get a surprise so that if that's not crazy then i don't know what it is seven thousand pound worth of prizes 14 winners right first place diamond three platinum winners and ten fifty percent off zero to four stack euro tomorrow i'm gonna be relaunching it's gonna be huge it's gonna be a massive event okay so without further ado i'm gonna go ahead and show you finally how to deploy the app as always and uh yeah guys all you need to go ahead and do is uh and some a lot of people saying where what is the free gift guys you have to turn up to tomorrow's event i'm just gonna give it to you you have to turn up to that event tomorrow and then i'll be able to go ahead and share the gift with you guys okay so i'm gonna go ahead pull up my terminal and what do we do we do npm run build to go ahead and compile our application so this will bundle react into a productionized build uh ben says is it the same time tomorrow yes every day we've been going live at 6 00 p.m utc gmt okay so it's gonna be at the same time tomorrow and you guys all you need to do sign up to that event first link in the description just don't miss it guys it's gonna be so much fun me and jay i put so much work into tomorrow's event so be there it's going to be a hell of a lot of fun right all you need to do now is create the optimized production build and then yeah let's go ahead and check this out varente has suddenly revealed the gift on ig no no i haven't revealed any gift guys i haven't revered anything yet right nice let's go ahead and wait for this one to build so there we go it's built out and then what we can do is i'm in jay if you guys can mention the deadline for the testimonial submission is tomorrow's the last day and you guys need some time margin yes guys the deadline for all submissions right the deadline for absolutely all submissions is going to be midday tomorrow okay so midday tomorrow which is 12 in the uh is the a.m right 12 p.m 3 00 p.m right it's gonna be 12 p.m tomorrow okay 12 p.m tomorrow lunch time gmt time all right that is gonna be the absolute deadline okay so for a lot of you so for me i think it's gonna be in literally four so 14 hours okay you have 14 hours to push a testimonial so testimonials you can literally give if you give the testimonial even up until 6 pm gmt that's fine but the homework has to be delivered by 12 p.m tomorrow for it to be counted as a submission the testimonials can go all the way up into the opening event because we can watch them quite quickly and we can go through it okay so guys get ready for tomorrow's event it's going to be a hell of a lot of fun we are almost at 500 like almost there right but let's go ahead and deploy this app right so i'm going to say firebase we've already done the build i'm going to go ahead and say firebase deploy and uh yeah guys you know how we do it you guys can feel free to play with this app in just a sec when it deploys and mess around with it use it as your um you know as your sort of reference and guys just to mention as well we broke 20k on youtube today which is huge and i'm about to break 20k on instagram as well so because of that i'm gonna be dropping another prize tomorrow which i just you know i'm just gonna keep giving you guys everything you guys want so go ahead and feel free to you know join us tomorrow right so i'm going to go ahead and drop this link in the chat there we go guys i think we can break i think we can break 500 before we sign off today right go ahead check out the link in the description in the chat right now i've gone ahead and dropped it i've dropped it akash says congrats thank you so much dude all right so i've dropped the chat in the description feel free to go ahead and check it out let's go ahead and do it together guys i'm going to click the link go ahead and click open and i can see the app wrap right here up in live right now and there you go guys we've got the app there you go loaded up the plans that we built today and everything works let me know by the way so screw send um story it tag me in it let me know how it goes for you facebook community if you get stuck and guys as always you know how we do it we're about to wrap up this video and get ready for tomorrow's event like i said first link in the description sign up and as we always do it guys i can't end it without you know i can't end it without the um the traditional papa fam soundtrack okay i'm trying to respond to everyone by the way so yeah look guys you know it's you know it's been your boy papaya this is day four ending right it's been a crazy event so far so much has happened in this event and we're gonna finish it so strong tomorrow in that final closing event so guys if you are excited and you want to change your life and go first thing in the description i will see you all tomorrow this is your boy papa paparia this is your papa fam around you right now and guys on that note i will see you guys in the next video day five of the challenge get hyped up it's gonna be so much fun i can't wait i will see you guys there peace [Music] you

Channel: Sonny Sangha

Views: 32,050

Rating: 4.966722 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: AHYVxg-lJX4

Length: 135min 59sec (8159 seconds)

Published: Fri Feb 05 2021