Node.js & Stripe API - Ebook Sales App & Heroku Deploy

[Music] hey what's going on guys so I've had a ton of requests to do something with the stripe API and if you don't know what stripe is it is a payment gateway or a payment system that allows you to accept credit cards on your website of your application and it's a really nice API there's a lot of different ways you can implement it you can make it so it's all on the server like we're doing with node and Express or you can build an API with node or Python or whatever and you can you know send requests from vanilla JavaScript or from react or angular you can basically do whatever you want use whatever platform you want and if you're using something like Magento or some pre-made ecommerce platform then it's really easy to implement you just basically plug in your API key so it's a really nice system to use what we're gonna be doing like i said is building a node and express application and it's gonna be an e-book sales site okay so this is what we'll be building not only will we will be building it but we're going to deploy it to Heroku all right so we're gonna make it live on the Internet and basically if you see if I push this button here to purchase for $25 it's gonna ask us for a credit card number all that stuff I'm gonna show you how we can test this you can see this you little yellow button up here we're in test mode we'll talk about how to get out of test mode we'll talk about how to view your your customers and your payments and your back-end this is the stripe back-end here I really don't care if you guys see it I don't I don't use it I don't use this account at least but that's what we'll be doing hopefully you guys enjoy it and let's get started coding dojo is a programming school that turns beginners into developers in only 14 weeks over 90% of their grads land jobs within three months of graduating often making over seventy K per year to learn more visit coding dojo com or click the link in the description below alright guys so before we actually get started coding I figured we'd actually look at the application and see how it works see how I see how things get added to stripe and all that so we're not deployed we're not on her now my local host but that doesn't matter we can still use it so what we'll do here is click the purchase button we get the little pop-up here it's gonna ask for an email so I'm just gonna type in let's say Brad @ I'm just gonna say testing to calm alright and then we can put in a card number now if I just put in any card number obviously this isn't working credit card and we'll just put in any expiration I'll say 1 9 any CVC and then our zip code and then we try to pay you'll see that it's not gonna let us pay it does the actual checking right here now what's nice about the stripe API is they make testing very very easy they start you out in test mode and they actually give you a bunch of card numbers that you can use to test this is the one that I've been using it's just all four twos but if I click on this link here you'll see that there's different kinds of cards is MasterCard Discover American Express and all that the documentation in my opinion is really nice for stripe there's a lot to it but there's a lot to the system so we're gonna go ahead and use that valid testing card and see what happens so we're gonna put just all four twos and then we'll go ahead and before I actually click pay I just want to show you that if you want it to remember you you can click that you can actually enter your number here and it'll save it so that when you go and you try it you repurchase something using you know the same email address you won't have to put your card number and again it'll just text you a code and then you can put that code in which is really nice but I'm gonna uncheck that and we're just gonna click pay all right now you see the little green check and I made it so that we get redirected to a success page once we pay and it says your ebook should be emailed to within one business day and you can change this up and you know put a download button just make sure the page is protected or do whatever you'd like I'm just giving you a basic implementation of stripe alright now let's go to our dashboard so this is this is my stripe dashboard obviously you need to sign up for a stripe account it's free and then I'm gonna reload and we're gonna click on actually you can see right here gross volume $25 so let's go and click on payments and you'll see we have a payment for the web development ebook we get a little ID number here and then the customer is Brad attesting to comm all right so it'll show all your sales here now if we click on customers you'll see that the customer actually gets saved as well now you can you can have a charge without saving the customer but the way that we we implemented it the way that we wrote our code and interacted with the API made it so that it saves the customer as well now there's a lot more you can do you can create subscriptions for recurring charges you can add your own products through the stripe API and you can actually you know create code that's going to purchase those products there's a lot more you can do and I do plan on putting out more stripe videos because I do really like the system I think it's really easy to work with compared to something like authorize.net which I've used before and even just signing up for authorize.net is a friggin nightmare and their API is because it's really difficult to work with now if we go down to what should I show you first if you want this to go live okay if so if you if you're all set and you want to get out of test mode you can go to payments settings and then you can just go right here it says cards it says test mode just click activate and you'll have to do like a little application here in order to really accept credit cards you know you want to put what you want for your statement for your business name you have to put in your social security number all that stuff and you'll have to put your bank details because it needs somewhere for the money to go all right and then you just activate your account so it by default you will be in test mode and then when you're ready you just want to go through this little process which isn't isn't bad at all compared to like I said something like authorize net now once you are done and you want to get rid of this test data what you can do is go to business settings and go to data and right here there's an option that says delete all test data so if I click that it's gonna you know show us all the different test data we have to Jive two charges one customer I'm gonna click delete now it's gonna ask for your pass usually it asks for a password I don't know why it didn't but it should be deleted now so if we go to payments you'll see that there's nothing there if I go to customers nothing there all right so the back end of the stripe API is pretty easy to use now two things you're gonna need are your your publishable key which is like your public key and then your secret key and you can get those just by going to API alright so right here you can see we have a publishable key which is this and then secret key if I click reveal I don't care if you guys see this I'm gonna change it anyways this is your secret key so the public key can go you know right in the forum and then the secret key resides on the server now when we deploy to Heroku we're actually going to set some environment variables and put these inside of those so that we don't have to have them right inside the file on our server okay when it's live so once you go live these these keys should change and they'll they'll no longer have the test in it they won't be test Keys anymore and then you just need to update your keys in your application so I think that's everything I'm just trying to get everything out of the way before we actually start writing code so you know exactly what's going on alright so let's go ahead and start to write some code now I'm gonna go ahead and just go into the S code and they have an empty folder called ebook seller okay so that's the folder I'm using just create a folder wherever you want on your machine and from here we want to do you know the normal stuff that we would do with a node application we want to run NPM in it then we want to install our dependencies so I'm gonna open the integrated terminal for vyas code of course you can use whatever you'd like notice that I'm also using git bash inside here if you guys want to get get bash on those you can go to get - SCM comm and then if you want to integrate it with vs code you can simply go to preferences settings and you can just add this right here alright so this terminal integrated shell windows and just point to the git bash program so let's close that up now what we're gonna do is just run NPM in it and I'm sorry if that was a lot of explanation I just really want to try to explain how everything works rather than just jumping into the code so let's go ahead and go through this ebook seller that's fine version description will say app to sell ebook and entry point I like to use app dot J s and then we'll just enter through the rest all right so now we have our package dot Jason should look like something like this I have MIT for my default I also have my name for the default now what we're gonna do is install our dependency so let's clear this out and there's a few things we're gonna need so let's say npm install - - save and we're gonna need Express we're gonna need stripe we're gonna need Express - handlebars so we're gonna use for our template engine and then we're gonna need body parser ok body parser is used so that we can actually get form data on the server alright and I think that's it that should be is let me just double check yeah that should be it let's go ahead and run that all right and while that's going on we'll go ahead and create our app das file alright so this is basically our entry point I'm gonna create a start script for this so in our package JSON file let's replace this test under scripts as start and then we want to start with node app alright our node app J s so we'll go ahead and save that alright so in our app J S we're going to just pretty much set up a standard Express server we're gonna bring it in let's say Const Express equals require Express then what we want to do is bring in stripe but before we do that I'm going to pull up the documentation for the stripe module so I'm just going to search for NPM stripe okay now when we bring it in okay so when we require it we need to then put a set of parentheses after it with that the secret key now if we look at our dashboard remember we have a publishable key which is okay if people see that and then the secret key which goes on the server which no one should see now when we get ready to deploy I want to have two separate key files one for dev which will just put the keys right in the file and then one for our production server where we're gonna use environment variables from Heroku okay but we're gonna get into that later for now we're just gonna take our secret key and just put it right in so let's go back to vs code and let's bring in stripe set that to require stripe and then put a set of parentheses after that and we're just going to put in our secret key ok yours yours will obviously be different and what's nice is when you're looking through the documentation here it'll actually replace all of the stuff here any code examples will have your actual public key or your secret key alright if you can see that this one ends in LA and if we look at mine and Xan so as long as you're logged in the API documentation will actually show your key and exactly what you should put in you can see it also has my business name and everything which is kind of cool I really like the documentation for stripe alright so let's get back to work here we'll go back to visual studio let's bring in the rest of our stuff so we're going to need body parser so we'll say require and that'll be body - parser and we want to bring in handlebars so this is going to be exp HBS we're gonna set that to require Express - handlebars alright so now that we've brought everything in let's initialize our application with will say Const app equals Express ok just standard Express stuff let's go ahead I just want to get the server actually up and running so let's create a poor it looks like on support equals now we're gonna be deploying to Heroku so we need to use process dot Ian V dot port or port 5,000 for local alright because basically Heroku is gonna choose the port from here but since we're you know when we're working locally we want to be port 5000 alright then we're going to just say app dot listen this will start our server we're gonna listen on whatever port is in that variable and then we'll put an arrow function here as our callback and we'll just console console dot log we'll put in some back ticks here so we can use a template string and we'll say server started on ports and then we can just put in a variable like this port so let's save this and since we put this start script right here we should be able to just run this with and p.m. start alright started on five thousand let's go to local host port five thousand and we're gonna get cannot get slash okay and you guys that have worked with node and Express should know that this is because we don't have an index route we don't have any routes so we're getting that but the server is in fact running so let's go back and before we move any further what I'm going to do is I'm going to stop this with a control C and I don't want to have to keep restarting the server every time we make changes and we want to check it so what I'm going to do is install something called node Mon and what that does is it'll it'll continuously watch our application I know a lot of you guys know this already but it'll make it so that we don't have to keep restarting the server and we want to install this globally so we're gonna do NPM install - g4 global node Mon alright already have it installed so mine might go a little quicker alright so once we do that we can just say node Mon and it'll start it up for us alright so let's go ahead and add a route here now our index route is going to be basically just the only page we have we're gonna have the index page and then the success page so let's go ahead and put that right here we'll say index route we're gonna say app dot get it's gonna get request to slash okay we'll put an arrow function here and that'll have requests and response and then all we want to do here is render a template so to do that we need to just do res dot render and then the template name which will be index all right let me make this a little smaller here now before this can actually work and we can render a view a handlebars view we need to add some middleware and handlebars isn't the only thing we need to add middleware for we need to add it for body parser we also need to let Express know that we want to use a certain folder for static assets like images because we are gonna use two images we're gonna have one for the actual eBook we're gonna also have one in the the check out box right here I'm gonna replace this image with my logo and of course you guys can use whatever you'd like alright so let's go back to visual studio code and let's add this stuff so let's say handlebars middleware so this is basically just two lines we're gonna say app dot engine I'm gonna pass in handlebars and this is all in the documentation for express handlebars if you want to check that out and then we want to do exp HBS parentheses okay so this exp HBS comes from right here and then we want to pass in a configuration object and the only thing that I want to put here is default layout and we're gonna set that to Main so basically we're saying that the the layout that wraps around all of our views should be called main dot handlebars and then under that we just want to say app dot set we want to pass in some single quotes and just save you space engine and we're setting the view engine to handlebars so that's the required middleware now for body parser we want to say app dot use and in here we'll say body parser dot jason and then a set of parentheses and then we want to do app dot use body parser dot URL encoded and we want to pass it in objects we want to pass in some curly braces and we just want to say extended false all right once you do this enough you know you won't have to look that look up the documentation anymore you'll just remember it alright and then we want to set the static folder because we need a place to put our images and any extra style sheets if you want anything like that so for that let's do app dot use and inside here we're gonna say Express dot static static open some parentheses and we're gonna put in some back ticks here so we can use a template string and then we're gonna put a variable so to use variables in template strings you use money sign and then curly braces alright we're just gonna put double underscore dur name so could the current directory we're gonna go outside of that curly brace and do slash public all right you'll often see this done with the path module as well but I'm I don't feel like bringing the path module in so basically we're just saying that the folder that's named public is going to be set as the static folder where we can put our images and stuff all right so let's save that let's go over here and create a public folder and let's create a folder inside public called IMG and just to just to do it before I forget I'm just going to bring the images in and you can get these in the link in the description so this is our application I'm gonna go in public image and I'm gonna bring in both of these images say pcs n so one is the e-book and one is the replacement for the check out box now make sure that whatever you want to use for the check out box you call it marketplace dot PNG that's what it's gonna look for alright so now we can start to take care of our views so let's create a folder called views now remember we said the default layout is going to be called main so inside views we're gonna create a folder called layouts alright and then we're gonna set a new file called main dot handlebars and this is gonna wrap around all of our other views so let's put our basic HTML head and body tags in here inside the title I'm just gonna say web development eBook and wherever we want the views to output we want to put in triple curly braces and then body all right this will output whatever we're whatever view were rendering such as index so let's save now in our app js4 our home route we're rendering an index view so we need to create that so not inside layouts but inside views we want to create a file called index dot handlebars and for now let's just say hello I'll say hello index and save let's go back and reload and we get hello index so the home page or the index page whatever you want to call it is now loading the index view alright so let's see what's next let's go ahead and add the nav bar to our main handlebars actually first of all we need to bring in bootstrap so I'm gonna just bring in the CDN so I'll go to get bootstrap comm we're using bootstrap for beta at this time we're gonna grab this link this is just the CSS I'm not gonna bother bringing in the JavaScript and all this jQuery and stuff because we're not using any of that we don't need that so just the CSS part excuse me and we're gonna paste it in right here and let's go ahead and add the navbar I'm gonna put it right above the body right here right above this and I'm gonna paste this in just so I don't have to type it out and it's really easy because there's no links or anything so basically we just want two nav tag with some classes we have nav bar now bar expand MD nav bar dark BG dark and then py three this py three is a padding class if you guys took my bootstrap for udemy course you know all about this if not basically py just means padding for the top and bottom and then three is a multiplier this can be either one through five all right so it's going to add some padding to the top and bottom then we just have a container and then in a tag with the class of navbar brand and then an h3 with I put traversée media but of course you can put whatever you want alright let's also wrap a container around the body okay that way we don't have to do it in every single view even though we only have two views but it's good just in case you want to add more views later alright so we'll save that and then it should be all set for the layout so if we go back to our index page and reload it should look like this alright oh one more thing I want to make the background blue so I'm just gonna add a class to the body called BG primary alright actually we might as well add text white as well class called text white and there we go so now we're gonna work on the index page so we're gonna go to our index handlebars now try to bear with me there's quite a bit of bootstrap markup here I just I don't like to copy and paste you guys know that I like to do it from scratch even though this is a stripe tutorial I like to start it from scratch I mean I could have done all this already but what about the people that don't know you know how to implement handlebars or anything like that so I'm trying I'm always trying to think of everyone not just the people that you know just want to learn about stripe so this is going to have a class of py too so padding on the top and bottom and that's the only class we need for this and then we're gonna have a row because we're gonna use the grid we're gonna have two six column divs so we're gonna have a class of call MD call - MD - six and let's Center everything so we'll also have a class of text - Center by the way this syntax that I'm using is because I'm using Emmet Emmet comes pre-installed with vs code if you're using atom or sublime text or something you want to install it as a plugin alright so we can use the syntax like this and click tab and it'll turn it into classes all right so let's see inside here we're going to have an h1 I'm gonna give this h1 a class of display - 3 which is a bootstrap for class we're gonna do MT 5 actually it's - MT 3 which is margin top three and then let's do PT - 5 which is padding top 5 all right and then in the h1 we're going to say web development eBook and let's see under the h1 we're just going to put a paragraph with a class of lead which will make the text a little bigger and we'll say learn web development front to back all right let's save it ok so that's what it should look like so before we add the pay button I just want to add the image over here so let's see we need our second six column divs so under this class this column d6 we're gonna create another one called call em d6 and we're gonna put in our image and the source is gonna go to / IMG / look dot PNG alright and then we're just gonna give this let's give this a class of IMG - fluid which is a bootstrap for class save it reload and there we go alright so now we have the the markup stuff out of the way the the uninteresting stuff now we're gonna get into stripe so if we go and we look at check out okay so check out is basically this here this is this is called check out and this tells us how to integrate it so basically we need to have a form it's gonna have an action that's gonna go to whatever route we're submitting it to it's gonna be a post request so we want this to go to slash charge on our express site or express back in and then we need to include this script tag with all of this stuff in it okay which I'm gonna change some of it up but let's grab this form all right now if you're not logged in to stripe and you're not looking at this documentation that's fine you can just you can just manually typing it type it in but I'm gonna go back to vs code and we're gonna go under the paragraph here right yeah under the paragraph and we're going to paste this in alright so this form right here the action is going to go to slash charge all right that's where we want this to go and then we want to keep the source this script here this is this is the check out script check out J s okay we have a class of stripe button the data key should be your public key okay so in your stripe dashboard whatever this is right here your publishable key that's what you want there the data amount is going to be the amount that you want to charge them which and in this case is gonna be twenty five two five zero zero so that's going to be twenty five dollars okay data name for this we're gonna call web development eBook this is basically the product name all right in the description this says widget by default I'm going to change this to e-book written by Brad traversée and you can put whatever you want here now this right here you can see this is the data image so this is this image right here where is it right here now if you want to change it like I said it has to be called Market Place dot PNG so if you go and do what we did earlier and you put the market place PNG file into your image folder then we can just change this right here to / IMG / marketplace PNG all right and then that should be good so let's save this and let's go back to our application and reload and we're gonna get this pay with card let's click it and there we go alright so if we submit this it's not going to do anything because it's not we have nothing in that that charge route in fact we can go ahead and try it we'll say test at something calm card number all right now since I've used this email address before my browser knows that I've used it it's asking if I want to get sent the code so I don't have to put my card in again but of course I'm not going to do that so let's do four two actually before we do that let's try something that doesn't work all right so you can see it's not gonna work it's actually checking it now if we put in one that does work and pay this will check off and it's going to redirect to charge and nothing happens I mean if we go to our dashboard we go to payments we're not gonna see anything because we don't have a back-end okay which you all we've done is the front end form at this point so we're just going to get this error all right now before we work on the backend I want to show you how we can customize this now it took me a while to figure out how to customize this but still but still be able to use it in the way that we are without having to make an AJAX request or anything like that to still be able to use the action right here so the solution was to hide the default stripe button and then add our own so we're gonna go under this script right here and put another script okay and we're gonna say hide default stripe button now you don't have to do this if this button is fine for you this pay with card that then just leave it but if you want to add your own this is how you can do it so let's see we're going to do a document I'm gonna say document dot get elements by class name and then here we want to get stripe - button - EE L alright we want to get the first one so let's say brackets zero and then we're gonna set dot style dot display equal to none all right so that's gonna hide the initial button if we save this and we reload the button goes away alright now to add our own all we have to do is go under the script tag we just created and just put in a button we're gonna give it the type of submit okay so button type submit let's give it our bootstrap classes so I'm gonna say BTN BTN - what I do outline - dark but I also did text white and let's make it bigger so we'll say BTN - LG and for the text will say purchase for $25 and save reload and there we go so now if I click that we get our pop-up alright so that's the simplest way that I could find to replace the button and still use the check out module alright so I think that's it for for this side of it now what we want to do is work on the charge route okay I remember when we submit it it goes it makes a post request to slash charge so let's go ahead and go back to our app J s and it'll say charge route so it's gonna be apt dot app taught post slash charge okay it's going to take a request and response and now what do we want to do here so here we want to first of all create the amount will say Const amount and we're going to set that to 2500 which is $25.00 and then we want to do two things we want to create the customer and then we want to charge the customer and if we look at the documentation here for the strike package it shows us right here we want to do strike customers create and then it gives us it's a it sends back a promise so we want to do dot then then it'll give us the customer and then we can call stripe dot charges dot create and then we can charge the customer so ours is gonna look a little different than this but that's the basic idea but before we do that what I want to do is show you what comes in from that form so let's say console dot log and we're gonna log request dot body that's how we get form data with the body parser and then let's just do res dot sin doesn't really matter what we put here just to have it do something so let's save that and then we'll submit the form with the credit card and we'll see what this gives us and then it'll show it down here alright so let's go back and we'll just put in a brad at test3 dot-com put it on let's put in our good credit card whoops okay expiration this stuff doesn't matter as long as you use that card number this stuff doesn't matter and we'll pay we're just gonna get it's just gonna res dot send test but let's look at the console and then this is what it gives us stripe token okay token this is this is basically a reference to the actual card you can see that the stripe token type is card and then it gives us the email okay and that's what we can use to create our customer so I just wanted you to know what that form actually sends it's this object with these three things all right so let's go ahead and get rid of that now and let's proceed to say stripe dot customers dot create when I pass in a set of curly braces here and we want the email we can get that with request dot body dot striped email all right just like it says down here stripe email okay this is request dot body we want the specific stripe email value so that's what we're putting right here all right then we also want to put in source which is going to be the stripe token so request dot body dot stripe token okay which is this here so that'll create the customer and then what that does is it gives us back a promise so we can say dot then and then in here we'll put in customer because it gives us a customer back and we'll set that to I'll set it to stripe dot what is it charges stripe dot charges dot create alright and then inside here we're gonna pass in an object okay should look like that believe that's right and then we want the amount which up here we defined so I'm going to use es6 instead of doing amount amount since it's the same thing we can just do amount once then we want the description of the product which is web development eBook we want the currency that is being used and that's going to be USD we want the customer remember this promise that this gave us back gives us it gives us a customer object and we want to set this to customer dot ID okay that object has an ID all right then we're going to do one more dot then and for this we're gonna say charge and then we just want to basically render the success page so we'll say res dot render success and that's it that's going to do everything that's going to add the customer and that's going to charge the customer so pretty simple block of code at least for what it does so now what we want to do is create the success page that it's going to redirect us to or not redirect but render so let's go into views create a new file called success dots handlebars well I forgot the age there alright so in here we're gonna put a section and give this a class of key Y - 5 that's yeah it should be good and then let's do an h1 we'll give it a class of display - 3 and in this h1 we're just gonna say thank you and then we'll put a paragraph with the class of lead and we'll say your ebook should be emailed to you within one business day and you can handle this however you'd like and then I'm just gonna put a go back button or go home button so a href - slash - give it a class of BTN and BTN dark BTN LG and in here we'll say go back home alright so yeah that should be good let's save and if you want to just check this page out just to make sure but you know before you actually go and do a transaction you could just create a simple get request so let's say slash success and we'll load up the success view so now if we go to slash success there it is alright I don't want to keep that as a route though I just wanted to see what it looked like so I'm gonna get rid of that okay so we should be all set guys now there's some other stuff we need to do before we deploy but let's go ahead and test it out let's see if we actually add the payment and the customer to my stripe account oh and just so you can see I have right now I have no payments I have no customers so let's try it out alright so we want to go back to our index purchase let's say Brad at I don't know hello Tom card number and pay check hopefully it went through and then it redirected us let's go to our stripe dashboard let's reload payments and there it is web development ebook okay there's a little invoice thing it shows you it even shows you the route down here that that it worked with Brad at hello was charged $25 so if we go to customers there is Brad at hello so we have a working stripe website now if you're not interested in deployment then that's it that's all you need but if you want to keep going and you want to actually deploy to Heroku then let's let's change some things up all right so basically all we have to change in our application is the way that we we have our keys okay I don't want to just put the key right in the file like this I don't even want to put it in like this our publishable key so we're gonna create a new folder called config okay and if you guys took my note j s dev to deployment course this is going to be very similar to what we did with our two applications there we're gonna create a new file called keys j s okay we're gonna create another file in there called keys underscore dev j/s and then finally we're gonna have another file called keys underscore prod dot Jas so basically dev is going to be is just our development keys and we don't want to push that to the server the production keys is what we want to push to the server now in the regular keys Jas we're gonna check to see if we're actually in a development environment or not or in a production environment if we are then we're gonna load keys dot prod if we're not we're gonna load keys dev so let's first go to keys dot dev all right and we're going to just say module dot exports so we're just exporting an object and this object is going to have stripe publishable key okay and the value for that is going to be our publishable key which is I guess I mean we could get it in our dashboard so if you go to API you'll see your keys here so this is the publishable one I'm gonna grab that put that in there remember this is the keys dev file the next one will be stripe secret key excuse me secret key and we're gonna set that to our secret key which is this okay so we'll put that in right there and save now what I'm gonna do is copy this and now go to the keys prod j/s and paste that in now instead of just putting these directly in these keys directly in here we're gonna replace this with an environment variable that we're gonna add to Heroku and for this we can say process dot E and V dot and we're gonna call it stripe underscore publishable underscore key okay and then for this one here we're going to say process dot Ian v dot stripe underscore secret underscore key okay and you don't have to do all this but it's just good practice it makes it much more secure rather than just having your keys right on your in your files like that but that should do it let's save this and then we can close up both keys prod and keys dev and now we would we want to go into keys GIS and basically we just want to test to see what environment we're in so we can say if process dot NV dot node underscore env so if the node environment is equal to production basically if we're on if we're in Heroku it's going to be equal to production then we want to export will say module dot exports equals and then we want to just require dot slash keys underscore prod all right else if we're in development or anything else we want to export the dev keys all right keys underscore dev so what if one our local machine then that's what we're going to be using all right if we're on the server then it's going to use those those variables so let's save this alright now we want to do we can close it up let's close up everything except for app KS and now we want to bring in the keys file okay and we're gonna replace this hard-coded secret key right here so you want to make sure that you bring in the keys file above the stripe so we'll say kant's keys equals require and it's inside the config file slash keys alright and then we're going to replace this with keys dot stripe secret key just like that now for the publishable key you remember that's that's in the index right that's in the index route so we're gonna pass that in right here all right we'll pass it in as a value so we'll say stripe publishable key set it to keys dot stripe publishable key save it and then we'll go to our index dot handlebars and replace the hard-coded value right here with some double curly braces and it's going to be stripe publishable spell that right publishable key and save all right so we should be good now the purpose of half of this of separating these is so that we don't have to have the dev keys on the server so when we use Heroku the way that we push to Heroku is with git okay the git version control system so we want to create a file here inside the root so we'll say new file we can't want to call it dot git ignore get ignore dot get ignore sorry and we just want to put in here that we want to ignore the keys underscore dev dot J's file okay any file with that name should be ignored all right we also want to ignore the node modules folder okay we don't want to we don't want to push that to Heroku either so both of these should be in the get dot get ignore all right now what we want to do is initialize this as a repository I get repository so let's go ahead and get out of this clear it out and we'll say get in it that'll initialize it as a git repository then we're going to do get add dot so this is adding everything we're adding all files then we're gonna commit so get commit - a.m. and then in here we just want to put us just a comment so I'm just gonna say initial commit alright and that commits everything to the local repository now what we need to do is we need to install the Heroku CLI so that we can actually push this to Heroku alright so we're gonna go to let's just search for Heroku CLI and if you already have it installed that's fine but for those of you that don't you just want to click on your platform I'm on Windows and Windows has a an installer that I can download so I'm gonna grab the 64-bit installer which I already actually already have but that's fine alright if you're on Mac OS you can grab that installer if you're on a bun too you can go ahead and run this command but I'm gonna go ahead and open this up and make sure you have both of these checked will click Next install that should install real quick all right so that's all set so I'm gonna click close now for some reason Heroku does the command Heroku does not work and get bash for me ever I say Heroku actually let's try I mean the first command we have to run is Heroku login so I'm gonna try that why was it gonna work usually doesn't know oh it is oh alright well usually it doesn't if it does not work and get bash and you're on Windows just go ahead and open up the standard you know Windows command line and run it as administrator and then navigate to your your application so I'm going to go ahead and log in here with traversée media at gmail and password alright so now I'm logged in so now what I want to do is I want to create an application make sure you're in your your apps folder so we want to say Heroku create ok so it created it called the peaceful island it'll give it some weird friggin name and then if we go to the Heroku dashboard and reload you'll see this peaceful island this is our application now we still have to add this as a repository so let's click on that and let's go to settings I'm sorry not settings deploy and down here you'll see this command right here Heroku get remote and then the name of your app so you just want to grab that go back to the command line I'm just going to clear this out and I'm going to paste that in and that's basically going to add it as a repository so now we can push to it now we already have everything in our local git repository because remember we did the git add they get commit if I do get status right now you'll see that there's nothing to commit everything is already in there so all we have to do now is say get commit I'm sorry not commit and get push your Roku master I'm going to push to the Heroku master branch and that should upload everything to Heroku and hopefully it works all right everything looks okay so now you can either go to your dashboard and go to open app or you should be able to just type in your terminal you should be able to say Heroku open and it'll open it in the browser now I'm getting an application error of course so what you want to do now if this is happening to you if not then that's great if it is then you just want to say Heroku logs and let's see what's going on here let's see can i oh cannot find module keys dev wait a second you shouldn't be able to find module keys dev what do they do here hi I forgot an e right here since I forgot that he it was actually looking for this file which isn't there because we put it in the git ignore it didn't get pushed to Heroku so let's fix that and save and then what we'll have to do is is we clear this out we'll have to say git add all get commit and this is what you do every time you want to you know you change something and you want to commit again so we'll say fixed fixed Keys file alright then we'll say git push Heroku master all right hopefully this works all right so let's try it again actually just go over here and reload and there we go and you can see we're now live on the internet so now we want to actually test this out what I'm gonna do first though is just delete all my test data from stripe you can see we still have this in here so I'm gonna go to business settings data and delete all test data okay so now if we go back to payments you'll see there's no payments if we go to customers there's no customer so let's try it from our remote application purchase email let's do and I'll say Harry at gmail.com card number we'll use our good 109 18 pay you did not set a valid publishable key oh we didn't add our environment variables for Heroku so it what happened is it doesn't know it doesn't know what the hell this is here or this so to do this we need to go back to our dashboard in Heroku and go to settings go to reveal config VARs and we need to add those so stripe publishable underscore key value is going to be our publishable key which we can get right here okay add and then stripe underscore secret key that all right so we'll add that and then that should be good so now it should know what we're talking about so let's go back to our remote application which is right here let's just reload it let's try it again well see I used an email address I already used so it's asking if we want to use the the phone thing but I don't want to all right so redirected us to our success page on our remote site now let's go to the dashboard go to payments and reload and there we go how are you at Gmail if we go to customers we should see them there as well all right so we now have our site deployed on the internet and then if you wanted to add a domain you could just go to your settings and go to add domain enter it in and then you just have to go to your domain registrar and then add a cname value and again if you've seen my node dev to deployment course we did all that so it's the same exact thing alright so that's pretty much it now if you want this to actually go live you'll have to implement SSL and you can see right here it says upgrade to paid Dinos to configure Heroku SSL all right so you you you definitely want an SSL certificate if you're taking payments all right now you don't have to use Heroku you could use something else digitalocean or anything else where you can deploy a node application all right this is just one option and when you're ready to go live of course like I said like I showed you earlier you want to go to your or is it now I forget payments settings and activate ok and just go through the application and I believe you'll get a different set of API keys you just want to switch those out all right and then you should be able to take payments and it should go into your bank account and you'll have your payment system alright so I know this was kind of long guys and I kind of went off topic a little bit here and there but hopefully you understand the gist of it I'll put the code in the description so you'll have that to look at if if you got confused along the way but thanks for watching guys I will have more strife API tutorials in the future including using other languages so thanks for watching and I will see you next time coding dojo is a programming school that turns beginners into developers in only 14 weeks if you're serious about landing a career in tech lacked the formal education or background coding dojo will get you there in no time with over 3,000 graduates to date over 90% of their grads land jobs within three months of graduating often making over 70 K per year at tech firms of all sizes from companies like Google to local startups to learn more visit coding dojo com or click the link in the description below

Channel: Traversy Media

Views: 106,396

Rating: 4.969276 out of 5

Keywords: node.js stripe api, stripe api, stripe, node stripe, express stripe, javascript stripe, stripe payment

Id: QT3_zT97_1g

Length: 61min 52sec (3712 seconds)

Published: Tue Oct 10 2017