Set Up Payments With ReactJs and Stripe.

[Music] haha success all right welcome back to another video here and in this one we are going to show you how you can accept payments online with uh stripe and uh we're going to do it with react so the first thing we want to do come over to stripe.com uh sign up for an account here uh we're gonna head over to our dashboard here and once we're in our dashboard we're gonna come over to this tab over here to the developers here and then we're gonna look into this api keys tab here now this is our api keys tab and the two things we're going to want to look at here are this publishable key and the secret key so this and this now don't reveal this one this one's secret um so do not show that one off but uh this is all tested anyway so it probably doesn't matter very much all right so once you have that let's uh come over and start coding this up all right so i'm just in my desktop folder over here um so i'm gonna first go make a directory and we'll call it uh react uh dash stripe and then i wanna cd into that and then i'm just gonna open that up in my vs code all right so now we're in our vs code here let's open up an integrated terminal right here and we are first going to do a few things so for this tutorial you're going to need node and i think that's about it so let's first go from here and we're gonna go mpx and we'll say create react app and we are gonna say uh this will be the website so run that all right so once those are finished let's come in here and cd into our web folder and from your web folder let me bring this up just a tad um we're gonna run a few things so we're gonna go uh npm install and we're gonna install stripe react stripe js make sure you have that and then at stripe js and then also axios and axios is just gonna be used to make our calls to our back end so let's uh install these all right so everything looks like it installed correctly there now let's open up a new tab here and we're gonna go and make a new directory so make sure you're in your root not the web um so we're gonna go uh mkdir and we are gonna say um server now we wanna cd into our server so it's gonna be our back end and from here we're gonna go npm init and dash y okay and the dash y is just gonna skip all these questions but basically this is going to add a package.json there okay so now we can add some node packages here so i'm going to paste these in so we got stripe here we got express we got cores dot env is going to be our env file so we don't show our secret from stripe and then just body parser so that's all so let's run that all right so if you go over to your package.json come down a little bit you can see these packages installed correctly okay so let's close up the server um let's go back over to our web right here and let's start adding a few things in so we can close up this for now right so the first thing in our web we're gonna do is come into our src and we're gonna add a new folder and we're gonna say components okay and then inside of this folder we're gonna add a new file and that's gonna be called paymentform.js and then we're going to add one more here and this is going to be called stripe what's it container dot js okay so those are going to be our two components that we're going to use and then we'll have our app.js as well so let's uh just start with our stripe container here so we can go rfc and give us a functional component just like this it's called stripe container all right so then so here we're going to go const and we're going to say public underscore key so this is going to be our public key that we looked at back in our stripe documentation there so come back over here and we'll see this is the publishable key so we can click that to copy come back over and we can just paste that in here so that looks good and then below this we're gonna go const and we'll say stripe test promise and we will say load stripe and then pass in that public key there we go all right and then we want to bring in a few things up top here so we're going to bring in a couple things here we're going to load stripe which we just used right here and then elements which will uh wrap our entire container here so we're going to bring those in and then we're going to bring in some other stuff after but let's finish this off first so instead of this div we can go elements just like that and then we want to pass in the stripe here and that's going to be equal to the stripe uh test promise that we created right here and that's going to load our stripe right there okay and then in here we're gonna pass our payment form so i guess we can do that right now okay it hasn't been created yet so we're gonna get an underline here but that's okay and then that's going to be it for this so what we want to do is come back over here and let's go uh the same thing rfc create a functional component called payment form right there and then we'll just start uh adding some different stuff so we're going to start up at the top here and we're going to bring in a few things so we're going to have a few things from our stripe react package here and that's going to be a card element use elements and use stripe and then axios is just going to make our uh call to our back end and then from react we're actually going to want to bring in here uh use state as well because we're going to use that for something else all right so that's looking good so let's come down to our payment form and in here we want to go const and we're going to add some state here so we're just going to have a success and then we're going to have a set success and this is basically gonna be um for when our payment's successful we want to show something different just to show the ui that we have a successful payment so let's go use state and then we'll pass in just false to start okay so that's good and then come down below that and we're gonna go const and this is where we're gonna go stripe and then we're gonna have the u stripe here sorry that's equals use stripe and we're just going to call that there and then below that we'll go const elements and that's going to be equal to use elements and we'll call that right there okay and then we're going to come down and we're going to create a function right here we're going to call it uh handle submit so const submit and this is going to be an async function and it is uh put the event in there and then we'll go like this open up some curly braces and we'll go e dot prevent default and then we'll go const and we'll pass in the error and we will pass in the payment method so for us that's gonna be uh of type card i think um but you wanna pass that in and then we're gonna go equals we'll go wait and then we'll go stripe dot uh create payment method down here and then we're gonna go like this and then we pass in the type which is for us gonna be card and then we are gonna say the card and we're gonna say elements dot get element and then we're gonna pass in the actual card element that we brought in okay so this is our uh submit handler right here so next let's come down here and we are gonna check to see if there's an error so we're gonna go like this so if there's not an error we're going to do this open up some braces and then we're going to try catch here so come into the try block here and we're gonna go const and we're gonna go id destructure that out and that is coming from the uh payment method and then we're gonna go const below and we're going to go response and that is going to be equal to a weight and this is where we're going to use axios here axios dot post and we're going to hit our endpoint here which is http and we're going to go colon backslash localhost we haven't set this up yet but we will colon 4000 and we're gonna go slash payment is gonna be the route that we are gonna hit okay and then we're gonna go uh and pass in our second argument here which is gonna be the amount now the amount and stripe is gonna be in cents so for us it's gonna be ten dollars so that's gonna be a thousand cents and then we have to pass in the id that we just deconstructed from the payment method here so that id is gonna be id or we could just put id like that all right so that's looking good come back down here um and we are gonna go if the response dot data dot success then we're going to just console.log and we are going to say successful payment okay and then we're gonna set the success which we uh just was the state that we set all right and we're gonna set that to true okay and remember we uh just created this from use state so we're setting that to true and that's just to show our own little message there and then we'll come down in our in here into our catch so if there's an error here we're just gonna say uh error and then we'll just uh pass in the air that shows up okay that's good and then finally down here we have an else block and here we're just gonna console.log error dot message okay oh and looks like we're not inside the async because this is separate so come down and get rid of this bracket here and then come down uh below here and make sure we add that so this should all be within the uh handle submit here that we created okay so that's looking good all right so let's come down and code up our markup here so that success that we added with our um state here we're setting right here to true if it is successful so let's go like this uh we're just gonna go like this and give a fragment and then inside this fragment we're gonna come like this and say if it's not successful so if not success we're gonna do a ternary here come down here and we're gonna create a form okay and we are just gonna say on submit and that is going to be equal to our handle submit that we created okay and then inside this form we're going to have a field set okay and that is gonna have a class name equal to uh form uh group and i'm going to add a little css just from the docs the stripe docs are amazing so check those out make sure you do that but i've just uh i'm going to copy over some css and just put it in our app.css but one of the and this is straight from the docks to this uh form group here um so you can copy those over from there if you like or it'll obviously be in the github repo attached to this and then we're gonna go dot uh form row here and that will give us that and then we're gonna go and pass in the card uh element which we brought in and we're gonna pass in options here like this and we are gonna put in card uh underscore options now we haven't brought this in or anything um but let's close this off first so that's the card options we'll bring this in in just one sec but let's uh finish this off first so underneath the field set here we're just gonna have a button and then we will have just a pay and that will be our uh to submit the payment okay so then in form here we want to come down here and we're gonna do this is the end of our turn area here so remember we started it up here this will be the end of it all right so in here we're just gonna have a div here and then inside that div we'll just have an h2 and inside of that we're just gonna say uh you just bought a sweet spatula all right so this is what we're gonna be selling spatulas so we're going to take over the spatula market and create a spatula empire so that's what we're going to be selling so once the successful payment has gone through we're going to hide this stuff and show this message here um about the spatula all right so that is looking pretty good now the card options let's uh come up to the top here and i'm just gonna paste in something straight from the docks so come up here um above everything below the axios come over here and i'm just going to paste this in and these are going to be our card options and this again is taken just from the stripe dock so you can check that out if you like and basically it just gives us a little bit of styling um as well as when something's invalid it'll show a different color and that sort of thing so so kind of nice you might want to add that uh just for some styling and then also i'm gonna come over to the app.css i'm going to come in here and paste in the styling we want and again this is from the docs but you can copy that over from the github if you want some better styling again not necessary if you do not all right so i think that is basically our entire payment form if we uh wrote everything out correctly so go ahead and save this and that is looking good okay so let's come over to stripe container here and we can bring this in now and we'll auto import that and let's go ahead and save that and i think that is all we need for either of these files so let's uh get our react app going so in our web folder here we're going to go npm run start all right so we come over and our app is running fine but we haven't actually added this to our app.js so let's come on over um and we can just get rid of i think everything inside of the app here so you want to keep that first div but everything else we can get rid of this header as well okay and that is all we need okay so in here we're just gonna have an h1 do a little markup here and we want to say the uh spatula store because we are the spatula store and then we want to come in to our uh here into below this and we're going to do another ternary here so come here and we're going to say show item we're going to add this state in a second and then we're going to say stripe container like that i want to close that off and then otherwise we're just going to go like this and we'll do a fragment here and we're going to put an h3 okay and inside this h3 we're just going to give the price of the item so for us that's going to be 10.00 and then the other side of this h3 we're just going to have an image img and like this and the src is we're going to bring in so i've added an assets folder here in our src and then this sweet spatula that we're going to be selling so this bad boy it's red nice wooden handle it's basically the perfect spatula so we're going to be adding that as the item that we're going to be selling so we want to uh bring that in bring in that image at the top here so come here we're going to bring in the spatula from this assets spatula.jpg so come in here and we are just going to put that in as spatula okay and then we want to have an alt here for uh screen readers and whatnot and that will just say spatula okay and we don't need this okay so that is looking good now they got a red underline here we haven't added any state so let's come up here below this and let's go const and we will say uh show item and we will say uh set show item just like that and that will be equal to use state make sure we bring that in and auto import that and that is going to be equal to false okay so that looks good so we also want to add a uh button here so let's go like this say button okay and then uh come over and we will say what we're gonna say uh on click and that is gonna be equal to we're gonna do an inline function here and that will be set show item and that will be set to true and then finally in the middle of the button here we are just gonna say uh purchase spatula okay all right so this is what we're looking like uh we have a ternary here if uh the show item is present we're gonna show the stripe container which is all the stripe form and everything that we added in order to actually buy the item otherwise we're gonna show the price of it an image of it and a button that says purchase the spatula all right so that is looking pretty good i think that is basically all we need to do on the front end here so we still have to do the back end here so let's come in to our server and we are gonna well let's take a look actually first okay so we got our purchase spatula here uh it's red it's looking good it's ten dollars a steal of a century and then we're gonna click on this and i'm going to come up and this is what our styles are going to look like again this is straight straight from stripe so uh not my styles um so let's uh you can come over and stripe gives you a fake number that you can test so we can go four two four two four two four two four two i guess you just do four twos we'll go four two some numbers here uh and you have to give i think legit um i don't know if you have to give legit numbers there so we're going to come over and let's open up here and inspect the element and we're going to console and check over here on our right side too okay so if we press pay for it it's gonna wait a second and then it's gonna have an error because we're posting to uh something that does not exist so this is why we gotta do our back end here so all right so that's going to be it basically for the front end uh we'll see if we have to come back and fix anything after but for now let's come into our server and let's add a new file and that will be called index index.js okay and we also in here in our server we want a new file and we're going to say dot env and the dot env is where we're going to keep our secret so uh let's go to our index right now and start adding some of this stuff in all right so we're going to come into our index.js right here and we just want to uh bring in a bunch of stuff so let me just paste in all the stuff here at the top that we want to require so we're gonna require express uh we're gonna call express here and set it to app here uh we're gonna bring in our dot env which is our env file so we can use our environmental variables like that we're going to bring in some of the stripe stuff here so this is going to be the stripe secret that we're going to add to our dot env so we're going to add that in a second here then we're going to bring body parser and we're going to need cores to make the request otherwise we will be getting an error okay so come down below this and let's go app.use and start applying some of this stuff so first thing we want to do is use body parser parser.url encoded just like that and we are going to pass in extended and that is going to be from true and then we're going to go app.use and we will pass in again body parser uh dot json and call that and then app.use and we're going to pass in course and again this is nice with express because you can just pass in all these different things um kind of as middleware and uh it'll add them so and then we'll call that here and now here we want to do let's close this up here we want to do our actual uh payment so in order to do that actually let's come down to the bottom here and we're just gonna go app.listen okay and then we'll process dot env dot port and that is gonna say or 4000. so if there's a port passed in we'll use that otherwise we'll use 4000 as the port and then here we want to do an arrow function and we'll just console.log and we'll just say uh server is listening on port 4000 good okay now if we go ahead and save this and we come into our server here uh do we have one coming to our server and we can run node index dot js from our server file and our server is listening on that port so that's great so close this up and then let's actually do our uh payment uh route here so below this course here come in here and we're gonna go app dot post and we're gonna say slash payment and that's going to be the route that we're going to hit and that is what we hit from our form up here yeah localhost.4000 payments so that's what we're going to hit so that's good come in say cores and that's going to take care of any errors quartz errors we have and then we're going to go async like this and we're going to pass in the request and the response and then we're going to go let amount and id and we'll destructure those off of that and that's going to be coming from the request.the body make sure we don't forget our commas so that's good then come down here and we're going to do another try catch try catch like this and come into our try block here and we're gonna go const uh payment and that is equal to a weight and that's gonna be equal to a weight and then we're going to go stripe dot payment and that's going to be intense and that is straight straight from stripe then we want to go create and then we pass in some values here so the amount is going to be the amount so you can go amount amount but we don't actually need that we can just go amount with uh es6 and then we want to do what the currency is here so currency and make sure you spell currency right yeah and that is going to be usd all caps then we want to come in and say the description and that is gonna be spatula in quotes here uh spatula company um and then we are gonna say uh payment underscore method okay and that is gonna be the id that we're getting and then we want to go confirm and that is going to be true okay so that's looking pretty good so come down below here scroll up a little bit and we're just gonna console.log here uh the payment and then we are gonna pass in the payment and then we're gonna go res.json and we are going to open that up and let's open up some brackets there and then we'll go message and you can pass in the message that we want which is payment successful full okay and then we are going to say success and that will be true so that's if it's successful here and then in our catch block we want to see if it's not successful here so we're going to again we're just going to console.log here and we are going to say error like that and then pass in the actual error and then again same thing we'll go reds.json like this message and that is gonna be the payment failed and then success and of course this is going to be false because we are unsuccessful with the payment so i think that is everything in this file so go ahead and save index.js now we want to come into our.env because right now we're passing in up here the stripe secret test which we're going to use so you can copy that name over actually and then come over into our.env okay and we have nothing in here now so let's go get our secret okay so if your inner api keys you want to get this secret here i'm not gonna reveal it because uh that would be showing you my secret and it's called a secret so go ahead and get that copy that over and then come back over and we're gonna paste in this and then you're gonna go equals and then quotes and then pass in whatever your secret is but uh again i'm not going to show you that all right so once you save that env that should be coming in for your secret here all right so this is looking good i think we're about ready to test it out so let's give it a go make sure everything's saved for you and then let's come over actually all right and then you probably need to restart your server here so let's restart this okay make sure that's listening and then come back over and let's test this out so come over to uh your locals 3000 maybe give it a refresh and you're going to see uh the spatula store our awesome product here and then you're going to say purchase spatula and you want to put in your number for again the fake numbers are just four two four two four two repeated and then you wanna put in some fake numbers here okay and then when we press pay here let's inspect this at the same time so we can check this out so all this is running let's hit pay and looks like that was a success so the spatula store you just bought a sweet spatula congrats this is the best decision in your life all right and then again successful payment now if we want to check to make sure this actually worked you can come over here and you can say payments and you can see right here spatula company succeeded and that is at uh whatever time here so it looks like it worked and the payment went through and uh yeah everything is looking pretty good all right so hopefully that was uh a good intro to uh react and stripe and kind of get you going on selling things on the internet which is uh pretty cool okay so a couple other things um before we end here uh obviously this is just test data with the fake number and stuff that stripe just gives you so if you want to actually move to deploying this to a kind of a production application you got to get your stripe account approved and then you're going to have to get new um private keys and then you're going to need to change the uh stripe secret test to stripe secret production and then other than that i think maybe check out the uh stripe docs they're awesome so a lot of this came from there and then i'm also gonna link a tutorial that a lot of the code i used came from uh from medium so that'll be in the description um and yeah that's about it uh thanks for watching [Music]

Channel: Darwin Tech

Views: 21,581

Keywords: React, react js, reactjs tutorial, reactjs tutorial for beginners, reactjs stripe integration, react js stripe, stripe js tutorial, stripe js integration, stripe js react, react tutorial, react tutorial for beginners, React tutorial 2021, React tutorial 2021 for beginners, full stack development course, full stack development tutorial, full stack development for beginners, Web payments, web payments api, stripe payments tutorial

Id: XKWJFpZYVAQ

Length: 33min 17sec (1997 seconds)

Published: Tue Jan 26 2021