How To Accept Payments With PayPal

in just five minutes we're gonna have a fully working paypal payment system and then we're gonna take that and expand upon it even further with extra security and more advanced features let's get started now [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video i'm gonna show you how to set up paypal two different ways the first way we're gonna cover is the really simple easy to get started way and the second one is for more advanced use cases now this very first way the best way to do it is just to go to the paypal documentation under accepting payments and in here you're going to see a section for adding the payment buttons and all that we really want to do is make sure we copy the script tag right here because this is going to be the script tag for the local javascript we need on the client to run paypal we're going to copy this in and make sure it goes before our current script tag and then you can see it needs a client id for us to be able to hook up paypal and what we need to do is actually go to the developer dashboard and all of these links i'm going to include in the description for you for this page as well as the developer dashboard so you can go straight to them and once you get there and you log in you're going to see that we have a sandbox environment and a live environment and most likely you're going to have an app name with default application if you don't see this try refreshing your page a few times and if it still doesn't show up just click create app and then just once you get to this section just go back and hopefully once you do that it should show up as default application and this is where you're going to get that client id so if we click on this just wait for it to load a second you're going to see that we have information for all of our different credentials and the thing we really care about is this client id right here so i'm just going to copy this client id i'm going to paste it directly into this source code here for the script tag and that's going to load up our client id so we can actually use paypal with our account and then also down here you can make sure you only enable accept payments because we don't need any of these other information that'll just make it so it's more secure so we can't do other things with this code once that's done we pretty much have the actual scripts done next we need to actually integrate the paypal button so we're just going to create a random div and this div is just going to have an id here which is just going to say paypal and then we're going to use the paypal code we just installed to be able to create the paypal buttons on this so if we go back here and we scroll down you're going to see a section down here for this script tag i just want to copy all of the code inside of this script tag and we're going to put it in our own script.js file i'm just going to paste it down here like this and you can see right here this render section is where we render out these buttons we called ours just paypal the id of paypal all we need is just to put that id paypal in here and then i'm going to explain the rest of this code once we get going but if i save this real quick and go over to our document you can see we now have all of our paypal buttons they're really large and that's just because i'm super zoomed in on my screen to make it easier for you to read and we also have an input field up here where we can enter the amount we want to pay and that's because this version of paypal this simple version to set up is only really useful if you're going to be doing something like a donation or like a pay as much as you want kind of feature because it's not as secure the user can change the amount that they pay at any time since this is running on the client the second example i'm going to show you is secure because it runs on the server but if all you care about is like a donate button or something like that you don't really care if the people can change the amount because they're donating whatever they want to so that's perfect for these types of use cases because it's really simple to do so once we have this code copied over essentially all we're doing is we're taking our paypal library we're calling this buttons function on it and then we're calling the render down here with the id or the selector of the different thing in our html here this id paypal that's what we're rendering our buttons inside of and then we have create order and on approve which are just functions that is going to create our order for us when they click on the paypal button and they're going to approve the order when they actually do the payments so inside of create order all we're doing is we're taking actions dot order and we're just creating a new order we're setting the purchase units here and we're just setting the amount to one penny in our case we want to change this amount to be the amount they type in so we're going to take our amount element up here that's just this text box here and we're going to get the value from it so now if i just save this and i type in something like 10 and i click paypal you're going to notice this pop-up appears and it's going to ask us to sign in and in order to sign in to pay on the sandbox environment you need to go back here where you have your application just go back to that main page where it showed you everything about your application and click over here you're going to see this account section in sandbox make sure you click on that that's going to show you the accounts that you have access to to be able to withdraw and save money to down here you can see we have a business and a personal account so we want to use the personal account because that's the one we're going to be paying with and the money will appear in our business account so we can just click here view edit account and that's going to give you the email and the password to log into this account as you can see we have the email right here we just copy that id for the email into here we can copy that generated password over into here and then we can click the login button and it's going to bring us to the form where we can actually pay using things like a debit card or our paypal balance and so on as you can see it's saying that we had to pay ten dollars if we go over to this funding tab you're gonna notice our balance is currently thirty nine hundred and eighty dollars yours most likely will start out at five thousand dollars i've just done some testing already so if we wanna make this payment we can just click pay down here and when we refresh our page our balance should go down by ten dollars to 39.70 so let's just close this and we're going to reopen that personal account and go over to that funding tab and you're going to notice our balance has now been decreased by ten dollars it's now 39.70 so that means that our payment has actually gone through and worked and it was super simple to set up and over here you can see it says transaction completed by john because that's the name of the user and that's where this on approve comes in once the pop-up pops up that's us creating the order then when the user says okay i want to pay that that is the user saying i approve this purchase then after the purchase is approved we need to go through and actually capture those funds so we create the order and say hey customer i want you to pay ten dollars customer says yes i want to pay ten dollars and then we come in here we say actions.order.capture that says take the ten dollars from the user's account and put it into our account this step is really important if you don't do this step where you capture the order it's not even going to do anything and it's not actually going to take the payment so it's super important that you do the capture step after the order has been created and approved and that's kind of like the three steps with paypal payments you create an order it gets approved and then you capture the order and that's going to be everything complete and working but like i said this solution is only going to work if you don't care if the user can change the amount if you have something like an online store where you're selling courses or you know t-shirts you don't want the people to change the price of your courses or t-shirts so you're going to need a server component to take care of all that for you which is where we're going to get into the more advanced portion of this paypal video so in order to get started with a server we're going to need to install some libraries so just open up your console type in npm nit dash y that's going to allow us to initialize a package json and then we can install a bunch of packages we're going to need express for our server ejs is going to be our templating language dot env is going to be where we store all of our environment variables like our paypal api key and then finally we need at paypal checkout server sdk and that's going to be the code that we can actually use from paypal to make creating and processing these orders incredibly easy honestly using paypal is just as easy as using stripe which is impressive because stripe is incredibly easy to use now finally we just want to install here a final package which is a dev dependency called nodemon which allows our server to automatically restart itself whenever we make changes which just makes development so much easier and nicer to work with also i'm going to create a public folder which is what we're going to drag our script.js into i'm going to create a views folder which is where we're going to drag in our index.html also i'm going to be renaming this index.html to the index.ejs and that's because we're going to actually use our templating language to make sure we make changes to this page so we can actually dynamically import this client id because the sandbox and live version of our code are going to have different ids so we need to make sure depending if we're in development or production we include the correct id right here which is why we need this to be an ejs extension also we can remove this amount here since we no longer need it and in our script let's just get rid of that amount element completely now the next step is going to be actually setting up our server so let's create a server.js file and inside of here we're going to want to get express by just requiring express we're going to create our app by calling that express function down here we're going to say app.listen on just whatever port you want port 3000 and then we're going to say app.git at the root index we're going to make sure we return the correct response so we're going to say request response and we're just going to take our response and we're going to render out that index file that we just created and in here is where we're going to pass down our client id so this is going to be like the paypal client id and we're going to pass that down for now i'm just going to hard code the client id that we have right here i'm just going to take this client id and i'm going to paste it down right here for now we're going to change that in a little bit also inside of our index egs we can change this to actually use the ejs templating syntax and we're just going to come in here and we're going to say paypal client id just like that now if we save we can come down and we can say npm run dev start which is a script we're going to create in our package json so we'll just come in here we'll say dev start and it's just going to run nodemon server.js that's just going to start up our server for us and refresh it anytime we make changes so now that that's running if we go to localhost 3000 you're going to see no default engine was specified and it's just saying that we don't have a default engine specified so we can't actually change our views we want to use ejs as our view engine so inside of our server let's just come up to the top and we're going to say app.set we want to set the view engine and we want to set it to ejs that's going to get rid of that error so when we refresh you can see we no longer get that error and our code is not quite working as we expect it looks like we have some errors so let's inspect the page and see what the problem is the console says it's unable to load the resource for our script tag the reason for that is we have it in our public folder but we haven't told express where our public folder is so we want to say app.use express.static this is going to set up where our public folder is and we just called it public so we're going to say this is where our public folder is now if i refresh the page you can see our paypal buttons are showing up so everything is working as we expect it to now before we get too far ahead of ourselves one final thing i want to do is i want to say app.usexpress.json that's just going to allow us to read json data that comes to our server so when we make a fetch request to our server which we're going to do in a little bit we can actually read that with express.json now the next thing i want to do is i want to modify our code on our front end so in our script.js right now we're creating the order here but i want to create the order on our server so we need to make a request to our server and say hey give us the result of creating this order and what that's going to do is it's going to send down an id to our client and we can just return that id from this create order function just like we're doing here by calling actions.order.create this returns a promise that returns an id so we want to take a request to our server which returns an id and return that in create order that allows us to make sure all the payment information is done on the server so the user can't change it so let's take all this code that we have here we're going to change it for a simple fetch request and we're going to fetch the create order endpoint that we're going to create in a little bit and we're going to make sure that this is a post request so we're going to say it's going to be a post request we're going to put some headers into here and that's just because we're sending json so we want to change the content type of this to the application whoops application slash json because that's the data we're sending up and then finally we want to have our body and we want to make sure this is a string so we're going to json stringify this pass up an object and this object is going to have one key which is our items and this is just going to be an array of our items which have an id and a quantity the reason we're doing it this way is because on our server we're going to then get the items from our server which let me just copy over real quick so i don't have to type them all out for you normally this would come from like a database or something but you can see here we just have this variable called store items and it contains a map where the id is right here and then the object itself is on the right hand side so learn react today has a price of a hundred dollars and our css today has a price of two hundred dollars then in our script.js we're actually going to pass up the items we want to purchase so for example we could say we want to purchase the item with the id of one and we want to get a quantity of two so we want to purchase two of this item and then we want to do another purchase with the id of one and the quantity here whoops quantity here is going to be three and let's change this to an id of two actually we're going to buy two copies of item one and three copies of item three then what i want to do once we get that fetch request back we're going to have a response and in our case what i want to do is i want to check if the response is okay means it's a successful response we're just going to return the json version of our response otherwise if it's a failure we want to make sure we denote that by saying that we convert to json but then what we're going to do after that since this returns a promise is we're going to take that json and we're going to return promise.reject of that json so we're just making sure that this rejects if it's a failure otherwise it goes through successfully then if it is a successful request we know that we're going to be returning an id of the order so we're going to have an id here and like i said we want to return a promise with this id as the result so we can just return the id here that is what this great order method is expecting to be returned we expect an id to be returned otherwise if we have an error let's just log out that error so we're just going to say console dot error of e dot error so we're going to log out the error if it's an error otherwise we return the id which is what this expects to happen and that's all we need to do we don't even need this data or this actions here we can get rid of that so we've kind of written a lot of code but essentially the main thing our code is doing is it's just passing up an array of items that we're going to be purchasing so in our server let's actually process that we're going to say app.post this is going to be posting to slash create order this is going to take in a request and a response now unfortunately this is where paypal gets a little bit confusing compared to stripe because you essentially have two paypal objects you need to worry about object number one is going to be the actual request that we're going to be sending to paypal and object number two is going to be the way we send that request so first we're going to work on creating the request itself so we're going to create a variable called the request and it's going to be set to creating a new paypal object so let's make sure we get that paypal library we're going to say const paypal is equal to we want to require and it's going to be at paypal checkout server sdk so down here we want to create a new paypal order so we're going to say paypal dot orders dot orders create request so we're creating a request for a brand new order then what i want to do is i want to find out what the total of the order is going to be so i'm going to say the total here is going to be equal to our body dot items that's the information we're passing up from our client this array right here is what this items is i want to reduce this down to a single value which is the total so we're going to take sum and we're going to take each item and all i want to do here is just return the sum is going to be added to and we want to get our item from here that's going to store our price so we can say store items.get for the item.id and that has a price so i'm going to get the price and just multiply it by the quantity just like that all we're doing is getting the item and we're getting its price multiplying it by the number that we want to buy and we're starting that at zero if you're unfamiliar with how reduce works i have a full video on it i'll link in the cards and description for you but essentially this just gives us the total of the items and that's because in paypal we need to separate out the total for our items as well as like the individual price for it we can't just let it automatically add it up itself now with that all done one important thing we need to do with our request is we need to set the prefer function and we need to return here a variable called return equals representation this is just going to make sure that pop-up section works properly like we wanted to so make sure we include that and then finally we can get to the interesting part which is just the actual request itself so we want to set the request body which is a function that takes an object and this can take a ton of different parameters but in our case we really only care about a few different things and the first one is going to be the intent the intent here is going to be to capture and we just want to make sure that's all caps here and that's because we want to capture the payment information from the user and we want to create an order to capture that information then we want to actually include the information for the thing we're purchasing so the purchase units this is like how much everything cost this is actually going to take an array in case you have multiple purchase units in our case we really only have one and inside here we're going to pass it an object with that information the first thing we care about is the amount and this is going to be essentially this total here but it's an object that contains what the currency is so we want the currency code which is us dollars in our case then the value which is going to be our total that's just how much everything cost and then we need to be able to specify a breakdown here as well and this breakdown just tells us what each individual item costs so it's easier for the user to know exactly what they're purchasing so our breakdown has an item underscore total and in here we're going to put our currency code of usd because we're purchasing this with us dollars and the value is going to be our total and that's because we're not worrying about taxes we're not worrying about shipping or other things if you had things like taxes or shipping you would also include them inside here for example you have like a tax total in our case our entire total is just the item total so we don't have to worry about that and the next thing that we need to do past amount is specifying what each individual item is so we can get the items again from our request.body.items we're going to map through each item and for each item we're going to get the store item associated with it which is just store items dot get item dot id and then we can return an object which contains the information for this item such as the name and the price and so on so let's specify the name which is store item dot name then the unit amount this is how much each individual unit cost so here we're just going to say our currency code usd everything is usd for this our value is just going to be our storeitem.price then finally we care about our quantity which is just our item dot quantity so essentially this entire section all that we've done is we've created an array called purchase units in it we put one single object this object contained an amount section which contained our total as well as the breakdown for the total for our items and then we included an array with all the different items which have a name a unit amount and then the quantity now with all of that done we can actually make the request so let me just minimize this down and here we want to do a little try catch block because we're going to use async weight if you're unfamiliar with async weight i have a full tutorial on it in the cards and description down below we're just going to make this an async function and we're going to try to create our order by just saying that we're going to take a paypal client which we're going to create in just a second and we're going to execute this request just like that and we need to make sure we await this and this is where i said paypal is kind of confusing because you have two parts the first part is our request this is like this is the thing we want to do and the client is how you actually call that so we need to say are we calling the sandbox environment what are our api keys and so on so we need to create this paypal client i'm actually going to do that way up here so to create that paypal client we can just say paypal client is going to be equal to a new paypal.core.paypal http client and this is going to take a environment so we want to create a new environment but with paypal there's two different types of environments i'll list them out here we have the paypal.core.live environment this is going to be if you're doing live executions and then we obviously have the sandbox environment for testing so we need to first determine are we in production or not to figure out what environment we're using and then we need to create that environment so i'm going to create a variable here called environment and i'm first going to say hey are we in production or not so process.env.node env is equal to production if we are in production then i want to return this live environment otherwise i want to return the sandbox environment so for introduction we're going to get the live environment otherwise we're going to get the sandbox environment and here i'm going to pass it to that environment so we're going to create a new environment and this environment is going to take in our client id as well as our secret so we can just pass it in process.env.paypal client id and we can do the same thing for our secret so env.paypal whoops paypal client secret there we go but right now we don't have any environment variables set for our client id our secret or even node environment so in order to do that let's create a file called env and in here we're going to have our paypal client id and we're going to have our client secret and to load those in our server at the very very top just require that dot env library and we want to call the config function to load everything from dot env into our server js then we just want to make sure that we have a dot git ignore and we want to make sure we include our dot env file and node modules in here the reason for this is if we commit the code to github we want to make sure this client secret is hidden if we expose this client secret it means other people can use our paypal account to make charges we definitely do not want that now in order to get this information we can just go back into our sandbox section we can make sure we go to the apps and credentials and we want to click on our application that we're using which is our default application and we're going to copy over the client id and the client secret so client id copied and we're going to get the secret and we're going to copy that over as well just make sure you don't share your secret with anyone else then once that's done we can go into our server and we can actually use this paypal client id and we're going to pass that down here instead of hard coding it that way it's hidden so other people can't see it now at this point we have written a ton of code but at this point we actually have things pretty much entirely finished we can actually take a look at what this order looks like by just saying console.log order and then in the error section let's just make sure we send down a status of 500 and we're going to send down some json as well that just has that error so e dot message just like that so now hopefully everything should work you can see this page is loading up just fine we click on the paypal button and it's loading up and we created a brand new order and right now this paypal thing is not doing anything because we haven't sent it down the order id but as you can see we have this order that was created with the capture intent and it contains all the information for the things that we want to purchase so now all we need to do is just send down the id of our order to our user so we can say res.json id is order dot results dot id that says id right here by sending that down what's happening in our script here is we're getting that id being returned in create order and that's going to allow us to log in with our paypal account here so if we just close this out and we go back and to our accounts for our sandbox we can log in as the account and see if everything is working as we expect so for our personal account let's just view the account details copy over that name and that password so here's our email that we're going to copy over just paste that into there then we're also going to get the password we're going to paste that into here click log in and now hopefully we should see all the information for the cost of this actual thing showing up you can see that it cost us eight hundred dollars to purchase this and it's also saying if we expand this that it's going to be two copies of the learn react today course and three copies of the learned css today course all that information is coming from our server where we populated that inside of our request body that's the importance of populating all this information and the best part is is all this is done on the server so the user can't actually change any of this information then what we can do if we go to the funding you can see we're at 39.70 if we click on the pay now button we should get dropped down to 31.70 so wait for this to process real quick and then i'm going to close out of this and we'll just reopen that up to see if this works but it looks like this is actually not processing correctly it looks like we have an error so let's just go over and see it just says transaction complete so that works actually what we can do now is view our account and we can go over to the funding section and you can see it cost us 800 to purchase that which is exactly what we want now one important thing to note is it is important you keep this section down here where you are capturing the transaction it doesn't matter if you do anything in this dot then you just need to make sure you call this capture and make sure that it successfully works otherwise it's not actually going to charge the user's bank account when they approve the funds if you don't actually capture them and that's all it takes to integrate paypal into your application if you're interested in taking this a step further and looking at how you can integrate stripe as well i have a video on that linked over here with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 27,582

Rating: 4.9797978 out of 5

Keywords: webdevsimplified, paypal checkout, paypal payments, paypal nodejs, paypal javascript, paypal tutorial, paypal checkout tutorial, paypal api, paypal payments tutorial, paypal node.js, paypal node js, paypal js, paypal server, paypal checkout js, paypal checkout javascript, paypal expressjs, paypal express, paypal, pay pal, paypal javascript tutorial, paypal crash course, paypal js tutorial, paypal crash course js, paypal donation tutorial, paypal setup

Id: DNM9FdFrI1k

Length: 24min 35sec (1475 seconds)

Published: Sat Aug 21 2021