As we all of know that today cross platform grow day by day. Most of the developers/Clients move towards Cross platform to save their time and money. Today we learn about how to integrate PayPal plug-in with Ionic framework.
Android Integration for android:-
I am assuming that you are familiar with ionic and successfully installed cordova in your System If not please follow this
Link:- http://ionicframework.com/docs/guide/installation.html
Create a new blank project (using CLI):-
A) Ionic Start Project Name Blank
B) Ionic Platform Add Android
C) Ionic Build Android
Step 1:- First install running this command cordova plugin add com.paypal.cordova.mobilesdk
Step2:-
Download https://github.com/paypal/PayPal-Cordova-Plugin
Copy paypal-mobile-js-helper and cdv-plugin-paypal-mobile-sdk js files from www folder and paste into your project js folder.
Step3:-
Add reference of these files into your index.js file
<script src=”paypal-mobile-js-helper.js”></script>
<script src=”cdv-plugin-paypal-mobile-sdk.js”></script>
Step4:-
Add payPalService.js file into your project from
https://gist.github.com/mssdineshsambial/f679ab69597c49b25f25
Step 5:-
Add lines into APP.js file
.constant(‘shopSettings’,{
payPalSandboxId :’Aar8HZzvc5NztVWodTBpOiOod9wWrBDrJUjyvRr4WsxcCD28xYig7oecfYsqxQUDu5QHptPpSALirxZD’,
payPalProductionId : ‘production id here’,
payPalEnv: ‘PayPalEnvironmentSandbox’, // for testing production for production
payPalShopName : ‘MyShopName’,
payPalMerchantPrivacyPolicyURL : ‘url to policy’,
payPalMerchantUserAgreementURL : ‘ url to user agreement ‘
})
Replace PayPalSandboxId and payPal Production Id with your send box Id and production client id
Step 6:-
Add these lines under you app controller button click to start paypal payment.
PaypalService.initPaymentUI().then(function () {
PaypalService.makePayment(90, “Total Amount”).then(function (response) {
alert(“success”+JSON.stringify(response));
}, function (error) {
alert(“Transaction Canceled”);
});
});
Gratitude...!!!!
Thank you! You saved my day :D
ReplyDeletei tried implementing it but i get payinitUI factory methd as undefined can u help me out
ReplyDeleteI am getting this error: "Payments to this merchant are not allowed (invalid clientId)". Can someone please let me know what I am doing wrong?
ReplyDeleteGot it, I had not created an app and instead, I was using my seller sandbox ID. We need to create an app and use it's app it for it to work.
ReplyDeleteplease share code if your code is working.
DeleteCan you please tell me how to get PayPalSandboxId and payPal Production Id
ReplyDeleteJust login into PayPal developer account and follow simple steps to get id's
DeleteThis comment has been removed by the author.
DeleteHi
ReplyDeleteI getting error: PayPalConfiguration is not defined
Can you tell me what I'm doing wrong
Hi, I use this code for my app in ionic. But, I have a problem with the mount. I can't pay more than 999.00. If I add 1000.00 or more the payment is not made. How do I resolve this?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteIs it working in ios?
ReplyDeleteYes it's working with IOS too
DeleteThis comment has been removed by the author.
DeleteThis comment has been removed by the author.
DeleteItz working thanks alot...
Deleteplease share code if your code is working.
Deletei can't get it working please help?
ReplyDeleteErrors are as follows in the Link
https://snag.gy/7VIlRz.jpg
The Error at controllers.js:785
is the Code i have started which You provided in the step 6
lot of thanks man
ReplyDeletebut i cann't see the approved payment on paypal
This comment has been removed by the author.
ReplyDeletethanks working for me :)
ReplyDeleteplease share code if your code is working.
DeleteHi, great example, thx. It's working. Sort of. Transaction finishes successfully, correct amount of money is removed from buyer's account, but no money are added to seller's account nor any transaction is listed in Sandbox - Transactions in developers PayPal web. Is it ok or should I search why money are not added to seller's account? Did anyone experienced same behavior? Thx a lot.
ReplyDeletewhen I add lines to the app.js file it goes blank....?
ReplyDeleteresolved:) I needed to go to sandbox.paypal.com, log in with BUSINESS account and accept those payments manually.
ReplyDeleteThanks, I followed your instruction and this is working good in android but when i am trying in ios this is not working.. please help me and let me know any solution.
ReplyDeleteThanks
Jagdish thakre
I tried but I didn't get output. Can you send source code to my email id!!. Email ID : vinodkumargulumuru@gmail.com
DeleteGreat Tutorial sir. Can you send source code to my email id!!. Email ID : vinodkumargulumuru@gmail.com
ReplyDeletehow to get production client id ?
ReplyDeleteUnknown provider: shopSettingsProvider <- shopSettings <- PaypalService
ReplyDeleteHow can I get rid of this?
I am getting the following error while i tried to pay via credit card in production account:
ReplyDelete"THIS MERCHANT DOES NOT ACCEPT THIS TYPE OF PAYMENT"
But payment via paypal account is working fine.Can you please suggest any solution for the above?
I have integrated the plugin and code. The paypal login page is opening fine from my mobile app. Unfortunately it is all time showing wrong id/password.
ReplyDeleteI am using the right one. tested several time in browser with same credential. But in app it is showing this error.
Just can't understand the problem.
Any guidance will be appreciated
Issue resolved. I was using real account details instead of sandbox buyer credential
Deletei get the error that PayPalMobile is not function please help me
ReplyDeletei got the error ReferenceError: module is not defined. can you please help me how to resolve it
ReplyDeleteThanks buddy it works like a charm for me. But you have to do some changes in cdv-plugin-paypal-mobile-sdk.js as it uses module.exports = new PayPalMobile(); That is not supported on front end. I change this to
ReplyDeletePayPalMobile = new PayPalMobile(); and it works like a charm for me.
This comment has been removed by the author.
ReplyDeletehttps://drati.blogspot.in/2011/04/objectives-of-microteaching-to-enable.html?showComment=1524833296629#c3590028516937459789
ReplyDeleteThis review was so good and cool, I never imaging I would be able to get a post like this that is so important about Paypal. Really, over some years I have had people complaining about Paypal, thank you once more for the update you are great in developing contents and informaton.
ReplyDeletehttps://www.tecteem.com/paypal-login/