PayPal Checkout Integration Tutorial For Beginners - [2020]

hey everyone and welcome back to daily tuition in this lecture we are going to see how to create a payment gateway with paypal i got many requests to make payment integration tutorial using paypal so i decided to make this beginner level tutorial that makes you more comfortable with people and feels more confident to make people integration in your project so this is the latest and easiest way to integrate people in your project so before we getting late let's get started and see how to integrate people with your existing project you need to first open the paypal website so i'm going to just open my browser and just type here paypal when i press enter i'm going to have a website www.paypal.com i'm going to open it and create a new account on this website paypal is one of the most popular payment gateway option for online shoppers and has benefits for you as a business owner too a payment gateway isn't a only solution for creating online payments but it is one of the most easiest option to get started with to use paypal as a payment gateway provider for your online shop you will need to apply for an account with them so you just need to head on to paypal.com and create your account so just click on sign up to create a new account or if you have the existing one you can click on this login button i have the existing account on paypal so i'm going to click on this login button and i'm going to just specify my email id and password to login with paper once you log in to paypal you will get the result something like this just click on this my paypal now this page will show you all the information of your account now i'm not gonna do anything here i'm gonna just hover over these tools and click on these all tools when i click on it i'm going to have here different options i want to integrate paypal so i'm going to just select this integrate paper here i have different options to integrate people with my project i'm going to use this api credential option to integrate this paypal with my project so i'm going to click on this open button now here you can notice we have the paypal api the pre-built payment solution the rest api integration and here i have a different options to work with paypal api i'm going to just click on this rest api integration using list api it's super easy to integrate people with your project so i'm going to click on this manage rest api app and credential once i click on it i'm gonna have this rest api apps here you can notice i already have this payment app i created this app using sandbox account right now you don't have this app in your account because you didn't create it yet so note here to create and delete your app just click on this paypal developer experience link i'm going to just right click here and say open with new tab and open the paypal sandbox account paypal has a sandbox environment to test functionalities before the developer makes them live this way the software developer can iron out any issue before the business start accepting payment from any customer so instead of the real payment we are going to make a demo payment with a sandbox account with a sandbox account you will get two defaults account or you can create more than two accounts if you want so i'm gonna just click on these accounts by default you have two accounts these accounts are helpful to make a demo payment a developer can easily get access to this sandbox account by signing up for a paypal sandbox account so when you click on the account you will get two defaults account this is the facilitator account and this is the buyer's account you can notice here i have two more accounts here if you want to create multiple accounts you can click on this create account button using this button you can create two type of account for business and for personal here i have four accounts two accounts are default and two accounts are optional you can create your new account by clicking on this create account button that's super easy to create a new account just click on it and just specify the account type and then specify the country that's super easy to create sandbox account i'm gonna close it because i already have two accounts here i'm gonna use this account and i'm gonna just edit some information from this account now you can edit all the information of this account right from here just hover over three dots and click on this view and edit account and from here you can edit all the information of your account you can specify your first name last name your email id your account type account id and here you have a different information of your account this is the api credential this is the funding section where you can specify the balance of your account so just click on this edit and specify the balance of your demo account i'm gonna leave everything as it is and just specify this paypal balance and specify password when you create a demo account with sandbox you need to first specify the password to it so you can successfully log in with this account so this is your email id and this is your password click on the change password and specify your own password to this account make sure the password is simple because this is just a demo account we don't have a real money inside it i already have password to this account so i'm not going to specify it again let's log in with this email id and password so i'm going to open a new tab and here i'm going to say www.sandbox.people.com i'm gonna just head on to this website and right from here i'm gonna just log in with this username and this password so i'm gonna just click on this login and here as a username i'm gonna specify this username the facility username i'm going to copy it and paste it here like this and i'm going to specify my password and just click on this login now you can notice i successfully log in with this email id and this password now this is the facilitator account where i'm gonna get all the payments from the user so when the user purchase any product from my website i'm gonna get the payment on this account now let me just log in to the buyer's account i'm going back to my website and close this and here i have this buyer account as well just click on this view and edit now here i have the email id and the password make sure you specify the password to this account as well in the funding i have this balance if you want you can change this balance and specify any balance here by clicking on this edit button now just for that i'm gonna just log in with this email id as a buyer account i'm gonna copy this email id and log out from this facilitator click on this login and here i'm going to specify my email id like this just after that i'm going to specify my password so here i'm going to say my password and click on this login button as you can notice this will just log me to my buyer's account i'm gonna leave this as it is and just log out from this buyer's account as well i'm gonna just log out from my buyers account and just back to my sandbox account and here i'm gonna just click on this my apps and credential now once you click on this my apps and credential you need to create a new app i already have here payment app i'm going to just name this app payment app if you want you can change this name and specify different name to this application to create a new app you need to click on this create app button and create a new app that's very simple once you create it let me just open it and here is the information of this app here is the sandbox account connected with this app here is the client id this secret code and all the information of this application i'm going to leave this as it is and now let me just create my payment page from where i can purchase the product and make payment so i'm going to open the php store and here i'm going to create a simple payment page so i'm going to just open the php strom editor which is my favorite editor for writing php code and now here i'm going to just create this simple payment page if you have followed the php shopping cart tutorial then this is just the next part of that tutorial if you don't know how to create the shopping cart then don't forget to check out that video first before you move on i'm going to just put that video on the top right corner of the screen or you can just find that video from the description of this video as well now once you complete that tutorial and create your shopping cart let me just show you how can make payment using paypal i'm going to create a new project with simple payment page so i'm going to create here a directory and name this directory paypal and inside this directory i'm going to create a new file so i'm going to create a php file and name this file payment dot php inside this file i'm going to create my html payment page here i'm going to just right click and create a new directory assets in this asset i'm going to have different images so i'm going to just copy some images and paste it inside my asset folder right here back to my project and here i have different images i'm going to just use these images in this project now let me just create my payment page so right here i'm going to simply create html snippet and i'm going to specify title paypal payment just for that right here in the head section i'm gonna link my style sheet so here i'm gonna say link style dot css so let me just create this file inside my paper i'm gonna create the style sheet file and name it style.css and inside this payment right here in the body section i'm going to create my main section of this payment page so here i'm going to save main and specify id card main and inside it i'm going to create my title for this page so i'm going to create a division tag with some classes and specify h1 heading back here with the text shopping card don't worry you can download all the source code from the description of this video so i'm not going to waste your time by typing all this code one by one we are focusing on paypal payment gateway so i'm not gonna type all this html code line by line just for that down here i'm gonna create a container here to print the product so i'm gonna just create here a container and inside it i'm gonna create my grade division tag inside this div i'm gonna create two columns this is my column first and this is the column second inside the first column i'm gonna put my all card items so i'm going to just put here my first card item so here i'm going to just put this division tag where i'm going to have the product image the title of the product and all the description of this product and just for that in the second column i'm going to just put the subtotal section so i'm going to just put here subtotal section like this save the changes and now let me just execute this payment file in my browser so let me first start the apache server and this mysql database minimize it right click here and say run this payment file so once i create my payment page let me just style this so i'm going to just back to mystyle.css and paste the css styling for this payment page save the changes and back to your project and reload it i already have a complete tutorial on shopping cart you can check out that video from the top right corner of the screen now you can notice this is a very simple and basic payment page now let me just add my paypal button inside this page so i can make payments so what i'm going to do is i'm going back to my paypal website right here i have this doc section i'm going to hover over this talk and click on this checkout now from here you can add a simple payment button of paper so i'm going to just copy this script tag right from here and paste it before the closing body section so i'm going to copy this script tag and paste it before my closing body section right up here and now you just need to replace this client ide with your actual current id and right from here i'm going to go back to my payment app i'm going to copy this client id and replace this sp with this id like this and just start that i want to add the payment button so i'm going to just open the dock click on this checkout and right from here you can notice you have a code to add your payment button so this is the script tag paste it after this script tag right down here like this and instead of this body i'm gonna just specify my paypal payment button division tag so what i'm gonna do is i'm gonna create here a division tag with id people payment button and i'm going to specify this ide right here like this and don't forget to specify here hash because this is the id when i reload the browser you can notice i'm going to have a simple payment button here now i want to just modify this button a little bit i'm going to just remove this debit card and credit card button and this powered by people text so what you need to do is in this url right here at the end you need to specify a variable so here you need to specify amp person and specify variable disable funding and specify value to it so specify equal to sign and specify here credit and card so this will just remove the credit card and this debit card button i'm going to just back to my website and reload this browser so when you reload your browser you will have a paypal button so let me just grab this division tag and put this after this you attack right down here save the changes and reload the browser if you want you can add margin and padding to this button that's upon you now just after that i want to change the color and shape of this button so what i'm going to do is down here to this button right here inside this button i'm going to specify some properties to this button so instead of creating this javascript code right here i'm going to just put this inside the js file so inside this paper i'm going to create a new file of javascript and name that file index.js and right here i'm gonna put this javascript code i'm gonna cut this code from here to the source attribute i'm gonna specify this index.js save this file and in this index.js i'm going to paste all the code just start that to this button in the parentheses right here i'm going to pass argument so i can change some properties of this button so here i'm going to specify object like this and i'm going to specify style to this button so i'm going to say your style specify colon and specify object i'm going to first specify color to it so i'm going to specify color color is going to be blue so i'm going to put that in a single chord like this then i'm going to specify shape and i'm going to specify shape pill and now let me reload the browser as you can notice this will just change the color of this button and this will also change the shape of this button i'm going to open the index.js and right here i'm going to implement the create order function so i'm going to specify here comma so i'm going to just implement a function called create order i'm going to specify here create order and specify function to it like this and to this function i'm going to specify two parameters data and actions now this function is going to set up the details of the transaction including the amount and line item details i'm going to simply specify amount and execute this transaction so i'm going to just return here so i'm going to say here return actions dot order dot create i'm going to just see here action dot order dot create and to this create i'm going to pass my product details and to this object i'm going to create here key and value pair so here i'm going to say purchase unit colon and in the array on the first index i'm going to specify an object amount specified colon in the object i'm going to specify value to it i'm going to say here value specified colon in the single code i'm going to say 0.1 so now this is the value of my product you can notice here this is the actual payable amount of this payment page for testing i'm going to specify here 0.1 just out of that don't forget to specify here semicolon down here i'm going to implement the on approve function which is called after the buyers approve the transaction on paypal so just for that down here i'm going to specify comma and call a function on approve specify colon and specify function to it and here i'm going to specify data and action so i'm going to just implement here on approve function which is called after the buyers app put the transaction on paypal now this function captured the fund from the transaction so i'm going to just return here actions dot order dot capture if you want to learn more about these methods and functions you can check out them in the paypal api so i'm going to just call this capture method which is going to capture the fund from the transaction and just out of this capture i'm going to just call promises so here i'm going to call a method then so once we capture the fund i'm going to call the promises then and here i'm going to call a function and pass the parameter details i'm going to get all the details of the transaction inside this detail parameter inside this function i'm gonna just simply say console.log and just print this detail variable like this save the changes and reload the browser now let me just make a simple payment so when you add all the products inside your card you will have a payable amount like this and when the buyer click on this paypal button it will open a new window where he needs to log in with their email id and password now here i'm going to just log in with my buyers account so i'm going to just open my sandbox i'm going to just click on my accounts and here i have my buyers account and what i'm going to do is instead of this buyer's account i'm going to just log in with this personal account so i'm gonna just open this account and copy this email id i'm gonna specify this email id here and specify password when i click on this login i'm gonna have the paypal checkout window and from this window i can pay this amount i'm going to scroll down and click on this pay now button i'm not going to have anything here but when you open your console you will have an object here this object will return all the details of the transaction because if you open your index.js here i just console these details using console message so when you open your console here you have all the details of your transaction here you have created time of the transaction the id the links of your transaction here you can find the pair's address email address name pairs id the purchase units then you have your amount the payee payments and all the information of your transaction so using this object you can make your payment invoice you will also have a status message here completed so this payment is successfully completed so you will get here completed status so using this object you can create your invoice you can specify the successful message to the user or you can do lot more with this information what i'm going to do is instead of using this information let me show you how you can redirect the user when the payment is successfully done so i'm going to open my project and instead of this console.log i'm going to just redirect the user on different page when the payment is successfully done i'm going to create here a new file of php and name this file success dot php and then i'm going to create a html code here like this and just after that as you can notice i'm going to just create here a main tag and inside it i'm going to just create a division tag with this image and this message payment done successfully as well as i'm gonna create on cancel page as well so i'm gonna right click here and say new php file and say on cancel and right here i'm going to just create html and specify a message payment cancel for some reason so if the user cancels the payment i want to display this page save the changes and now back to your index.js so what i'm going to do it just after this console message down here i'm going to just say window dot location dot replace i'm going to call the method of location object and right here i'm gonna just pause this successful page url and i'm gonna copy the url of this page and i'm gonna paste the url of this page inside this replace parenthesis right here in the double quote just like this and just for that if the user reject or cancel the payment i'm going to just specify here comma and create another method and i'm going to just implement another method so here i'm going to say on cancel now this method will execute when the payment is cancelled from the buyer so here i'm going to create a function specify data parameter to it and inside it i'm going to call this window dot location dot replace and paste it down here and instead of success here i'm gonna say on cancel like this save the changes let me just reload my browser now let me just make a payment so i'm gonna click on this people button this will just open my buyers account i already log in with my buyers account so i don't have to log in again so i'm going to just click on this pay now button when i click on it you can notice this will just redirect me to the successful page here you can notice i have a message payment done successfully so if you want to redirect the user on the successful page you can put that page inside the on apple function let me just back to my payment page and now i'm not going to make a complete payment i'm going to reject the payment i'm going to click on this paypal and i'm not going to complete this payment so i'm going to click on this cancel and return or you can click on this close button as well i'm gonna click on this close button you can notice i'm gonna have a new page on cancel.php and here is the message payment cancel for some reason so if there is any reason buyers reject the payment you can redirect the user on different page so this is how you can integrate paypal in your project if you find anything useful don't forget to click on this like button and press the subscribe button for more programming videos that is all for now i will see you in the next one [Music] you

Channel: Daily Tuition

Views: 73,134

Keywords: Paypal Checkout Integration Tutorial For Beginners - [2020], Paypal integration, learn paypal integration tutorial, how to create a checkout system using paypal, learn how to make paypal, how to use paypal button, paypal, integration, payment gateway, payment, checkout tutorial, learn payment tutorial using paypal, how to integrate paypal in the project, paypal project, tutorial, how to, learn, make

Id: UEJHSPM-Qiw

Length: 22min 46sec (1366 seconds)

Published: Sat Oct 03 2020