How To Integrate PayPal in ReactJS - Tutorial

hey guys how's it going i'm back here with another video and as per request by a viewer today i'm going to be teaching you guys how to implement the paypal payment system into a react application so basically for most people who have businesses and want to implement a payment system into their application they usually have a hard time using using paypal because for many people it is not very intuitive so that's why i think this could be a good video for you guys and yeah so the first thing you're going to need is a react application i already have mine over here and mine is empty so in our project it's basically going to be a button uh where you can check out and when you click on the button there's going to be like an option another button with option to pay by paypal and you can click on that and do all the authentication and the payment through paypal itself and it will return and you can see in your account that the money has disappeared from your account and it went to someone so in order to do this the first thing you need to do is go to um go to the send the developer.paypal.com website and you need to create an account so basically you can just ignore this i'm going to delete all these accounts and also the my apps and credentials which i'm going to create in this video but i really wanted to show it to you guys so that you guys can basically have a clear idea and i'm going to delete all of them so don't use the same as me so the first thing you need to do is go to the accounts and you need to create an account okay so i'm going to click on create account and we're going to choose business account you can choose like the country i'm going to choose canada because it's basically where i live so i'm gonna choose canada and make sure that you're choosing business because you're only able to sell stuff through the api if you're if you have a business account and you're only able to buy it if you have a personal account so we're gonna create two accounts we're gonna use two accounts one personal and one business the reason why is because we're gonna use the personal one to buy the stuff and for information we already arrived like when you create an account into in the developer.paypal thing it already comes with two default accounts one person and one business you use the default one the default personal one to log in and make the payment in your website and use the business one to register your website so so if you want to log into your fake account just to test and this is what we're going to be doing in this video you need to go to the sandbox.paypal.com and you can log in with the following account so when you come here there's probably only going to be this two right here the default ones and you click on the personal one and you go to view and edit account and you'll see that a bunch of information appears here don't try to use the same information as i did because as i'm doing right here because i'll definitely 100 change it right after this video is over and you can come here and click login and use the following information so i had already logged into this account so that's why it already appeared there so i can copy the system generated password click here and you can click on login because it's gonna login into your account and i have i have this one this one is the one i already created and let's just leave it there the name is sb s3bz something like that so let's go to my apps and credentials and over here i'm gonna delete my old application um so i can show you guys okay this yours is gonna appear like this just with the default application and you can click on create app and give it an app name so i'm gonna give it a name of test right and choose the the account the business account i created and you can know it's it's a business account because it's the email basically says at business right so i'm going to choose this one and i'm going to create click create and you're going to be prompted with a bunch of information but more importantly the client id i need you guys to copy this client to the id and keep track of it because what we're going to do now is we're going to go to our react application so in our react application we are going to basically just have a as you can see a simple react application here and we're going to have an app.c gs and the components folder the components folder is where we're going to render the page where we make the paypal uh where we make the payment right so this is why we have a components folder so if you come to the index.html there is a link in the in the documentations of the website so if you want to check that out you can go but basically there's a tag uh which is a script from paypal and you can just copy and paste it into your pub into your index.html i already have mine right here and basically yours will be just this right so i'm going to raise my client id and yours is just going to be this something like this sb i think this is what it looked before so you can just copy and paste this on your index.html or you can go to the documentation and copy from the website itself but what you need to do now is copy the client id that we received right here you know this and paste it directly into this so i'm gonna paste it here and at the end you need to set the currency so i'm gonna put an n symbol and write currency equal to my currency in my case it's canadian dollar so cad and you can save this okay so we can close the index.html and you can come to your app.js file right so what we need to do here is we need to create a button which is going to represent the checkout so um button checkout and i'm going to create a state so the state is basically going to represent if you're going to check out or not so const checkout um set checkout and it's going to be a boolean so false and let's write on click and pass a function which is going to be whenever we click the button we want to set the checkout equal to true basically we're saying that whenever we click the button we want to go to the checkout page and now let's put a basically a conditional rendering we're going to write if checkout then we want to if we are in the checkout page then we want to render the following and let me erase this let me create the else so if you don't know what i'm doing i'm using a a way to to conditionally render uh things on on react j on react.js or in javascript in general basically it's the different syntax but you can do it in various different ways so i'm gonna finish this like this and i gotta add something inside of here we're gonna create a component called paypal so i'm already going to write this here and this is basically our application right if we are in the checkout page we want to render the paypal component if we're not we'll just want to render a button called checkout which if we click on it we set the value for checkout equal to true and then we render the check the paypal page and for now we need to create the paypal component so we can go to the components and create something called paypal and i'm going to use the rfc command so that it already creates everything to me and for me and we need to render basically the button itself and yeah i think i think yeah just a button right so we we need to create a div which is going to be representing the the paypal button so let's give it a ref and call it paypal now if you don't know what i'm doing if you don't understand what i'm doing i would recommend going to a video that i created explaining wraps basically what i'm doing right here is in this page there's going to be only one thing which is the paypal uh button like the default paypal button when you try to buy something with paypal on the website and and how do how do we get the button from the public like the index.html because you can see we created the button right here and we want to grab that button in react so the way we do this is by creating a div which this is going to represent that button and we're going to set a reference to it so and we're calling it paypal and on the top here we can just access the reference by creating it by using the use ref hook so you can see it already imported the use ref at the top and that's good okay so we have our our paypal button and we need to do something about something with it so let's create a use effect because whenever we render the page we want to render all the functionalities of that button so let's imagine something that i want to buy i'm thinking maybe we want to buy like a table so in this example we're going to be buying a table we want to sell the table so um let's create a simple implementation that would reflect that so let's call the window dot um paypal dot buttons and this is the the mo this is the common implementation so you don't really need to understand why we're using these names this will always be the same so just keep keep in mind that this is how you're going to use it in in every paypal implementation so at the end we want to render um the ref that we defined above so paypal and dot current so when we call for the we call for a window of our our dom and we get a button from the paypal reference and we want to render the this information into this uh div right here this is basically what it's what it's saying right so inside of here we're gonna set all our our information about our button and in order to do that we need to create an order so there's this you can see that this is an object right so there's two curly braces and we want to create an order inside of you so create order and it's going to be a function with data actions and error and we want to use the arrow syntax because we're creating a function and inside of this function we want to return so we want to return actions dot order so we're basically creating an order and you can see that inside of here we're gonna give a description for the order we want to give the currency the the value like how how expensive or how much we need to pay to purchase this so let's write purchase um actually let's let's write intent this is something we need to do and we want to give it a value of capture and the purchase units and we want to give it a value of basically it's going to be an array and we're only going to have one unit into our paypal button so let's just pass the single the single order or the single item in our store that we want to sell which is going to be a table so let's give it a description of a cool looking table you can put whatever here so cool looking table and the amount is um value let's make it equal to 660 650 and we also need to give a how do i say this the currency code and in our case we're we're using canada so let me pass cad you can put whatever you want but it needs to be the same as the currency code you created in your account in your fake account and whenever you you have any doubts what you want to do you need to create a fake developer account and the sendbox.paypal.com so what i recommend is go into your accounts over here and getting that account that you created and going to the sandbox.paypal.com and trying to log in with that account you'll see that this is your this is what appears right so let me come here and we created our order and that's pretty good so we need to add some callback functions because we want to do something if the function approves and we if the order approves and we want to do something if there's an error right so let's come here and write um on approve and it's going to be an unsynchronous function so data and actions and again uh an arrow function and inside of here let's write oh i forgot to add like a comment that's why it was saying it had an error and instead of the unapproved the only thing i need to do is i'm thinking of like console logging the the order so order equal to a weight and i want to grab the the order so order capture and maybe let's console.log why did it create a parenthesis i don't know but we want a console.log successful order successful order and maybe add the order to this so um order i think this should work right um no let me just console log the order itself because it might be an object so okay now we want to check what happens if there's an error so on error when it pass another function with the the following syntax so we're grabbing the error and we're basically going to console log the error really simple so we have the paypal button we created an order we returned uh an order for a table it's valued 650 canadian dollars i need to put a zero here and when it approves it's going to follow this function if there's an error it's going to follow this function so it looks a bit working um the only thing we need to do left is try so let's go to this and obviously there's something wrong the reason is because i didn't import the paypal into this so um let me import paypal from let me see paypal from um let me see no just one dot and components and paypal okay you can see there's a checkout button whenever i click it now the paypal basic implementation appears we can pay with this we can use the debit card the credit card or the paypal itself so let's click on paypal and since we created everything with our business accounts as you can see we have the different accounts right this is what i was talking about i want to grab the information of the personal account because we're going to log in with that personal account let me click to continue and okay in this case i'm already logged into this account let me uh let me i don't know if i can just yeah log out and i want to show it to you guys so i can come here to my sample sandbox account and i can go to the personal one and click on view and edit account and as you can see we can grab the following information the email id and let me copy and paste this it's already here so and the password so let me copy this and paste it here so this is just for like practice this is just for showing you guys so uh you guys would see what's happening this is a test as you can see it's the sandbox so no purchase is going to be made don't worry about that this is just for you to test so if you click on login um it's going to log into my personal account and i can basically complete the purchase so i can even put information about where i want to ship the product and let me see it's loading and i can choose the paypal balance i'm gonna pay now so i made the 650 purchase of a table and you can see that if i go to my paypal summary this is my account and if i refresh now the 650 dollar purchase was made but it's not appearing here for some reason but you can see that the there was a decrease in in my balance and here you can see that i made a payment and it worked so that's basically it this is how you implement paypal and to react this is the way i found of doing this but i feel like it's a good implementation i'm not i've never implemented a paypal actually with a real application i've never been able to have that opportunity i've used stripe before so i would recommend using stripe stripe is very easy to implement so yeah but this is a this is a great way of doing this and i hope i could have served a good explanation to you guys so i hope you guys enjoyed this video and please leave a like if you enjoyed this video please comment down below if you had any doubts or if you want me to make a video about it this video was made purely because someone commented on my video asking me to make a video about this and five hours later or whatever like in the same day i decided to create this video so i would definitely be making videos if you guys ask me for it so i hope you guys enjoyed this video please stick around subscribe to my channel and i see you guys next time [Music]

Channel: PedroTech

Views: 24,699

Keywords: avascript, programming, css, html, react, react.js, angular, javascript framework, teaching myself coding, coding, code, tutorial, react.js tutorial, react.js in 10 minutes, reactjs, reactjs tutorial, reactjs crashcourse, reactjs building, javascript tutorial, javascript for beginners, javascript project, javascript crash course, frontend, nodejs, reactnative, react tutorial, algorithms, data structure, insert in database, paypal, payment processing, stripe, paypal api, paypal in react

Id: IXxEdhA7fig

Length: 18min 19sec (1099 seconds)

Published: Wed Sep 02 2020