How to create this yourself step by step<\/h2>\n\n- Start a new Ionic 1 project<\/li>\n<\/ul>\n
ionic start IonicPayPalDemo<\/code><\/p>\n\n- Add the PayPal Cordova Plugin<\/a><\/li>\n<\/ul>\n
cordova plugin add com.paypal.cordova.mobilesdk<\/code><\/p>\nAs the official docs say:<\/p>\n
\n The PayPal SDK Cordova\/Phonegap Plugin adds 2 JavaScript files to your project:<\/p>\n
\ncdv-plugin-paypal-mobile-sdk.js<\/code> – a wrapper around the native SDK. The PayPalMobile object is immediately available to use in your .js files. You don’t<\/strong> need to reference it in index.html<\/code><\/li>\npaypal-mobile-js-helper.js<\/code> – a helper file which defines the PayPalPayment<\/code>, PayPalPaymentDetails<\/code> and PayPalConfiguration<\/code> classes for use with PayPalMobile<\/li>\n<\/ul>\n You must add <script type=\"text\/javascript\" src=\"js\/paypal-mobile-js-helper.js\"><\/script><\/code> to your www\/index.html<\/code> file, after the cordova.js<\/code> import.\n<\/p><\/blockquote>\nSo, following the official advice, our www\/index.html<\/code> file will now look like this:<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\">\n <title><\/title>\n\n <link rel=\"manifest\" href=\"manifest.json\">\n <link href=\"lib\/ionic\/css\/ionic.css\" rel=\"stylesheet\">\n <link href=\"css\/style.css\" rel=\"stylesheet\">\n\n <script src=\"lib\/ionic\/js\/ionic.bundle.js\"><\/script>\n <script src=\"cordova.js\"><\/script>\n <script type=\"text\/javascript\" src=\"js\/paypal-mobile-js-helper.js\"><\/script>\n\n <script src=\"js\/app.js\"><\/script>\n <script src=\"js\/controllers.js\"><\/script>\n <script src=\"js\/services.js\"><\/script>\n<\/head>\n\n<body ng-app=\"starter\">\n <ion-nav-bar class=\"bar-stable\">\n <ion-nav-back-button>\n <\/ion-nav-back-button>\n <\/ion-nav-bar>\n <ion-nav-view><\/ion-nav-view>\n<\/body>\n<\/html>\n<\/code><\/pre>\nNext, set the contents of the www\/templates\/tab-dash.html<\/code> to:<\/p>\n<ion-view view-title=\"Dashboard\">\n <ion-content class=\"padding\">\n <div class=\"list\">\n <label class=\"item item-input\">\n Price: \u00a0<input type=\"text\" ng-model=\"subscriptionPrice\"\/>\n <\/label>\n <label class=\"item item-input\">\n Subscription: \u00a0<input type=\"text\" ng-model=\"subscriptionName\"\/>\n <\/label>\n <\/div>\n\n <button class=\"button button-positive button-block\" ng-click=\"payWithPayPal()\">\n <i class=\"icon ion-card\"><\/i>\n Pay with PayPal\n <\/button>\n <\/ion-content>\n<\/ion-view>\n<\/code><\/pre>\nSet the contents DashCtrl<\/code> controller in the www\/js\/controllers.js<\/code> file to:<\/p>\n.controller('DashCtrl', function($scope, PaypalFactory) {\n $scope.subscriptionName = 'Some subscription';\n $scope.subscriptionPrice = 5;\n\n $scope.payWithPayPal = function() {\n PaypalFactory.initPaymentUI().then(function() {\n PaypalFactory.makePayment($scope.subscriptionPrice, $scope.subscriptionName).then(function(data) {\n console.dir(data);\n\n \/\/make some additional logic based on returned data like saving to your database, showing a message to the user, etc.\n navigator.notification.alert(\n \"PayPal purchase completed successfully.\",\n null,\n \"Paypal Purchase\",\n \"OK\"\n );\n }, function(err) {\n console.dir(err);\n navigator.notification.alert(\n err,\n null,\n \"Paypal Purchase Canceled\",\n \"Try Again\"\n );\n });\n });\n };\n})\n<\/code><\/pre>\nYou can see that we’re importing the PaypalFactory through dependency injection. We define this factory in js\/services.js<\/code> file like this:<\/p>\n.factory('PaypalFactory', ['$q', '$filter', '$timeout', '$ionicPlatform', 'APP_CONSTS', function($q, $filter, $timeout, $ionicPlatform, APP_CONSTS) {\n var init_defer;\n\n var that = {};\n\n \/**\n * @ngdoc method\n * @name initPaymentUI\n * @methodOf app.PaypalFactory\n * @description\n * Inits the payapl ui with certain envs.\n * \n * @returns {object} Promise paypal ui init done\n *\/\n that.initPaymentUI = function() {\n init_defer = $q.defer();\n $ionicPlatform.ready().then(function() {\n\n var clientIDs = {\n \"PayPalEnvironmentProduction\": APP_CONSTS.payPalProductionId,\n \"PayPalEnvironmentSandbox\": APP_CONSTS.payPalSandboxId\n };\n PayPalMobile.init(clientIDs, that.onPayPalMobileInit);\n });\n\n return init_defer.promise;\n }\n\n \/**\n * @ngdoc method\n * @name createPayment\n * @methodOf app.PaypalFactory\n * @param {string|number} total total sum. Pattern 12.23\n * @param {string} name name of the item in paypal\n * @description\n * Creates a paypal payment object \n *\n * @returns {object} PayPalPaymentObject\n *\/\n var createPayment = function(total, name) {\n \/\/ \"Sale == > immediate payment\n \/\/ \"Auth\" for payment authorization only, to be captured separately at a later time.\n \/\/ \"Order\" for taking an order, with authorization and capture to be done separately at a later time.\n var payment = new PayPalPayment(\"\" + total, \"USD\", \"\" + name, \"Sale\");\n return payment;\n }\n\n \/**\n * @ngdoc method\n * @name configuration\n * @methodOf app.PaypalFactory\n * @description\n * Helper to create a paypal configuration object\n *\n * \n * @returns {object} PayPal configuration\n *\/\n var configuration = function() {\n \/\/ for more options see `paypal-mobile-js-helper.js`\n var config = new PayPalConfiguration({ merchantName: APP_CONSTS.payPalShopName, merchantPrivacyPolicyURL: APP_CONSTS.payPalMerchantPrivacyPolicyURL, merchantUserAgreementURL: APP_CONSTS.payPalMerchantUserAgreementURL });\n return config;\n }\n\n that.onPayPalMobileInit = function() {\n $ionicPlatform.ready().then(function() {\n PayPalMobile.prepareToRender(APP_CONSTS.payPalEnv, configuration(), function() {\n $timeout(function() {\n init_defer.resolve();\n });\n });\n });\n }\n\n \/**\n * @ngdoc method\n * @name makePayment\n * @methodOf app.PaypalFactory\n * @param {string|number} total total sum. Pattern 12.23\n * @param {string} name name of the item in paypal\n * @description\n * Performs a paypal single payment \n *\n * \n * @returns {object} Promise gets resolved on successful payment, rejected on error \n *\/\n that.makePayment = function(total, name) {\n var defer = $q.defer();\n total = $filter('number')(total, 2);\n $ionicPlatform.ready().then(function() {\n PayPalMobile.renderSinglePaymentUI(createPayment(total, name), function(result) {\n $timeout(function() {\n defer.resolve(result);\n });\n }, function(error) {\n $timeout(function() {\n defer.reject(error);\n });\n });\n });\n\n return defer.promise;\n }\n\n \/**\n * @ngdoc method\n * @name makeFuturePayment\n * @methodOf app.PaypalFactory\n * @description\n * Performs a paypal future payment \n * \n * @returns {object} Promise gets resolved on successful payment, rejected on error \n *\/\n that.makeFuturePayment = function(total, name) {\n var defer = $q.defer();\n $ionicPlatform.ready().then(function() {\n PayPalMobile.renderFuturePaymentUI(\n function(authorization) {\n defer.resolve(authorization);\n },\n function(cancelReason) {\n defer.reject(cancelReason);\n });\n });\n\n return defer.promise;\n }\n\n return that;\n }])\n<\/code><\/pre>\nAlso, you may notice that here we’re importing APP_CONSTS<\/code> constant which we have to define in app.js<\/code> file like this:<\/p>\n.constant('APP_CONSTS', {\n payPalSandboxId: 'Bfiudw1_kauwqxV8vqsPXyWv-6rbudyhnwbKd2Qhb57Rdwoj0NLT8dOGwOYug5g-vHL28aqVWLMkErdVop',\n payPalProductionId: '',\n payPalEnv: 'PayPalEnvironmentSandbox', \/\/ for testing: PayPalEnvironmentSandbox, for production PayPalEnvironmentProduction\n payPalShopName: 'Demo Shop',\n payPalMerchantPrivacyPolicyURL: 'https:\/\/www.demoshop.com\/privacy',\n payPalMerchantUserAgreementURL: 'https:\/\/www.demoshop.com\/terms'\n })\n<\/code><\/pre>\nOf course, these won’t work<\/strong> and for the demo to work you need to change them to your settings. You can get these by registering your application over at PayPal Developers<\/a> portal.<\/p>\nRunning the application<\/h2>\n
When you run the application you should see a screen like this:<\/p>\n
![\"\"](\"https:\/\/i.imgur.com\/jCfPzhzl.png\")
<\/p>\n
Then, if you click on the Pay with PayPal<\/code> button you’ll get a nice looking interface:<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/KNlSgoNl.png\")
<\/p>\n
Cool thing is that it also supports the option to take a picture of your credit card and automatically fill the fields (in case you would pay with a credit card):<\/p>\n
![\"\"](\"https:\/\/i.imgur.com\/UEKbrU7l.png\")
<\/p>\n
Conclusion<\/h2>\n
Hope this demo app helps to show you how easy it is to add PayPal payments to your Ionic 1 app.<\/p>\n
The demo only showcases the usage of a one-time payment. The so-called future payment UI is ready, but to get this fully working, you will need to implement proper functions on the backend as well. You can read more about this here<\/a>.<\/p>\n\nHow to add PayPal to Ionic 1 apps @ionicframework<\/a> https:\/\/t.co\/nwLE2vUxAu<\/a><\/p>\n— Nikola Bre\u017enjak (@HitmanHR) October 17, 2017<\/a><\/p><\/blockquote>\n
As the official docs say:<\/p>\n \n The PayPal SDK Cordova\/Phonegap Plugin adds 2 JavaScript files to your project:<\/p>\n You must add So, following the official advice, our Next, set the contents of the Set the contents You can see that we’re importing the PaypalFactory through dependency injection. We define this factory in Also, you may notice that here we’re importing Of course, these won’t work<\/strong> and for the demo to work you need to change them to your settings. You can get these by registering your application over at PayPal Developers<\/a> portal.<\/p>\n When you run the application you should see a screen like this:<\/p>\n Then, if you click on the Cool thing is that it also supports the option to take a picture of your credit card and automatically fill the fields (in case you would pay with a credit card):<\/p>\n Hope this demo app helps to show you how easy it is to add PayPal payments to your Ionic 1 app.<\/p>\n The demo only showcases the usage of a one-time payment. The so-called future payment UI is ready, but to get this fully working, you will need to implement proper functions on the backend as well. You can read more about this here<\/a>.<\/p>\n How to add PayPal to Ionic 1 apps @ionicframework<\/a> https:\/\/t.co\/nwLE2vUxAu<\/a><\/p>\n — Nikola Bre\u017enjak (@HitmanHR) October 17, 2017<\/a><\/p><\/blockquote>\nionic start IonicPayPalDemo<\/code><\/p>\n\n
cordova plugin add com.paypal.cordova.mobilesdk<\/code><\/p>\n\n
cdv-plugin-paypal-mobile-sdk.js<\/code> – a wrapper around the native SDK. The PayPalMobile object is immediately available to use in your .js files. You don’t<\/strong> need to reference it in index.html<\/code><\/li>\npaypal-mobile-js-helper.js<\/code> – a helper file which defines the PayPalPayment<\/code>, PayPalPaymentDetails<\/code> and PayPalConfiguration<\/code> classes for use with PayPalMobile<\/li>\n<\/ul>\n<script type=\"text\/javascript\" src=\"js\/paypal-mobile-js-helper.js\"><\/script><\/code> to your www\/index.html<\/code> file, after the cordova.js<\/code> import.\n<\/p><\/blockquote>\nwww\/index.html<\/code> file will now look like this:<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\">\n <title><\/title>\n\n <link rel=\"manifest\" href=\"manifest.json\">\n <link href=\"lib\/ionic\/css\/ionic.css\" rel=\"stylesheet\">\n <link href=\"css\/style.css\" rel=\"stylesheet\">\n\n <script src=\"lib\/ionic\/js\/ionic.bundle.js\"><\/script>\n <script src=\"cordova.js\"><\/script>\n <script type=\"text\/javascript\" src=\"js\/paypal-mobile-js-helper.js\"><\/script>\n\n <script src=\"js\/app.js\"><\/script>\n <script src=\"js\/controllers.js\"><\/script>\n <script src=\"js\/services.js\"><\/script>\n<\/head>\n\n<body ng-app=\"starter\">\n <ion-nav-bar class=\"bar-stable\">\n <ion-nav-back-button>\n <\/ion-nav-back-button>\n <\/ion-nav-bar>\n <ion-nav-view><\/ion-nav-view>\n<\/body>\n<\/html>\n<\/code><\/pre>\nwww\/templates\/tab-dash.html<\/code> to:<\/p>\n<ion-view view-title=\"Dashboard\">\n <ion-content class=\"padding\">\n <div class=\"list\">\n <label class=\"item item-input\">\n Price: \u00a0<input type=\"text\" ng-model=\"subscriptionPrice\"\/>\n <\/label>\n <label class=\"item item-input\">\n Subscription: \u00a0<input type=\"text\" ng-model=\"subscriptionName\"\/>\n <\/label>\n <\/div>\n\n <button class=\"button button-positive button-block\" ng-click=\"payWithPayPal()\">\n <i class=\"icon ion-card\"><\/i>\n Pay with PayPal\n <\/button>\n <\/ion-content>\n<\/ion-view>\n<\/code><\/pre>\nDashCtrl<\/code> controller in the www\/js\/controllers.js<\/code> file to:<\/p>\n.controller('DashCtrl', function($scope, PaypalFactory) {\n $scope.subscriptionName = 'Some subscription';\n $scope.subscriptionPrice = 5;\n\n $scope.payWithPayPal = function() {\n PaypalFactory.initPaymentUI().then(function() {\n PaypalFactory.makePayment($scope.subscriptionPrice, $scope.subscriptionName).then(function(data) {\n console.dir(data);\n\n \/\/make some additional logic based on returned data like saving to your database, showing a message to the user, etc.\n navigator.notification.alert(\n \"PayPal purchase completed successfully.\",\n null,\n \"Paypal Purchase\",\n \"OK\"\n );\n }, function(err) {\n console.dir(err);\n navigator.notification.alert(\n err,\n null,\n \"Paypal Purchase Canceled\",\n \"Try Again\"\n );\n });\n });\n };\n})\n<\/code><\/pre>\njs\/services.js<\/code> file like this:<\/p>\n.factory('PaypalFactory', ['$q', '$filter', '$timeout', '$ionicPlatform', 'APP_CONSTS', function($q, $filter, $timeout, $ionicPlatform, APP_CONSTS) {\n var init_defer;\n\n var that = {};\n\n \/**\n * @ngdoc method\n * @name initPaymentUI\n * @methodOf app.PaypalFactory\n * @description\n * Inits the payapl ui with certain envs.\n * \n * @returns {object} Promise paypal ui init done\n *\/\n that.initPaymentUI = function() {\n init_defer = $q.defer();\n $ionicPlatform.ready().then(function() {\n\n var clientIDs = {\n \"PayPalEnvironmentProduction\": APP_CONSTS.payPalProductionId,\n \"PayPalEnvironmentSandbox\": APP_CONSTS.payPalSandboxId\n };\n PayPalMobile.init(clientIDs, that.onPayPalMobileInit);\n });\n\n return init_defer.promise;\n }\n\n \/**\n * @ngdoc method\n * @name createPayment\n * @methodOf app.PaypalFactory\n * @param {string|number} total total sum. Pattern 12.23\n * @param {string} name name of the item in paypal\n * @description\n * Creates a paypal payment object \n *\n * @returns {object} PayPalPaymentObject\n *\/\n var createPayment = function(total, name) {\n \/\/ \"Sale == > immediate payment\n \/\/ \"Auth\" for payment authorization only, to be captured separately at a later time.\n \/\/ \"Order\" for taking an order, with authorization and capture to be done separately at a later time.\n var payment = new PayPalPayment(\"\" + total, \"USD\", \"\" + name, \"Sale\");\n return payment;\n }\n\n \/**\n * @ngdoc method\n * @name configuration\n * @methodOf app.PaypalFactory\n * @description\n * Helper to create a paypal configuration object\n *\n * \n * @returns {object} PayPal configuration\n *\/\n var configuration = function() {\n \/\/ for more options see `paypal-mobile-js-helper.js`\n var config = new PayPalConfiguration({ merchantName: APP_CONSTS.payPalShopName, merchantPrivacyPolicyURL: APP_CONSTS.payPalMerchantPrivacyPolicyURL, merchantUserAgreementURL: APP_CONSTS.payPalMerchantUserAgreementURL });\n return config;\n }\n\n that.onPayPalMobileInit = function() {\n $ionicPlatform.ready().then(function() {\n PayPalMobile.prepareToRender(APP_CONSTS.payPalEnv, configuration(), function() {\n $timeout(function() {\n init_defer.resolve();\n });\n });\n });\n }\n\n \/**\n * @ngdoc method\n * @name makePayment\n * @methodOf app.PaypalFactory\n * @param {string|number} total total sum. Pattern 12.23\n * @param {string} name name of the item in paypal\n * @description\n * Performs a paypal single payment \n *\n * \n * @returns {object} Promise gets resolved on successful payment, rejected on error \n *\/\n that.makePayment = function(total, name) {\n var defer = $q.defer();\n total = $filter('number')(total, 2);\n $ionicPlatform.ready().then(function() {\n PayPalMobile.renderSinglePaymentUI(createPayment(total, name), function(result) {\n $timeout(function() {\n defer.resolve(result);\n });\n }, function(error) {\n $timeout(function() {\n defer.reject(error);\n });\n });\n });\n\n return defer.promise;\n }\n\n \/**\n * @ngdoc method\n * @name makeFuturePayment\n * @methodOf app.PaypalFactory\n * @description\n * Performs a paypal future payment \n * \n * @returns {object} Promise gets resolved on successful payment, rejected on error \n *\/\n that.makeFuturePayment = function(total, name) {\n var defer = $q.defer();\n $ionicPlatform.ready().then(function() {\n PayPalMobile.renderFuturePaymentUI(\n function(authorization) {\n defer.resolve(authorization);\n },\n function(cancelReason) {\n defer.reject(cancelReason);\n });\n });\n\n return defer.promise;\n }\n\n return that;\n }])\n<\/code><\/pre>\nAPP_CONSTS<\/code> constant which we have to define in app.js<\/code> file like this:<\/p>\n.constant('APP_CONSTS', {\n payPalSandboxId: 'Bfiudw1_kauwqxV8vqsPXyWv-6rbudyhnwbKd2Qhb57Rdwoj0NLT8dOGwOYug5g-vHL28aqVWLMkErdVop',\n payPalProductionId: '',\n payPalEnv: 'PayPalEnvironmentSandbox', \/\/ for testing: PayPalEnvironmentSandbox, for production PayPalEnvironmentProduction\n payPalShopName: 'Demo Shop',\n payPalMerchantPrivacyPolicyURL: 'https:\/\/www.demoshop.com\/privacy',\n payPalMerchantUserAgreementURL: 'https:\/\/www.demoshop.com\/terms'\n })\n<\/code><\/pre>\nRunning the application<\/h2>\n
<\/p>\nPay with PayPal<\/code> button you’ll get a nice looking interface:<\/p>\n<\/p>\n<\/p>\nConclusion<\/h2>\n
\n