Accepting Payment with Django and Paystack (mobile money and credit Card)

hello and welcome everybody well this is joseph here i know it's been a long time but uh all this is schools doing let me just put the blame on school anyway today we are here to talk about accepting mobile money payments to page stack on your jungle website and you could as well just take the information you learn and apply to any other website you have you'll just probably be changing the language and maybe the framework but it still doesn't change any much of return so uh in the jungle community we have pipey staff by abuela which used to stand out as the default implementation of interface with pay stack but the last time i checked it wasn't really integrating that well so i realized sometimes we are at our west end and we need to build something for ourselves now to follow along with these tutorials you need to come to pay stack and then create an account get a private and a public key and well follow up please make sure you set your private and your public key your environment variable because i don't want to be showing mine so i wouldn't actually be showing it on the screen now to get started i'll fire up my terminal you can see i have my virtual environment already now i'll head on to it so you can see i have my virtual environment already and i'll go on straight ahead and activate it and then i'll install the tens id so i need jungle and i need requests library and well let me just use jungle crispy forms but as you know what you you know it gives us these beautiful forms and all those stuff now that our installation is all done we run our jungle admin start project page talk okay well that's what i like to call it but you can choose to call it a different name and i'm initiating it in this world and we have it's set up here we're just going to add some maps to our installed apps so i'm going to create jungle python manager by start up or and then i'm going to add my crispy forms over here and i'll add my core i'll import operating system because i need it to be able to get environment variables and i'll get my environment variables that i'm getting i actually just want my page doc public key and my private key so it depends on how you saved it to your geo environment you know it's not a good practice to me showing your especially private key and your code page so i've heard in my ideas be safe so i get my case i've saved my as a pay stack secret key so this is my private key and then i have my public key now that all this is done i'll head on to my urls.pi and our import include then perform include call dot urls.pi but we don't have all the urls that buy at the moment so we have to go in here and then create url stockpile and we say from jungle urls reporter url patterns because yeah right now an empty list now i create a class payment and i need an amount i need a reference this is the reference key that will be attached to our payment so that we'll be able to verify it right it's supposed to be unique then we also need the email of the user because well p stack requires the email and then we need to know if it's verified before to cause false and well i wonder what else i should add maybe a date created in case you need it now order my stuff by this created well it's a good thing at this point to add a unique constraint over here but since this project is simple i'll just keep over it well i just do period so and then here comes a big part they save now whenever i say event is to happen we need to generate a reference and we need to make sure our reference is unique so we check if the current object does not have a reference and if it does well if it doesn't we're just going to try to create a reference so i will use the secret model auto import please help me okay not helping so let me go up and import secrets now the secrecy model is good for the generating api keys and stuff we are going to use tracking url c and we will give it a maximum length of 50 and then we will check if there is an object that has a similar reference so we do payment dot objects let's filter and we set the left to the reference you've generated and if the query sets this query set oh my hands are actually typing faster than well so if this query set which is object with similar reference exist or if it doesn't you can just bring that exists but i'm chasing nothing so i'll set the left to our current reference and then well when the while loop runs again it will know that we have a reference and it will escape this whole while loop stuff so i'll just do a save and we are done with the save now there is this problem with not actually a problem but it's a feature with pay stock nothing shows that our currencies are more or less like 100 times the actual digits so if you have like one cd you are supposed to put in 100 so they don't want any decimals but so i'll create a helper function that is supposed to return an integer and it will chance of that amount times 100 well i'm not really using my pie but i still like the hang of typing i'm still getting used to it but nobody can believe i want to try so i'll create some forms over here and payment form it's actually a model form and this model is uh so from the models the fields uh amounts and email let me make sure this shoes up in our admin panel so from the models reports payments and then admin the sites that register payments now now that our models are done and everything is done we are left with uh creating a payment object from our view we know we are not going to manually go to the admin we want our users to initiate payments so we create a function that our initial payment it takes your request which is an http request object or to import that's the job and it returns a http response response now what this is going to do is create a post a payment object so if your question matter if you go to post then please equality forms that's pizza from that part why do i keep typing this r in m anyway don't bother with me and my comments forms the payments and we are going to take in a request that post us our arguments and then we check let me make this payment form so that we don't get confused so if payment is valid then we see our payment is equal to payment 4. sorry sorry payment form let's see so we expect at this point calling the save function our references while loop is going to run and generate a unique reference for us so that we don't have to actually worry about anything and then when this happens we'll render an html template now or just to name that template request make payments html and the payments yep and if that happens to not be the case well i want my payment form to be from the payment in this case sorry phones that payment form i mean diving payment payments and then i render request initiate payment.html and payment form is going to be a payment form this is pretty clean and direct let me extend this stamp stretch my screen across so that is quite easy to see and well reduce my font size so that everything fits into the screen and it's much easier to get now now that this is done well i don't have my initiate payment.html and i don't have my my make payment html so well what are we waiting for let's head on before that i'll create a templates folder and i base that html file now i just use the default html template created by vs code and changes to payment set block content sorry oops and block content we are not doing any fancy style here just a little bit and well let me get a bootstrap cdn link and places somewhere around here so i got it from getbootstrap.com from the bootstrap docs so that's well hopefully isn't that hard to find now create two html files linkplayman.html and then initiate prevent.html this one extends based on html in fact they all do and of my block of contents oops why content and well let me load crispy forms crispy forms i'm going to need it now what all i'm trying to do over here is to display a form so i'm just going to use some classes from bootstrap so container class flexbox class i just do that justify one thing center i just want everything to be in the middle of the screen well i think this will do well let me give it a little style and wait just set the height so i set the minimum height 90 vertical height a viewport height sorry i always make this mistake with the names and i'll have a form action dot method because boost and well jungle requires our crs f c r s f but uh it happens then payment form or crispy and i have a little input guy request submit one equals submit to avoid any problems let me put this in a paragraph put this in the paragraph and of course presenter user with something like an h4 enter amounts yeah something like this yeah to make it even more epic and hr now i would hand on to my url supply and i import my views and i'll do a powerful views that initiate parents name initiate payments come here run my server and well as we just see oh there it is so i found the arrow which is you know i made a mistake and brought the pi over here so i just clear that out and for my server again so i started so i'm going to 127 and oh but for some reason it seems my uh my bootstrap did not get loaded so let me check my bootstrap link again it's active refresh now it's active but my crispy forms didn't also work i'll go into my settings and i'll set my crispy template pack to strap four and i'll come back and yeah you see this beautiful form everything all sets yeah let me add something to this button we are not doing a design pause but well nobody kills us if we make it nice so that's just about it so we can create payment i can create a payment of five and putting my email submit and it's telling me i don't have my table because i haven't run my migrations don't worry about it so let's just go ahead and run now when this form is all said and done we are going to be presented with make payment.html and we expect make payment.html to handle well relatively everything that is required of our pay stack based up object so now next time the html might be a little messy because you're going to mix in some javascript code but please don't give up okay don't give up we extend base.html again yeah we need our shop style we need our bootstrap styling and well here comes the messy stuff so i'm going to do something similar to what i had here so i'll just go back copy all this because i want to have something positioned in the center clear out all this and then i just place you an h5 make payment for in my case i'm in ghana so i'm using ghana city and i'll put in payment dot amount now i have my phone in this form she have a script but we need the link of the scripts from our page tag documentation so i'll just search for inline so please start check out my webview so i just search for inline and i'll go down to the html let's see if i can find my well there it is this this script so come back here and i'll place it here because we need this script in order to accept payments well unless you want to implement everything ourselves which we obviously don't so we create a large button oh let me give it an id and i see make payments you see that so it's actually not ours uh you can find some of that javascript right here right here but well i just want to type it my own way so i'll have my currency which is going to the ghs i have no plan if you want to set a plan you can do that and well i have my reference be my payment.ref and then i'll create an object which is going to include a key and this is supposed to be my paster probability please beware not the private key the public key the private key does not leave your server only the public key can so i'll set the email to payment that email and then the amount remember remember the amount for the helper function repeated so amounts payment amount value because we need to do some multiplication by 100 and well this helps you should need a reference which is a reference we have and it needs a callback function is supposed to be a function not taking a response that is after the whole payment has been made so you'd set the window location to a new url and that is going to be verify payments so now i just go back down and i'll do a few checks this is not really necessary for me but for you out there maybe it might be necessary so if a currency exists then i'm going to set now i do it this way because uh for some of you you might be dealing with an international system where you'd have different currencies and stuff like that so if that should ever happen these are really helpful you don't want in the small letters you don't want any problems now we are actually going to use the page doc javascript library that we imported so we say unlike was page stuck and we do at the setup what our objects and then now the only thing we are left with doing is to connect this button with this function so i'll do another click because he it's stuck and then i'll cross my fingers and hope everything works now i'll come into my views in my views from jungle configuration let's set it creation import settings and here our passing the public key settings that we stop public key but do remember that we set that anytime we when we finish executing that function in our page tag block we are expected to have a callback function that leads to a route now that route is defined with a path that has a string a stretch and well i'll name it use dot verify payment now let's go in there and define our verify it takes in a reference let me check my functions signature in the route prediction a reference which is a string and it returns an http response now what do we do here i head on to the top from the models so whenever we get a request to verify payments you first get the payment and it says get object of 404 agreement objects and the reference equals our reference now if we have the payments we can say payment dot verify payment verify the payment and then we return redirect initiate payments i use autoimport and logi but we don't have this verified payment so let's go back to our models and try to do the payment verification from there i find it to be the nicest place to have it be placed so let everything about them what they'll be about the model so we have a page type object an object because it's bigger for a larger system and we are not just coding but we are coding something that is expected to be useful so this our pay staff system is good supposed to have a simulator retail so it will verify payments with a reference of some dot ref and an amount of solder months now you check if the status is something useful you make a check and you see the amount the amount in the results divided by 100 is the same as the amount we expected the person to pay and if that issue you set the verify what's our friendship verified right verified and then you save and if solved and verified you return to if not you're going to return force well i'll just one endless now we need to create this playstock object well it's probably been a dilemma from you so from the base tag import page and we don't have it so we have to go and create it and we need our certain subject we need our play stack and we need requests then we are going to search the page.cpk is the only thing we need over here to record a certain page type secret key now we use the secret key to access all our variables like our account on pay stack and this is a url endpoint for page tax api views that we are using maybe in future there might be a different version but this is the one we are using now we can put a lot of functions over here but this time all we are going to do is verifying a payment so taking a reference and an amount well i wonder if we need a max so i just play from here let me do star x now the route to verify payment is slash transactions transaction slash verify slash then now put in my ref the reference code and i'll change this to an f string okay we also need a few headers need a few headers so and these are important very important without it your api requests will not work so authorization is better then you put in our secret key we also need a quantum type which is going to be application slash json i'll get requests just gets so we are going to get from the url we we have and now url let me set url so the base url class so we are going to get our url our headers we had this and this response that we are going to get all we check from it is our status code see if we have a problem my status quo is 200 return a channel status and user return editor else are you going to return you get a response when you talk to me go to responsibility and then we return whatever message please text centers go into my models my aeroscore so i have my p stack and my errors are stone on so i'll be stuck i'm going to my views and from jungle i import messages so i can leave message i say if verified messages are success request verification successful verification field now let's go back and do a little test so i realized i i realized i forgot to return statement over here and just go over the appearance and it tells me to make payments so i click on make payments well it turns out for some reason everything field so i have a mirror here so i use a button and well button is causing a problem for me so i just remove this button this form see now i don't have a button there and i'll try again one two three keep watching yo so i'm trying to make payments then we get uh presented with this page that test so i i'm using the test mobile money number i'll make payments and i'll wait while the authorization works and it tells me payment successful and i got redirected back but right now it seems like there's no way to tell whether the payment was successful so i create an admin account create super user i use a username of user i'll leave my email blank and i'll do a password password please don't do this unless you're doing development like i am which is still not safe so i'm going to my admin panel now i'm logging with user password oh we didn't get the message verification successful right here that's the last login see go to password payment well this is the one that was made recently and it tells us it was verified now we can see the other payments i made before as tests well some of them didn't come on the screen i'm not verified you see that just to make things a little so let's go on and summarize now after after after all this procedure after making a payment uh page tag will send you an email even if it's just a test payment so you can check in your email and verify it i've checked in mine and i've seen mine so i hope this video helps and well be safe

Channel: JOSEPH OTI BOATENG

Views: 2,201

Keywords: django, paystack, mobile money, payment, accept payment, credit card

Id: ss55JbtsoQQ

Length: 47min 31sec (2851 seconds)

Published: Wed May 12 2021