PayPal Payment Integration | Django Ecommerce Website | Part 5

hey guys so in this video what I'm gonna do is integrate PayPal checkout into our django ecommerce website so we can get this car total and allow the user to check out either with a default PayPal checkout option or submit their credit or debit card information that's also provided with PayPal so if they click this button right here they're gonna see this prompt they're gonna be able to log in to their account and once they're in here there's their cart total they're gonna be able to just submit their payment and that payment will go into the PayPal account that we linked up here so if a user doesn't have an account or doesn't want to use it they can click this debit or a credit card option fill out this form and that payment will still go into our PayPal account so if you're not part of this series I recommend you check out my other django paypal video just because it's a little bit more direct but this one is for anybody part of the series that wants to integrate it into the website so right now currently what we have in that place for the PayPal option is this make payment button so we're gonna take these buttons right here and replace it with the PayPal option so we're gonna go to this link right here which I'll link up in the description and we're gonna work with client-side integrations so we're gonna take these buttons right here and this is all the source code that PayPal provides us so we're gonna go into this code right here and add the buttons into our website and the other option is server site integration which we won't work with but this is just the ability to process the order on the backend using Python so I'm gonna keep things simple we're still gonna send data to the backend but we're just gonna work with client-side integration so go ahead and look at this link right here it's gonna be in the description and click through these things you're gonna be able to see different buttons different styling for the buttons and so on so I recommend you check this out look up the PayPal API and their documentation as we go along and study what we're doing but we're just gonna go through this code right here and start integrating things and a few things that I wanted to mention is that we are gonna set up a sandbox account so what that means is we're gonna send fake payments with a fake account so this is our normal PayPal account but if you look at the URL we have sandbox before so we have sandbox paypal.com which means that any transactions that occur in our testing is gonna go to a dummy account so we don't actually have to test real payments to see if they work once everything's ready we're going to switch now for a real client ID and then we can link it up to a real account so let's go back to our website and if you look at this debit or credit card option one thing that you need to really pay attention to is the fact that this will not work if your website does not have an SSL certificate so if it doesn't have it PayPal will hide this option to protect user information and I'm not sure about that PayPal checkout button they'll have to test that but I do know that the debit or credit card option will not work if your pay if your website doesn't have that certificate so right now we're on localhost everything's working fine but once we're live we will see the issue so let's open up the website that we're currently working on so if i refresh this and we go back to our checkout page go through this process submit this information so now we're back to that make payment button so I'm gonna open up my source code here and we want to start working within our app called store and we're gonna open up our checkout HTML page so the page that has all those forms here and what we're gonna do here is we're gonna take this make payment button right here eventually we're either gonna remove it or comment it out and we also want to remove the event handler that's attached to that because that's going to give us a little issue there so let's go through our steps here I'm not gonna go over too much about how PayPal checkout works it's all in the documentation so I recommend you look that up but essentially here's the process so if we go through these steps right here whenever the button is clicked so your user clicks the button it sends out an API call we set up the transaction and we launched that checkout experience so that's step number four here whenever the user approves the payment the button goes ahead and calls the orders API makes the transaction and then the user sees that confirmation and we go back into the process of whatever we want to do after that payment is submitted so the steps are on this page again this is also in the documentation I actually just took this image from there and added it in here so look that over and we have our sandbox accounts which we're gonna get to in a second so let's start by adding our buttons here so we want to replace this section with a button so what I'm gonna do is go to this URL right here which is going to be in the description and I can't really zoom in here for some reason that kind of throws me off so what we want to do is first create an empty div with the ID of PayPal - button - container we can make this whatever we want but I'm just gonna keep that theme and we're gonna go to checkout HTML and I'm gonna replace or I'm gonna put that underneath PayPal options so for now just so we can see it I'm gonna comment this out so we're gonna comment out our make payment button and let's comment out that event handler so it's right here so we're just gonna set that multi-line comment we're gonna start above the event handler and then we'll close it out right here so we're still gonna use submit form data but we're just getting rid of it for now and we're gonna trigger it later on after the payment is submitted right now on the website if we go through this process we shouldn't see anything in here so we have an empty div and we want to go back to the next step here so we commented out the button we commented out the event handler and now what we want to do is add in that script tag that's gonna give us access to the PayPal API so if I open this up here we're just gonna paste this in above our original JavaScript but underneath our closing tag for our HTML so it's gonna be at the top of our JavaScript and we can get that from this link right here it's on line 15 if you can't really see it and again I'm having issues zooming in so you'll be able to see it once I pasted it and I'm gonna put that just above our JavaScript here so we have that and what we need to do now now that we have access to all the buttons here if we go to the steps here we want to paste in our own JavaScript just for the PayPal buttons so I'm gonna put it into its own script tag in theory we could put it into where our original JavaScript is but I want to keep it above and separate so we're gonna paste that in and I'm gonna go over these functions right here and what everything does so I'll just open up this section and from line 17 to line 42 we're gonna take everything from the opening to the closing script tag and we're gonna paste that in just underneath our script tag for the PayPal API but the but above the original JavaScript so I'm gonna fix this indentation and we can go over this so right here we have PayPal dot buttons which we have access because of this script tag and within PayPal buttons we just out these buttons to that empty dibs on PayPal - buttons - container which we added right here so we have that empty div so the buttons we create get appended to that div and I should probably say the buttons paypal generates because we're not actually creating them we're just accessing PayPal buttons PayPal creates them and then we just rendered them out right here to that empty div so we have two main methods we have our create order method right here and we have on approve so create order what this does is it launches the default PayPal checkout experience so we set the value right here this is what we're gonna charge the user will make this value more dynamic to our cart total and whenever the user goes through that experience and finishes this out and actually finalizes that payment then we trigger on approve so we're able to get some transaction information get the user information and then do whatever we want after that payment was actually captured so if I save this we render out our buttons so we should see this and I'm actually gonna go through that payment process so let's go ahead and finish out this process we click the PayPal checkout experience so right now we just triggered create order and that launched that checkout experience so if I can find the right link here we are currently launching our checkout experience if we look at our total here so we're gonna connect it with value we have one cent and this just launched my sandbox account right now so I'm already signed in and we have our total of 1 cents so if I go to pay now let's go ahead and process this once I submitted that if you go back to our page we are now finished with our transaction and that pop-up that you just saw was this alert here so once we completed that we went to on approve so those are the two main methods that were gonna work with I'm gonna close out some images here and we can go to the next step so we have our buttons we can go to step two so before we actually start dealing with a back-end let's show you some styling that we can do here so right now what we're gonna do is add in the style object right here and we want to make our buttons blue so we want to be able to customize those and touch up a few things so let's go ahead and just above or within our PayPal buttons method just above create order we're gonna set style and that's going to be a JavaScript object and we're gonna add a comma there so there's a few things I don't want to do one is I want to make sure that my buttons are rectangle which I already think they are so I'll just show you that regardless so we're gonna make sure that these are rectangle and I also want to make sure that these are blue so if you go to this link right here which I'll also link up in the video description you don't have access to this website and if you look at the documentation here's where we can see all the attributes that we can set on the buttons so right now if we want to make the buttons gold here or this yellow effect we can set the value of color to gold if we want to change it to blue we just set that to blue and a bunch more down here so these are all the different buttons we can use and all the actual code that goes with it so let's go back to our object and I'm gonna set the color to blue and that's gonna be a string value and I'm also gonna set the shape so remember that we're already have we already have that rectangle shape but in order to set that we can use rect like that or we can change that to pill and make that more round so now if I go to my page here and refresh this go ahead and open up those buttons now we have the blue button so let's go into customization of what buttons actually show so that's going to be in step 3 so we styled our buttons that was a really quick step and we want to let's say we want to hide the buttons so right now if we want to only show just a PayPal button or in my example I just want to show the PayPal option with the debit and credit card option all we have to do is set which value we want to hide from these buttons so if I go to my code here this is also in the documentation all we have to do is within our script tag just after currency we want to add the am symbol and we want to say disabled - funding and then we want to disable the credit card option if we wanted to disable the regular card option for the debit card we would just say card right here but we can also find all of that in the documentation so let's go ahead and do that so we're gonna put an and symbol right there and we're gonna say disabled - funding so which payment options do we want to disable in this case we just want to disable the credit card option so I want to make sure that's spelled right and once we save that we should only see the two payment options now so let's open that up again and there we go so now we have our PayPal option and our debit card option so I want to show you that just to give you some more ability to customize your buttons maybe style them change up how they look and just give you more flexibility in your checkout page so from here what we're gonna do is actually go in and create our sandbox account so if I go to my steps here we're gonna go to part two and in this section what we're gonna do or in this part is we're first gonna create two accounts here so one for an account that's gonna receive the money and one that's gonna send it so for the one that's gonna receive the money we're gonna create that as a business type and for the personal account this is gonna represent a user shopping on our website so we're gonna use this account to make the payment and send the money into this account once we have that we're gonna go into creating an app within PayPal and then connecting it and generating a client ID so we're gonna go in here we're gonna create the app once we get that ID we can actually connect it and PayPal will know where to send that money so let's start by going into this link right here and I'm gonna put this into the YouTube description it's also in my step-by-step guide right here so if you have that just go visit that link and let me just find that again so in here we want to go into sandbox and we want to go into account so you can see I already have two accounts here and I'm gonna work with these but I'll walk you through that creation process so remember we need a business and a personal account so if we go to create account right here what's gonna happen here is PayPal is gonna prompt us just to create an account type right here so we can choose one and then create another the reason why I don't like this method is that it's gonna give us a default password and email to use so we're gonna go into create custom account so we're gonna start with a personal we're gonna create the account in here we're gonna create an email we want to attach it to and it could be a fake email we're not actually gonna send emails there set your password and account information and then the account balance so right now if I go to sandbox PayPal comm and I'm actually gonna log in to one of my accounts right now so if we go to login and I'm gonna log in with my personal account so just use the email I generated we're able to set an account balance of whatever we want here so I set mine originally to a thousand and then we just made these transactions so go ahead and within this link set the account balance I left everything as default right here and I believe that was it and go ahead and create an account once that's generated go back to account store you'll probably be redirected here create another account also go to custom right here create a custom account and if you made a personal account on your first one switch this one to business do the same thing set the account balance and click generate so once we have that once you created both accounts here within our guide here so I kind of walk through that process show you what to do here and within step two we want to create an account that's gonna generate a key for us so PayPal knows where to send this account whenever the transactions being made from those PayPal buttons so if we go back to this link right here within our dashboard we want to go to my apps and credentials so in here again I also generated the app I'm actually gonna create one right now so make sure we're within sandbox once we go live we're gonna use this link right here so go to create app and I'll actually generate it with you so let's just do econ Gengo and we're gonna connect it to the business account so we can go to that default business one make sure that you know which account you're attaching it to and we're gonna generate the app here so once we have the app we want to get some credentials here so we need this client ID and we're gonna work with the client ID we use the seeker key whenever we're working on the back-end you don't want to show anyone this the client ID is less sensitive so it's okay if somebody sees us in the console or just somehow finds it just because it's just sending money to your PayPal account so once we have that what we can do is go back to our script tag and where we have client - ID we have equals and then SB go ahead and paste that client ID that we just got and replace SB with that so it ends with and currency so just make sure that you added that in the right section save that and now these PayPal buttons are connected to our accounts so whenever a payment is made we're gonna send money into that dummy account and PayPal actually knows where to send that information and the actual transaction so we set all of that up that was part two that was also pretty simple now we're gonna go to part three and test out some payments so the first thing we want to do in part three is we want to test just one payment with that transaction of one cents so what I'm gonna do is go to the website and we're gonna process the payment and remember that I have my personal account so we're gonna start by opening this up and once that sandbox account is open we are gonna log in with that personal account so if you had those two accounts go ahead and use the one with a type of personal log in right here so use the email that you generated - personal dentist at gmail.com use whatever you set up and let's find that link that popped up here so I logged in with that and we're gonna make that transaction so once I process this we're gonna go back to our page we should see an alert and that money was set to the account so what I'm gonna do is actually pause this because that money can actually take quite a while to actually go to that account it can take upwards of five to ten minutes so I'm gonna wait for that to go in and then what I'm gonna do is log into that account so right now I am in my personal account so we should see that payment for the account activity right here in recent activity so if I log in to my personal account I should see that money outgoing if I log in to my business account I should see that money going into the account so let's log in through the business one right now and then we should see that transaction so I actually just had it paused for about fifteen minutes for some reason that transaction took a while and that seems to be normal I often get alerts and then see that payment go through twenty to thirty minutes later but here we go today is May 19th and we just saw that transaction of one cents so because we're in the sandbox account it just gave us a name right there and the payment went through so now what we can do in the steps here right now we're only charging one cent to the user what we want to do is actually set that price so what I'm gonna do is get our cart total and we're gonna place that total above within the second script tag so we're actually gonna move it and we're gonna add it into the script tag and then we need to make sure that our total here doesn't have more than two decimal places to the right so sometimes when you're calculating flow fields you get this funny number and that decimal place just kind of continues forever so what we're gonna do is we're gonna make sure we turn that string into a flow field and then we're gonna use two fixed right here and set this value to two decimal places to the right so this is the JavaScript way of limiting the decimal places to the right so let's go ahead and start that process so we're gonna take our total from the original script tag we're gonna remove it and I'm gonna paste that just above our PayPal buttons option so there's our total and what we can do now is grab this total replace it right here and we're first gonna change this to a flow field so we're gonna say parse float and that's going to be a capital F and I need to make sure I spell float right so FL oh 80 so we're gonna turn that into a float field once that's a flow field the reason why we turn it into a flow field is because we can't use that too fixed method and set the decimal places unless it's an actual flow field so we can't do that to a string which is the current value so we can use two fixed and we're gonna set this to two decimal places to the right so now that number is fixed we have that total so we can access this in here and this value is also available right here so the reason why it would either to move it up is because we didn't want to call total right here if the value is down here so we would get an error if that was the case so now if i refresh this and we'll go open up the PayPal checkout option we should see our cart total in here so right now instead of one cent we should see whatever the value was of our entire cart so we have 95 cents right here that is the car total so everything is looking good and if we were to check out that process in our transaction history we should see that full value and that payment would go through so now if we go to the next step we just set the price we made that dynamic and what we need to do now is actually process this order on the back end so if we went through this process the payment would go through but if you notice the first time we did it we never cleared our car and we didn't actually place that order on the back end so what I need to do now originally when we clicked that make payment button all we have to do is grab submit form data remember if you're part of the series you're from later with all of this we just need to take this function and change when it gets sent so right here I'm gonna erase that alert and we're gonna paste that in here so whenever that payment is complete we're gonna trigger submit form data and if we go ahead and search for this function remember that this function sends all this data to the backend and then it actually has its own its own alert we cleared the cart data we redirect the user back to the home page and the order is complete now one thing I did want to mention is the fact that whenever that payment is submitted I've had multiple people mention the fact that if my total is set right here so we have a set in this variable that anybody can go into the console and manipulate the price and that's true so this is something that we already took care of earlier we're in the backend what we do is we just check the total value so we get the value from the data submitted and we make sure that it's with the cart total so the car total is not something that somebody on the front end can manipulate so we confirm that and if for some reason that total does not match or whatever the user submitted we'll know that the user manipulated the price or something else went wrong so in this case the user cannot manipulate the price because we are confirming things on the back end now that we confirm that total we submit that form data let's just go through that process and see what happens so remember on approve once the payment is made we trigger submit form data and we should see this car actually cleared and we should be redirected so let's actually make the payment and I keep opening up tabs here for some reason and I just keep using default data we're gonna go through this process we should see that car total of I believe it was 94 dollars and we're signed in from our personal sandbox account and once this opens up we'll process this and we'll be directed so let's go ahead and confirm that total we're gonna hit pay now and eventually once this is done so right now we're gonna be redirected submit form data was triggered so transaction is complete that was from that method our car is clear and the order was processed so this means that everything on the backend in our view where we confirm that total went well because we don't clear the car unless the total matches what the car total was so it means everything went well that transaction is complete if we log in we'll see it and eventually we'll see that $94 appear in here and that's it for this entire checkout process now if you want to go through that live process and actually use a live client ID I'm gonna need to log in again into that sandbox account because it keeps checking me out here so remember we log in with our real paypal account and let's go into my apps here so this is the last thing that you need to do once your going live so go to the live link here create the app and we're gonna use the live client ID and what you're gonna have to do is go into wherever you have this script tag and just update this with that live client ID and that should take care of everything and the last thing because I know that somebody's gonna miss this part remember that that credit card form will not work once this is live if you don't have if you don't have the client ID so we're not the client ID but if your website is not SSL certified if you don't have that ticket this option will not open up so make sure you have that that's it for this video I might continue adding to the series later the intention was just to show that a payment integration with a guest and user account so I'll just keep adding but that's it for now as far as the modules that go with this website and we just completed the payment integration so I'll see you guys in another video

Channel: Dennis Ivy

Views: 53,275

Rating: 4.9608889 out of 5

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

Id: 33pnWTslX2E

Length: 24min 4sec (1444 seconds)

Published: Tue May 19 2020