Can we integrate Paypal payment gateway with ionic?

I have integrated paypal cordova mobile sdk for payment . But getting Json error in cdv-plugin-paypal-mobile-sdk.js in following code snippet ,while trying to make payment

PayPalMobile.prototype.init = function(clientIdsForEnvironments, completionCallback) {
 var failureCallback = function(error) {
    console.log(error);
  };

In controller , initializing the payment on button click as follows -

 $scope.buyNow = function ()
    {
        PaypalService.initPaymentUI().then(function () { PaypalService.makePayment(50, "Total").then();       });
    }

PaypalService is implemented as -

    angular.module('starter.PaypalService', ['starter.Constants'])
.factory('PaypalService', ['$q', '$ionicPlatform','Constants', '$filter', '$timeout', function ($q, $ionicPlatform, Constants, $filter, $timeout) {



    var init_defer;
    /**
     * Service object
     * @type object
     */
    var service = {
        initPaymentUI: initPaymentUI,
        createPayment: createPayment,
        configuration: configuration,
        onPayPalMobileInit: onPayPalMobileInit,
        makePayment: makePayment
    };


    /**
     * @ngdoc method
     * @name initPaymentUI
     * @methodOf app.PaypalService
     * @description
     * Inits the payapl ui with certain envs.
     *
     *
     * @returns {object} Promise paypal ui init done
     */
    function initPaymentUI() {

        init_defer = $q.defer();
        $ionicPlatform.ready().then(function () {

            var clientIDs = {
                "PayPalEnvironmentProduction": Constants.payPalProductionId,
                "PayPalEnvironmentSandbox": Constants.payPalSandboxId
            };
            PayPalMobile.init(clientIDs, onPayPalMobileInit);
        });

        return init_defer.promise;

    }


    /**
     * @ngdoc method
     * @name createPayment
     * @methodOf app.PaypalService
     * @param {string|number} total total sum. Pattern 12.23
     * @param {string} name name of the item in paypal
     * @description
     * Creates a paypal payment object
     *
     *
     * @returns {object} PayPalPaymentObject
     */
    function createPayment(total, name) {

        // "Sale  == >  immediate payment
        // "Auth" for payment authorization only, to be captured separately at a later time.
        // "Order" for taking an order, with authorization and capture to be done separately at a later time.
        var payment = new PayPalPayment("" + total, "INR", "" + name, "Sale");
        return payment;
    }
    /**
     * @ngdoc method
     * @name configuration
     * @methodOf app.PaypalService
     * @description
     * Helper to create a paypal configuration object
     *
     *
     * @returns {object} PayPal configuration
     */
    function configuration() {
        // for more options see `paypal-mobile-js-helper.js`
        var config = new PayPalConfiguration({merchantName: Constants.payPalShopName, merchantPrivacyPolicyURL: Constants.payPalMerchantPrivacyPolicyURL, merchantUserAgreementURL: Constants.payPalMerchantUserAgreementURL});
        return config;
    }

    function onPayPalMobileInit() {
        $ionicPlatform.ready().then(function () {
            // must be called
            // use PayPalEnvironmentNoNetwork mode to get look and feel of the flow
            PayPalMobile.prepareToRender(Constants.payPalEnv, configuration(), function () {

                $timeout(function () {
                    init_defer.resolve();
                });

            });
        });
    }

    /**
     * @ngdoc method
     * @name makePayment
     * @methodOf app.PaypalService
     * @param {string|number} total total sum. Pattern 12.23
     * @param {string} name name of the item in paypal
     * @description
     * Performs a paypal single payment
     *
     *
     * @returns {object} Promise gets resolved on successful payment, rejected on error
     */
    function makePayment(total, name) {


        var defer = $q.defer();
        total = $filter('number')(total, 2);
        $ionicPlatform.ready().then(function () {
            PayPalMobile.renderSinglePaymentUI(createPayment(total, name), function (result) {
                $timeout(function () {
                    defer.resolve(result);
                });
            }, function (error) {
                $timeout(function () {
                    defer.reject(error);
                });
            });
        });

        return defer.promise;
    }

    return service;
}]);

Any help will be deeply appreciated.

I have followed all steps and it seems to work fine with no error.

When i run ios emulator and click on the button that fire the function makePayment, it does nothing.

here I attach the code of the function click event:

$scope.payPaypal = function(importe) { //alert(importe); PaypalService.initPaymentUI().then(function () { PaypalService.makePayment(90, "Total Amount").then(function (response) { alert("success"+JSON.stringify(response)); }, function (error) { alert("Transaction Canceled"); }); }); alert('Called'); }

Whatā€™s supposed it should appear?

Hi,
I followed your post step by step. Am used your factory and also injected in controller.
At first time am faced the error is PayPalConfiguration is not defined, after that am injected the <script type="text/javascript" src="js/paypal-mobile-js-helper.js"></script> in index.html file.

after i re-build the app i.e., ionic run android into my device.

When we click the paypal button to call the function in contoller. App is closing i.e., Unfortunately yourApp has stoppedā€¦ Is there any issue with the implementation. Please give me the direction to resolve this issue. Thxs in advance.

can any one help me out with the pay u money integration ?

thank in advance

1 Like

Hey @sugir I didnā€™t found any or kind of thing to implement PayU, & I contacted with PayU people also but they are not supportive for IONIC kind of croos platforms things. Mean while you can try, these linksā€¦

https://github.com/laurihy/angular-payments

also respond back if you find something usefulā€¦

There are no plugins available for payumoney payment gateway integration , Also we donā€™t need that.

In app browser is the best method for integrating payment gateway.

I have completely developed application using ionic framework for both android and ios.
Now i need to integrate the payment gateway for my mobile app, we are using the Payu india gateway provider.
Payu providing the native SDK, i mentioned in below link,
https://developer.payubiz.in/documentation/Android-SDK-Integration/7172

How to integrate this with my ionic app for both android and ios, they are given native sdk for both android and ios, Can i use this with my ionic app? Please help anyone iā€™m getting struggle in this from last one month.

1 Like

Hi Sugir,
Could you integrate PayUMoney with your ionic app ?
I need to integrate PayUMoney with my ionic 2 app. Please let me know if you have any idea.

Yes, You can make it. You just have to load it with inapp browser and should be having some knowledge on backend technology like php.