Django Stripe Payments Simplified with Donation Page

hey guys so in this video I'm gonna be showing you how we can integrate stripe into our Django application and actually taking payments from our website so the example I'm gonna be working with today is gonna be a simple donation landing page that will allow us to select an amount we want to donate with this form right here add in some basic information and then once we add in a card that card will be sent to stripe on submission and stripe we'll take care of that payment and actually charge the card so the reason why I chose a donation landing page is because it's the simplest application that I can think of that doesn't really require too much work on the back end and setup but does get us working with that stripe API right away with minimal setup so it's a good way to get understanding on to get a good understanding of stripe and how it all works but later on I am going to be putting together a full tutorial on an e-commerce website so I highly recommend you get started with this get familiar with the process and then once we get to something more complex like an e-commerce website it'll be easier to understand and actually get working with that so go ahead go to this URL if you want to donate go ahead and donate but don't feel obligated to just download the source code and follow along with the tutorial okay so let's go ahead and just recap the code I have so far I set up a basic Django project there's not much done to it yet but I did a little bit of prep work and I'll also provide this source code in the description so if you want to start off exactly where I'm at without setting up your own app go ahead and download that from the video description and the final product will be in that website link so within this app we have our base project that we call by Dennis coffee and we have one app within it called base we have that configured right here and here's the URLs patterns to that to the URLs the py file and I also have my virtual environment and my static file so within my static files I just have that profile picture different versions of that coffee cup and a check mark that you'll see in a bit here so our static files down in settings dot P Y we just configure that to render the images and any other static files that we have and if we go into our app here into base we have our templates here so we have one main template that is gonna use that we're gonna use to inherit from here so it's just a basic title with our block of content and if we go to our index.html page this is where that main landing page will be so it just inherits from our template we load static and we also have our success page so it also inherits from that main template and we just have a success message that returns us back to that main page so let's go ahead and open up our views here and within views we just have three views and I'll also open up the URLs here so we have three views the first one is just that index page which if I open up the browser here that's all we have so far then we have charge which doesn't return a page it's just gonna go ahead and process that card information and then redirect us back to this success page right here so it's gonna send us back to this URL pattern which is gonna pull up this view right here so in this view we're just gonna pass in an argument of the amount that was donated and then just go ahead and say thank you so redirect and reverse were imported and we're also gonna use JSON response so let's go ahead and try out those other URL patterns so if we just go ahead and do success whatever amount that's passed into our parameter right here is what's gonna show right in this page so thank you for a donation of at this point ten dollars and if I change that to twelve it'll adjust and we can go back to the donation page so very simple setup just some static file configuration some URLs and some basic views so let's go ahead and actually open up stripe right now and if you don't have stripe you want to go ahead and just set up an account and I open up a dummy account so I'm not afraid to show any of the API keys or anything like that I'll make sure I delete them before I upload the video but go to stripe comm and if you don't have an account set it up but what we're gonna work with is gonna be once it loads is the developer section here so we have testing data and we have live data which we can go back and forth with so we can actually submit fake payments with a fake credit card and see how that data's process so if we go into developers and API keys this is where we're gonna start actually working with I believe our publishable key and our secret key right here that will allow us to actually connect to the account via code and actually start working with it these are the keys that we're gonna use within our app to actually connect to our stripe account from our Jango app here so our publishable key this is the key that you can actually show within your JavaScript it's not - it's not bad if anyone sees this it's a less secret but the one that you want to hide is gonna be the secret key right here so this is basically access to your account right here we're viewing this in test data and we can actually if we switch this right here this is gonna switch to the live key and we can go back to the test one so let's make sure we start working with a test one and let's go ahead and actually use this key right here that I'll copy and actually configure our stripe account so what we're gonna do is go ahead and just open up a stripe document so stripe API Docs and we're gonna start working with a basic setup here so I'll find what we need for python and actually run an import so I'll just open up QuickStart in another file here but I think we can actually start working with this right here so let's go ahead and first pip install stripe and I believe that's in the QuickStart so if I scroll down here so I'll actually link this up in the video description but if we're logged in we'll actually see our real keys right here so let's go ahead and run pip install we won't do - - upgrade we'll just do pip install stripe so we'll do that and then we can actually run the import so pip install stripe and once we're publishing this live will actually make sure to put this in the requirements txt file but I'll turn my server back on and I'm actually gonna leave my key right within the views file just to make things easier but I highly you put this in somewhere like settings a py or some words hidden if you ever show somebody your application that they can't see the key that you're using so if we go back to our documentation here we want to run this import and we want to use the API key so this is where this is actually our key that we see right here so if you look at I believe it's the same numbers it ends with 5 ml so yeah that's the same number so let's go ahead and first import stripe so if we go back to our application let's go ahead and import stripe and we want to set up our stripe API key here so we want to set this and then we're gonna act we're gonna start referencing this in the video here so we'll set that up up top and one of the things I wanted to go over before we really get into working with stripe is PCI compliance so if you ever working with credit cards or dealing with this kind of stuff you're probably gonna hear this and it stands for payment card or a yeah payment card industry so basically there's a certain way you should deal with people's card information because you're dealing with credit cards or debit cards it's a much more sensitive data so you want to make sure that you're doing things the right way and one example that stripe really helps us with is it really helps us in not having to store any card information you never want to have a person's credit card hit your server especially if you're not really familiar with how everything works and stripe helps us tokenize that information and actually work with tokens that represent a credit card and not have to actually store that data so I highly recommend once you get into this to look into PCI compliance just make sure you're following things to standard but it is something that stripe really helps us with so let's go ahead and actually start working with a form and adding elements into our template that can actually send data to this index dot or this index view right here so there's three different ways we can go about actually handling payments here so the first way is just a you striped check out which basically just sends us to another page that stripe provides and stripe takes care of everything there the problem with this is it's not really customizable we want to use our own forms so what we're gonna use is the charges I hear so we're gonna use some of stripes built-in elements and then actually start customizing the forms and the last way which is the payments intense API we're not gonna use that it's just a different way of doing things at stripe is trying to integrate that might be better practices but the charges API is what we're gonna work with and the one that still works well today so we're gonna use this and we're gonna add in our form with stripe elements so stripe is actually give us some forms that we can work with that we can customize so let's go ahead and just use stripe j/s elements and we're actually gonna just put in some code into our template here that's gonna allow us to just render a basic form here so let's go ahead and scroll through this and again I'll link all of this up but if we look through stripe elements here's the first element we're gonna work with right here which allows us to you see the HTML the CSS and some pre-built JavaScript which I'll briefly cover and if you look down you can actually see different elements so we can use if we look at the results here so this is if we want to work with some bank information different types of form elements and you can see a full demo so let's go ahead and actually start with this one so we're just gonna use this card form and then we'll actually customize it so we can see things like a person's user name or a nickname and an actual email so if I go to the HTML first thing I'm gonna do is actually just paste in that stripe link in the top of my template so I want to make sure that that is in my main template here so we'll throw that into the head tag so it'll be available in all pages and then we're actually gonna start working with index.html so because I put that into the main template we can access it here so we have that in and then our actual form so let's go ahead and just paste that in and we'll just paste it here so we paste the form in and we can indent that so we have our form and right now it takes us to the URL of charge and I just want to make that dynamic and do things the Django way so I call that charge right here the name so we'll just do URL and charge so it's gonna send it to that URL we have our method of post and the payment form make sure you don't change this if you're using the built in links that we're using right now because this JavaScript is gonna rely on that and also what we throw in next so we have the form and we have a label for a credit card and that field will actually sit right here so within card element and that's what the Java scripts going to take care of for us so if I go to the JavaScript portion we're just gonna go ahead and throw in this code and I'm not gonna go too deep into this but I will reference a few things here so don't let this intimidate you just make sure you're on this same link and actually pasting this in if it gets updated I just go to the updated version but we are gonna paste this into JavaScript and I'm gonna put it all within the template just to keep things simple so it might make the page look a little bit messy but it's gonna keep it within one page so we're not jumping around everywhere so I make sure to indent that and this is that public key from were stripe account so basically we're just getting this publishable API key right here and setting that to stripe so that's how stripe knows where we're coming from and it's gonna use that key to actually start making API calls and then we're setting up some styling for our form fields and then we're actually gonna append that form and actually let stripe take care of this process for us so don't worry too much about the details I mean look into them on your own but just paste in what we're doing here and the last thing we want to do is actually add the styling so now we'll go to the CSS part so we have HTML CSS now and we'll paste this in and then we can actually refresh it from here so let's go ahead and whoops grab too much so I'm not a big fan of just copying and pasting but in this case this is all built into stripe so I'll just recommend reading the documentation so our JavaScript is down here and I'll make sure to separate it then we have our form and we'll put the styling again right within the page here so let's go ahead and do that and paste that in so now we have now we have our CSS from stripe so this is all stripe then we have our HTML form and we have our JavaScript so once that's in and we pasted that all into our template if we refresh we should now have this form filled so here we go and this is a dummy card that stripe actually provides so I'm going to throw in some data and just do 12:23 one two three and then whichever zip code we want to use and then once we submit this data what's gonna happen here is stripe is actually gonna send this token right here - or a stripe account so the token actually the token is what's providing us the information and knowing where it's gonna send it so it's gonna send this card information not to our server so we never want to see it from when the user enters this information in and it sends it to stripe and what stripes gonna do is go ahead and return back a token representation of the card so we're not gonna get back the card information we're gonna get a token that represents the card so it's gonna be encrypted and then we can send that token back to our view so we'll send that token back to our view and then that's what that's what stripe knows to charge so it knows which credit card to actually process so let's go ahead and actually in our form I just to make sure not to confuse you I'm gonna make sure and add this stripe link not within my template but directly within the index.html file just because I don't want to mix anything up so I'll actually put that under the CSS so because of this we're able to actually use all of this information so we have that setup and we also want to see us our F token so the default stripe integration doesn't provide that because this is this can be used on any type of applications so we have our token and we're getting this card from from fake stripe cards so if I go to just look up stripe dummy cards so these are cards we can use for testing they'll just create fake payments for us and credit cards at stripe can actually process so there's a bunch of different ones I'm using this one right here for two for two for the CVC any three digits and a future date and then the zip code can be whatever we want so let's go ahead and actually process this and when we send it back to our view I want to go ahead and print out what we sent so let's go ahead and test it and go to our page and I'll actually need a refresher because we just added that token so four to four to just do that a bunch of times and 12:23 one two three and then some kind of zip code and if i move this to the right and open up my console let's go ahead and submit it so here we go it sent us to that success page and if you look at the data we just printed out we get our token where our CSRF token and we get that stripe token so this is what we're gonna use this is a representation of that credit card so we secured it and stripe basically hides that card information so we never actually have to have to store that information or security in any other way so we have our card and now we can actually start working with that data so one thing I wanted to say is this form will not work when we're using HTTP so right now because we're in test mode and we're using a test key we're able to work with it but we are going to need to use SSL to actually protect this because stripe will not work and won't even let us work with a form I believe let alone submit that data so that's something I'll cover once we push this on a server so let's go ahead and just add some more data so we want to email and a nickname here in our template we want to just send some more data with that form and I'll close out the main template and we'll just use the index.html so in here we can add in whatever form elements we want so we're actually gonna create a user so let's just go ahead and create an input field for an email so we'll just make that a text field for now call this email and we also want a nickname so we'll just go ahead and duplicate this and we'll say nickname and I'll just add some placeholder values so we can see it instead of a label so email and then we'll do dot and we'll call this one nickname okay so we just added this to our form and we can actually submit that data with our form so let's go ahead and try it one more time and print it out make sure it's working and we'll work on styling a little bit later but let's go ahead and just make sure this works so for the email we'll just use I'll use my email and it will just say Dennis IV and we'll throw in a card again okay so we submit the data and now we have our email we have our nickname and our stripe token so let's go back to the stripe documentation and see what we need here so in our stripe Docs we're gonna be working with poor's resource or core resources and we want to use the customer object right here and charges so the first thing we want to do is create a customer so again I'll link this up too but to create a customer what we want to do is just use a stripe API key so we have that setup and we can create a stripe customer by doing striped customer dot create and we'll add a few attributes so let's go ahead and use this and I have a few elements that I'm gonna add or a few attributes based off of what I've built in my demo here so I'm just gonna reference that but we're gonna use stripe so this object right here which we imported and the customer with a capital C dot create and we're gonna give our customer two attributes so we're first gonna create our customer and then once that customer is created we're actually gonna create a charge and we're gonna connect that charge to the customer so let's try this and we'll first set an email so the email is going to be request dot post so remember we sent that in the form so we can access that by using this right here so the email is gonna be set to that email and then the nickname so request stop post we're gonna take the email and for the name I believe the attribute is called name me take a look so yeah it's name we're gonna use name equals and then we're just gonna repeat this right here so request outpost and we're gonna just say nickname so let's actually try this without creating the charge so first we're gonna create a customer so let's go ahead and try that and we'll fill out that form so let's go ahead and and we're gonna use the same email and we're gonna set the nickname to dennis IV and then we're gonna use the same card so we're gonna use this a lot in this video probably what we'll do 12:23 one two three and then some zip code and let's go ahead and test it and make sure everything's working so I'll move this over okay so it looks like everything went successfully here so we're to the success page thank you for a donation we can go back and if we go to our stripe account and go into our main dashboard so we shouldn't have a charge yet but we should add a customer so if we go to customers here we go so we have an email and the description so I believe that should be the name I'll try to fix that but it looks like everything went well we created a customer successfully and we attach that so let's go ahead and put this in a customer variable and actually create a charge so we'll just go ahead and say charge is gonna be equal to and then let's look at a stripe documentation and within core resources so core resources we're gonna open up not check out but let's make sure I have all this let's go to charges so to create a charge again all the attributes everything is listed here I'm just working off of the demo app that I set up but it's all listed in here so it's stripe dot charge and then the amount is gonna be in pennies so this is gonna be two thousand is gonna represent twenty dollars I believe yeah so twenty dollars if you want to do two dollars it would be one hundred so the information I'm going to submit I'm just gonna have to run a calculation to make sure it has up to that and then we're gonna set the currency and then that token that we got back and then actually go ahead and attach this to a customer so let's go ahead and do stripe dot charge and charges with a capital C and then dot create so we're gonna create a charge and the first thing I'm gonna do is actually attach this to a customer so I'm going to say customer is gonna equal two and then that's why we put that in a variable so we're attaching this charge to this customer and the next thing I'm gonna do is actually set the amount so the amount again because it's in pennies I'm just gonna set it in a hard-coded right now at five hundred pennies so that's gonna be a five dollar charge and the currency I'm gonna set that to USD so currency is going to equal to USD in a string value and we're gonna set the description so description this is just gonna be a donation and we also before I forget we also need to add in that token so we can add the source which is going to be the source that's that's gonna be charged so this is going to be that credit card that we're gonna charge and we can actually put that directly into this charge but in this case because we want to charge a specific customer we can actually just put it into the customer and then by default this charge will know to use this source so for that we're going to use request stop post and remember in our return value it was called strike touken so stripe token with a capital T and that was that value that we returned so let's go ahead and try this we created our customer and we created the charge and attach that charge to this customer and before I move on we need to make sure to fix this misspell so description and that looks good I think so let's go ahead and open this up and create a new customer we'll call this one Dennis one and we use Dennis one here adding the card information and I'm actually gonna move this to the right here so we can see that post request so here's that stripe token we've taken that token and then we use it right here so we provide that as a source and that is the card that's gonna be charged represented in a token so if I go to my stripe account I actually had a test this a few times so we added a few different customers when I was debugging but we should see a fourth customer appear in here so Dennis 1 and if we look at Dennis 1 right here we should see a charge so not sure why I don't see that right now ok so yes I see a charge and if we go back to our dashboard there's a charge for five dollars and we successfully completed our first charge to our test accounts so we created a customer and created a charge so what I want to do now is actually go ahead and set this amount right here to be dynamic and actually allow the user to provide that in a drop-down form so we want to give them a few options and let them customize that and then that data will be sent back with the form and it will no longer be a static amount of five but whatever the user provided so first thing is I'll remove that and I'm gonna reference the demo code that I built out and actually steal a part from here so I'll paste this in and don't worry I'll go slow enough to where you can follow in my form here just above the two inputs of email and nickname we'll paste this select option in so select just gives us this drop-down menu of three options that have the value of five ten or twenty five with the custom message so we named it amount gave it the idea of amount and we also set it to required so I'll actually set these two fields are required because we always want the user to have an email or a nickname if we're gonna create a customer and now that we have that within our requests top post we can actually set the value of a mount and we'll just do we'll put it in an integer actually we'll just do request out post first and we're gonna get the amount so we send it in with the form now and I actually want to make this an integer if this is ever a floating-point number a stripe will not accept that and needs to be an integer and we'll just take a mount and we'll put that in here and right now if we send five we need to multiply that by 100 so it means that we need to we need to convert this into you five times 100 so it'll be five hundred pennies representing five dollars so we only do this if we're sending back that number that way and let's go ahead and give this a test and actually give the user the option so let's say we want to donate $25 and this is going to come from Dennis three and throw in that card again and when I submit this I want to see the amount go through so I want to make sure that's actually being processed and if we look right here so a mout is being sent then we go into the form here we grab it from the post data we throw that in here and we multiply that by a hundred to make that five hundred cents which represents five dollars and or actually in this case twenty five dollars so if we if we refresh our stripe accounts there we go we just donated 25 dollars so if we go to payments we should see that new payment so that customizes it and allows us to change that value that can be a drop-down menu maybe you want users to enter their own amount whatever you want that to be so let's go ahead and actually style the website now I'm gonna go as slow as possible but I am gonna be copying and pasting for this part so if we go back to my demo code here I'm just gonna go ahead and paste in the CSS that I customized and some Google font here so we'll take these two again I'll try to explain as much as I can but I am gonna paste this into my main template so we're gonna override this one right here and paste in two different style sheets that I'm gonna just I'm just gonna put in directly to the header instead of putting it into our static files because I didn't want to configure all that but there's two of them in our template and inside of index now we're gonna minimize our form and I am actually gonna paste in the entire layout - the form so I'll show you what I mean right now and then we'll actually go through this so here's our form I'm gonna throw that underneath and if I save this so our form is actually gonna be outside of our container we paste it in all the CSS for this code right here and we need to add in our form right here so let's go ahead and refresh it see what this looks like at the moment looks like I imported something wrong and I think that's right here that should be static and then images four slash dentists oh don't worry about this it'll all be in your source code so there we go here's our layout it's all screwed up at this moment but what I need to do right now is this form right here that's above our main container so what we've been working on we actually need to go ahead and put that in here so let's go ahead and do that and then we'll actually customize our form so remember we're in index.html and we're pacing our form inside of this block element so I'll just make sure to indent this I'll save that and let's just make sure it's working all right for now ok so our layout is kind of there right now we need to add in some custom styling to our form but let me recap what I did here and what I did with that success page so if I go back to success that's now styled so let's go ahead and recap it so we added in this main container and I'm actually gonna put in my CSS on the right so I can see it and reference it but our font is now looking like this because of this Google font we imported so here's a link to that and I put everything into one main container and then I split it up into two columns here so we have one column here and another one so this is my left column this is my right column and inside of those I added in a wrapper inside of each column so my left wrapper is this blue element right here so that's what we're seeing and then we have our image right here along with this title so by us coffee one-time donation that's right here and then if we go down we clear that float we add in that line break and we have our form but underneath our form we have our right side which is just another column with the ID of right wrapper three images and then that message with our github link so I hope that's pretty simple to follow again just review the source code and what we need to do now is actually style up our form fields so let's reference the CSS so if I go in here this is for my landing page we have our back it's a light gray or kind of like an eggshell white we have our font set to our H 3 and H 5 tags we set the sizes and if we go down here's our container that's centered right here our two columns with a width of 50 percent and then styling for each wrapper right here so based off my old code if we go above our select box here we're just gonna create a div around that select wrapper or a select drop down menu there and we'll indent that and this needs a class of I believe it's form - field - 12 right now so if I look at my CSS it should be right here so I need to place that there and I also need to add a label so I'll just copy and paste this right here so we give the label of choose a mount and a couple of break tags to add some spacing and we'll just make sure that's all working so we just wrapped this select drop down menu in a div and give it or gave it a label so if i refresh that okay so that's a little bit better and we also need to wrap each input field with form - field six so we'll just put those in to wrappers and that'll be for each input so make sure to indent that make it easier easier to see there and we'll repeat that so we have that above this one okay so that should wrap our two fields and make it this 50% with right here and I think the last thing we need to do is add a little bit of styling just underneath this button here so if I look at the demo code what we're doing here is we're actually clearing a float and we're putting this HR tag and I think that's it and then we also need this class and that inline styling so that'll go just above that button right there and remove that so that's gonna give it this spacing right here and we also need a styling for the button so for the button we just give it the class of my button we have in our CSS and just a different background color and will actually change this to an input field to make this styling a little bit better so let's go ahead and just recreate it and we'll we'll make the type submit' and the value will just say submit payment just like before so submit payment and if I throw in my styling in here so we added the class and the styling for the background color if we remove the button that form should still work how it how was meant to work and now we look looks like we have the proper styling so let's go ahead and fix this right here so that should solve our issue okay so from here what I'm gonna do is actually prep this code to push it live and then take care of that SSL issue so I'm not gonna walk through the steps too much because I have a full tutorial on this but I'll try to explain as much as I can as I go but we are gonna use Heroku for this so what I'm gonna do here is actually create a new app here on Heroku so if you don't have this go ahead and create an account and we're just gonna call this by Dennis coffee and then we'll just say test so I'm actually gonna take this down the domain you're actually gonna get the code from is this one right here let me type it in really quick so by Dennis coffee dot Heroku app so this is actually where the demo app will sit but once I push this live I'm actually gonna take it down so we created our app here and in Heroku we're gonna go ahead and add a build pack so we're gonna set that to Python and we're actually going to use github to push our code so when we deploy it we're gonna use the github method here so what I'm gonna do is actually create a git repo and push the code there and what connect is so let's go to github and create one and we'll actually make this private repository so go ahead and just create a new one and we'll just say bye Dennis coffee test so we'll just keep some kind of familiarity there and we'll make that private and let's go ahead and just create that repo okay so we have our key hub repository and we have our app on Heroku so if you look at it right now it's not connected if we open it up it's just as blank Heroku app and our github repo so we're actually gonna follow these steps to get connected but before we do that we do need to configure a few things to prep our full app here so so let's go ahead and run a few pip installs and the first one we're gonna do is pip install white noise so this is to serve our static files for Heroku I'm not gonna go too deep into that this in another video but after this we're gonna do pip install G unicorn and I don't know if that's G unicorn or gonna corn I've not gotten that right for a while so we just need to run that pip install too and let's go ahead and run pip freeze and we'll just do requirements dot txt so this is just for the dependency so Heroku knows what we're using here and here's our requirements txt so we have Django Gina corn and white noise so I'll just run Python manage py and then we're gonna do collect static okay so that ran because of our if you look into our settings dot py file here we were able to run collect static and that was supposed to create a folder called static files in here so if I look right there static files are configured and I also want to set a loud house so if I go up into a loud host here we're gonna throw in two URLs so we're gonna throw in port 8000 so we want to make sure this is allowed and we also want the Heroku app so we'll make that a string value remove the 8000 and set that base URL we also want to remove this and in our Roku app so the app is gonna be called let's close this out here so this is the domain to the app so we also want to throw this in and once we push it we want to make sure that our website actually allows it so let's go ahead and remove all this okay so there we go that's our allowed apps and I want to actually add in white noise into our middleware so Django knows how to serve that so what we'll do is just look up Django white noise and we need to throw in a little strip of code into our middleware list here so let's go ahead and find this so it's right here middleware we want to paste that into right here so just underneath that section I want to make sure that it's obvious that that was added so create a space and now we'll just add a few more files so we're gonna add a proc file and that's gonna be with a capital P here so proc file and within proc file I just wrote out some code here we want to add this right here so we're gonna set the Dino types for Heroku here so G unicorn and this needs to be the name of our app here so by Dennis coffee that's correct and we also want to add a runtime dot txt so run time dot txt and in there all we need to do is specify the version of Python that we're using so we'll throw that in to run txt and we also need to add a get ignore file so we'll do get ignore and we need to add a little bit more code into our settings @py files so we'll do dot get ignore and the only thing I'm gonna ignore I'm not gonna go to into detail with this we're just gonna ignore our virtual environment so whenever we push this to github we'll make sure not to you throw all this code in there and in our settings dot py what we want to do is whenever our app is live we want to make sure that debug is set to false here so for that what I'm gonna do is just run this conditional which will add to later once we're pushing live but at the bottom of our settings up here Y file what I'm gonna say is when OS dot get current working directory is equal to AB so this is basically the file path when we're local but when we're live this should be just a string value of app so it reads that we're whenever our app turns on we need to figure out if this is on Heroku or localhost and if we're on Heroku we set debug and this needs to be capitalized to false so we're just changing that and now we should be ready for whenever our app is live we just changed the status of the bug so I'm not sure why stripe isn't showing up here it should run in our pip freeze so let's just try installing it again because it should show up there maybe I uninstalled it by accident must have done that or maybe ran that outside of my virtual environment but this is just for me to do if you've already done this don't worry about it but now I need to run pip freeze again and make sure it's actually added into my requirements txt file ok so now everything looks good stripe is right here it added some dependencies with it so let's go ahead and actually go ahead and create our github account or push our files into our github repo so from our app here let's just go ahead and follow step by step right here so we'll just do get in it so we'll initialize it and we'll just check the status so we have these files here let's go ahead and add them so get added we're following this right here and now let's just do a commit so get commit - em and I'll just say first commit and now we can actually set our remote here so all I'll just grab this right here and paste that in and we'll just do get remote - V to make sure that connected so looks like we're in the right account and now we can actually just push it so git push - u origin/master and that should throw it into the master branch and once this is done I can refresh it and we should see our files now in our github repo so what we need to do now is actually go to our Heroku app and connect to it so let's go ahead and go to deploy and change this to github and we'll just find it so we'll say bye Dennis and I should have two of these I think so by Dennis coffee test we want to connect to it and now we are ready to deploy so once it's connected we can just go ahead and choose the branch we want to deploy so right now we only have master so we'll just hit deploy and give this a few seconds here to run through and we'll see if everything works out correctly okay so it tells us our app deployed let's go ahead and see if everything worked correctly here's our app by Dennis coffee test Heroku app comm and one of the things I can't figure out right now I'm at this point it might be because we're using a test key but you're actually gonna want to switch to your live stripe key so right now we were in tests but once it's live you want to go ahead and use this key right here so once it loads we're gonna want to go ahead and change our app and then redeploy it with all the live information so once you're ready to go live make sure you switch this and then what's gonna happen here is this right here on your Heroku domain stripe requires this to be an HTTP or some kind of secure method here I'm not too familiar with all the details here but basically your site needs to be secure and I think this is happening either because I'm logged into Heroku or for whatever reason but if I open this app on a different domain what's gonna happen here is this credit card is actually gonna be hidden so stripe is gonna see that we're not secure and it's gonna hide it so what we need to do is configure our app and make sure we're prep for that and Heroku actually makes this very easy so if you have a Heroku account if you upgrade your Dinos to a paid account you will actually get a free ssl security ticket right now so upgrade to paid i knows to configure the ssl so that's what we're gonna do if we go to overview right now we're on free and we're just gonna go ahead and if we switch this to a paid account I won't do it right now but so if we go to changed I know type and upgrade to the smallest amount of $7 a month what's gonna happen here is if we go to settings we can actually go ahead and I think by default this will give us a certificate so give it a couple of minutes if it takes some time and what we also want to do is force SSL for our app so I looked up this article here and what we want to do here is whenever our app is live we want to go ahead and add this in into our app so whenever it's live we want to force it to be an HTTP method so by default I don't think it will be so we want to redirect it that way and make sure it's always secure so you can do that from here or directly from the github repo if you go into the application but that should take care of it and make sure your key is live so that's it for this video the app is live again if you want to donate please do but don't feel obligated to all the code will be provided along with the articles that I read through in the documentation and the next project related to Django and stripe is actually going to be my e-commerce website so we're gonna actually gonna advanced this and go up to where we're creating a full online store and we're able to download digital products and pay for them and we'll probably include some subscription models and maybe even physical products that require us to ship it out so thanks for watching make sure you subscribe and I appreciate your support for this channel

Channel: Dennis Ivy

Views: 38,759

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov, Django, Stripe, API, Python, Donation

Id: oZwyA9lUwRk

Length: 46min 46sec (2806 seconds)

Published: Fri Mar 13 2020