Simple Stripe payments using Django and Javascript | Part 1

all right guys welcome back to the channel in today's tutorial we will begin the first part of the django and stripe application project so before we actually start coding let's take a look at what we are going to create over here i have my card with zero items and zero dollars and below we see some courses of course for django course for javascript and of course for react so what we can do is to simply add some courses to cart for example i'm going to choose the quantity of two so one course will be for me and the other one will be for a friend of mine so i'm going to add to cart okay we have a confirmation that the cart has been updated and let's add to for javascript okay and now we see 40 dollars for items in cart we can update those quantities over here as well and then if we remove if if the quantity will be zero the item will be automatically removed so let's go back and maybe let's add one item of react let's add to cart and we can proceed to checkout okay and here we have the summary and if we enter the payment details we will be able to pay for those courses all right so right now i'm going to cancel this and yeah without further ado let's get started all right guys so before we get started let's take a look at as usual what have i done so far so basically i started a brand new project called stripe proj and currently i'm in the settings py file of this directory so if we scroll down to the installed apps list we will notice that the cards and products applications has been started and have been added to this installed apps list so we will work on those applications starting with the models py file in a few seconds and then if we scroll down to the template section over here i just added a configuration telling django where to look for additional templates and over here we are going to keep our base html so this is the template that simply other templates will inherit from okay and i didn't do any other configuration regarding static and media files we will do this um a little bit later for now let's focus on coding and let's jump into the products so over here what i'm going to do is to open the models py file and we will begin by creating the class of the product so let's write class product let's open up the parentheses and let's inherit from models.model and let's define some fields so first of all we'll need the name of the product and this is going to be a model's char field with the max length of 200. then we will have the description or i'm going to skip the description but you can go ahead and put it in if you if you want so this could be for example a model's text field i'm just going to skip it as mentioned before and i'm going to focus on the next field which will be the price and this is going to be a models float field where i'm going to pass null is equal to true and why i'm going to explain a little bit later then we will have the active and this is going to be a model's boolean and here i'm going to also set null is equal to true and let's also add an image so this is going to be a model's image field and we will need to install pillow for this to work so let's put in no is equal to true and we can also add a created so this is going to be a models date time field without to now add is equal to true all right so the one thing missing over here is the string representation method and let's refer to the name over here so we are going to return str self name and let's go ahead and save this models py file of our products directory and let's jump into the admin so we can actually register the product and by the way i'm already um i already created a super user so that i can log into the django administration i'm actually logged in to the django administration so now if we register this product and run the migrations we will see the products section over here okay so first of all let's go to the admin py let's import our product from dot models we want to import product and let's register it below so admin site register and we need to pass in the product all right so this is it for the products and we can now focus on the cards so again we need to go to the models py file and over here we will have a little bit more complicated situation because we will begin with a class we are going to name card abstract and this card abstract will inherit from models.model but then we will have a class called cart item and this class won't inherit from models.model it will inherit from cart abstract and the same will be for class and then cart here we will also pass the card abstract so we are inheriting from card abstract so in the card abstract we are going to define some fields which we are going to use both in cart item and cart and we are going to set it as abstract equal to true and this way we are going to create the tables for the children okay so we won't create the tables for cart abstract but we are going to create those fields in a table for the classes that inherit from cart abstract so we will take a look at how this looks a little bit later for now let's start by defining the fields that are going to be used both in cart item and in the cart class so we will have the user and this is going to be a model's foreign key to the user so we need to import the user model from djangocon trip of models we want to import the user okay so let's pass in the user and let's specify on delete is equal to models cascade so this is the first field then let's say that we want the created created create like this and this is going to be a model's date time field with autumn now add is equal to true and let's also add and update it and this is going to be models and let's put in date time fields out of now is equal to true so those three fields will be now shared with the card item and the card because those classes card item and card are inheriting from cart abstract and now in order not to create a separate table for cart abstract we need to write class meta and set abstract equal to true okay so right now we are sharing those fields across card item and cart however we are not creating any fields for card abstract all right so let's start working on the cart item and let's remember that we have already three fields defined so the fourth one is going to be the product and this is going to be a model's foreign key to the product and the fifth one is going to be the quantity quantity and this is going to be a models positive integer field and let's set the default to zero okay so yeah [Music] we can now actually provide the string representation method for the card item so what i'm going to do is first import the product from products dot models we want to import product and then let's pass in the product over here let's specify undelete is equal to models cascade models cascade and let's say that the string representation method should refer let's do an f-string over here so what i'm going to do is to write return f and then let's refer to the product but not the product itself the product name so we need to write self product and access the name field okay so this is the first step and then let's put in also the quantity so here we just need to write self and then refer to this quantity field alright so we have the cart item ready and we can now focus on the cart itself so the cart will consist of cart items so we can write items and this is going to be a models many-to-many field and we need to pass in cart item okay so as the next uh step let's define the total total items so this is going to be the count of the items and this is going to be a models again positive integer field and let's set the default here as zero and also let's have the total price and this is going to be a models float field and let's specify the default over here as zero zero okay so we need to create a strength representation method for the cart as well and then we will have to register those classes in the admin so let's return over here an f f string as well and let's refer to the maybe to the user okay because as a reminder we are inheriting from card abstract so we have the user field as well and we can simply write self user username and then we can provide the id of the cart and here we can refer to the id of the object of the particular object okay so self id and yeah i think we are done we can go ahead and save this and we can go to the admin py file over here we need to register those two classes so we are not registering the card abstract we are focusing on the card item and card so let's import those two classes from dot models we want to import card item and cart and now we can write admin site register card item and below admin site register cards like this okay so let's go ahead and save this and let's jump into the terminal so over here we have an error and we have a hint over here because pillow is not installed and this is related to the image field so what i'm going to do is to quit the development server from running and we are going to run the migration so first of all python manage manage py make migrations and okay maybe we should begin with pillow so pip install pillow then we will do the migrations python manage py make my creations and python manage py migrate okay and python manage py run server to run the development server and let's hit refresh and over here we have carts and products okay so as the next step let's return to the terminal let's quit the development server from running again and let's install stripe and python dot nv okay let's press enter and let's wait a few seconds okay we can now run python manage py run server again and we will actually create a dot nv file over here and we will keep our stripe public key and secret key over here but before we actually fill it out we need to set up a stripe account so this is what we are going to do next all right guys so i'm at stripe.com i'm going to press sign in and i have account already but if you don't have the account this is the place where you need to press so don't have a count yet let me just make this a little bit bigger sign up okay and just fill out those details and we will see each other in a few seconds or minutes all right guys so i'm already signed in and as the next step let's verify the email so we need to check our email accounts for a link from stripe so let's do that right now alright guys so my account has been verified next we have an opportunity to add business details but for now i'm going to skip this part and i'm going to create a new business new account name and i'm going to call it courses online something like this and right now as the next step i'm going to go to products and i'm going to add a new product okay so let me make this maybe a little bit bigger and just i want to mention that i have three images prepared so i have an image for javascript course for django and react okay so we will begin with maybe django and i'm going to upload the image over here so let's do this very quickly django and here i can add some description so let's just put in django course complete tutorial maybe something like this and over here below we can set up the pricing so this is going to be one-time payment in u.s dollars and let's say that it will cost 12 dollars and i'm going to save the product and as the next step i'm going to simply add a new product so let's do this one more time so products add product and over here let's add react this time react course as the description let's upload an image let's um set the currency as us dollars and let's put in 15 maybe this time and let's also set it as one-time payment and i'm going to save and add more and we also have javascript course so and the description will be javascript tutorial let's upload an image let's change the currency to us dollars and let's say it will be [Music] 9.99 okay and one time and let's go ahead and save the product okay so as the next step we need to go to developers and we need to open up the api keys and over here we have our publishable key and below we have our secret key so right now those keys need to be placed in our dot nv file so i'm going to put in stripe and then public key is equal to and then i'm going to copy the public key and place it over here all right and i'm going to do the same for the secret key so stripe and then secret key and here i'm going to put in my secret key but of course this is going to be the secret key after pressing this reveal test key okay so i'm not going to do it while recording but this is what you should do and you should of course copy this and put it over here let's also maybe set the url and this is going to be our development server so i'm just going to copy this okay we could of course also go to the settings py file and we could place this secret key also in the dot envy but let's just skip it for now and yeah let's go ahead and save this and right now we can actually go to our products and open up the views py file but before we actually start working on the views let's take a look at the documentation all right guys so i met the stripe documentation regarding listing all the products and over here we can choose python and this is basically how we can retrieve the products okay so we need to import stripe we need to provide the stripe api key and we need to write stripe dot product list and over here we are passing the limit is equal to three so we are limiting uh three items so the product lists to three items however we only have three courses so we basically have three items and we can go ahead and simply skip this we don't need it and then we have a response so what do we have over here we have the product id we have the created description images we have the name but as you can see there is no price so i also opened a page a documentation page regarding listing all the prices and again we can choose python and we need to again import stripe provide the stripe api key and then stripe price list and limit three so instead of product over here we just need to place price and what do we have over here we have the price id we have the created we have the currency and over here we have the product but not the product name the product id okay so what we can do is to simply create a variable which will store all the prices a variable which will store all the products and we can match them by the product so over here we'll need this part and in the list all products we are going to need this part okay so both are related to the product id okay so over here this is called id for the product and over here it will be called product itself this is the product id okay so let's begin from the import so i'm going to import stripe and os and then from dot nv i'm going to import load dot nv and i'm going to call load.nvm and this way we will be able to read our stripe secret key and set it as stripe api key so we can now write os and byron and we can set not set but provides the name that we have put in our dot nv file so it was stripe secret key okay so right now we have set the stripe secret key to be equal the one that we've put in to our dot nv file and as the next step we can get the products and this is going to be stripe product product list and prices and this is going to be stripe price list okay so we are getting all the products and all the prices and right now having those products and prices we can basically synchronize the data that we have in our stripe account with the ones that we have in the models py of our products so we can synchronize the data in our stripe account with the database okay so in order to do this we can create a separate view and whenever we will access this view our data will get synchronized so in order to do this i'm going to create a view that i'm going to call sync products view and this will have a this will take in a request and here the first thing we can do is to for example print out the products and let's do the products data okay because uh over here this is what is interesting for us data whatever we have in this array of objects okay and the same is for the prices we are interested in the data so print products data and print prices data and let's also return something and let it be http response and okay we have it over here it's imported automatically and i'm just going to put in data so now i'm going to go ahead and save this and i'm going to bring this sync products view into the stripe project url so i'm going to put it directly into the main urls py file just for now okay just to see if this is working so over here let's go to products dot views and we want to import product sync products view okay there it is and let's set it just for now as the main path sync products view okay let's save this let's hit refresh over here we have data and here we have it okay so uh here is the id of the product here is the image and here we have the image again the description and here i made a typo react courser should be coarse sorry about this guys here we have the javascript tutorial and then we should have um django okay here is django django course in the description and these were products and now we have prices so here is the price id the currency we also have unit amount and unit amount decimal and over here please note that let me make this maybe a little bit bigger that 999 is in fact 9.99 so we have 999 but the price wasn't set to 999 it was set to 9.99 okay and then we have the the unit amount for the next item and this is fifteen hundred dollars but in fact it's fifteen dollars so this is something we need to keep in mind and here we have twelve hundred dollars but in fact this is twelve dollar dollars okay so we don't know if those prices are referring to for example this particular price is it referring to the django course react course or javascript course okay so let's actually continue working on our sync products view because right now having those data we will fill out our models where we will have precisely what we need we will have the name price image optionally description optionally active and let's see how we can do this so i'm going to comment this out and i'm going to loop through the products data so i'm going to set a name prod so for prod and products products data and over here as the next step i'm going to set a variable price and this is going to be a list comprehension so i'm going to loop through with the use of list comprehension through the prices data this time and i'm going to check if the x product is equal to the product id so what happened over here we are looping through the products data so let's take a look at the products data okay and so here here we have it and we are checking if the prod id so if this matches what do we have over here so here we are looping through the prices data and we are referring to x product so if we go to prices the product is over here so we are checking if this and this matches okay and the the result will be a list so if we do it like this it should be an object okay so here we should have a price object and as the next step let's set the actual price or we can actually you guys print out this price just to see if everything is okay i'm going to save this and then i'm going to hit refresh and as you can see we have the prices okay so now we need to pick up the unit amount or human unit amount decimal and simply prepare this in the right way okay because as mentioned before the price isn't 999 it's 9.99 okay so we need to simply divide it um by 100 and set the formatting in a correct way so let's do this let's grab price is equal to and then i'm going to format it as float and i'm going to refer to the price and as mentioned not not priced like this but price so we are referring to this and as mentioned before let's get the unit amount okay unit amount and then let's divide this by 100 okay so let's do it like this and hopefully this will give us the actual price and in order to do this we can simply check it with print so we are going to print the price let's hit refresh okay and there it is 999 15 and 12. all right so having this we can actually try to get the product object so we can create it or update it so obj and then create it we don't need to create it so i'm going to set it as underscore is equal to product do we have product imported no we don't so let's go to from dot models we want to import product and this is going to be equal product objects get or create and we are going to set the name equal to prod name okay so we are checking if we have a product with a particular name and then if we uh have it we are going to do an update if we don't have it we are going to simply create it and then let's set the price obj price is equal to price okay so we are referring to the models py file we have a particular object with the fields and now we are updating those fields so obj price we are setting as the price that we have over here and then obj active is going to be equal prod active and then obj image is going to be equal prod and then images and if we take a look at the data um we need to go to products images is an array okay so this is why i wrote it like the sprott images and this should basically do the trick and this way we are taking the link out of the array however the problem is a little bit different right now because i think i went a little bit too fast and yeah i set the image field uh instead of the url field okay so this is my mistake again sorry guys and i'm going to quit the development server python manage py make migrations python manage py migrate and python manage py run server okay so let's go back to the views py and now this shouldn't cause any issues and finally we are going to save the objects and this is why i've set price active image to null so we are grabbing first by the name and if an object if the product object with a particular name doesn't exist we are creating it with a particular name and then we are assigning the price active and image and then we are saving it okay and finally let's just um okay for now um the http response data is accurate it's okay let's just see if this will work or not i'm going to hit save and then over here let's hit refresh and if we go to products we have django and yeah you are able to download the image right now and so so the the django course costs in this case 12 okay and then we have react and react this for 15 and we have javascript for 9.99 okay and if we save this link we will see that this is in fact a js thumbnail so this is basically working and i think this is not a bad place to finish part number one and we will of course continue in part number two i will publish it as soon as possible if you guys want this tutorial to be treated as a priority please let me know leave a like leave a comment and i will try to do my best and publish all the parts as soon as possible um in the meantime of course i'm going to publish the third part of the django and django rest framework with react.js series and maybe something extra will appear on the channel for absolute beginners so hope to see you guys soon have a great day and bye bye

Channel: Pyplane

Views: 2,951

Keywords: django stripe payments, django tutorial 2021, django stripe, python stripe payments, learn django with stripe, stripe javascript, stripe payments made easy, simple stripe payments, stripe payments 2021, learn how to integrate stripe, how to add stripe, django with stripe, python django stripe, easy stripe payments, stripe django integration, stripe django install, stripe django example, django stripe subscription, django stripe checkout, stripe connect django

Id: cdE7YiBOo_w

Length: 37min 15sec (2235 seconds)

Published: Mon Jul 26 2021