React Project: PayPal Payment Integration in Node.js Tutorial

hey what's up everyone so in the first part of this video we were able to create this design using react and Terence CSS and I'll leave a link to that video at the description section below this one right here and now in this particular video I want us to perform payment using PayPal so when you click on this button we will be able to see this Paypal payment button and once we click on this paper button this pop-up will appear first perform are the payment or the checkout and you'll see it automatically logged me in because I'm already logged in to a Sandbox account and I'll be showing you how you can get are these account okay so we'll perform the setup together and so on this is the current balance of the test account that I'm using for the payment and I'll come back to my website I need to use this pop-up and I'll complete the purchase here so thank you for using PayPal it's processing and let's wait and you'll see here payment successful so if we go back to this account which you used for payment pay close attention to their balance and refresh you'll see that the balance has decreased and you'll see now we have now here 9 March which is the current date right now and this is the payment that we performed so when I click on it you will see here we have the description as our candy sofa which is this one okay so another cool thing is that you can log in to the business account so let's try that and see the balance so this is the business account here so if I did here we will see if we received the payment okay so I log out then I'll log in with this email so login and I'll press this one with that email then release this password and I will log in here so once I am logged in I can go to activity or transactions and right here you'll see that there was a payment completed of three and a nine at 7 14 PM or this is wrong or maybe it took the date for whichever occasion this account was set to but we received this payment here um I don't know if we can get more information about it and let's see yeah for this coach and yeah we are able to receive this payment so yeah that is it this is what we will be working on and I'll be showing you how you can complete payments uh with paper so in case you're new here my name is Charles and I create coding content here on YouTube so if you are interested in content like react JavaScript now JS and also CSS uh you can check out my channel I have a lot of videos and if you find it interesting please make sure you subscribe and turn on post notification so that you don't miss my future videos another thing all the source code for this video and the previous one I will be available on my patreon so you can go check it out and that is one of the best way that you can get to support my content so now let's get started with Paypal payment integration okay so to get started you need to go to PayPal developer dashboard so you can search PayPal for Developers and you'll click on PayPal developer and this will take you to the developer dashboard okay now you will need to log into the dashboard and here you will use your normal um PayPal logins okay so I'll use mine so I am logged in if you don't have a PayPal account you might want to create one then you'll use that account to log in to the paper or developer dashboard so most probably this is the first page that you'll see not unless the change in future but if you come to apps and credentials you might have a default application here if you don't you can create an app okay but if you have a default application I don't think you'll need to create any other app you can use that default application for testing if I click on the default application you'll see that we will have access to a client ID and also a secret ID now the next thing that you will need to do is to go to docs then you can go online and this will give you the documentation for checkout for subscriptions and so on so we want to perform a checkout so click on checkout then you can come to standard then you can click on integrate here and once you scroll down here you'll see we have the documentation for front-end HTML right here and also we have some documentation for the back end and if you want to see the full documentation or the full code you can click on this GitHub repo but unfortunately now we are doing this on react we are not doing it on HTML we are doing it on react the cool thing is that we also have the documentation for that so you need to click on customize here then scroll down here then we have this standard payments with JavaScript Frameworks so you can click on that one then you'll scroll down here you see we will have documentation for react angular there are two or zero but now we want to react so I select react here then we will see how we can add JavaScript as DK for PayPal so that you can be able to create PayPal buttons on our react application the very first option is adding this script at index.html then including your client ID that is a straightforward and it works but we have other options so right here to learn more about the default value of C JavaScript SDK script configuration so if I happen to go to this link I have clicked on it you will see that you can add a script tag or if you are using a framework you can use this package npm package PayPal Js so you can use it as a module loading SDK as a module bring certain advantages especially when working with a JavaScript framework now another cool thing is that we have another package for react so here it is react PayPal Js so this is the package that I want us to use for creating this PayPal buttons so click on this package or open it on a new page and this will take you to npm and we will have a guide on how to make use of it okay so I just need to scroll down here and remember we are using this to just root the JS SDK so right here I'll just install this package npm install and PayPal stroke react hyphen paper GS so I'll copy that and I'll go into my application so I have this application which you worked on on the last video so you can check on the last video if you want to use the same so we need to install this so I'll just add new and right here I'll just say npm install dot package now if we check more on it you will see that we are able to import PayPal a script Provider from from that package and also we are able to bring in our PayPal buttons let us import these somewhere maybe on app.js and make sure that you are able to load some buttons so I will copy and I'll go to this it finished installing so I'll just import them on up here so we are supposed to wrap our app with the paper script provider so right here I include our paper script provider component and I'll cover everything with it just like that I'll save now we are supposed to configure some options some initial options so if I come back the docs and scroll down you need to configure this initial options so I'll copy this object and I'll come back here and inside our app before the return statement I will include it here so for the initial options we have this client ID so we are supposed to include a client ID and then we have currency and intent is capture then you have this data client token I'm not sure what this is used for so I'll just comment it out but I'm supposed to get this ID so let's go back to the browser then we will go to our developer dashboard you can come to testing tools okay actually it's not there but here up credentials and here is our client ID I'll copy that ID and we replace that right here so we'll press here and then we are supposed to pass this as a prop so right here we press options and we set it to be our initial options and now when we use this paper buttons so right here just say PayPal buttons and I happen to save now I can go to the application and look we have this PayPal buttons awesome so we are able to load the paper script and include our PayPal buttons right here awesome now this button is not functional okay when I click on it it's loading but it will not uh complete payment for our sofa here so we need to make some calls to the PayPal apis create order and then you know a perform payment for that order so for us to do that we will use a different approach of adding this button and I'll actually go ahead and create a new component for this okay so let's do this in components I'll create a new file and I'll call these paper payment and then Dot jsx and right here I'll create a straight dress functional component and there will say PayPal um payment so here is where we are supposed to include our buttons so we can go back to the docs and I'll go back one step right here so that we get back to the uh react documentation where we had standard payment for JavaScript framework we click on react and this is now the react code that we'll be making use of uh in that component okay so we need to have this function for creating an order and all it's doing it's making a call to a backend API that will create the order it's good to use node.js on the back end for it to be more secure and whatever you're passing is the details of our product the quantity price and so on so here we are passing a cart and then down here we also are making another request to an API endpoint and this one now is used to complete the payment for a certain order as you can see we are using another ID and whatever we are returning from this is order ID and that order ID is what we are using here to complete the payment for the order so I'll need to copy these two functions there they are on approved and also this one great order so I will copy those then I'll go to my application and I'll add them uh before our return statement here so these are our helper functions now the other thing that I will do is to include the PayPal button and now you'll see this has more we have create order as a prop and also on approved as a prop so I'll come back here and include that at our return so here we have some issues and reachable code detected so one thing is that this is I think cross based component so we have functional components down here so we should be able to create these as functions so I will recopy this from the functional component so let me copy that and we will have to remove this this was for class based components and we changed these ones to functions so I'll test this awesome another thing these were also for class based components so we need to remove this keyword sorry for this all right let's just copy this one but since you are using actions here we should also make sure that we are including them here actions and here actions so this is now our new component from the top this is the create order we are performing a fetch or a post request to this API endpoint which we'll create in a few and now we will be making us a stretch change to this body of the request and actually this is I think it's usually optional use the body param to optionally pass additional order information okay so whatever I'll pass here is a product since it's one it's not a cut so here I'll just say product and then whatever I'll say here you is the description of the product and we can say product is wood candy sofa and now down here we'll also have a cost and we'll include the cost for this sofa and I'll say it's three nine nine okay three nine nine uh 0.00 so on the back end I'll be able to receive this information and use it to complete the order or to create the order now on approve we use that ID to complete the payment and so on so I'll go ahead and save this okay now we have this component and if I happen to use this component right here so PayPal uh payment and save and go to the website I will refresh okay it's not working out we have some issues maybe the console PayPal button is not defined so we need to import PayPal button at our Paypal payment here so right here if I use controller space you'll see I'll be able to import these from this package I'll save and if I come back okay now we are loading the button so if I refresh we are able to get the button but if I happen to click the button you'll see it's not loading our pop-up to complete the payment and that is because uh we don't have the order Okay so we need to complete these on our back end so you can see create order error it failed to create an order so what we need to do is to go to our backend which we don't have so we should create it okay so let's create a backend folder I'll just add it at the root here s server so at the root I'll say server and other server I'll add a new file index.js and I'll also add another file this will be a paper hyphen API and then r dot Js another thing I should be able to generate a package.json file so right here at the terminal I will see the server and whatever I will do I will say npm init and I'll say her The Hyphen why and this will generate a package register file at our server here so there we go we have this package.json file and now since we have this we can be able to install several dependencies so right here I'll say npm I and I will install the dot EnV Library so that you can be able to use the environment variables then I will install Express and finally I will use node fetch so actually if you are using the latest version of node you don't need to install not fetch because it's already built in but I think mine is not in the latest so at least not fetch and I'll hit enter okay now we have the documentation for backend so most of this code you don't actually need to type it out so if I go to the standard payment so if you go to docs then standard payment right here in tablet not the customized one but integrate then we had seen this area here back end so here's the back end cord but this is not the complete card so if you want the concrete card you can go to the GitHub repo so I'll open the GitHub repo here and right here I can use a full stop to open these on Visual Studio code that is built inside our GitHub so maybe you know this maybe you don't if you don't then this is a new thing that you have learned today now it has loaded and you'll see here we have advanced integration and we have standard integration I'm interested in standard integration then here we have our index.js that should be server now this is the root and here you will see we are creating API endpoints for create PayPal order I don't know if it's too small but let me try to zoom in so here we have this API endpoint here and also we have this one here capture the order and you can see we are calling here await PayPal dot create order and we are importing this from our PayPal um this file so if I go to this file you'll see that we have more details here some functions and the first function that you would like to care about is this one where we are generating an access token using the client ID and the app secret so using node fetch you are able to perform a HTTP request a post request to this paper API and using the client ID and the app secret we are able to get an access token okay once we get the access token we are able to use this access token when creating an order here so create order you see we are able to use this access token and we perform a request to these other API endpoint and right here whatever we are doing we are simply passing the details for the order to create it and also we are passing the access token at the headers for authorization once we created the order we send the ID to the client and from the client will perform another HTTP request and we will hit this function again using the API endpoint and we will use the order ID from above to perform a payment so right here again using the access token and the order ID which you are passing down we are able to perform a payment and we send a response back to the client so this is a straightforward you can check it out but whatever will be modifying it's these details here so I'm going to copy this code the enter of this code I'll copy and I'll go to my app and on the server I'll go to PayPal apa.js here and I'll paste and here is the code now on my vs code now we need to do a few modification here so here intent is captcha and this should be similar to whatever you placed as intent uh on our PayPal buttons okay on the initial setup I think here we had intent captcha so those should be same uh so if you change intent here also change on the front end for it to work out then here we have payment units so for payment units we are passing an object and some details about the payment so amount the currency code is ussd and then we have the value so for the value we will be getting this from our front end so right here I can say data and here the data here will be now the value here will now be data and then r dot product and then here will be dot cost so this will be coming from here product dot cost okay now let me go back to pay part here dot hyphen api.js uh this is the only thing that I need to change here I think so so the other thing is index.js so I'll go back to where we had our code and I'll go to index .js hey it's server it's called server so I will copy everything from here and I'll go back to our index.js here and then I'll paste now you'll notice this was used for HTML that's why we have this static but I don't want to use this for HTML so I can just even just uh comment that one out and instead what I want to do is to use react which is on a different domain therefore we should configure course so right here I can say up dot use and I'll use cos let me zoom in a little bit I think the code is a bit too small so here I'll make use of course and I'll call this then I should be able to bring it in which I'm not and therefore right here that's import costs so I'll say import and I'll say here course and this will be from course okay now another thing that you might have noticed is that you are using the import statement so we are using es6 module we should configure that at package.json file so here we should add type to be module and I save so now that should work let's come back to index.js we need to do some more changes so when creating the order we will be passing these details through the request body so we pass them to our order here create order function from the request body so right here I'll say request Dot bold are save and then this is what we will receive here as data and you will get data more details about our product here so this is how you can like pass more details to these function if you had a cart with many details you can do the same here cool now let me see what else we are supposed to set up I think it's the the app Secret so that is the tnv file we should add a DOT e and v file here dot EnV and if we go back to this code source code from PayPal you'll see we have the Envy example here so we should set this up I'll copy everything then I'll go to this one and I'll paste here now here we should set up this client ID and up Secret so I'll go back to where we had our client ID I'll copy it then I'll paste it here then up Secret we need to show it so I'll copy mine and I'll paste it here don't use these ones uh I'll be changing them so I'll save this and I think we are set I don't think there is something that we have left out this will learn on Port 8888 and our backend will be running then if I go to PayPal here we are using note fetch let's run our backend and we see what happens so here I'll use Ctrl J and I'll run the back end using normal so not or no demon so or hit enter and we actually have an error so cannot find costs need to install costs import cost from costs um let's check packages on yeah we did install costs so let's do that I'll stop the server and PMI course now I'll go ahead and run and run our nodemon so server is reasoning on these are Port 808 now if I go to Paypal payment we should include I think the complete path to our API endpoints so here let us have a server URL I'll say const server URL and these will be equal to [Music] this link here so I'll copy this one and I'll paste it here don't worry about this I don't know why it pasted itself here it's crazy now I remove that then we should be able to add it here I'll use bugticks so bug ticks then I can merge it here by reading our server URL as a variable server URL I'll do the same for this one remember this setup was meant for HTML and therefore it will not work for react here we must include this complete path to our API endpoints so server URL here and yeah I think we are good so I'll save so now let me test this out backend is running front end is running and you should be able to load our login okay so if it reloads login it's working if it doesn't uh we are doomed let's just open the inspect here just in case we have issues so console don't worry about that so if I click PayPal it's loading and there we go so it's bringing in our login information so this is what we wanted for us to perform payment so let's try to log in with the testing tools here sandbox account uh what have I done so I should log in back to I'm a developer dashboard so once I'm logged in back uh you can see this personal you can use it for payment and you receive the payment on the business one so I'll go to this one which is personal here and I'll copy this email and I'll use that on this pop-up here so paste and actually another thing is that once you complete payment here are at the dots then you should tell the client that the payment was successful and so on uh let's do this before we perform the payment let's do this here we can console.log so that we know something have happened otherwise we wouldn't we can say a message here maybe payment successful successful and also returns log to the console uh maybe the data that we get back which is this response.json so I'll copy that and I'll paste it here just to see what we have so I'll save now so let's start this process again at our app let me remove this one then at our app Let me refresh and once it loads you can click on this one now it's rolling now here you should use this details so I'll copy this one and paste it here and then I will use this one copy and paste it next as the password so I'll test the password and I will log in it's logging in let's see so once it's logged in we have now we are performing payment for this and this let's complete patches and we should go to our app here as it completes purchase and I think it failed oh okay it was successful but it felt execute uh Json here so since it was returning a promise but the payment was successful so we can confirm that by going to sandbox so sandbox.paypal.com and you log in to either your personal account or your business account on personal account it should decrease the amount that was there but on business it should increase so I'll log in here let me include this I'll copy and I'll paste here login so you can see we have two payments now on on today this was the first one that I was showing you at the beginning of the video for the demo and now this is the one that we have performed just right now so it's working okay now the next step is to maybe you know save the order to the database and you know you can show it the current and so on so for other details we have it both here and also we have it here so uh actually what I was supposed to do here is to use a DOT then for this response so I was supposed to say dot then and then could have our order I'm not sure but let's see and here I can just log the order to the console console DOT log of order and let me say this is the order or I can just call it response I think I'm missing this return here so um so here what I did is I include a return and then here we log data the console so this data has more details about the patches so you can see you have an ID we have the payer information and then we have a payment ID there we have payment source and we have purchase unit and so on so I think this ID is the order ID and now you can use this other ID to update your order at the database or save more details about the order at the database okay and you can usually do that on the back end API remember before we send this data to the front end we will already be having it at our capture here our response here so right here after a complete payment you can do your database updates here okay DB updates and remember also here you are creating the order only that it was not being paid so P also here you can perform a DB update DB update so what you can do here is create the order and then once payment is successful you can update the order as paid right here and if you want to know more about other details I think you need to explore the docs more uh I don't know if I will get it paper developer on us there's a oh so let's see or does API yeah we have it so you you just need to search on this others API and see what we have and you'll see that you can create a post you can create an order here you can update an order and here you can get order details okay so if you need more information about the order and you are having the ID of the order then I'm sure you'll be able to use this a PayPal API to get more order details and make changes to your DB so you can explore the documentation more so one last thing that you might want to do is to conditionally show the buttons whether user has clicked this button or not so that is just a simple State Management of whether the button is clicked or not if it's clicked you show if not you hide so I will not cover that and that means that this is the end of this video and that is how you can process payment with PayPal it's pretty easy in both the react technology yes let me know if you like to see more uh Paypal payment videos and also more react and Tailwind projects and tell me exactly what you want to see next and I'll be checking them out so that is it for this video and I'll be seeing you in the next one foreign

Channel: Chaoo Charles

Views: 18,217

Keywords: chaoo charles, chaoocharles, chaoo, charles

Id: u2OuFb9cJrY

Length: 44min 23sec (2663 seconds)

Published: Fri Mar 10 2023