End to End Payment Integration - PayPal | Start to end application from the scratch

hi guys this is arif from techshare today i am going to show you a into end payment integration so for today i am going to show you the paypal integration so i'm thinking i'm going to create two videos so i already have created another video before where i showed you how can you integrate the braintree payment system to your um web application and through that we can integrate the credit card or debit card implementation integration so today we are going to use paypal and paypal integration is quite quite easy so i'm gonna show you start to end okay so there are couple of approach so if we go to the next slide then you will see so first approach i'm going to show you today is using node.js and react based application but we're gonna use javascript okay so we will use the script reference and then we'll take from there but another approach is since we are using react so we can also use the react component like there would have some sort of package for um paypal and we will download that or install that to the solution and we will take from there and that would be easier but just let's ah use the first approach for now okay so obviously any payment system is ah is something integrated with couple of systems so first of all you would have your own backing system and then you will have different client applications and from the client application ah for example if you wanna do any transaction through different payment gateway then the ideal approach is ah your client will communicate to your backend system and back-end will communicate to any third party payment provider ah to do all the necessary transaction transactions and everything okay now enough talking so let's jump into the the solution here okay i am going to share this repository to you guys in the description so just grab this one so first of all i will create a small back-end application and then i will create a small react-based application and then i'll use the the you know paypal recommended api or whatever and i'll integrate and i'll see how actually uh transaction works you know so i'll do a sort of demo after after the implementation okay so let me create let me create so let me okay so i already have created a small backend so let me do from the scratch so what i'll do is first of all i'll create a new file so let me okay let me let me name this one as um people uh no sorry uh backend server dot says for example okay so as you see this is a node.js application so node.js application is nothing but a javascript file and then you can literally you know create as many file as you want functions class and everything and i really am now really you know a i would say i mean i really like node now so if previously anybody asked me that what is your favorite backend um platform i would probably say to them that microsoft dot platform but now i'll probably i'll go with this node.js because this is really simple really easy so let me let me just show you how easy it is so first of all what i need to do need to install couple of ah packages so first of all i need to know i need to install npm install ah express what is express express is the is the server itself so when you are going to create your own api and you are going to support different different um you know method like http post gate and everything right so obviously you need some sort of server so express is a built-in um have to say very very robust and very easy to use server you can use that and you can create your own endpoint or you can say apis through that so we'll will do that so you need to install the install okay npm install and then you need to use install express that you will do and then also need to install um uh request i guess yes and then that's all so let's let's create a very small back-end now why i'm creating my back-end because the idea is from the front end we will have our paypal button and there will be some sort of amount and then once we click that button the idea is we are going to do a transaction using that amount so that people can can reserve that amount for me okay my account actually so that will do that is basically the integration okay so let me let me do this um so we are gonna require express right this is the number one okay number two what we are going to do is we are going to create a application using express that's all okay then we also need a port for 000 okay awesome then we need to listen listen port 8000 and there would be a callback function here and then here we can say console.log server is running on port 8000 okay now look so this is this is a continuous listener so that means application will not going away from the applications application will keep live so what you need to also do what you also need to do is to handle the different um different uh request like whether the request is a get request or post request or put request or delete request so for that we need a route or kind of thing so just imagine that all the requests are in points so we will have our different endpoints somewhere so the i i guess the i mean you can do in many ways but the easiest way i find is this so let me create a root like this and then let me define a function here that function will accept my express application and what this function will do is this function will give us the endpoints so how we can do that is some simple like this app dot so here what we are going to do is we will define will define all the all the function here like app.gate right so get you need to provide the path here so for example this is my testing point ok and then here this is important here this app this callback function will take a request and a response okay like this sorry um this is a different syntax so need to use this way okay so now uh interestingly this node is like all about async so why don't we get that of course we get that so we can use this async callback function here and then what we are going to do is we need to test first right so what we will do is we will say ok response dot send send me a response with this object so for example data equal to this is my test in points for example okay and now this roots is like you know we define a function and then we need to we need to use that rules so what we are going to do now is roots and we will simply call that that's all so this way what is happening is we actually create a very small uh our input our api and the endpoint is only now testing points and it is actually returning as jason data and the simple text message okay so let's test this one right so for that what we need to do simply is node and then you need to we need to type the javascript file so backend server okay so you can see the server is running on port 8000 let's test this one so for that what you can do is you can you can create you can use your postman obviously so this is our app.gate so you need to use the gate and then the endpoint is http localhost 8000 port and then test in point right and then we will press that on and then you can see the response we are getting successfully this is a testing point means my api is working so i have just created a little api so the idea is here i'm gonna create two um two in points so let's jump into the uh people uh documentation and see what we get from there so every time this is actually the ideal ideal thing so every time if you want to develop anything then ideal place would be the provider itself so right now we have the provider people so we'll follow everything from there that is the easiest way now awesome so people already recommended many thing uh in many ways but what we did already is that in point right so we need to create two inputs basically number one is it says that create payment in point and another one is um execute payment the idea is when you press the button then create um payment in point will be called and create endpoint will do some sort of transaction or you can say pre-authorization so that will actually reserve the money and then ons or finally when we call or the the api the paypal api itself calls the other endpoint uh execute payment and that time the payment will be ah you say confirm right it's a kind of two-way handshaking kind of mechanism okay so for that what we will do simply is we will copy paste everything so we already have the endpoint so we need to rename the import to for example creating point and this is a post so let's do that let us just do post and then we say here create endpoint sorry create payment right ok the create payment this body what we will do will copy paste everything from from this from this website and then we'll understand later on what's going to uh you know how it actually works so we'll do that later on so just copy until i guess here ah yeah i think this is a place copy paste it here right so now couple of things so it says user password right so the idea is um you are going to do your brain sorry um paypal integrations obviously you need your account there in the paypal so that you can do the transactional people can send the money to your account so that's the idea so for that you need to create your credential user id password there in the paypal and then you also need to enable the sandbox or you can say the testing environment they are in paypal that way people will give you some data or you can say some credentials and we need to use that on here so that we can test it and then once everything will be working fine then what we're gonna do is we'll we'll move to the production uh environments means the sandbox user id password there should be another another set of credentials for production and we will use that one straight away and then that way that would be live right so that is the idea okay so now for that so what you need to do you need to go to developer portal people so i have already um created my because i already have paypal account so what i needed simply to create or you can say annabelle the sandbox and that i did and i got my credentials here so i'll do that now uh so what i'm gonna do is uh okay so that should be this one let me grab the sandbox okay so you can see here i did actually made couple of uh transactions sandbox transaction you can say test transactions so you will see that record here so we will also verify that on later on so what i need to do now is do we need to grab this app and credential section you need to go there and then you need to create your app first so once you enable the sandbox then you see only this default application then you might need your own application so that way you need to first create the create app and you need to just press this button and then you need to just fill something and then you will end up having this kind of application i need to go there and this is the sandbox account and client id so what i need to do is i need to copy the client id and then the client should be your client id okay so better we are going to use this information or you can say credential in two in points so we will define it globally so for that what we will do is from there they already have defined globally so i'll copy this three and then here okay so what i can do is you know this inside the root i can define this one okay so let me just align a bit it looks a bit ugly ah okay so let me do that quickly okay so now the client i will copy uh from from my client so this is there so now i need to paste it here and then i also need secret so secret is that um copy and i need to paste it here as well press it so i have the client and secret and this is the end point people in point so that should be you know as it is so creating point is completed so we also need to define uh our own okay so it looks like something is missing here so that's the one and then okay so let me let me paste it here okay so now what i'm gonna do is let me copy one more time and this time that would be i guess the uh yeah okay see um yeah that's right that's right paste it here and what i'll also do is i'll just uh put a tab here so that it it looks a bit aligned although it is not aligned but anyway so now this this endpoint has done so i have the create payment so we just copy paste from there and we'll understand later on and then we also need another endpoint called execute payment so let's do that quickly so we are not going to follow their approach because they have the different way of you know initializing the express server and everything we are not going to we will simply create our own way so i did the first one so let me create another another um another endpoint here so we say app.post and that would be our um that would be our name execute payment and obviously it has a callback with async and then it will have request and response as well and then that's all so here we're gonna copy quickly from here to here to i guess here copy and then paste it here okay i don't see any error or anything so hopefully it works it will be working no worry okay and i'll do little bit align so i'll just simply here to here i'll just put a tab that's all okay now try to understand what is going on here ok so our app server is our server is done so server side means now our this server this small server this node.js based small server is ready to handle all the transaction especially for people okay so what it has is basically if you see the create payment right so we need to under we need to clarify this one a bit so it is calling the people in point here and obviously this client id and secret is there means ah it will understand that who is actually owning this credential and based on that information people is going to do all the necessary transaction so here it it has also different things so what it has it has a body object inside the body so this is kind of a syntax you need to use the same thing okay this is kind of a grammar defined by people so you need to also pass this kind of object otherwise it will not work so there is the intent so my intent is to do a cell means a transaction and then you have the different parameter pair is paypal and then ok very important is this amount and currency how it will come because we are not going to send this information here right in the parameter you can send the request body we are not going to send that so how we are going to collect the amount so we you need to collect the amount from the backend system means for example in the front end you are doing some sort of transaction or you can say you have a card or e-commerce system where user might have created their own cart or something but definitely the card also is presents in the backend system means in the database or somewhere right so that way what you need to do you need to grab that you have the session already the requestation so you can maintain that and from there you can take the amount of everything that you need so you need to maintain the state and everything for that transaction or you can say the application and then you can grab the data from there so the date of right now we are going to use this 5.99 and then this is a currency usd for example okay and then you can also uh provide this return you are and can see url in case if you if you want to return to a certain endpoint for example if you wanna end off in your client side there will be some sort of confirmation page so maybe you like to you know redirect there so you can use that so you can provide this information here and if any any sense or license or any accidentally or whatever if users tries to cancel the transaction then where are you actually going to land so you can also define that you know your client ah endpoint or you can say the url there as well so this is quite self-explanatory and quite easy this create payment on the other hand if you see this um execute payment right so execute payment does what so first of all it says get the payment id and pair id from the request body okay so once you do that right so once you do the create payment then this paypal will give you some sort of response to your client system so you you just need to take that and you can actually from there people will give you the pair payment id and pair id because you are providing this client id and secret this kind of user id and password and from there people can know or will know that okay who is this user and based on that people will provide to the client about the payment id and pair id and the next call people will make execute payment to you or if you want to make by yourself then what you need to do you need to grab the payment id and pair id from the above you know response and then yeah you need to call this one and then it actually does is basically confirming the amount that's all so you also need to provide the client id secret and in the body you see the pair id and the amount and everything so yeah that's the thing so now um let me adjust the thing so it has 5.99 so let me do the 5.99 as well like this and let me just uh we can actually run this application um in postman we can show you how actually it works but let's just create another application ah small react-based application and we'll just put a button there that's all so we're not going to implement a very nice or fancy thing we'll simply put a button and from there we'll test whether this is working or not so for that what we are going to do is we will will uh just let's go this directory i have the sample back-end application here let me create a sample sample uh app for example or you can say sample um sample people or you can say paypal integration simply okay so here let me copy this directory and let's go jump into here and cd i need to go there okay i'm now paper integration and then we'll create a small application react application here sorry react app so it's going to take a time so i'll actually jump into all right so i can see that you know all the installation and everything has done so let me just jump into the ah let me see how many directories okay so we need to go cd people integration app and then here we need to open another visual studio right so this is my application react application just i have just created right okay now what i'm gonna uh do is uh this application is my um um sample backend so i'll i'll go here and i'll i'll run this one so for that node and then backend server so this is working fine so we just put this one aside and now this is my client application so from the client application what we are going to do is pretty easily is this is the app right so let me let me just create a folder here quickly and say components ok and there we are going to create a file or you can say component saying ah people people dot this for example right and then where you are gonna do is functional base applica component we are going to create here the name is people people component let's just do let's do like this way and here are gonna put like people integration ok and then here in the app right so in the app what we are going to do we are going to import this this one import paypal component from people awesome and then here this header section i don't need this one what i'm gonna do here i'll just put this people component and then we'll just simply run so for that what we are going to do is we will say npm start so this application so i did not do anything yet so we've just created a a sample um application react application and we've already put a small component there saying paypal integration so we are going to put a button there simply okay now let me go here this paypal component let me let me do here something so just go to the again the implementation side here and then what we are going to do is we did the server side implementation already now we will jump into the client side application what they did is they have the script reference let's copy this script reference here and then what we are going to do is we will put it here in the index file so in the index file just above the body intake we're gonna add this script reference here number one number two we're gonna do is it says the div okay so just put the div here ah here for example and then we have this uh script inside the script we have this this this function so we cannot directly copy paste here because this is a real react application right so we are going to do a little bit trick here so what we are going to do is we will use another use um use effect so we are going to use another component use effect and in the use effect what we are going to do is we are going to use use effect here and then here ah we are going to define so use effect you know you understand what is you use effect right use it use effect is is kind of your m your payment uh sorry uh component did mount kind of thing so in the function based application so there is no place for that life cycle event right so that's why use effect you know kicks in so this is really important to understand everything so the use effect what we are going to do is we are going to we are going to do this one so for that lets do this lets uh copy and paste it until this point copy and paste now the problem is there is no such thing called payment sorry people so when we use the or you can say inject the javascript file to the to the html index.html kind of inside the dom then everything can be found inside the window so what we are going to do is we we just put this window dot people okay then save this one so you can see here there is no error so far so so far it looks good so we have the environment sandbox and then it has something right so in the payment section it says that okay so they are gonna call this create payment and they they also gonna call on the authorization on authorization event or you can say method they are calling this execute payment so we need to adjust this one based on our implementation so we'll do http local host 8000 slash we have the create payment right and then we will copy this one and we will paste it here and the other payment provided sorry endpoint name is um what is the name uh execute payment so let's copy the execute payment here and paste it here save it so we have the localhost so i have i have my my own own kind of import so let me go here jump into our application you can see straight away that it has let me go to f2l so that if we if we see any any error then we'll see here right so now we can see the paypal checkout button is already there so just think of a scenario where you have your own application e-commerce application or any sort of application that you are going to do as some sort of sell by people so you can do is you can put the button there and then what you need to do you need to do uh this script so you need to copy paste that on and you can put in using factory initialization of the application of that certain page or component and then let's do let's click the button and let's go to the network tab and see how it works so maybe if the first try it might not work then we'll do some sort of adjustment and we'll see so when i press that button then you can see automatically this this window is popping up so this is kind of my or you can see our um people people actually bringing all the information for us so it's still pending so create payment so it's trying to call http localhost createpayment and it is still pending means something is not working perfectly here so let me go here you can see here so it is actually throwing some sort of exception here and we need to figure out why okay so what is happening is so you can see here so my application running on locals 3000 right but um my node.js application is running local lost 8000 so that's why it's not going to work because there is the cross origin thing so we need to resolve the cross horizon i also show you how can you resolve that one okay just bear with me awesome so now what we found is let me repeat one more time is this locals 3000 is is not working because there is the cross origin resource course issue means cross origin resource sharing so when there is the cross origin then this is kind of you know you need to handle in the back inside system that okay if any origin other than this origin and you know comes to the system in the back end api then how you are actually going to approach you need to do that you need to handle that here so what we are going to do here is every request when we are going to process that here through the express then we will do a kind of you know um we will actually go fast here let me copy paste this one so see what i did is so we have the app so we'll tell that hey express every time you are going to execute any request can you also do this thing for me so what you you will do is you will fast so this is kind of the first task so in the response header can you please add this one access control allow version in the response header also can you also please add this one and also this one okay and then then you actually go to your next request means whatever the request you are actually executing through the client whatever the request the client is requesting that will be triggered at this point here okay so that's all save it and then hopefully the ah see i am explicitly defining this one http local is 3000 meaning we're actually allowing this host or this origin and then if any request coming for that or actually for all the request we are actually you know in the response header we are adding this allow origin for that one only so if you are example for example if you are gonna use another client with localhost 5000 that is not going to work with this right so you have to explicitly handle that one uh so what i'm gonna do now is just start it again okay refresh clean awesome you can see the okay means it is working now so now we need to use the this we need to use the credential the sandbox credentials so if you if you uh you know create your sandbox enable your sandbox then paypal will also give you the sandbox user id password i'll show you i'll show you so now login then you'll see that it's successfully logged in and it goes to the sandbox.paypal.com see here and this is the amount we are going to i know transaction we are going to make the transaction here and then ons continue means yeah it will proceed and it will give you ah so it will now execute payment it is calling the execute payment you can see here and there if everything goes successful then you will see a success response from there let's see probably execute payment is not working somehow let me do that let me check yeah so execute payment is rejecting okay okay i understand so if you wanna pass um if you wanna pass the data through the body right so we also need to handle that in the nodes s nodes this application by default doesn't handle uh any data uh or you can say we simply did you know just don't accept any data if you pass the data through the body request body so you need to actually add that module to the node and you need to explicitly tell node or you can say express application that hey client also want to send some data through the body so for that what you need to do is you need to okay let me grab something here so for that we also need this thing um body parser yes so we need to use the body parser so for that we need to install first the body parser so let's install npm install body parser okay and then we need to require body parser and then you need to tell that you need to also tell that hey use my body parcel like this way so app.usebodyperson.json something like this so you need to tell uh here maybe it's fine so you can say application express application please use body parser now save this one oh sorry sorry sorry why i'm installing again run that node back in and then refresh now and then let me see what we get now okay ok hopefully this time should be fine ok i can see it is working fine because the execute payment gives you the ok response means status success so the payment has successfully deducted how you are going to know that if you see the last transaction time uh then you probably see that so let me jump into my my paypal account and then i'll verify the transaction so in the api call so it is around 11 4 so we will see um okay what it says note that all features are available for live transaction okay so it's only available for live transaction so unfortunately i cannot show you guys but yeah it should it should work it should work yeah here you go so you can see here so we are having the transaction the call date time probably they are using utc so that's why i'm not getting the exact my local time but yeah so we have we have the we have the status here so let me do another one then we will understand so right now we have this six four i have eleven ah five eleven four so we have the utc time here five hours probably uh behind we are actually five hours ahead so that's why you'll see here this is actually the ah you know transaction so another thing you can we can do is we can put a put a alert button here for example um in the in the client side this is my client here this is the success we can say we can either redirect to other component we can show a certain component or certain message even we can actually show a sort of alert just to test payment got successful right and then we can do another transaction another go click so you can see the transaction amount see this is the alert successful payment got successful and i'm pretty sure you will see here so let me refresh this page and you'll see already refreshed got refreshed um now let me let me see the refresh okay okay now see so 6 6 40 so now is 7 so it just got this transaction previously it was this transaction so ok now so translation is working fine so it means my my people integration is done so what we did basically is we have the small backend application here we have created a small web application web api actually and then we had to use different different things so first of all we needed to install the express then request as well because we are using this request to because the request is using or the sample provided by people they are using request so we also needed to install the request and then body parser why we needed that because we are going to pass the data from client to server and that's why you need to install this one otherwise the node.js application will not by default or out of the box will you know actually not not say sorry make my pattern that should be the express express is not going to count your your body data so that's why we needed that one as well and then the other thing we also needed is because this we also needed to you know ah bypass the ah the client origin so that's why we also needed this thing and i'm gonna share everything to uh to you guys i will put the repository link in the description so that you can get it from there and this is actually your backend api and this is your front-end small application but the approach is i straight away use the kind of you know ah there is no no component approach so no component approach means um you know there i did not use any paypal ah component from the node or you can say you know react based component i didn't use that so i simply use the html and javascript so here i use the reference and this is kind of a vanilla approach where you know you are using the javascript basically but the next example i will show you guys how easy it is if you just install a sm a a package a paper package and react component and then that would really really be easy so i'll show you that one in the next video hopefully you will like this one and if you really like this one then give me a thumbs up and also subscribe my channel and if you have any question then just ask me feel free to put any comments in the comment section i will be really happy to answer those questions okay then see you very soon in the next video bye bye have a good night

Channel: TechShare

Views: 2,655

Keywords: sitecore, sitecore cms, sitecore for beginner, sitecore learning, sitecore tips, payment gateway, braintree, end to end payment gateway integration, payment integration, nodejs, react, end to end payment integration - paypal, using nodejs and react, easy payment integration, react payment integration, paypal payment integration easy, nodejs and paypal integration, Start to end application from the scratch

Id: iN-3jJSMdzM

Length: 41min 12sec (2472 seconds)

Published: Sat Aug 22 2020