Stripe with React and node crash course

hey there everyone at this year back again with another video and I hope you are enjoying your day and I would like to make it more enjoyable by introducing you this crash course which is on payment gateway integration using stripe the best part about this course is this is not is this is not gonna involve any kind of boilerplate code we're going to write everything from scratch and on our own from back-end to front end to the payment gateway integration we are gonna use node.js at the back end and we're gonna use Express to listen as a server we're gonna use react and of course modern react with hooks and everything we don't need it much as of now but we will be using everything modern in the react and we will integrate a payment gateway there are dozens of payment gateway and if you wish I can record more videos on different payment gateways so let me know in the comment section if you want more such payment gateways in this video we're gonna use a stripe and I'll tell you a lot about the stripe so this video is gonna be bit longer a lot of time people are worried about showing their publishable keys and secret keys so I'll discuss more about how these role keys work so that you don't have to worry about showing up your public keys and stuff stripe you can just simply go ahead and sign up for it it gives you a developer access and you can have these keys so that's the number one thing you're gonna require I also expect that in your system there is no GS installed so that we can generate a node based project as well as we can create a react project and that's pretty much it I would also like to take a moment first a we're gonna design a back-end and then we are going to design a front-end and in here I would like to discuss a little bit on all the packages that we'll be using I have tried my best so that we can use as minimum of the package as possible but these are like the bare minimum we have to go through with them some of them comes pre-installed with the node library but some of them we have to install so first one that we're gonna go for is gonna be the course course middleware is required because we'll be throwing up requests so cross-origin resource sharing is necessary for this particular project we all be will be working on then of course the legendary Express package is also gonna be required it's a pretty easy we'll be using just this boilerplate code to have an Express setup it's gonna be pretty simple like that apart from that we of course are gonna use a stripe because that's what we are learning to implement so this is pretty good and in here on the NPM page if you go a little bit up here using the promises they give a really great example to implement the stripe but this one is for the invoiced item we will be directly charging up the user from their credit card so that's what we'll be doing and I'll show you more details that how you can take their shipping address and their billing address as well in this tribe itself that we'll be doing as well and apart from that we are gonna need UID we will be crafting this application in such a way that sometimes you know there are network errors and in those network errors sometimes there are chances that user might get charged double we don't really want that to happen so for that we will be using a UUID to generate a unique ID to avoid that particular case so that's all what we need for the back end when we'll be discussing the front end we will come back again and we'll talk more about it apart from that since I've been using this bootstrap for a really long time just for a change we are gonna use materialized CSS in that so for this we just need a CDN of this one and we'll be using just one button from it's nothing much if you don't want it that's fine too but I just wanted to have a little bit fun here now let's go ahead and fire up our terminal where is my terminal so let me fire up my oops there we go my terminal is here and that's what we'll be using and of course for the code editor I'll be using my all-time favorite vs code I'm gonna go first on the desktop and on the desktop I'm gonna create a folder which is gonna be YouTube stripe because that this video is also gonna go on YouTube as well so stripe let's go into YouTube stripe I want to create two folders here one for the back and one for the front end and then I'll be loading everything up here so first and foremost we're gonna simply say I want to create a stripe back oops hist ripe back-end and I'm gonna also create a folder which is gonna be stripe front and there we go and now I would like to go into the stripe actually I shouldn't have created a stripe front end because react actually generates its own folder so my bad just realized that and we are going to remove this tri front and because we are gonna generate that from the react itself so we're gonna just move it to the bin I just need a stri back-end so we're gonna go is tri back-end we're gonna go for NPM in it to initialize it and package names try back-end is fine version one fine description entry point and extra GS is fine I don't need test command or gate or any keyword author probably I can put my name that's it I'm all ok with whatever you are doing here and if I do a quick LS there's a package dot jason here let's go one directory back let's clean this up okay so stripe back end is all ready then I'm gonna simply say npx create - react - app and I'm gonna call this one as a stripe front end there we go looks pretty nice and now this one is gonna take a little bit while to generate all of it but in the meantime we can just fire up our vs code and can drag and drop this folder here so where are you there we go and in fact I can drop this entire folder here that would be nice so I'm gonna just drag and drop it from my desktop - there we go now I have everything in just one place here okay and this is all what we need stripe back in and everything now there's one more thing that I would like to mention here I will show you that there's a package env there we go if I just look for the environment variables this is the one dotty and V my bad so this is the package which helps us to protect our keys if you want to deploy this project on to the servers I will show you how exactly that is being done but in case you want to install this one this you can do this I'll show you how to use that in the react section so don't worry about it we are going to protect our keys as well so don't worry anything about that okay now that is all out of the way now I want to go into the strife front end it can generate it's on thing on the own I'm gonna go into stripe back-end and I want a new file and I want this one to call as index dot JSP name it my bad rename please index dot JSP ok this is all looking good if I look at my package dot Jason this is all looking good but it doesn't have anything install up here so I'm going to install everything from here so let's do a quick LS I need to go into stripe back-end do a quick LS I should be able to see my package dot Jason I can use the inbuilt terminal as well but right now I'm not gonna do that I'm gonna say NPM install and I need a course to be there we need of course Express to be there I need stripe of course I need UUID as well in case you wish you can install the dot env as well but I would like to give that as an assignment once I teach you how to do that I'll give that same application to be done in the backend as well so that's why I'm not using it and of course I'm gonna use node Mon because I really don't like to hit reload again and again so these are all the things that we are gonna require and this looks all good and now we can start working on this so everything looks good and we're gonna start the server in a second but right now let's just not worry too much yeah all looks good I want to start a test script so this is gonna say start and we're gonna simply say node Mon index dot cheers and by the way all these files are available in the attached to attached attachment of this video the link is in the description so you can download that as well save that looks absolutely fine now let's go into indexed argyus first and foremost let's bring all of the stuff that we requires we're gonna simply say I need course which is gonna come from require course there we go we are gonna need Express for sure so we're gonna simply say Express is gonna come up from require Express there we go and we're gonna create we're gonna create an object from Express as well so we're gonna call this one as app that comes from Express there we go so Express is all ready for us we're gonna need couple of more stuff so we're gonna need a stripe as well that is gonna come up from require stripe we need to configure the stripe as well so we're gonna come back and do that in a second right now I'm just keeping an empty here and whenever there is a such thing I like to mark that as to do I'm gonna simply say add a stripe add a stripe key and I'll mark that as a comment so that I don't have to worry there we go so I'll come back here and I'll add a stripe key once we talk about the stripe and the role keys section and we're gonna need UUID as well now there are a couple of ways how you can use your UID I have discussed that in much detail in my other courses right now I'm gonna just go ahead and use the version 4 of it so I'm gonna simply say I need UUID and we're gonna use version 4 but there's a easy way to do all of this through the documentation as well so that's all what we need now we're gonna inject couple of middlewares as well so middle there goes here now we don't need much of the middle where we're gonna simply say app dot use since we'll be passing on some JSON values so we're gonna simply say Express dot Jason please handle that Express will do that automatically for me I also need to inject the course so we're gonna simply say I want to use course so now our application is ready for the cross object references so that's all what we need now our all of the routes will go up here and our listen part will go at the very bottom so the listening part is actually super easy let's go ahead and do that we're gonna simply say app dot listen and in the app dot listen we're gonna listen on to the port 8 - 8 - but again this can be any port there is no issue no problem in that case and we are going to just simply print up a message that says console dot log and this one is gonna say listening at and we're gonna say listening at port 8 - 8 - so that's all what we'll be doing and I think our application is all ready to listen anything then we're gonna say app get I want to define a simple get route so that we can see yes something is working once we have this this gets you a call back we're gonna get a request response and the callback is gonna simply send a response that is gonna say it works at my website learn code oops online there we go so that's all what we'll be doing and now all we need to do is fire up this server so that things may be there looks good I don't know if this is gonna reference our some errors or not I'll just comment this out as of now I just want my application to be up and running now let's go up here and we are at the back end so I can simply say NPM start because we have modified the package Jason and there we go we get listening at port 8 - 8 - if you visit the website date - 8 - let's go ahead and do that localhost 8 - 8 - on the home it says it works ahead learned code online so there we go step number one is done all the pre configurations are ready now let's go ahead and talk about first and foremost we need this stripe key so let's just uncomment that and talk about this one so whenever you go or you make an account on the stripe you'll be redirect to the home page and on the home page it says hey you might want to activate your account or if you are just creating a testing account this is actually a testing account we do a bunch of testing up here in this account in the developer section you can simply go ahead and find these API keys just go into developers and just click on API keys now a lot of time people get worried that I can actually show this publishable key to anybody but I'm bit worried about these secret keys I don't want to reveal them to any other developer or in the YouTube tutorials or anything else you can go on to API keys and in the API Keys you can simply just create new role keys so I can simply go ahead and create a new role key and I can make that this one is gonna be available for an R or for seven days or how much long you want it to be I want this one to be available for 24 hours because I'm gonna delete that and also you can actually manually delete these publishable keys as well as secret keys so I'm gonna simply enter my password so now I have a publishable key that I can use and this is gonna be I don't want to save anything so this is going to be used in this tutorial at least and similarly I can create a secret key that can also be a role key again I'm gonna make them as 24 hours as of now let me enter my password and there we go I have now both role keys available and I don't need to reveal my additional secret key in case you are worried about that that can also be done in the live environment but make sure you also worried about that if you implement any hooks that is a different story so we will not talk about that the good thing about these role keys is I can delete them whenever I like so that's the thing I wanted to show about now let's go ahead and first you want to go for publishable keys remember that I simply want to grab these publishable keys again they have are these PK and everything up here so publishable keys I'm gonna grab the role keys so copy that and come up here and all you need to do is paste them here that's all we have to do now when we publish these applications we don't put these keys just like that here we put them into environment variables that's gonna come up in the react section of course in this video but all the things are all good and ready for us to be done and we can now remove this comment that yes we have gone through and we have worked on the stripe keys up here okay that looks great that looks awesome now the first step is that we need a post route that can be hit from the and that's where we are going to create a customer will accept a charge and we'll just charge him there so that's wrong that is the one route that we have to create so let's go up here and by the way in case you get confused anytime you can go up and reference to the documentation just like I always do but again in the documentation I have found that this section is really helpful in the promises you can simply see that stripe can create customer and then you can create invoice item and then you can send a response or an error just like that so we'll be doing exactly this one let's go up here and there we go now here what we're gonna say is I have a post route so there we go a post route and you can call this route anything we're gonna call this as payment feel free to call it payment charge a stripe Superman whatever you like we just need to hit that route we're gonna get a request and we're gonna get a response okay looks great now the two most important thing that how we are going to configure our front-end we need to pass on a token from the front end usually token consists of almost every information that you need with the email all the product information and pretty much anything you can pass on but still on top of that I would like to pass on a product information that what is the charge or what is the price of my product again totally on you how you're designing your front-end but just to give any a fact that yes token can contain anything and everything we're gonna be structure that so we're gonna simply say I'm gonna pass on your product and I'm gonna pass on a token from the front end so from the front end you can extract that using request dot body and these are gonna be coming up in the JSON format and we have already used a middleware that hey handle Jason for me so that's nice and easy and once that is being done just for the safety measure I would like to simply log come on get me a log there we go I would like to simply call this one as product so getting all the information what is there in this product and to avoid any kind of errors I'm just duplicate this one here I'm gonna show you price as well because majority of the things that we are about to do are dependent on this pricing so I'm gonna simply say hey also notice me give me a product or price so if anything goes wrong I can log it for the moment and later on I can remove this one okay this is all good now there is an interesting key that we want to go ahead and create that this is a idempotency key ID impotency key and that is gonna be generated directly from UUID now this unique key is being fired only at once when you hit this route and this keeps the track that user is not charged twice for the same product so this one is here in case you are coming up as the seasoned developer already just make sure that you are aware that previously this was known as something like this like that but in the recent little bit updates in the in the documentation of stripe they have made it like that so just keep that in mind okay these are all the preparation that we need to do and now we can fire up other stripe routes so we can simply call up stripe and this is stripe actually we need to return this so we're going to simply say return and stripe dot customers so this one is going to help you to create customers so we're gonna simply say create and there we go now this create is gonna take some values that you have to get and get it from here now I want to get email first and foremost so token consists of that email so I can extract that like this and we need source as well this is also given to us by the token so we're gonna say token dot ID so these are all being done and if this is going to process successfully then it's gonna give us a promise then and in the then you get a customer back so obviously are getting a call back so we're gonna say we are getting a customer back and we can do a call back here now in that one now we can create a charge so I can use this stripe again and I can say charges because you can create multiple but I want to create just one here and there are multiple charges and subscription and a whole bunch of other things that you can do but right now I just want to do one stuff now we provide all the object that you are worried about in here and apart from that in the second object you provide your idempotency case I'm gonna simply say I want to give you an idea patency key here now once then all of this is successful then you can pass on and another then here if everything goes successfully so if everything goes successfully you're gonna get back a result and you can simply say I want to raise a status of 200 if everything goes right and also I want to pass on the JSON response and just give me the entire result here if that's the case but we can also handle the other part in the catch statement and I can say hey if anything goes wrong or if I hit error by any chance I want to simply say console dot log and I'm gonna handle the error so there we go it's a little bit lengthy code but it's not really tough okay now what we want to do is in here when you simply say create in the first object you can extract as much information as you like some of them are compulsory some of them is totally up to you so of course you want to grab a mount that how much of the amount I should deduct and that can be extracted from the product that we are gonna pass on product if I can write that product dot price and one thing that you'll be doing all the time with the stripe is multiplying the values with hundred because everything comes up in the sense and I want to just charge a ten dollar so I want to say ten into ten basically it's gonna just multiply it by hundred and then I get ten dollars because I'm gonna be passing on the products in just the dollars not in the cent now what else do you want to pass on as a compulsory you want to pass on currency currency there we go and currency is gonna be in the USD but you can change it you can read the documentation if you want to charge something else we want to also grab customer customer can be grabbed directly from this customer object that we are so we're gonna simply say customer dot ID that's awesome and in case you want to send an email to the customer once he once the things are being charged then you can use this key here here which is recipient email recipient did I wrote it correct number yep or is it email underscore email I think that's what they call it I need to refer the documentation one more time for this one and we can simply say email okay and that's all of what we need as of now but we're gonna inject one more element here which is gonna come up from product and which is gonna say description and description is come gonna come up from the product we're gonna say product dot name okay and by the way if you wish we can actually inject it like this we can use backticks here and we can say simply purchase off and then product name so in case you want to have it then you can surely have it now by the way I'll show you some other ways this is totally optional in case you don't want to have it just remove the comma and that's it you are done for the back end but just for the sake of fun you can have a shipping here as well I'll show you how to do that take all the shipping information directly into your stripe you can have the shipping and you can simply go ahead and go like that and in this you can go ahead and grab all the things like in grab name name can be grabbed from token dot card dot name the stripe interface in itself will give you a card element in the card you can ask the user that hey what is your shipping address what is your billing address and you can grab an information from there you can grab the card name you can grab the address which is again an object I know I'm going to depth but I want to make this tutorial in such a way that you can reuse things anywhere and everywhere you like I'm going to just grab one information here but you can grab rest of the things on your own I'm gonna grab just the country which is gonna come up directly from token dot card and dot address underscore country but there are others as well you can grab I'm not gonna do that because I know this is going like very way over the things what we actually expected but yeah I just wanted to mention that yes I'll be showing you how to grab shipping address as well as the charging address that's what what we're doing so let's just save this and hopefully things are all easy just to quick get a quick revision we're creating this idempotency key so that we don't really charge the user again we simply go ahead and create a customer once the customer is being created successfully this file request gives us a customer so if there is a den means success we get a customer and the customer we can create a charge and on the charge some things are compulsory like amount currency and customer and this one is optional if you want to pass him an email or you want to have a description a product name then you can surely have these if everything goes success then we are gonna get a response back we are throwing that response as of now adjust to the front end to handle it however they like and we are definitely going for a catch in the error so that's all what we are doing let's go ahead and see if things are going on great so it says hey I'm listening at port eight two eight two hopefully things are good I'm not pretty sure we are gonna debug that okay I'm gonna fire up another terminal as well or another tab I'm gonna go one directory back see that everything is going good and we're gonna go now into the front end not the front end strife front end stripe front end do a quick LS yes I can see all the packets so I'm gonna simply say NPM start there we go so this is going to load up my react application and within a second there we go so we're gonna edit this one here now I'm gonna remove this package dot Jason the only file that's open up is indexed or jeaious even I'm gonna close that one too now let's go into the front-end part into the source not in the source first I want to change the public yeah I rarely say that we are gonna edit that but in this case we are so load up the index dot HTML go up onto the browser and we're going to look for materialized CSS we're gonna go for t realize various muttered lies CSS CD and yep that's what I'm looking at for and all I need in this case is just a link up here since I'm using directly a CDN link I can inject it here no problem save that and that's all I want to do now you can close this index.html this is optional if you don't want to do it please don't do it this is for some personal fun okay now this is looking good and I can come back up here and now I can open up my source juice we're gonna touch just the one file which is a pious but in the after J's before we go ahead and work on that we actually need to install probably a couple of stuff so let's go up here I am gonna go on to this terminal I'm gonna kill that and do a quick LS make sure you are able to see the package dot Jason and we're gonna need NPM install or you can just use I as well we're gonna use react - stripe - check out so this is going to be the only component that we are going to need to configure the stripe in the front-end let's go ahead and read a little bit about it on to the NPM website as well let's go up here and we're gonna say react - stripe come on hopefully it will give me react stripe this one is all good let's see at least in the package to chasten react stripe check out looks good where's the check out red stripe check out there we go there we go this is the one we are looking at for now this is a great little teeny tiny package and we can use it the best part is it is really configurable the default says pay with the card this is what we'll be doing as of now but I'll show you how to modify that as well it's pretty easy to do that okay let's go up here and let's close all of this I want to open a purchase yep and the only thing that we are going to do in the outdoor GS is first and foremost bring this stripe check out so let's go ahead and do that not Const input we're gonna call this one as stripe come on stripe check out this one is going to come up from react stripe check out so this is the only component that we are gonna be needing and we'll be needing state as well let's go ahead and do that use state we don't need anything else you can work out without state as well but just for fun I wanted to have this one here and let's use this state here first and foremost so I'm going to simply have a you state here use state that's where it have we're gonna simply pass on this product there we go we're gonna provide some of the initial value on this product stuff like name what is the name of your product probably you want to have multiple products that's fine too you can get an array of that but as of now I'm gonna simply say I want to sell react from Facebook so we're gonna be directly selling a react and we'll be getting a price the price needs to be numbers so we're gonna say I just want to sell in ten dollars that's it and we're gonna also provide some more information like product by which is gonna be Facebook just wanted to prove the point that yes we can pass on as many information as we want and in the backend we can process all of that information however you like okay moving forward first and foremost I want to edit some stuff here learned react no this is not what we'll be doing let's remove that one and in fact let's remove this entire a tag nope not this one we're gonna hit command Z I will remove this one edit source code okay we keep this one here this is not gonna go anywhere we're gonna just keep it there just for fun we're gonna remove this one yeah that looks fine now what we'll be doing we want to inject our stripe check out wherever you like you can inject wherever I'll just inject it here just below the aim and we're gonna simply say stripe check out there we go save that did i misspelled that yep stripe checkout although it doesn't really matter but yes sometimes it bothers me there we go looks great let's see how it looks at the front in and it doesn't say anything has of now so stripe check out requires a couple of things that you need to pass on if you want it to show up there so let's go ahead and do that so first and foremost it requires a stripe key to be passed on as a compulsory parameter we'll be doing that as of now we'll leave that empty it also requires you to pass on token again we leave that as an empty we'll fill that in a second and then we need to provide a name as well for this one not necessary but we'll be doing it we're gonna simply say bye react save that and it still doesn't come Hawai is it not coming up oh my bad I was not running my stripe so that's why even after reloading it doesn't work out my stripe front end is not even working how bad that is I accidentally rolled out again the installation instruction never ever try to disrupt that in between it's not gonna do any harm if it is already installed so my bad I'm gonna run this one again and NPM start yep that's the one I want and there we go nothing should be good and there we go now it says pay with card I know most of you don't like this saying pay with card but don't worry we have injected materialized CSS to make this all beautiful in a very simple way so we're gonna do that first we are gonna do that and then we are gonna proceed to anything else okay most importantly make sure there is a stripe key here and there's a token these are two very compulsory element otherwise this is not going to work much now moving forward what we can do this this entire stripe is actually a component and it can take children's as well or just wanted to say it can take more elements inside it so we're gonna have this one here once you have this stripe check out being as an ending one as well let's go up here and then you can inject a button here as well so we're gonna have a button button and this button is going to have a few classes first one is going to be BTN - large there we go and we are gonna say that this one is going to be pink in color or red in color however you like and we're gonna say something like bye react in just $10 save that and let's see how it looks so there we go we are able to modify that I wouldn't be adding more CSS from the materialized but surely you can go ahead and do that if this is looking nasty to you you can go ahead and change it from pink to something like blue or green however you like the very simple materialised CSS works let's go ahead and add new few more properties first and foremost I don't like this tend to be coming up like that we want to have a product product dot price so there we go now it's coming up from our state which is declared at the top okay so this is all looking good but now we want to add a few more things up here now first and foremost as I was saying that in the front end I'll tell you that how we can use this process environment so we're gonna simply say e and V and you might want to install dot e and V in your back-end package because in the react it comes up as a default so how does it work wherever there is a root directory like for the for my front-end this is my root directory entire for my back-end this is my root directory so this environment file always goes up in the root of the project so we're gonna say new file make sure there is a dot first and then you say e and V now react comes up by default with the package of this dot env so that's why we don't need to install it but once you install it that's all what you have to do make sure you also import that by stating this a simple line at the top we don't need to do it because react handles that for us the only compulsory thing in the react is your all of your variable names should be called up as with the react app so we're gonna say react underscore app and then you can mention anything you like in this case I'm gonna call this one as key because I don't have many things I have just one key now in here we have to inject a key so let's go ahead and go to stripe dashboard and this time I want to grab a key which is going to be secret but I'm gonna reveal my key which is rollable I'll delete that just after this video so go ahead and we now need this key up here secret key copy that and we're gonna paste that here now when we upload these application on to servers like Heroku or maybe digitalocean we have a place where we can mention these keys and that's how these servers actually hide these keys now the problem is how do we inject this key up here in the stripe key now that is also super easy to do all we have to do is remove this one it is exactly same in the back end in the front end as well we simply go ahead and access the process we access the environment variable oops not like that process dot e and V and then we simply mention the name of it in this case we are gonna use react underscore app underscore key that's how we inject that pretty simple pretty easy as well okay that's the one thing that we have taken down now what about this token how this token actually works now this token is responsible for firing up some things so that's what we have to do now in here as well we can pass on an amount as well that can be done we are actually directing the amount based on the product but in case you want to be just double sure you can mention that here as well we're gonna simply say product dot price and of course don't forget to multiply it by hundred otherwise you'll be charging in cents not a great idea moving forward so what is this token this token helps you to fire a simple method so we're gonna just design a method there and we're gonna inject this we're gonna call this as make payment feel free to call it anything make payment or Superman or Batman however you like now moving on to the front end part or the actual meet part of this application I'll go just here just above above this return method and I'm gonna make this method so I'm gonna use the es6 version of it make payment this payment is going to access the token now this token is automatically created to you you don't have to worry about anything you just have to make sure that your prop is called as touken and that's it that's all you have to worry about now all the things are taken up from the pop-up which stripe gives you up okay now we're going to design a couple of things here first and formost and then we're gonna worry about that so first and foremost we're gonna design the body here now surely we can just go on the way as well but this is actually a better approach and it helps me to get less of confusion so first and foremost design the body in the body I'm gonna take up the token I'm also gonna take up this product here which is in my state so I'm gonna go up here and I'm gonna simply say take this product looks great now we're going to design the header as well so put up a just a comma not comma we're gonna simply say Const and we are gonna design the headers as well the header is not gonna have much of information we just I'm gonna mention that we are throwing up some JSON so just mention this content type which is gonna be application slash Jason there we go headers are already and are ready to accept all the JSON file body is already with the token and the product the next thing that we have to do is simply fire up a request to the backend okay what is our back-end very importantly make sure you go into index the back-end that we are having is localhost colon 8080 - then we are having this slash payment so localhost call an 8 - 8 - slash payment is the route that we need to head in the post method okay I hope that's super easy so we're gonna use directly a return now surely you can use X cos and whole bunch of other things if you wish that's also a great way nothing wrong in that I'm gonna use directly a fetch method here in the fetch method I'm gonna first and foremost write my url that I want to hit so that is gonna be HTTP not s but one more thing stripe actually doesn't work on HTTP if you are hosting that on to some server or something make sure there is an HTTPS on your website and that's only how the stripe actually works so just wanted to mention that we're gonna have a localhost colon eight - eight - and then we are hitting a route of payment okay and then we're gonna provide some information so let's go ahead and do that so hit enter first thing is I am hitting a method which is going to be post that's what we are expecting there we are gonna mention the headers as well but we don't need to write we surely can go ahead and write headers and then I want to mention this headers here but you know this is not necessary now so we are gonna mention the headers as well and then we're gonna mention the body since I'm using the fetch if I would be have been using Axios I can directly mention the body X TOS like that but in the case of fetch I have to explicitly mention that I'm gonna be firing up adjacent here so I'm gonna simply say Jason dot stringify and please I reference that in the body okay so that's all request has been made but what if the request goes as success or what if the request goes as the bad we're gonna fire up a dot then and we're gonna fire up a dot catch there we go if everything goes right then we are gonna get a response and if response is great I would like to print up or dump up some information basically I would like to simply say console dot log first and foremost I'm gonna print out the entire response so that you can extract or nitpick the information if you wish we're gonna have a response and then I would like to D structure some things so I'm gonna simply say I want to restructure the status from this response so we're gonna simply say response and once that has been D structured I would like to print that as well so we're gonna say console dot log and status there we go status and we are gonna simply print the status this is totally optional you can just print the response but I want to see directly on my console that how the status is going on again totally optional error we're gonna simply call this one as error and we're gonna simply do a console dot log of the error right now we are not handling the errors as nicely we can definitely do a better job here but that's all what we'll be doing as of now we're definitely not using the set product but we are mentioning that again this can be optimized a bit okay there we go so everything is all nice and easy there is also an assignment in case you forgot that let's go ahead and check this out so in case you notice we are using processed env react app key but in the index or in the backend we are directly putting up this key so go ahead use that package and put that into da T and V and then call that up here so I think you can do that pretty easy now let's go ahead and do a test run on that so we're gonna go first make sure everything is up and running so it says respose is not defined my bad some typos let's fix them first these are in the front end and let's see where I'm making these respose no we're gonna have have a response this one is response so let's see okay so this looks all good as of now let's see at the back end all looks good make sure both of them are running not like me we're gonna go up here onto the react application let's try buy react in just $10 which is super fun and there we go we are able to see a by react notice this name is coming up at the top we mentioned that and we can have a email so we're gonna simply say as YouTube at the rate L co dot dev which is also one of my website and the test card that you can use is for to just repeat that for two for two there we go and here you can use 1 2 to 1 and 1 to 3 in the CVV these are tests given in the react in the stripe documentation you can use them I'm gonna say pay $10 it says you did not set a valid publishable key call the stripe dot set publishable key okay so looks like our publishable key is missing let's go ahead and do that okay so i got bit confused up in the keys while explaining the things it's sometimes a little bit hard to explain and right at the same time so I got confused the secret key always goes in the back end so that's what we have to do and the publishable keys can go into the front end as well so let's go ahead and do that so first and foremost just copy the secret key and this goes in the backend while configuring the stuff so go into index and just make sure these are the secret keys I have accidentally placed like public keys up here and that's not gonna work so go ahead and use that and in the publishable keys these are actually let me hit a reload are they expired or not let's go ahead and do that no please don't save anything and these are my publishable keys we are gonna just copy this one here and as of now what we'll be doing is we'll be just directly injecting these into this we'll just load them from the environment variable bit later right now just go ahead and replace them here let's go ahead and give it a try one more time and see if what are the other issues we are coming up with that just want to hit a reload for safety measures let's go ahead and do that and we are gonna simply let's check then inspect here because it actually gives us all these errors if we are waiting so nope nothing looks bad up here but still I like to keep it up here and I would like to pay I'm not allowed we're gonna say YouTube at the rate LC or dev card number all four twos and looks good 1 2 2 1 1 2 3 let's go ahead and try pay this time it goes through and there we go it gets a write checkmark and hopefully we get a response so if you can see at the bottom let me move it up here if you can see in the bottom we are dumping out the entire response object and we are also extracting the status from it which is 200 now we can go up and see into the payments which will show us the test payment data and nope not in the payments actually we should have some other test data it doesn't really load up all the values up here in the test because these were the roll call keys that we were using anyways it doesn't really matter everything goes successfully let's go ahead click on the home and there we go it is actually into the test mode but we should be able to see some of the elements up here yeah we can see that there was a success here but where is the payment I want to see the payments as well in the API keys this goes nice and easy I want to see all the events that are happening so there we go this is the event that is happening up here at the card and there we go we get all the card information and stuff like that so yeah we can see all the information customer source was created nice and easy nice and easy now I wanted to show you a couple of more stuff in this app tortillas which are actually super fun to have now couple of things that extra you can do let me just show you through the this guy here and we're going to simply say stripe - react - check out I want to search a bit more onto that and there's some of the fun elements react stripe check out my bad and if you go a little bit up here you'll notice that you can add more components up here and can load more information for example you can just simply say shipping address and then it's gonna have the shipping address and billing address as well let me show you that that's actually super fun thing here so in the stripe check out just add a shipping address and we're gonna add a billing address as well the moment you introduce these props it becomes actually super fun let me try that just for the safety measures reload and we're gonna hit a react and now notice here in the card itself you are able to get the shipping address and billing address so anybody can enter these addresses and can have all the stuff being loaded up here so this is actually super nice thing about the stripe that it gives up but again some people like stripe some people don't so this is the entire thing now the only next thing that we have to do is just you can just simply do that as an assignment just copy these keys into environment variables just go ahead and make sure if you are using the react app this is compulsory part and after that just use an underscore and name anything to your key stripe key or something and same you can do for the index or Geus we'll keep that as a simple assignment for you I think you can do that that's not really hard and again never be disheartened because errors are a part of code you need to see these errors in order to resolve them and I hope you have enjoyed this video if you have enjoyed it make sure you hit that subscribe button and I'll come up with more videos that's it for the one let's catch up in the next one [Music]

Channel: Hitesh Choudhary

Views: 51,377

Rating: 4.9044027 out of 5

Keywords: Programming, LearnCodeOnline, stripe, reactjs, nodejs, stripe react, stripe crash course, express, react stripe, crash course, payment gateway, stripe payment with react

Id: lbEFSP1WAv0

Length: 49min 5sec (2945 seconds)

Published: Sun Feb 23 2020