Buy me a coffee "clone" - Django project with Cryptomus crypto currency payment gateway

hey guys and welcome to this tutorial in this tutorial you're going to build a similar site to buy me a coffee this is called buy me a noodle here creators can get paid for their work creators can sign up for a free account and create a page here you can see two of the creators that are there if you go into one of them you can support them first you can read a little bit information about them then you fill in an email address and click for example buy me one noodle $1 then I get the URL back from the server and I will be redirected to cryptus which is a cryptocurrency payment Gateway we are using here when you're going through with the payment you're sent to a success page which will confirm the payment with the payment Gateway and for the creators they will have a overview over their own page where they can see all of the payments that they have received this supporter has $0 but at least of the supporters will be listed out here in this tutorial you will learn about Jango Tailwind how to deploy to a free server called render and also how to implement a payment gateway called kryptus before you start hit like below subscribe to my channel and enjoy the tutorial okay so first I just want to begin by creating a folder with the name of the project we are building I want to call mine buy me a noodle so MK there buy me a noodle you can call your whatever you want so then we can go into that and here I want to create a virtual environment for D Jango and similar but before I do that I just want to open this folder in Visual Studio code so just click on this and open and the reason I wanted to do that was because I want to create a simple to-do list here to-do list. txt whoops just that we know a little bit about what we're going through here so first create environment and Jango project um app for core Pages front page Etc uh I want to create an app for the the pages or sort of the crators maybe you should actually call it uh creators instead that's maybe better and um yes when this is done I want to deploy the project deploy project to digital Ocean or maybe Heroku or something similar that's free render also is a possibility and when we have this we can implement the payment Gateway so Implement payment Gateway and test um the reason why we need to deploy this to a digital server so the reason we need to deploy this to a server before we can start implementing the payment Gateway is because uh we need some sort of verification page that we can add into the G payment Gateway in order for them to confirm that we actually are a page and similar so we going to go take you through all of that uh we going to set up a base template and then index front page template and and for the creators I want the creators list page and I want the creators detailed page and I want the my page and edit my page but before we create this we can the log in and a sign up page so I think that should be a okay Overlook of what we are building so let's just save this now and start with this task which is creating the environment so to create an environment I just python 3-m Ven and then EnV which is a name I almost always use for the environment and hit enter not sure how you do this on Windows but I think it's fairly similar if not you can just uh search for this plus windows or how to grow the virtual environment on Windows then in this virtual environment it's much easier to install python packages like Jango so we can have the same version of Django locally as on the server now that this is created you can see that we have this folder together with this file so let's activate the environment by saying source EnV bin activate and you can see here that the name of the environment is there which means that now it's active and we can install Jango by saying pip install Jango so this will not work now because I am not connected to the internet so I need to fix that iPhone plain and simple name I can try again pip install Jango collecting Jango so now it's downloading everything perfect so right now I'm on Jango 504 if yours is python sorry Django 4 I think that's more than recent enough if it's a little bit higher number it's probably going to work as well because typically there aren't a lot of breaking changes in Jango okay so when that is done we can create the empty project by saying django-admin start project buy me a noodle okay so then I just want to go into that CD P Noodle and python measured by run server then I can copy this address and open it in a browser okay so the install worked successfully congratulation great um you might wonder why you get this here it's because we not initialized the database so we can do that before we continue python mentioned by migrate so if I now run the server the warning is gone great okay so that means that I can go to the too list and set the first task to done so then we can continue by creating an app for the core pages so go back to the terminal upter server say python managed by start app core and then we can run the server again go back to visual studio code open up the jungle project open up the jangle project folder in there with the same name and find settings.py um for core to work we need to append it to the list of installed apps there all already are a few which comes from Jango which makes it possible to authenticate users use the admin interface uh support static files Etc so I can just close this one and find core um we can begin by creating the view for the front page that's sort of the order I like to do this in even though I said um in the to-do list that I going to begin with the base template we can begin with the view for the front page So Def index request and then we just return render render which is a shortcut that's already imported up there pass in the request parameter again and then we specify the template we're going to use in this case it's core index.html and save so now we can create the folder for the temp temp plates templates and in there a new folder called core and Jango will automatically look for a folder called templates inside each of the apps that we have um so we could put the templates in there but if you have a file called index. HTML there and you have another app with just a template folder and index.html it would impos be impossible to know which one of them we are referring to so that's why we're putting the core here because Tech technically we could point to other apps here if we wanted to do that and then in the core folder we say index.html and here we can begin with a doc type HTML HTML or actually let's just go to tailwind css.com and copy okay my internet is off again looks like my Mech likes my girlfriend's I phone better than mine because mine keeps going away okay online again got to C tail css.com click get started and play CDN then we can just copy everything here actually go back and replace fix the indentation fix the indentation and like also indent everything inside HTML have a space between head and body and save so now we have a view and index at HTML next I want to set up a urls.py file inside the core app so urls.py and then we need to import a thing from Jango from Django do URLs import path and Pa is a function that Jango uses to find uh or take a URL and find a view to present to the user now we can import all of the views from this app so from do import views so we just import the whole file we know that there are not a lot of views in this uh file here that's why we can just import the whole thing if not we could for example say from views import index to be more specific but I like to just say import uh sorry from do import views so we just import a whole file next I want to set up a App name so we have some name spacing here so it's easier to reference the views for this specific app and then the URL patterns this is then a list and we can begin with the front page which is empty URL and then we say views. index name index and I want to show you how you use app name and this name combined to reference this then we just need to do one more thing before we can test this and that is to add this into the urls.py that you find in The Bu me a noodle folder so here we can say po up then we include core. URLs and I get a warning here because we have not defined include anywhere this is also a function we can import from Jango URLs together with path so what happens now is that if the path begins with admin it will try to go in there and match any of them um next if the pot is empty or anything else it will go into this file and if it matches this one for example when we are on the front page it will use this view here render this HTML and present this to the user so if you just go back here now you can see that this is still running I can go here refresh then we get the hello world okay this is getting old the iPhone is disconnected again refresh now you can see that we get the tail in CSS because now we have this other font and it's an underline which is what we specified there okay since we don't want to redo all of this in each of the templates we want to have a base. HTML template that we can extend and reuse so in this core folder we create a new file called base. HTML now we take everything from here just remove and save and paste it in the base. HTML if I go back and refresh it will just be empty so we need to extend the paste at HTML by saying Cur bra per extends call 4/ base. HTML refresh so now everything that it's in here will be rendered in here nice so now we can do a little change on the base. HTML here in the top we can add the title tag and say block title pipe this into something called buy me a noodle and Save if I now go back and refresh okay uh forgot to close it sorry just close it at the end here block and refresh so now you can see up here that we get the pipe sign and buy me a noodle so now I want to copy this block here go into index. HTML and say welcome if I refresh now you can see that welcome is there so anything that I put in this title uh title block will be rendered inside here in the based of HTML file um the body I want to have a background color here so BG slate 700 save go back and refresh okay that looks a little bit better at the top of the page I want to have a menu so we can create that in the base. HTML file just remove this H1 and replace it with a nav tag say close py8 so we get some space above and below px8 so we get some spacing on each of the sides um and I want this to have a slightly darker background than the main background so BG slate d900 and in here we can create a for the logo a hrf this can just be empty for now and have a class text to excel it has a little bit of size text white so it's not black and font bold buy me a noodle save so if I go back and refresh now you can see here that we got the space above and below is the py and we're spacing there which is the PX um next thing then is to have a little menu on this side so below this div I create one more div so give this a class of space-x D six so there's some spacing between each of the elements in the menu a hrf this can just be empty for now as well close p-4 px-6 because I want to make it easier to click these elements that why I have some spacing inside these as well text can be large or LG font bold text white creators save refresh okay problem now is that it's here and not over here how can we fix that we can fix that by making this navigation bar into a flex container so here is a flex and flex row to make them next to each other I want them to be on the same line so items Das Center and save refresh so now they are on the same line at least then I just want to take all of the available space here and put it in the middle of them to do that we just say justify Das between and save so if I refresh now you can see that all of the space that's available will be B between this div and this div okay then I can make a copy of this link and replace the title with log in nice and we can also have a button next to there which is the sign up button so just paste this one more time as a sign up but here I want to have a background color so BG Sky 800 and rounded dlg perfect it looks or at least it's starting to look like a site before we start building anything down here I just want to activate this button here to go to the front page so we want to use one more tag here called URL and I want to use uh the the app name or the Nam space called core and index so what this does now is that this function finds this app name and it finds it there and then it takes the name of the view that we want here so core colon index will point to this and generate this URL for us and save so refresh now you can see that if you click this you will just be redirected to the front page great below the navigation bar I want to have a main tag main class py- 6 and px8 we have the same spacing as the menu in here I want to have a div with a lot of air because this is going to be a big hero section div class py2 and text Center space- y12 so the elements in here will have a lot of space between them in the vertical Direction here I want to have H1 and give this a close of text 7 XEL which will make it very big text slate 300 so it's a brighter or lighter color than the background and F bolt and then in here we just say get paid for your work save go back and refresh then you have it here perfect below here I just want a simple slogan or some more information so let's go back and below here i a p class text Excel text slate 400 so this is a little bit darker again just to separate this from each other and here is this is just some random information to show how it would look like with some actual content save and refresh then here you can see that this looks a little bit darker and the space between these comes from this class space y 12 below here I want to have a button that should go to the sign up page so a hrf this can just be empty for now here is a class of py8 and px12 so it's little bit of a big button and text- XL text- white and BG Sky 800 and rounded dlg create page refresh okay so now we can see that there a little bit of a problem why isn't the space 12 between this it's because that an anchor element is an inline element and they don't consider space around them the same way as other elements does so we need to convert this to be an inline block element refresh again and then we get the same space between there perfect below here I want have a short list of the different creators or the four newest creators so we can go below this div create one more div close py- 12 PG slate 800 so is sort of a a container that's that is a little bit separated from the other content add an H2 with a class of mb12 text 5 XL text slate 300 text Center and font Bol the reason why I don't put the text Center there is because I don't want all of the content there to be in the center and the same with this one instead of using space Y-12 I use margin bottom on this one because I only want the space to between be on the bottom of this and not the other elements in here we can say newest creators so there we have the box with the BG slate 800 and H2 title then here I want to have a grid with four users or four creators below here is a div class px-12 so we have some extra space on the sides here make this div to be a grid and the grid should have four columns grid calls four and the gap between each of the columns in here should be eight now you can Again by creating one in here div class PG slate 600 rounded LG just add some random info there then you can see here that it takes up 25% of this box because we have this here grid columns at the top in here I want to have a figure element with an image inside so in SRC and and we have not set up the static files yet so we can do that before we continue so inside the buy me a noodle folder where you have the managed P we create a new one called Static and in there a new folder called images and in there I just paste a random jpeg this is so for dog and then we just need to tell Jen that we want to use this folder for static files so we can configure this in settings.py scroll down and find static URL so all urls beginning with static is considered a static files so then we can say static static files dors I think um let me just try to Google it Jango static file there look like that is correct and this is a should it be a list so in here we can say base there SL static so this variable is defined at the top here and should go to the root Jango folder and then we just append static at the end there so I think we can save that and we can say in here we can say static and in there Images slash then just the name of this picture profile Pi 1. jpeg close in think I will get an error now if I try to refresh yes you can see there it's not loading um we need to tell D Jango that we're going to use static files in here so above here you can say load static save go back and refresh it's still not working fail to load it doesn't look like it tried to yes I can see there actually I forgot the percentage sign refresh and now it's loading there perfect okay so then we have the image of the dog there I want to R rounded corners on the top of the images so for this image T we can say close border DTR LG so border top right should be large um it's actually rounded trlg and rounded top left LG save and refresh perfect if I can go back here now and below this image I want to have a little box with information about the Creator so I need to create one more div class py- 6 px-8 and space- y-6 there space between each of the elements in here you can begin with the title H3 class text Xcel text slate 200 font bolt give us the name John Doe or John dog P class name text slate 300 and this is just the same random information as we have up here so you can just copy and paste and at the bottom here I want a button for reading more about this particular Creator so a hrf should just be empty for now give us a clause of p y-4 p X-6 remember to use the inline block to make this a block element text is Excel and the text is white and the background can be BG Sky 800 rounded DXL and add the content read more see if we save now refresh looks almost good we have a title more information and a read more button perfect so can duplicate this now that will be this St inside the grid paste this three times go back and refresh and then we have a list of the newest creators perfect last thing I want to add here now is the footer So Below the main here we can say footer and this should have a few class names so class py- 6 px8 um in here we can just text Center at paragraph class text slate 200 and in here we can just say copyright C 2024 Dash buy me a noodle save refresh you can see that at the bottom do have a background C color on the footer PG slate 600 save and refresh okay I don't think we need to do anything more here now the last thing before we can continue to the next task is to move this into the index. HTML file so let's take the main or actually just the content of main cut and save and in index at HTML we can paste it there and save refresh and it does not work first I get the invalid block tag static did you forget to register it yes we do not need that inside the base. HTML anymore so take it out of there save and paste it below the extends refresh so that looks a little bit better because it's working now but where is all of this we need a new block for this so we can create it here first block content and then just close it at the end of the file and block and block still not going to work because we have not created it here inside the main so block content and block and save you can use as many blocks like this as you want there perfect so now this base. HTML is a little bit more reusable for other Pages as well anyways let's go to the D list now and set this to done set this to done set this to done before I continue I just want to say thanks to all of my patrons if you do want to support me you'll find a link in the description below nice then I want to create a new app for the creators so stop the web server say python manage The Bu start app creator Creator in singular not plural form and then we can go back here and add this to the list of install apps just like we did with core creator and save um here we should um yes what's the first thing we should do here now want to make it possible to log in so we can create the template for that and open up core create a new folder called templates and in there a new folder called Creator and in there a new file called login. HTML so this should also have a few of these things so we can copy all of this and just paste it in here and say login instead of Welcome leave this empty for now and save so D Jango comes with buil-in functionality for logging in users I have a tendency to forget the path there so let me go to Google and say Chango login view um okay let just open first St overflow of course the import wasn't there okay let's go to the dock login search for login View here is what we want we want this o views so we can copy this one go back here to the terminal not the terminal but Visual Studio code and into Creator here we need to create a new file urls.py and paste this here next we can import poth into here as well so from Django import path set up the app name to be Creator and set up the URL patterns PA and when the path is log in slash and we want to use a view called Au views. login view do s sorry S View um as you can see here we imported this as views but so this should not crash with the folder or file call views we used an alias called what views uh in here I think I can specify a template name and say Creator SL login. HTML set up the name to be login like that and I use a buil-in Class View that comes from D Jango and we just alter it a little bit by passing in a template name um in the main URLs file that's this one we need to import it here as well so part when this is empty we can also check here include creator. URLs so first it will check everything in there if there are no matches it will go in here so let's just close that for now and then we can activate the link up in the menu this one URL Creator which was app Name colon login close that one so if I go back and refresh I should be able to that is not working there is some okay I forgot to run the server again sorry refresh again click log in and then I'm here again so that means that is now working because we are presented with this template that doesn't have anything there you can see ASDF ASDF um we could just render the form here very quickly but first I want to wrap this in a div uh I want to have a big title on each of the pages so py D20 text Center space close that and in here H1 CL text 7 XL text slate 300 font bolt log in if I go back and save now you can see that we get this perfect and then below here I want to have the login form da close Max w LG so maximum width is large and then M Max all to to Center this inside the main um I want some spacings and here's a px8 and BG slate 800 can just save and test now you can see here now this is done large width and we have spacing in there and is also used MX O2 to center it in here now you set up the four form tag close space- Y6 close the form and in here we can say um form. s-p so form is a buil-in variable that we will get when we use the login view like this and we say SP to uh render is as paragraphs so you can see here that we get username password like that but this doesn't really look good so I want to do this manually so we can change it a few things um we can copy the HTML for this to make it a little bit easier for us so remove this and then we can say div class space- y4 and oops close like that paste the label and in here we can copy the HTML for the username um I just want to add some claes to this one so Clause pass in w- full so it fills out the whole box py6 and px8 PG slate 600 so it has a different background color than this set the text to be default White font pole and rounded LG nice um copy this one for the password so you can open up that paragraph as well addit paste it in there and add it as HTML copy and paste and close we can copy the class names from here and just and it there so we can save and refresh that looks already at least a little bit better but we need some more space in here somewhere um I think it's this one should have a py 12 no yes okay just a refresh that was I space there and there and we need to make this white so for both of these label we can say close and text LG and text- white save and refresh and now it looks like a proper login form last element we need in here is the log in button so let's add a new div and button class w- full py6 px8 BG Sky 800 set the text to be white set the font to be bold and rounded DXL and Ed title submit refresh and the problem now when we do this is that we probably won't see any errors um so just Google Chango login view show error manually or something like that how to display errors I don't want to show anything else there yeah we can probably just do something like this so if there are any errors if form do errors we still have this variable we can div class py 6 px8 BG Amber 600 text white uh like that username or password is not correct Al add a rounded dlg this should also have LG and not Xcel go back and refresh try to submit try to the username and the password okay the error is not showing no that's correct because we are actually not trying to submit this uh form method should be set to post and set action to be dot which is the page we are on so if I now try to do this then I guess the csrf token is missing of course since we're doing a post request we need to add the csrf token tag here like this so this is stand for cross site request for jury which makes it impossible for other domain names to insert or send things to us let just remove this from there refresh add something in here submit and then I get username or password is not correct nice and okay but it's hard to log in a user when you don't have a user so let's just jump right to the sign up form um Jango does not have a view for creating users like this so this is something that we need to create manually in the views not this one in the views for the Creator we can create it there def sign up pass in the request parameter and just return a template first and first so that's done so return request sorry render of course and here we pass in the request parameter Creator SL sign up. HTML and save so then we have that um Next Step then is to import this into the URLs here PA and Pa is sign up then we want to use views do sign up set sign up not sing up sign up name sign up get a warning here now because this is not imported so from. import views now we can open up base. HTML to activate the sign up but Button as well URL Creator colon sign up and I think this is also somewhere in the index.html yes down there where we have this create not that one sorry this one where we have the create page button so save and refresh we can click this now and we will get an error because we not created the template yet okay so um how can we create that now um we can first make a copy of the login template they are quite similar so call this sign up. HTML replace the title up in the browser with sign up and the title there sign up refresh and then we have the username the password um here we want this to actually be called name password one ID password one and ID password one and copy and paste and instead of saying password one we say password two password two and password two and the title can be repeat password and save refresh Okay so here we don't have a variable called forms so we need to get that we need to create a new file here called forms not in the template but in this app folder forms P now we can extend because Jango has a form for us that we can use so Chango create user form user creation form form that's the correct one Chango user creation form okay how do we use this looks like we have information on this page no that was not a lot of information that's okay there seems to be something we can use somewhere else okay I actually don't need to handle okay good sorry about this just close the forms. pi and delete it move to trash and in view.py we can just import the user creation form so from Jango do contrib do. forms import user creation form then in here we can say form equals user creation form now we can pause it in to the front end like this form form so now we have that variable and it should be ready to be used almost um as you can see probably somewhere here this should also be expecting expecting a user s password one password to and a username this is if you just do a Custom Creation form which is not something that we are going to do then in in here uh the problem now is that if you try to sign up you can see here that we are not doing anything with the information that we get so you need to check here if the request method is post or get so if request. method equals post that means that the form has been submitted um if not it's a get request and we can have an empty initialization of the form but if it has been submitted and we can say form equals user creation form and pass in request. poost that means that all of the information inside the form here will be put in here and Jango will handle the rest for us now you can say if form do is valid that means that yes everything there is valid and we can continue to register the user just want to see how this is done form Dove yes that's okay form. save um so now we have created the user okay and when that is done we can redirect the user to the login page so return render SL login or we can say core colon login for Jango automatically find this not return render but redirect redirect this is also a shortcut that we can import from Jango do shortcuts together with render um the problem here is that this is probably not the correct one so let's try to find out how we can show the form. errors there were no information about that um here is a little bit information on how you can usern name errors okay it's not really important right now but um the username is already ready taken or there is something wrong with your passwords so they can either be too short and don't be strong enough assembler or the username can be taken um save and then I think we are ready to test this so refresh username code with Stein password submit okay reverse for login not found login is not the valid function or pet name so that did not work it's supposed to be Creator login but I can't refresh now because the user should always already be created but we can create one more Stein over now I was redirected here great which means that the creation of the users are working so let's create one more or log in with the user we created submit okay you can see here that we are redirected to accounts SL profile this is sort of the default page we are logged into in Jango so we can change the default page by going to settings with pi and say login redirect URL equals Creator Creator colon log in um that is not sorry let's do that core index login URL should be there so this is the URL for the login page and this is where you will be redirected after you are logged in think this should work now let's try to just refresh and log in again yes now it was redirected to the front page perfect as you can see this is not very mobile friendly but that's not part of this tutorial anyways we should now be logged in and we are when we are logged in I don't want to show the login and sign up button so I want to fix that by opening up base. HTML and can say if not request. user. is or authenticated indent them in there to make this as clear as possible so if the requested user is not authenticated then we show this which means that if a refresh now those two are gone because I am authenticated perfect so I can also this to done and I can set this to done like that Next Step then is to create the Creator's list page and we can create that right now before we make it Dynamic um open up index.html it will be very similar to this you just copy this and inside the Creator folder there we create one called creators. HTML and paste it here I do not want the button and I do not want the information like that but we can change the title to creators and the title up in the browser also to creators then we set up the view for this by opening up views.py and say def creators request and here we can just say creators equal no we don't have any creators in the database yet but get creators and then return render request Creator SLC creators. HTML and save last step or almost last step is to import this into the URL file po creators slvs do creators and set the name to be creators so then I just need to activate the link up in the base. HTML file and we are good to go there URL and Creator colon creators and save hopefully now I can click this and see creators and instead of maybe don't actually need tight in there at all let's just get rid of that like that so if you add one more of this creators here you'll see that it will be put on the next line and the grid will take care of everything for us perfect um I think we can start making things a little bit Dynamic now before we continue building anything more template so um we need to create a model for the creators or the pages um here need a reference to the users so from Jango do contrib o. models import user class um Creator which is the name of the model POS in models. model and I want each of the page to have a title title equals model. Char field set max length to be 255 ma l55 um I want all of the pages to have a description mod. text field um this might not be uh required we can blank equals true and null equals true so this is more optional um I want all of the creators to have an image so image equals models. image field upload to and I want all of the images to be uploaded to sub folder called uploads slash creators like that we don't don't need a slash at the end and I think this has to be required yes we want this to be required and we need a reference to the user this Creator page is uh referenced to so Creator equals or we can say user so it doesn't crash with it this name models do forign key user so we pass in this model which is the for example the code with Stein user I created set the related name to be Creator so it's easier when you have user to get a Creator model for that um maybe this actually should be a one to one field because one user should not be possible to have more than one page so let's keep it this way and on delete mod. Cascade which means that if a user is deleted this page will also be created now we can have a created at models. date time field Auto now add equals true just so that we know when this Creator was created okay it's good so now we need to update the database okay first thing I see here I get the warning now we need to install pillow here so just copy this paste and hit enter pillow is a python library for handling images in D Jango for resizing or just general saving images and similar now that is done and we can try to run python mentioned by make migrations to create the migrations file so I can see here that we want to create a new mole Creator and to run this we say Pon Man by migrate so now the database is created for this perfect and then we can go into views. p and import a model here from Models import Creator and then we can say creators equals Creator doob do all post them in here Creator need add this Ines creators creators so now this variable should be available to be used inside the creators. HTML here so we can remove all of these hardcoded except for one and then we add this in a loop so for Creator in creators and four so and the four Loop then we can here say Creator do title which then refers to this one the image something we want up here so we can say creator. image. URL which you can't see here but it's a variable or value that we get automatically from D Jango and then we have the description as well so creator. description description save um this will not work or at least it want crash now but we don't have any creators into the database because we only have users so for each of the users we also want to create uh a a create um Creator so each of the users we want a Creator so I think that um for the next step now just want to see the Todo list creators list page this is sort of done um we can do something like this move this up move this up save and on the front page of this core we have the index here um you can say if request. user. is authenticated so here we know that if the user is authenticated then I also want to check here if you request. user. Creator or if not I hope this will work I'm not sure I haven't tested this but hopefully this will check that if the user doesn't have a Creator then we will redirect you to the edit page where one will be created so then we can say return redirect Creator colon addit let me get the warning here now because you need to import this save this will probably give some sort of error user has no Creator that's okay um but how can I test this without this crashing May B just can say Creator equals request. user. Creator and wrap this in a tri catch that's not very elegant accept exception so if this doesn't work then we will be redirected let's try this again then I just get the reverse for edit not found it's okay because we haven't created this page yet um in here in the Creator in view.py we can create one more page here called def edit Plus in the request parameter and just return a template for now edit. HTML save set up the URLs for this path create can just say edit we don't need anything more views. edit name addit save and refresh and then we get a template doesn't exist perfect and let's copy the top up here we can copy everything from there create a new file called edit. HTML paste replace the title there replace the title there and just add some random info in there close the end block so now we have the edit page as well perfect um the problem now is that if we don't have a user we don't have anything to show here either um I think that we need to create a form for handling the these fields for us so I want to copy these here now create a new file there called forms. P just paste them here for the reference then I want to import one thing from Django from Django do um DB do not sure from Jango forms import model form and from dot models import create then we can create the forms and close Creator form pass in model form and then we need to specify which model we want this to be based on and to do that we add a sub CL here called meta for configuration say model equals Creator and then which fields we want to use and I want to have the title field there I want to the description I want the image field uh then this will be added automatically so we don't have to think about it and this is something that I want to add manually so keep the last comma there since this is a tle and that's how you should do it in Python so save this now copy this name go back to views.py and import it here from dot forms import Creator form here we can do a little bit of things we can say form equals greater form and pass it in here form form inside the template for this which is a it you can say form method is post the action should be the page we are on and ank type should be set to multiart SL form Das data and we need to do that because we are going to pass in images here so we can close this like that find the login and just make a copy of the button the rest I want the jangle to just render fors so form. s _ P if I refresh now you'll see the title and description and the file for choosing a file if I appears a text white we would at least be able to see the title the description and image great um we don't have a page now so how do we handle things now I think the best way is to go back to views.py here we can say try Creator equals Creator doobs dot get um or no just request. user. Creator accept acception if the user does not accept we just want to have an empty form if the user already exists then I want to say that the instance should be Creator which means that we just pass in the information from this user into there and the form will be pre-filled with the title and the description and the image now we need to handle this storing um for this one we can say if request. method equals post post and form equals Creator form pass in request. poost and request do uh files which will be the image if form is valid and form Dove if this is not a postest then we have an empty form um this will now crash because we have not specified the the user so instead of saying it like this we can see Creator equals and then here we pass in um commit equals false because then will not be stored in the database and we can say creator. user equals request. user Creator Dove and now it will be stored into database with this as the foreign key or the one to one key for the creater pay then on the other hand up here if this is a post request then I want to do this a little bit different form equals Creator form PA in request. poost request request. files and instance equals Creator else and here we can just say if form is valid form Dove okay so here we pause in this information but since we set the instance Jango will know that we are updating instead of creating like we do here here we are creating instead of updating we passing the instance because we want to form to be filled out in the template when this is done we can redirect this back back to for example the front page return redirect core index and the same goes with when we have created our page then we redirect us to the front page okay I think this will work refresh there are no errors my okay you can't see anything in there that is a little bit of a problem problem um I hate how difficult it can be to change forms in D Jango but I don't want to spend too much time on that since the most important thing in this tutorial is how to implement a crypto currency payment Gateway but if you say text black instead now we can see it there okay text blue let's go it look horrific blue 500 and we can see the text and we can see the text in there so at least that will be working so my page my description and choose file that did not work okay so I can drag it over there maybe it's just something in my browser right now my page my my description and submit darn I forgot it um in here at the top we need a csrf token go back and refresh my page my [Music] description okay let me just pull the image down like that and submit okay so was redirected here which means that it might work yes my page this is working we have to read more um okay so why is the media file not working let's check if it was uploaded we have the uploads folder and the creators with this one in there perfect actually I want this to be in a file folder called media so just move it in there go back to visual studio code and find the settings P file we need to configure this just like we did with the static here so media URL media slash and media root so we don't do the static file there but media root equals base there SL media if I save now and refresh it still will not work and this is because D Jango is not made for uh serving media files but since we are just in development now we can do some changes in the URLs file here to make it work um at least for now so I always forget the Syntax for this as well as everything else almost I'm too old so if I find a random repository I know that I do this every time in there and find settings no not settings to P but urls P just need to append this static function at the end of the main URS pattern then we need to import settings from d jango.com and I need to import static from D Jango doc. url. static um so now that should be working and I can refresh and then we see the beautiful picture of this do and we have this page perfect so now I think that we can set uh the to-do list task to done actually we can try to edit my page again let's go to slash edit can see here now these are filled out already and edited submit let's go to creators and then you see that this is edited perfect um before do my page we can do creators detail page and to create that we can modify one of these Pages a little bit so copy everything in the creators. HTML create one more called creator. HTML and paste it the title here should of course be creator. title and I want this to show up in the browser as well I do not want this same grid here or at least not this size but I do want a grid in here um here we can set these two it is and then before I continue doing anything else there I want to add the image of the Creator up here so we have these three class names let's remove space Y and the text Center I replace it with a grid and a grid calls three and items Center on the right side I want to have a figure and it gives a class of call span one because I only want this to take one third of this div IM SRC and this should be creator. image. URL class rounded l G next to this one I want the div set a class to be called span two because I want this to take 2/3 of the screen space y 12 text Center close the div below the title and the title can just be like this but below here I want a paragraph which can be the same as we have on the front page but instead of this text I want the description of the user or the Creator so creator. description so we can see what this looks like soon before we add anything more down here here I want to support buttons similar by the way we can create the view so we can have this below the list of creators def Creator uh request and PK which stands for primary key which is the ID for the user Creator equals uh Creator doob doget where primary key is primary key so this refers to the database field primary key and this is what we get from the URL and we can just return a template just remove these three SS here and save if I go back and refresh now nothing will happen we need to make this clickable before before we can test so open up the creators. HTML and say URL creators code on Creator and to pass in the primary key we can say creator. id id is the same as primary key so you can also say PK here if you want to do that so I just need to add this to the list here copy and replace this and then here we are expecting an integer called PK we are going to use the view called crater and the name to be crater and this name PK is the same that we have in the name here so let's that's not working crators is not a registered no sorry creators it should be Creator colon Creator since both the name space and the name is that so I can click this and I will be sent there so see the image the information about him below here now I want to have a new title for showing support me so we can add that in here H2 close mb-12 text 5times Xcel text slate 300 text Center and font Bolt support me and then below here we can add one more paragraph just copy this and this is just some random info just add something here go back and refresh so that did not look good first of all I missed a dash there so it wasn't bold font B bold still does not look bold to me fold bold font bold there better but these should be on the same line so just remove everything here so has to do with the grid nice this text here can also be on the center so text- Center ENT great and then below here I want um three buttons for clicking support div class mt-12 so it has a space up to this one Flex Flex arow space- x-4 items Center and just defy Center so that they're on the same line and they are centered on the screen and they have some space between each of them a arrf can just be empty for now class p-4 px-6 inline block since this is an anchor tag text can be XL text white PG Sky 800 and rounded dlg and the title for this can for example be by me uh one noodle $1 copy this buy me two noodle $2 and buy me five noodles for $5 great so click this to be sent to the payment page um that was it so then we can go to the too list and set this to done next up them is to um set the my page so I want have a button up here that should take you to my page when you are authenticated so we can make a copy of the Creator oops Creator page copy everything create a new template my page. HTML and on my page is where I want to list out all of the people who has supported you um then here if request. user. is authenticated then these links will show instead a arrf we don't have a URL for this yet but let's just say URL Creator code on my page close this and then we can copy this let's copy the classes for the button so it looks more like a button and not just a link my page save and refresh um and if refresh so now I get the reverse for my page not found that's okay um if I then go back here again now we can replace this title with my supporters and instead of having these listed out one by one as buttons we can change this here a little bit we can still have the margin top but we can set the text Center text White space- y5 in here we can say p class text- XL and then we want to show the name for John do.com one noodle equals $1 and when this was created March or April 12th 2024 okay let's create the view for this def my page request here we do not need an ID because we just going to use the user who is created so Creator equals est. user. Creator return render request Po in uh Creator SL my page. HTML and which Creator this actually is like that I want this page to require that you authenticated so here we can add something called login uh login required which is a decorator we can import from Jango from jango.com trib do. teaters import login required so now you need to be logged in to get there and you will only be able to get your own page so we canot refresh yet because I need to add this to the URLs so we can add this for example just at the top it doesn't really matter my page views. my page name my page and say now I think I can refresh click my page you will see your own page my supporters who supported you like that maybe we can also make this a little bit better by adding HR here as a p close text XL font bold and total colum $1 save and refresh I have a total of everyone who has supported you as well okay and most of the things here are now done and we can start uh working a little bit more on the payment before we do the payment we need to deploy this project to a live server on for example digital otion Heroku or render okay so the Bic page now is more or less finished we have to do more stuff later for the payment Gateway a similar set up some models for the supports Etc uh right now I want to do the deployment I'm just going to stick with render which is a service you can try for free if you want to do that um you can try to deploy this project to digital ocean if you want to do that I have a few tutorials on that as well or if you are familiar with Heroku or any other services feel free to just use one of them and before I start doing the deployment itself I want to go to the terminal I have stopped everything here now and as you can see I'm inside a folder with manage.py my environment is activated and right now I want to get all of the packages that's installed for this environment so pip freeze and from this I want to create a requirements file so run this command again and make sure that all of the content is put into this file requirements.txt or if you want you can just copy this go to visual studio code create a new file there and paste it if you want to do that um here I also want to include one more thing that we're going to need during development that is gun corn or G unicorn which is really it's how it's pronounced um I need to Google what version to use pip install I think it's 2120 that's the newest one so just put that in there um I think some of this is going to fail after we have deployed it but that is okay for now we're going to have to come back and forth a little bit so if I not just go to the browser and find render doc I think it's yes your fastest path to production this is actually insanely easy to use for deployment especially when you're just testing this out for free under the pricing you can see that for individuals it's free to test I don't think you get um place where you can store information or images so it's just static files but that's enough at least for this tutorial so we can just click get started and then we need to log in you can log in with GitHub gitlab or Google or just an email I'm just going to use my GitHub account um there um you might have to go through some verification or similar I just did this another time but now I'm here so here we have a few things that we can set up and for this D Jango project we're going to use a web service so new web service and I want to build an deploy from a git repository yep that is what I'm want to do so select this one go next and then I can either connect to a repository or I can use a p public repository um this project isn't yet on Gib so we can do that if you go to github.com if you don't have an account you can create one and then create new repository then I want to set up a name which in our case will be buy me a noodle that is available I set my to public because I want you guys to be able to see the source code but if you set you to private I think you just need to use this instead of this so then you can see down here what we need to do to create this so we can begin by copying this go back here so now we have a simple read me file with just the name of the project then we can initialize get so we can get status you can see all of the files that will be added to get I get add get status again now you can see all this in a little bit more details so all of this will be pushed to get now I need to run a commit and then we need to set up the branch it's not mandatory to use name main but that's what we usually do then we set up the URL and then we need to push the code to get okay okay that did not work authentication failed um invalid username or password okay GitHub so how do I reset this um I don't need to use a personal access token I know that but why doesn't Okay you probably won't get this problem so let me just try to run sudo git see if that works yes now I need to F fill in my GitHub username and I also need a GitHub access token so I need to go to github.com this is something you might need to do if it's the first time you use this so settings scroll down to developer settings and personal access tokens I like to just use the classic ones I can create one classic create the password for logging in here and then I need to set the name for this token so it can just be called it St tutorial expires and the only thing down here we need is this repo which will fill out all of these as well so generate token and copy what you have here so then you can paste it in there and then you can see all of the code was now pushed to get and if I find the repositor here and refresh you will see that all of the files including the requirements is here now perfect so now I can copy this um or I can let me just try to use this I want the render to have access to all of my repositories or maybe only select one yes and I want to give it access to buy me a noodle so install you are being redirected perfect so then I can probably connect to this one name buy me a noodle this will be the domain name I think that I will get here on render which region I want this to be deployed to the branch I want to deploy main you can see the name of the branches here mine only has this one now um root directory that can just be the one that we have here because here you can see the manage P Etc um here you can also see that it automatically understood that this is a Python 3 or Jango project and it's going to run this to install the requirements file next is going to need to run a command to run um G unicorn so you just need to swap out this G unicorn and buy me a noodle wsgi colon application doup application so this is the project name this is a file located together with settings. p and the URLs file and this is a function inside this file I just want to deploy this to the free server you can see here that I get a little bit of CPU and a little bit of ram but that's enough for us to test here you can set environmental variables if you want to do that I don't need to do that now um can set this to Auto deploy so if I push code to the main branch again this will automatically be deployed cool so create web service so now you can see here it found the first commit that we pushed um somewhere here get commit get commit yes up here is that first commit which is the code we pushed so now you can see that this is building so you just need to wait a little bit for this to finish now it's in progress so that means I think you want one more time or one step further at least here you can see the URL that we are going to be able to visit I can try to open this in a new browse in a new tab so this will just be loading now nothing is going to happen and now it's live so now the problem is this this needs to be added to the file called um settings.py and here we can find a variable called allowed hosts we need to add it there um so then we can just go back to the terminal and say get add that dot get status we can see that now this has changed so we want to commit that get commit uh added allowed hosts and get push okay I get uh this you probably was working with you but I get this problem one more time everything up to date let me go to here again and refresh and now you can see here added allowed hosts that means that this was changed now and if I go back here again and just refresh we can see if it detected this or if we just need to wait else I can just click manual deploy and specify or click deploy latest commit so now it pull this again added allow hosts so we just need to go through the building again okay so now it's live again I can go back and refresh and then I present it with the front page see the images doesn't work here but if I go to creators it will work here perfect so that means that we can continue to the next step and I can go to the to-do list and set this to done so we're going to do some read deployments and test the Gat Ms and similar later but for now we can begin by implementing the Gateway so first thing we need to do here is to create account at cryp crypto which is the payment Gateway provider and um install requirements because you need one more package from python um what else do we need here yeah let's just keep it like this for now and but before I do this I just want to show the actual creators on the front page and not this statically created ones so we can remove these three or four first hardcoded like that and then Loop through the here so for crater in Crater or we can open up the creators page and just make a copy of this so we can paste that there and save and then we just need to go to the view to actually get the creators from the database so from uh creator. models import Creator creators equals creator. objects. all then we can append this to the context so now this will be available to be used in the template if I go here now and say run server we can continue doing this locally right now go to my page here and the front page okay now looks like I also need to add this to the allowed hosts this is probably just because now I have something in there so in settings. pi let's add the oops Local Host address as well refresh so now we can see one crator there perfect okay so now we can go to crypto.com and you probably don't have an account there so click sign up to create one or log in if you actually have one okay so you can see here that I need to enter a code here for my email it's very secure this system here so I have one email code and one from the app authenticator you probably don't need both of these when you log in it's probably just because this is a new browser for me like that um as you can see here now I have $5 that I can play around with you will also need to add some money here to test with but don't worry if you pay yourself you only lose nothing because everything will go to yourself um when you are here now we can scroll down and find something called Merchants a merchant is a sort of a store I already have one Jango courses but let's create one more now okay these are just some old payments click the plus there so then buy me a noodle create Merchant okay they can only include like that buy me a noodle let's try one more time so you have created a new Merchant get the API key create a onetime payment links blah blah blah okay go to setup so I going to create this with the website so I can go now and find the url that I have here paste it there and then a page for supporting creators submit and how do I want to confirm this we can add a meta tag on the site copy this go back to the code and open up base. HTML if I scroll to the top I can add this there and save and now we can commit the code again so get add get [Music] commit cryptus get push and then sorry sudo get push go back to Chrome again into render and then we menu deploy the latest commit so while we're waiting for this I just want to say that when you have done this it can take up to 12 hours before it's confirmed it's almost always confirmed but you have to wait in order to finish before you can continue so let's see how this goes it's still building okay so now it is live and I can refresh the front page now I should only see the one crat we actually have in the database perfect then I can go back to kryptus and click check so this worked so I can confirm now and now you can see that this is in or on moderation so now I just need to wait for someone there to go in and actually verify this domain before I can continue okay so when the project is ready I'm just going to use the demo now hopefully this will work for this tutorial then I can copy the merchant ID from there go back to visual studio code merant ID just want to have it stored here and the payment API payment API key it's a very long string like that so then I have everything that I need there here and we can continue to start working on the actual payments so if I now go back to the to-do list I can set this to done because now we have an account and we need to install their requirements and I think if I go to Google I can say pip install cor cryptus I think that's the correct one um pip in here pip install kryptus this is exactly what we need so just pip install here this will install a few dependencies as well and when this is done we need to add this again to the requirements file so pip phrase you can see this gets longer and longer but I don't have gunicorn installed here locally so let's just do that pip install unicorn so I don't deploy this without having it there pip phrase so now I can copy all of this here you can see the cryptus ETC so let's go back and paste everything in there and save so now we have the uh requirements and Next Step then is what I want to do is to create a model to keep track of all of the supports that as creator has gotten so here we can say class support pass in models. model uh first field I want to have here a reference up to the Creator so Creator equals models. forine key pass in the model name from up here set the related name to be supports so it's easy to get all the supports for one specific Creator then here I can say on delete Model mod. Cascade in case someone wants to delete their creator page all of the supports will also be deleted um I want to know when this was added so add that there um I want to have an field for amount models. integer field as you can see from the page somewhere here if I go into this user and you can see that I only have a $2 and $5 so integral field is more than enough then I also want to have a field for um if it is paid so is paid equals model do pine field default false so it's automatically set to false and I can add two fields that I want to have to keep track of things that we get from from um krypts and those fields should be Krypto masore U ID equals models do this can be a uyu ID field and this can be set to blank equals true and null equals true and yes I actually don't yes we should keep the name or the email address for the person who actually past this so em email equals model. email field this has to be filled out so we don't add blank or true there so let's keep this as simple as possible like this for now and let's see if that's everything we need so we can go here now and say python measured by make migrations and python measured by migrate great so there are no troubles creating the database tables great right so then I want to create a view for um initializing a payment and return a URL back to us in the front page so to do that we can have it here or we can create a new file called API dopy api. Pi just to separate things a little bit from Jango do um HTTP import Json response and by the I do this totally without the script so it just comes from my head so sorry if I'm a little bit back and forth but hopefully it's possible to follow along and it's understandable and I want to import a model that I just created so from Models import we can take the Creator as well if we need it and support and we can import crypto M and we import always jangle first and then python packages like cryptus so from cryptus import client and this client is what we need to talk to the back end and here I can set up um the the payment key and the merchant uu ID so merant _ U ID equals and then find the file that I created which is this one here paste it and payment key equals and that was the other one copy and paste it there next um we can create a view So Def um create support POS the request parameter and here I want to receive some post data from the front end so if request do method equals post else and if it's not then we can just return Json response success should be false but if it is a post request then we need to get the email from the user so email equals request do post. getet email like that um we can also just print request just to see that we actually get everything that we need request. poost so that's everything that I want to do right now we can say print email and return something as well true just to see that everything is working okay so let's import this into the url's file and so from dot import API and the PO is po API slash creatore support slash then we want to use API do create support set the name to be apore crate support just it's easier to separate these from each other um so then we can go into the Creator page and here I want to add some scripts and to add some scripts I also need to do a little change to the base. HTML at the bottom before we close the body you can say block scripts and block and save if I just copy this now go back here again paste this below the end block for the content then we add a script close that one as a console.log Creator page if I now go back and find the local version running that's not running now so start that with the Run server command refresh and if I inspect now click this Creator here I see the Creator page which means that the JavaScript is working perfect um when I click one of these I want to call a function that will talk to the API point that we created so um this one can have ID by um what should we call all that or maybe we can just onclick by one that might be sufficient enough con by equals amount let's create a function like this console at log bu and amount let's see if that is working amount like that refresh click to okay it looks like it is working I just need to replace with two and five so one two and five that is not working let's try one more time that is not working at all let's convert this just regular function function by amount maybe there is just something wrong at least now it is working okay so now this is working good enough so let's then talk to the back end and try to get some response from there to get that we can say fetch this is built into all browsers now um do so just Fetch and then we place in the URL for the back end which can just be SL API slash creatore support and we need to specify that the method for this is post like that then when this is finished we should get some Json back so um how do we get that fetch post [Music] Json I always forget just um Syntax for this so we need to add an Sync here as well sync function now we do that so then we just wait for the response response and here we should say data which is what we get back the URL can be moved up there now like that now we can say console log data or data colon data save go back and refresh here locally click one of these then I get the success fals back um the reason why I get the fault is because I forgot to add the method post here now let's try one more time and now it is working it's just that to get um 403 Forbidden that is probably something you need to fix before we can continue 403 is forbidden because the csrf verification failed csrf token missing um we could probably provide it B um and just um maybe I just Google it JavaScript fetch post Jango csrf token so what is the best way to do this I love everything that I can get help from at Google as long as it's good help at least so that's almost what we want csrf token let's try to do this not in the body but as part of the headers um this is probably not defined so um but I think I can say it like this no that didn't work okay so how do I get this srf token I can read from the document like that console log token csrf token save go back and refresh and see if that is correct probably still missing because can't read properties of null and that is because this is not exist anywhere on this page but if I create an empty form at the bottom here for example form method post [Music] action Dot and in here I pass in the csrf token like that then they probably if I go to view page Source scroll down and find the form you can see here is a hidden input with this name which is the one we are getting down there so that means that I probably will'll get the token now and the success is correct now because we are using a correct token to talk with the back end perfect let's fix this now so it looks a little bit better um then in the back end here we need to do a few more things let's see that we got the email now we didn't specify that for the back end um maybe we should add a field somewhere here maybe above this one live close empty 12 and then in here we need to specify a way to fill in an email address so label your email address break line input type email uh set the name to be email id id email so that makes it easy to get it down in the JavaScript so when we submit or click one of those buttons we can get the email as well so const email equals document do uh get element by ID ID email do value this needs to be poed in to the back end so const form data equals new form data form data append email and send this in like that then we can just say body form data I think that should be it let's try this code sign gmail.com by one go back here now then we can see that we got the email from the form perfect okay so now we can start talking with uh crypto so if I find the api. pi we can set up a data array that we want to send in to kryptus so before we start talk K to kryptus I want to create a support uh like uh one of the things that we have here I want to create one of these so let's import that model here we have it there and then we can say support equals support. objects. crate and we want to specify the Creator and that is the creator we are on um that means that we actually need to get the ID for the Creator here so Creator equals request. poost or are we maybe just yes we actually are on one of these create support under that's change a little bit down here here we actually have the ID for a create so we can say form data. append Creator ID and then we just set creator. ID that did not look like it's going to work so let's do a little change so open this form let's add one more hidden field here so import insert input type hidden ID Creator underscore ID set the value to be creator. ID so that's how we can get the ID there and down here we can say const Creator ID equals document do get element by ID creator ID do value now we get this value and we have it available down here so now we just need to upand it to the form like that and then in the back end inside api. Pi we can get it here Creator ID equals request. post post capital letter get Creator ID default this to empty and then we can say Creator ID equals that we don't need to specify the object writer as long as we have the ID and we need to specify the amount so amount equals so we need to send this in here as well form data. append amount amount that we need to get it here as well amount equals request. post. getet amount default this to be empty like that um is paid will be set automatically email should be the email that we get from the form this can be empty for now because we will fill it out later so let's just remove this now so now this should hopefully create a successful support for us when this is done we want to talk to the payment Gateway actually that's something I want to do before this is created so talk to crypto and create support let's just comment out this now so we can actually talk to kryptus and test out a few things first first I want to set up a data array that I want to send to kryptus amount and I want to send in the amount that we want to pay next I I want to specify an currency currency and I want to send money in US Dollars and need specify something we called a network and if you have questions about this you can find a lot of good information on crypto m.com and inside the not the there in the API a lot of this or everything is well documented here we're going to use this method for creating an invoice so that's where for need a network set up order ID currency Etc um okay so let's go back here the network that I want to use is Tron you don't need to specify as you probably saw in the documentation but then you have to CH choose this later and then an order ID this is actually something I wanted to get from here so sorry one more time move this up and let's actually create a support and when that is done we can pass in the support. ID here maybe we can also convert this to a string just to be sure that the back end want it like this the same with the amount convert this to be a string then we can specify um the URL return this is where we want to be returned to after a payment is finished so that should just be um maybe I can specify Local Host right now you can test this want to 701 8,000 that is what I'm running at slash support or create support slash success so that will be the success page and URL uncore call back this is where we get information from them so HTP 71 8,000 I will show you both of these soon create support slash call back then I want to specify the two currency that we want to send this too so we want to pay with this but if you need to convert it and yes we need to convert this to usdt like that so when this is done we can say res equals payment. create pass in the data array you see here now we get a warning because payment is not defined so we need to Define that and we Define It by Say payment equals client. payment pass in the payment key and the merchant uu ID and when this is done we can say print result and see what we get back from there so there are no errors let's go and try this out URL return URL success okay I probably did something wrong this wased to be URL success call back Ur to which web books with payment status will be sent if the user cancels we can have this as well so that should just be back to the create support page um here we also need to pass in the ID for the user as you can see actually want to be sent back to creators and then the ID there so creators slash and then here we can pass in the ID we get up here so we just need to convert this to be a format string so we can actually use variables in there and when I think about this the URL for this should be that as well and the same with this one add the comma and save sorry F and F to format the strings now we can test so refresh and and click Send set in an email address here buy me a noodle one then I get a 500 server error that's okay minimum amount is that I set one um so why didn't that work maybe it has to be one dot so let's say 1.1 instead just to hard code it for now try one more time now we got the success message back so as you can see here now this is what we sent into the server this is what we got back from uh cryptus so here we got the U ID which is something that I want to store in the database inside here and uh you can also see that the is final set to false commission is set to 2 cents payment status is set to check so nothing is actually working now but we also need this URL as you can see here which is the URL that we want to redirect the user to so now we need to get these values here so Json data equals json. loads data and need to import Json import Json and then we can say this obviously needs to be down there result then we can say print Json data dot or use like this URL is what we want and we also want the ID this one uu ID and we can specify this to a variable uu ID equals like that and URL equals Json data URL I don't think that I need anything more here right now so then we can send this back to the front end uu ID U U ID and url url before we do that we want to add this uu ID to the model so we can say below here specifi this support support. cryptus uu ID equals uu ID support Dove and then everything there should be created and we should get this URL here in the front end when that is done we can see what happens then but I think that we here should be able to say windows redirect or JavaScript open URL or JavaScript redirect to URL so how do you redirect we just use this one equal data do URL think I can just say that easy we can try it at least so let's go back here again refresh no errors type in an email address so we create a new one click buy then I got a new error okay so Json object must be string b or array not dictionary so it's already a dictionary okay sorry about that that means that I can just remove this and we can actually probably just use it directly like this save try one more time by one and now I got the URL back and I was redirected to kryptus so I can see that this wants to get 1.1 use dollars which is one 09 usdt um here I can pay with cryptus I can pay by card if I want to do that if you want to try that you need to finish this verification which I have not done and if I click back now I will be sent back to the store where we came from which is this page okay so that is some progress um we should then set up the success page and the call back page actually not sure what we get there um because we need to check again on the success page not sure how this works but we'll come back to that if we need to we can create the success page and take it from there um so below this crator we can have that def support success request print success not success but support success so we see what we get there print a request parameter like that and um then when that is done I should probably be able to get the uu ID from the database but how can we get that email address yes I know what we do post this into here in on the success page so we get the support ID here as well so now we get the Creator ID and the support ID save that now go back here I will go over this one more time soon Creator id supportor id and then print Creator ID print support ID and then we can just render a template success we don't need any variables there yet so let's keep it simple like this for now we can then create the template success. HTML Creator copy everything here go back to success we can just remove the JavaScript we don't need that here we do not need this form and we do not need this box at all this down here and the title here can just be success or something similar let's remove this grid let's remove that and success we don't need to do anything more here this should be more than enough and save last step done before we can really test this it to add the pages here so pause creators slint PK and the rest of the URL we want there is success and then one more ID in um and is the creator ID which is the name that we use in the API view oh sorry we is what we use um here and then and one called support ID like that so this is where we will be rected when the payment is finished so um here I forgot the comma yes nice spotted Jango just stop and start there is still something wrong yes I need to specify views do success support success set the name to be success there okay hopefully now all of the messes done there everything is okay restart Stein at stein.com and I want to buy one Noodle and I got information back and I was sent there this is not anything to do with us so just ignore that pay with cryptus enter two Factor authentication code so now we need to open up the app again from the authenticator confirm that thing should happen in the background we are waiting payment is paid okay good um that means that I can click go back now I sent here I'm on the Creator for page one and success 5 but the problem now is that the payment we created probably stands as not paid still so how do we fix that well we can go into the admin interface and just check it out to be 100% sure so let's register these two models there from. models import Creator and and support admin. site. register Creator and admin. site. register support I just need to create a super user that can be used to access this python mentioned by create super user admin admin admin. and then a password then run the server again let's go back to the address to admin so I have the creators and supports uh the last one here is the last one we created Creator is one amount is One is paid and similar okay so that means that this is set as is paid and the support ID that we have up in the URL up there can be checked with the database so here we can say support equals support need to import this model here support doob doget where primary key is support ID um when that is done we need to talk to the payment Gateway again so here we can create a new client let's copy what we have here go back like that so now we have the cryptus and the form and model and set up these two variables so then we can create a new client like we did here and scroll down until we find the support success now we can set up a new data array that we want to talk to here so data equals uu ID which is support. cryptus U ID and the order ID is just support. ID then we can send this in by saying payment dot sorry payment. info pass in the data array if you want to shorten down this a little bit you can do this instead so you don't have to declare this variable below here we can say print result but we need to say result equals like that so that it's assigned this is assigned to a variable if I go back and refresh now object of Type U ID is not jent serializable okay H but if I convert this to a string maybe I shouldn't have used The UU ID field validation error why um print support support. cryptus U ID I thought that we should have everything there one and five support object okay here is something weird because this is one and five this is not printed okay let's print it above here and see what we actually get there support object and then yes sorry there we have the support object and we have The UU ID so it was actually working up here as well so the problem is somewhere down here let's try to convert this to double quotes that might be the problem F and make sure that everything here is strings maybe we can do it like this let's try at list oops this also needs to be in Braes save and refresh that looked much better perfect and then we can see what we get back from cryptos this time and we have the order ID the amount blah blah blah we have the currency comments Network address from payment status paid so if this is set to paid then we know that the user has paid and we can set this support here to is paid um so then I can say if payment payment status equals let's just see with lowercase paid then support dot uh support dot is paid equals true and support do save so let's try to refresh one more time payment object is not subscriptable uh sorry was supposed to be result try one more time then we got there again you can see in the database now if I refresh this is set to is paid perfect so that means now we have actually successfully implemented the payment Gateway I can I this to don't now um make my page Dynamic now I want to get all of my payments on the page so my page user has no Creator and that's because I'm logged in with the super admin now so I can log him out refresh log in again with the user from yesterday okay what did I use my page here you can see my page this is obviously hardcoded so let's fix that and to fix it we can go to the correct views.py file that is this one we can now remove these ones remove this one we don't need to look at that and by the way this will not work live now because we are specifying the URLs like this so we should replace this with this address instead so we can actually test this when it's live like that and like that I did not use or need this because we are returned there the Callback might be for other services from kryptus that I can remove this and save then we can go back to view.py for the my page the Creator should um already have the supports available by just going into the forign key so let's open up my page then here we can say for support in supports and four print the email here support. email go back and refresh that's the live page so that was not one this one okay so it's empty it's not working because you need to change this to creator. supports. all there um but maybe we okay I want to filter on the ones that is paid so let's say supports and go and fix this in the back end instead supports equals creator. supports. filter is paid equals true then we can make this available like this save and refresh and I only got this one that was paid perfect um we can change the date to support. cre said at and the amount which is support. amount perfect um then we need this total so say dollar total and let's count this in the back end so go to view here again total equals zero POS it in here and for support and supports total plus equals support do amount refresh and it still says a dollar because we have one payment there nice so now my payment or my page is also also Dynamic um you could change out this here as well if you want to do that for example in the support here instead of just amount you could have a product title or uh similar or we can say here if support. amount equals 1 then we say one noodle else or else if support do amount equals 2 then it's two noodles ET ET and if let's just refresh there is something wrong could not PA the remainder equals 1 and this is of course Al if since this is python so now this is also Dynamic perfect um then I think we should be ready to deploy this again and test this live so get status that's a lot of new things get add get commit crypto M changes get push so sud sudo get push then everything is up to date let's go back here deploy the latest commit again while I wait here I can check my page here and see here the jeno courses which actually should be by me a noodle has now received 1.09 perfect which means that everything there is working my personal wallet is now a little bit thinner than it was and my business wallet is where you receive money which has increased a little bit they're missing two cents from here and that's the fee for the payment Gateway so now this should be live and I can refresh let's try you need to make this a little bit prettier that's not too important for me right now buy me a noodle then I was redirected and I can click here and I will be sent back we can go through with this just need to go to the app again so this is just verifying is everything is okay great and I can click here now to be sent back to the store and this is now success perfect so that means that we now have successfully implemented a payment Gateway with cryptocurrencies I hope you enjoy this course and if you did please hit like below and subscribe if you want more content like this see you in the next video e

Channel: Code With Stein

Views: 1,666

Keywords: code with stein, django, learn django, django tutorial, tailwind, django and tailwind, buy me a coffee clone, django buy me a coffee, django payment gateway, django crypto currency, cryptomus

Id: lnmkRQnpznM

Length: 155min 30sec (9330 seconds)

Published: Mon Apr 15 2024