INTEGRATING PAYPAL PAYMENT GATEWAY INTO AN APPLICATION USING JAVASCRIPT AND PAYPAL SANDBOX:
Before starting the integration of PayPal Payment Gateway into our application we have some prerequisites to follow:
1)A business account in PayPal.(Seller account).
2)A buyer account.
1)A business account in PayPal.(Seller account).
2)A buyer account.
Both the accounts must be Testing accounts which can be created from the developer portal of PayPal.
PayPal Payment Gateway is one of the safest and secure ways through which people can transfer money from one country to another country.
Step 1: In the first phase when you go to the PayPal developer console, we can see a
window like the following one:
window like the following one:
When you see the window opened on the right side corner, we can see a Login button, Click that button which directs you to another page like the above one:
Step2: If you are not having a PayPal account before, hit the Sign Up button to create a new PayPal account by signing up and giving your details.
Select the business account radio button for creating a business PayPal account.If you want a personal account select the Personal account radio button.
Step3: Once you select the business account you will be redirected to a window where you should select the plan after selecting the plan the page will be directed to a new page where you should give the email details.
Step4: After you give your email address then you will be redirected to another window where you should give the details like password and your business information. The window would somewhat look like this:
Select the business account radio button for creating a business PayPal account.If you want a personal account select the Personal account radio button.
Step4: After you give your email address then you will be redirected to another window where you should give the details like password and your business information. The window would somewhat look like this:
Step5: After you give all your mandatory information then PayPal servers will validate your information and then a new PayPal business account will be created with your name.
Later you can login into the developer console using the credentials of your PayPal business account.
PayPal button generation process:
Step1: In order to create the PayPal button, we use the following site provided by the PayPal committee itself.
https://paypal.github.io/JavaScriptButtons/
Once you visit the site you can see a window like this:
Step6: Click on the Customize and preview text and a pop-up will be opened where you need to give all the details like the merchant email id, name, quantity, price, callback URL etc.The screen looks like the below:
The important step here is to enable the Sandbox Environment here so that all the payments you make using the above merchant account will be live and tested. After you give all the details click on the preview button and the code will be dynamically generated for the above details.
After you click on the preview button we can get a code snippet like the above one:
Step7: After the code is generated using the details you provided in the preview window, copy the code snippet generated and paste it into your view, after that when you open the page using a browser you will be able to see a button like Buy Now.In order to manually configure your callback URL, log in with your credentials in the following site:
https://www.sandbox.paypal.com/.
Step8: After you log in to the site using your credentials, a new window will be opened which would look somewhat like this:
Click on the Profile and Settings icon, you will be redirected to a new window which would look like the below:
After you see this window, Click on the My selling tools tab which will show you a list of items.In that list check for the website and preferences and click on the Update text shown at the right of the tab.
Later you can login into the developer console using the credentials of your PayPal business account.
Step1: In order to create the PayPal button, we use the following site provided by the PayPal committee itself.
https://paypal.github.io/JavaScriptButtons/
The important step here is to enable the Sandbox Environment here so that all the payments you make using the above merchant account will be live and tested. After you give all the details click on the preview button and the code will be dynamically generated for the above details.
After you click on the preview button we can get a code snippet like the above one:
Step7: After the code is generated using the details you provided in the preview window, copy the code snippet generated and paste it into your view, after that when you open the page using a browser you will be able to see a button like Buy Now.In order to manually configure your callback URL, log in with your credentials in the following site:
https://www.sandbox.paypal.com/.
Click on the Profile and Settings icon, you will be redirected to a new window which would look like the below:
After you see this window, Click on the My selling tools tab which will show you a list of items.In that list check for the website and preferences and click on the Update text shown at the right of the tab.
After you see this window, Click on the My selling tools tab which will show you a list of items.
In that list check for the website and preferences and click on the Update text shown at the right of the tab.
In that list check for the website and preferences and click on the Update text shown at the right of the tab.
Step9: After you click on the update button a new window opens which shows a number of options of which you should enable the Auto return option, select the option which shows the Auto return option and select the yes option. Behind that, you will see a text box where you need to give your callback URL, i.e. the link which the user should see after a successful transaction with the PayPal Payment gateway.
At the end of the page, you can see a Save button which saves the data which you enter in this page. The application redirects to the above-mentioned URL after a successful transaction using the PayPal Payment Gateway method.
Once you click on the save button, all the data you enter in the page is saved and the callback URL is enabled for your application.
Step10: Now coming to the personal PayPal account, it can also be created using the same steps as like the Business PayPal account.
Now we have one business PayPal account and one personal PayPal account.
One will be the merchant account and the other one will be the buyer account.
When we click on the button generated by the PayPal console, it redirects us to a new PayPal sandbox window which shows a login page where we need to enter the buyer/personal PayPal account details.
Once you enter those details and click login you will be redirected a new page.
In the other page the payee details like his address, name, amount to be sent etc. will be shown.
Now we have one business PayPal account and one personal PayPal account.
One will be the merchant account and the other one will be the buyer account.
When we click on the button generated by the PayPal console, it redirects us to a new PayPal sandbox window which shows a login page where we need to enter the buyer/personal PayPal account details.
Once you enter those details and click login you will be redirected a new page.
In the other page the payee details like his address, name, amount to be sent etc. will be shown.
Step11: After you click on the Pay Now button a new screen will be shown just like the below.
In this page, the PayPal confirms the amount you want to pay to the vendor and after 10 seconds the page will be redirected to the callback URL which we initially have given in the Profile and settings tab in the business PayPal account.
In this page, the PayPal confirms the amount you want to pay to the vendor and after 10 seconds the page will be redirected to the callback URL which we initially have given in the Profile and settings tab in the business PayPal account.
Step11: When you get this in about 10 seconds time you will be redirected to your callback URL which you have initially given in the Business PayPal account.
Note: In case if your application is not having a valid URL name or if it is still not deployed on the server you can give any valid URL’s like www.google.com or some other valid URL to which the application will reroute to that URL after the successful transaction using the PayPal Payment gateway window.
In this way, we can integrate the PayPal Payment gateway window into our application using JavaScript and PayPal Sandbox Mechanism.
Thank You,
