Django Paypal | Client Side Integration

hey guys so in this video I'm gonna be showing you how we can integrate PayPal into our Django websites and handle payments that way so before we get started I'm gonna show you the demo here of what we're gonna be building and then we'll just get right into it so if you take a look at the website it's just a two product website right now and we have these two books so my favorite book The Alchemist and then the Mount of Olives which is written by my brother so I'm just gonna use that as a demo here and when we select that book we're gonna be able to actually pay for this item via PayPal so the first option is to click this PayPal button right here the user can log in and will be charged the amount of the total for the book here and they also have the option of checking out with a PayPal debit card so if they click this they can add in their debit or credit card information and the user will be charged so that's what we're gonna build in the second part of the video but just to get things started we're gonna use the simple checkout method here so I'm gonna show you how we can build in this checkout system right here with a static amount and then we'll actually start integrating the backend so there's two different ways we can do this there's the PayPal server-side integration which is a back-end integration you can use Python nodejs or anything like that and then there's a client-side integration which is what we'll do here so that just lets us handle all the payment information on the front end and we're actually gonna use that data and actually save it in the database but the integration will be much easier than using the server-side I'll probably put that into another video after this so let's just start by creating this simple checkout right here that allows us to charge one cent to fake account here so we have a sandbox account PayPal lets us just create this to create fake charges and send money from and to fake accounts so we're gonna create that sandbox account and then I'll show you how to render these buttons so to do that let's go ahead and look up PayPal developer API and in here I'm gonna give you a quick overview I'm going to go too far into the documentation I will provide links in the video description but if we go here we're not gonna be on the first page but I'll actually cover this in a minute here when we actually start with that checkout flow but we're gonna go to basic integration and at the bottom of basic integration I'm gonna grab the demo code that we're gonna put into our template here this HTML should be pretty easy to understand all we have is an empty div right here that has the ID of PayPal - button - container and then we're gonna add in this script tag which later we're gonna add in our client ID into right here so this is gonna tell us which PayPal account to send the money to whenever somebody actually processes a payment so we have that script tag and then in our custom script right here what we're gonna do is because of this script tag we're gonna be able to do PayPal dot buttons and then actually render those buttons right here to that empty div so this empty div is now gonna be occupied with these buttons right here and this is where we actually start customizing things so we're gonna have two main methods we have the create order method and then the on approve method so create order we're gonna start customizing this a lot but this is where we set up our basic amount right here of one cent so whatever I change here if I change up a different amount here it's gonna charge whatever we set there so that number is going to be dynamic once we complete it and then on approve this is where we actually create the charge so let's go ahead and create the sandbox account and start adding this into our template okay so let's go ahead and do a search for PayPal sandbox and we need to create two sandbox accounts so one for the person sending the money and one for the person receiving the money so we're gonna have a business and a personal sandbox account and we're gonna send money between these two accounts and this will all be dummy data for now so you're gonna need a real PayPal account so I'll go ahead and create one login through it and then from there we can actually create those sandbox accounts so once you're logged in you'll be redirected to developer PayPal and then these accounts right here and by default you get two accounts to start with but we want to customize these so we're gonna create an account and I want to customize these so we're gonna say create custom account and from here the first one I want to be the business account and we'll just say biz at gmail.com let's see if it lets us do and we actually need to create an email and password let's just say biz Dennis that should work there okay so then we have a name so we'll create put two ends there and for the payment method we'll leave that alone there but let's just start with $1,000 so we can set whatever I'm out we want in here and we'll leave everything as is and let's go ahead and create that account so once we have the account we can actually log in through a sandbox PayPal account so let's just do sandbox PayPal comm and this is gonna give you the normal login system that you would see in PayPal so normally you would just see PayPal com but because this is a sandbox account we can now log in with that fake account we just created so it was called biz Dennis and then the email and password that we gave it and we should see that thousand dollars in the account so this is our business account say at Gmail okay so here's that account is taken a little bit longer to load I think it's because it's still processing it right here but here's that thousand dollars we just transferred into it again that's a fake amount and we're gonna log in or log out so this is the business account and we need to create one more for the personal so the type right here is business and let's create a new one we want to customize that I want to be able to use a real email or at least use an email for it and this is gonna be called personal so let's just say personal we're just at Dennis at Gmail and create a password for that and let's just say Dennis and this user let's just give them two thousand dollars so we can see a difference between the two accounts and we can leave everything as is so once this is created and processed will log in make sure both accounts are ready and have the set amount so we'll wait till that's done right there and we'll walking through here so again in sanh sandbox paypal.com we're gonna log in to our personal account here so we're gonna do personal then there's a D there so personal dentists at gmail and let's log in okay so here's our personal account there's that two thousand dollars I hope that makes sense right now we just have to PayPal accounts for our sandbox accounts we have the business one and the personal one so what we're gonna do is actually configure this business one and this account right here if we go to our apps right here or my apps and credentials here we can see the difference between two PayPal accounts so we have the live version and the sandbox account so I'm not gonna look at the live because I have a real account there but we need to go ahead and create an account right now so within sandbox we're gonna create the app that's actually gonna process this so it's gonna give us a an application key and then we're actually gonna be able to use this to set up the user so let's just say Django PayPal so that's what the app is gonna be called and we're gonna connect us to business dentist so I believe this needs to be connected to a business account if it's on a website what's going on here can't use PayPal so let's just say Django dentists and we'll make that one word because I don't know if that's gonna be an issue for us and that should all work so we're gonna create the app and we should have our access keys okay so here's the account we just created Django Dennis and we should be able to actually get the client ID and the secret key so the secret key I've used it before when I handle the server-side integration but for the client side this is all we need to paste in right here where is that demo so this is what we're gonna need to paste in into client ID so we're gonna throw that in there and then that's how paypal knows which account to connect this to you so now that we have our two sandbox accounts created we have the business one and the personal one let's go ahead and actually add these buttons into our into our template and start actually making this connection okay so for those are you ready to start coding along with me if you want to start with the same files that I have I'm gonna have the starter code and the final project code in the video description so go ahead and download the starter code and I'll actually go over everything in a couple of minutes here but it's a simple Django project we have one app called base and we are going to work with a view called simple check out and in base under templates it's simple underscore check out and the view to that or the URL pattern is simple - check out so that's gonna give you this page right here and once you have that set up go ahead and grab this div right here so the empty div to throw in our to throw in those buttons right there so paste that in and that's gonna be with the idea of PayPal - button - container and we also need to grab this script tag so go ahead and paste that in just under that div inside our body right there and in here we need to grab our key so back to our sandbox account go ahead and go to your apps open up the app that we set up so whatever you called yours - Django Dennis we are gonna go ahead and grab the client ID so we're gonna get this ID and this is gonna go just after ID equals and between this and symbol so we're gonna remove SB and we'll paste that in there so now it knows which account we're tied to and we can actually grab the buttons now so for the buttons we're gonna take everything from the script tag down to the closing script tag and we'll throw that in right here so we have our opening and closing script tag and then PayPal buttons and this ends right here and renders out to that div so let's go ahead and make sure everything's working so we have our buttons we have this PayPal option and we also have that debit and credit card option okay so everything seems to be working fine so let's go ahead and just refresh that and let's test this out by creating a payment to our sandbox account so we're gonna create a payment from our personal account to our business accounts so that was called personal dentists make sure I have that spot right and missing a D there something like weird they're so personal dentists gmail.com and the password we created so right now because we have the API key to a sandbox account it's sending it to that sandbox account right there so let's go ahead and create that and let's log in so the amount right now is set to one cent actually a dollar in one penny so that's USD so that's gonna charge that and we should see it appear right there so to complete the purchase okay see what's going on here okay so it's still at one cent let's try to change this I might have not refreshed it so let's go ahead and save that again and try refreshing the website here so close that let's go ahead and hit refresh pay again okay so that did it and it must have been just because I didn't save that so now it's a dollar in one cent we want to use the standard paypal method so let's go ahead and hit pay now and once this is processed I should see it in our PayPal account and I'll explain what happened here so let's go ahead and do sandbox PayPal and I can't remember which account I was logged into so we've got an alert there everything went well and now we have our first transaction so it's gonna appear in a second but we are - one dollar and one cents so we had 2000 and if I log into that business account that business account will now have plus one dollar and one cent so that money just transferred between two fake accounts and we made a payment so there we go Dennis IVs test store- dollar and one cent and let's recap what just and so before we do that let me pull up PayPal dev API so I want to pull up that flow chart again that we saw earlier and go to that check out section and down here so I'm gonna go over these line items here so we added the PayPal button the buyer clicks the button so we click this button right here this opens up so it says the button calls the orders API to prep that transaction so it sets up the amount it gets everything ready the button launches that PayPal checkout experience that you're seeing there so this is that PayPal checkout experience and then when the buyer approves it the button calls the PayPal orders API to finalize that transaction so if we look back at the code here's what's happening so we click the button and the order is created and then that pop-up is appears in front of us so this creates that pop-up and specifies the amount that we're about to charge when the user hits confirm on approve is called and once on approve is called this is where we call actions order capture and then it finalizes everything creates that payment and then sends the user this alert of transaction completed by and then whatever that user's name was so that's that checkout experience so what I'm gonna do now is actually customize the buttons here so we're gonna go to this demo right here and we can actually look between the client and server-side integration we'll cover a server-side integration in another video but if we go to a style right here we can actually add this style object right here and customize how everything looks so let's go ahead and copy that and we will paste that in into PayPal buttons and let's make sure to add a comma right there so this needs to be another item so if I save this and we refresh it so if we go back to our checkout setup we now have blue buttons and they look a little bit different so let's go back to that code we set the color to blue and the shape is pill so I actually want them to be rectangle so let's just do our seat either and the label there's a few different labels I'll try to link these up in the description I'll try to find them but there is code that tells us how to do this I'll actually drag in a copy of it right now so let's go ahead and refresh it and see what that looks like so now they're rectangle right there and we can continue changing the look of these so I'll drag in this link right here which I'll actually throw in and this is where we're able to customize it so there's a bunch of different things that we can add into our code that changes the way it looks so we're able to use black code right here so the black and white effect we have silver white black so again a bunch of different things that we can use to customize this so the last thing I'm gonna do for the styling is actually take out this credit card option so let's say I don't want this option I just want them to have debit or credit card and then not use PayPal credit so for that based on what I've read in the documentation we need to customize that I think we can do it from style but I found a way to do this from this script tag right here so I'm actually gonna paste in just after currency we're gonna paste in and disabled - and then we're gonna do credit and we can actually add in different things like disable debit disable PayPal and if I throw that in we should see only two buttons now so there we go we now have two buttons and we can customize the text that appears with them and if you continue going through here we have different options radio fields and we can do this horizontal look right here so again here's all the code for it and that just helps us style everything okay so as promised let's go ahead and go to that Advanced section here and let's review the code we have for this and whenever we click on a book let's go ahead and review what we're doing in each section so let's actually add in the payment options and show you what we've set up here so let's go ahead and go back to our Django project so we can close out the simple checkout and all we need is checkout dot HTML and stored HTML so in these two options if you go to the views die py file I'll actually go ahead and clean up this section so I'll backspace all we have is a store so this store is gonna be the landing page to the full website we are gonna query our database so we actually have a model CI file and in here we have a product with a name a description an image URL a price and that price is a float field and for the image URL we are actually gonna use Amazon right here so these are actually two books that are on Amazon right now all I did was let me refresh this so all I'm doing is actually just going ahead and inspecting the image image URL to the book so hopefully this doesn't change and that's where I'm actually pasting that into the admin panel so I didn't want to spend time configuring the static files and doing all that so I just got this image URL right here and if we go to the admin panel I'll actually open it up in my other browser here so give me a second have a few tabs open so let's go ahead and open up our admin panel so I already created a user and in our admin panel we have our product or our products and for the mountain of all of us we have the description that I took from Amazon and this link right here so this is just a link to that Amazon image so that's how we're rendering out these images from are not from the database but from Amazon but storing it in our models so let's go back to that and we have our product and we also have an order so an order simply has the date that it was created date/time field and it has a relationship to a product as a mini to one relationship and anytime an order is created any time an order displace we're actually gonna create this order in the database and tracking so at this point I've actually created one order so let's go back into into our main admin panel go to order and looks like we place an order for the alchemist so let's go ahead and place an order for the amount of all and if we go to our template so there's our model we have our view so it just queries all of the products and in our checkout we just query the product that we clicked on and that product ID is passed in through that URL we query it right here and then we pass it into the checkout page so if we go to our store I'll try to review the HTML in a second but we gave it some custom body background we add it in bootstrap here so we're using bootstrap code we have this container a row and we are creating a column for each book so in store we're querying all those products we're passing them in into the template through context so there's products and we just say for product in products go ahead and render the name the product URL the description the price and we create this link to our checkout page so this is where we're passing in that Product ID so that Product ID is thrown in right here through pk and it's in this URL so check out and then we're passing that in so I just want to make sure that everyone understands how we're actually getting there so if we go to the product and we go to buy now we're seeing checkout the Product ID and that's how we know what's being pulled up right here so let's go ahead and finish this up so though the store is actually pretty simple it's just rendering out a few pictures and items here and if you go to checkout same thing we're adding in bootstrap and we're getting that custom background is just a little bit grace just so we can see things a little bit better and we just create two columns are here so we have one column for the product image and then we have another column for the name and the product so this is where we're gonna add in that checkout so we're throwing in PayPal dot or a PayPal - button - container so this is where we're gonna store our buttons right here so if we go back to this section we just need to add those in here since we already have this container right here in our checkout page so we have that container all we need to do is grab this script right here and we're also gonna copy this code in a second so we'll paste this in and that will go just under our final div and I'll actually grab that client ID from the simple checkout that we just created because we are using the same account so everything from ID equals and then to this and symbol so we can close that and paste that in right here so we have our client ID and the last thing we can take is this script tag right here so let's take script here paste it just under this section so what we're gonna do now is grab this value we first want to customize the value that's actually gonna be used in that form so if if you're not familiar with JavaScript I'll try to go as slow as possible but I definitely recommend you understand it at this point so at this point let's just go ahead and create a variable and we're gonna create the variable called total and total is gonna be equal to that product the product total here so we can actually just create a string and use a the Django template code right here so we can just do product because we passed it in just like we did right here and we can do product dot price so at this point the user can only buy one product at a time so we're not gonna be totaling anything up we're just gonna take the product price and we'll take this total and we'll throw that into the value section so now that we had the new total let's go ahead and make sure that that's actually working and we should also have the buttons appear here because we added all of this code right here so this should render out the buttons and we should also receive a total so if I go to PayPal I think I should be logged in just because I've used this a second ago I guess not so we'll do personal dentists and then type in her password okay so there we go so the value is now dynamic it took the total we have in our page and if we select the other book it's also going to give us a total to that so we're able to customize that by setting up a variable and taking in the product price so we pass in the product into our template set that to the variable and pass it in right here so what we want to do now is once this transaction is complete we want to send this data on approve we want to be able to send it back to our payment complete URL or our view so we have this URL pattern takes us to the payment complete view and in here what we want to do is create an order so we want to track the information to which product was purchased and actually saved that information so for this we're gonna use a little bit more advanced JavaScript so I'll try to go as slow as possible but we're gonna use the fetch API for this so just under total we're gonna create a function and we're gonna call this complete order and in here first what we're gonna do is set a URL so the URL we want to send our data to is gonna be to complete and we call that complete in the name so we're gonna use the Django code for this and we're gonna first set double quotes because we're gonna use single quotes inside and then set the URL to complete okay so we have the URL and now we want to call the fetch API so fetch and we want to pass in the URL that we're gonna send data to and we're gonna pass in the method of post that's gonna be a string value and the headers and headers are gonna be its own object so headers for now all we're gonna pass into headers is gonna be content - type and this needs to be capital C right there and the content type is going to be application for slash JSON okay so we have the headers we have the method and what we want to do now is also pass the body so the body is just going to be some data that we're gonna pass in so this has to be JSON dot stringify and we just need to throw in an object that we're gonna we're gonna parse once we pass into this payment complete method here so in here what we want to do is get the Product ID so let's go ahead and just save our Product ID and that's gonna be a capital I and we'll just do the same thing that we did right here so we want to take this piece right here and just say product ID and we're gonna pass it in through that body right here so product ID gets thrown in right here and we want to call this complete order method on approve so at this point on approve we call this function this function is gonna send post data to this URL and then we're gonna create that order but before we can do that you got to remember that Django requires us to send a CSRF token anytime we're sending post request so because of the way we're submitting the data we need to manually create our own token within JavaScript and send it with these with the headers right here so we need to send it as data so what we're gonna do here is actually pull up some Django documentation that gives us a workaround to creating our own token and then sending that so this is directly in the Django documentation and what I'm gonna do is just copy and paste this I'll link this up in the video description but we're gonna take this and create our token just above our total right there and at the top of our script tag so we have this function get cookie and then we create the token by setting the response of that get cookie method so once we have our token all we need to do is pass it in to the headers right here so let's go ahead and pass that in and for this we're gonna do X - CSRF capital T and then token like that and we're just gonna paste in the token we create and so now the token is gonna be set or passed in with the headers so we can actually send post data to this URL and our complete order order function is called right here so we're sending the product ID right now normally what we would do is actually send some more data so at this point this data and these actions we can actually pass that into orders too and get things like transaction IDs and so on which we will do in my ecommerce video but for now we're just gonna pass in the product ID and I am gonna print it out so if we go back to our view I imported JSON JSON response so there's a few extra imports I wanted to cover and we need to parse this data and actually create a dictionary with it so right now we're just gonna set the body to JSON and then we're gonna console that out so let's go ahead and do that and then if everything works will actually create an order just so we can track which items were purchased so let's go to the site make sure we can refresh it here run site go to our store actually close out a few tabs here and let's go ahead and purchase the Mount of Olives and I'll make sure that we can see the command line too after we place the order okay so I'm gonna type in my password keeps logging me out for some reason so we got the book total right there let's go ahead and hit pay now and when it's successful we should go ahead and actually trigger that so there we go we have our alert and there we go so the body we got the Product ID up to so everything's working so the last thing we need to do at this point is actually create an order so let's go ahead and create an order by first query in the product so that's why we passed it in through the body so we're gonna say product is going to be equal to product objects dot get so product dot body don't get and we're gonna set the ID to the value of and then we need to query that Product ID that we passed in some product capital ID so that was passed in from what we threw into this data parameter right here so what we threw into the body would query that Product ID and now we need to place the order so we're gonna say order objects create and for the order all we need to do is throw in the product here and the created value is gonna be created automatically so order we're gonna say product is gonna be equal to product here so we query the product and then we create the order and that's gonna let us know which date that word was created so let's make sure everything's running right and at this point in our admin panel if we go to our orders we don't have any orders other than the alchemists so let's go ahead and place the order for Mount of Olives and we'll just go ahead and PayPal there okay so we have our total and hit pay now once it's all complete we should see the order appear here so there we go we got our alert and in our admin panel there we go we have an order for the Mount of Olives and we can actually see that the transaction time and when all that was taken care of so that's all I have for this video and actually implementing that it's kind of a sneak peek to my e-commerce website this isn't the actual ecommerce video that I was planning to make I just wanted to make sure to include stripe and PayPal before we do all of that but with this virus going on guys I've been sick myself so my timelines a little bit off but I am putting together that ecommerce video just give me some time it'll be out pretty soon so super excited to get back to this don't forget to subscribe and I look forward to seeing you guys in the next video

Channel: Dennis Ivy

Views: 29,222

Rating: 4.9902797 out of 5

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov

Id: 8rMfW4wO-vU

Length: 33min 16sec (1996 seconds)

Published: Mon Mar 30 2020