Paypal Integration with Ionic framework Not Working

Question

I developed App. In this I integrate cordova-Paypal. I added paypal mobile sdk. but it shows PayPalMobile is not defined occurred in console.I copied helper.js and sdk.js in js folder. Please help me.

 var app=angular.module('starter.payPalService', []) app.factory('PaypalService', ['$q', '$ionicPlatform', 'shopSettings', '$filter', '$timeout', function ($q, $ionicPlatform, shopSettings, $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": shopSettings.payPalProductionId, "PayPalEnvironmentSandbox": shopSettings.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, "EUR", "" + 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: shopSettings.payPalShopName, merchantPrivacyPolicyURL: shopSettings.payPalMerchantPrivacyPolicyURL, merchantUserAgreementURL: shopSettings.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(shopSettings.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; }]); 

Controller.js:

 controller('MyCtrl' , function($scope,PaypalService){ $scope.click=function() { console.log("i am call"); // console.log(error); PaypalService.initPaymentUI().then(function () { console.log("i am call 2"); PaypalService.makePayment(1, "Total Amount").then(function (response) { alert("success"+JSON.stringify(response)); }, function (error) { alert('Transaction Canceled'); }); }); }; }) 

Error in console:

 ReferenceError: PayPalMobile is not defined at payPalService.js:35 at processQueue (ionic.bundle.js:29132) at ionic.bundle.js:29148 at Scope.$eval (ionic.bundle.js:30400) at Scope.$digest (ionic.bundle.js:30216) at ChildScope.$apply (ionic.bundle.js:30508) at HTMLButtonElement.<anonymous> (ionic.bundle.js:65428) at defaultHandlerWrapper (ionic.bundle.js:16792) at HTMLButtonElement.eventHandler (ionic.bundle.js:16780) at triggerMouseEvent (ionic.bundle.js:2953) 

Answer 1

I copied helper.js and sdk.js in js folder

You should not need to add the helper JS manually. The plugin will create those files automatically under /js folder. You simply need to put the following statement after cordova.js is imported.

Your index.html should look something like these:

<!DOCTYPE html>
<html>
  <head>
  ...
    <script src="cordova.js"></script>
    <script src="js/paypal-mobile-js-helper.js"></script>
  ...
  </head>
  <body>
  ...
  </body>
</html>

Also ensure that you test your app on either Android emulator or iOS simulator ... or better yet, a real Android / iOS device.

Reference: https://github.com/paypal/PayPal-Cordova-Plugin#your-app-integration