How to integrate Paypal Cordova Plugin in IONIC Framework

urbiwan · June 10, 2015, 6:32am

Hi

The plugin works only on real devices or on an emulator.

Regards

Dubi33 · June 21, 2015, 7:20pm

Hi, thank you for your code !
Your factory looks great but how can we call a payment in our controller ?
And Also what shall we do in our view to trigger the payment ?
Sorry for this but i.m not a pro in Angular …

Thanks in advance

urbiwan · June 21, 2015, 7:43pm

//To use this service 
 .controller('MyCtrl, function($scope,PaypalService){
 $scope.payPal = function( ) {  
    PaypalService.initPaymentUI().then(function () {
                  PaypalService.makePayment($scope.total(), "Total").then(...)
    });
   }
}

Dubi33 · June 21, 2015, 8:37pm

Thank you for yout quick reply. I was almost there !!
So, to trigger the payment, all i have to do is

<Button ng-click="paypal()">pay with PayPal 34€</button>

Something Like that ? Is that right ?
How can i pass the price in this Function ?

Again, thank you for your work.

urbiwan · June 22, 2015, 6:04am

Set the price to a scope variable

  $scope.price = 12.34;

and change the makePayment call to

PaypalService.makePayment($scope.price, "Total").then(...)

Regards

Dubi33 · June 22, 2015, 1:32pm

Great ! It Works like a charm thanks to you.
Only shopSettings created problems. I replaced it with real values and it worked.

Now in my controller, how can i treat response (Valid payment or not) … ?

.controller('SearchCtrl', function($scope, $stateParams, PaypalService) {
$scope.price = 1.99;
$scope.produit = 'Abonnement 7j';
$scope.go = function() {
            PaypalService.initPaymentUI().then(function () {
                PaypalService.makePayment($scope.price, $scope.produit);
            });
}          
})

Thank you Urbiwan, you helped me a lot and i thank you very much for this !
Regards

urbiwan · June 22, 2015, 5:05pm

You re welcome

Just a hint

For production set shopSettings.payPalEnv to ‘Production’

Regards

cristiancebracl · July 8, 2015, 5:06pm

Hi, urbiwan, please, you can share the code of shopSettings, a week im trying to integrate this into my application and have not been successful , can you help me do?

urbiwan · July 8, 2015, 6:54pm

Hi
i ve updated the gist , enjoy

gist.github.com

https://gist.github.com/Urbiwanus/c1e456f889f53e940a11

gistfile1.js

app.factory('PaypalService', ['$q', '$ionicPlatform', 'shopSettings', '$filter', '$timeout', function ($q, $ionicPlatform, shopSettings, $filter, $timeout) {



        var init_defer;
        /**
         * Service object
         * @type object
         */
        var service = {

This file has been truncated. show original

Regards

barbadillojomel · July 9, 2015, 1:52am

hi, can you provide example? it looks interesting.

urbiwan · July 9, 2015, 12:39pm

Hi,
sorry i ve no time to provide a full example, but the gist shows all required parts

Regards

jonbondani · July 13, 2015, 9:50am

Hi, I’ve finally get it working both android and ios devices (thanks for your code), but it only works using the iOS simulator, if I use the ionic view app, the plugin doesn’t work.

How can I test in my device?

thanks

urbiwan · July 13, 2015, 10:47am

i m not sure if the ionic view app provides the cordova paypal plugin
Testing works only on real devices / emulator

jonbondani · July 13, 2015, 2:18pm

I’ve followed these instructions to install directly to my device:

thanks

ida_kocht · July 14, 2015, 4:30pm

hi, I installed cordova paypal plugin (cordova plugin add com.paypal.cordova.mobilesdk), then added the module appconstant and the factory from the gist. Then called something like this on a button click

      PaypalService.initPaymentUI().then(function () {
        PaypalService.makePayment(100, "Total").then(function(){
          console.log(" some text ");
        });

Then installing App on device, and filled the cart - then clicked on the button - and nothing happened.

Testing in chrome there is an error, ReferenceError: PayPalMobile is not defined - is that expected, because its simply just working on device? (is PayPalMobile the cordova plugin)

How to debug that?

Thanks…

urbiwan · July 15, 2015, 8:10am

Looks like you missed to add

<script type="text/javascript" src="js/paypal-mobile-js-helper.js"></script>

into your index.html

ida_kocht · July 15, 2015, 8:48am

Hey, thanks for your response. (helper.js file was also added to index.html)

The error occurs in your factory in the line with the following code (line 38 in gist):

  PayPalMobile.init(clientIDs, onPayPalMobileInit);

Reference Error: PayPalMobile is not defined…
I am a bit confused - don’t we need to inject the PayPalMobile Object in some way to the PaypalService Factory?

I copied the factory in my app.js file, direct after
angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘appConstant’])
.run(function($ionicPlatform, $rootScope) { …}
.factory(‘PapaylService’…

urbiwan · July 15, 2015, 8:51am

You have to wait for cordova to get ready

 ionic.Platform.ready(function(){
   PapaylService ...

});

ida_kocht · July 15, 2015, 11:55am

Thank you, it’s working.

But all test payments are just ‘authorized’ by the buyer, the money is not credited to the facilitator account, the facilitator can manually collect the money - do I need to manually collect all payments in paypal-dashboard?

Screenshots from Paypal Sandbox:

urbiwan · July 15, 2015, 12:42pm

Check the docs
https://developer.paypal.com/webapps/developer/docs/integration/mobile/verify-mobile-payment/ this should help you