Adding Paypal payments to your Ionic 2 application

Published in

Appseed IO

8 min readApr 7, 2017

In this post you will learn how to implement Paypal payments for an Ionic 2 mobile application. Briefly, we will follow the steps below:

We will use the Supermodular 2 starter app and set it all up and running.
We will install the Cordova Paypal plugin to enable online payments through Paypal.
We will configure the app with a PayPal account which will accept the payments.
We will make the actual implementation by adding a new screen dedicated to the Paypal payments feature.

Note: The complete source code of this tutorial is available in the ionic2-paypal Github repository.

Download code

Prerequisites

To follow along with this tutorial, you will need:

Supermodular 2: This is a free starter template that allows you to start a new Ionic 2 project quickly offering some basic features commonly used in recent mobile applications. We are going to use it in order to build a basic Ionic 2 app with an extremely modular architecture and best software development practices applied. In the next section, we will go through all the steps needed for downloading and running the app.
Paypal Developer account: An account will be needed in order to configure an application that will be connected with the mobile app. For more information, read the “Configure a PayPal application” section at the bottom of this article.

Step 1: Clone GitHub Repo

Visit http://github.com/appseed-io/supermodular2 and download or clone the Supermodular 2 app:

$git clone https://github.com/appseed-io/supermodular2.git

Alternatively, it is recommended that you fork the repository since, later, you will be able to push any code you will add to this project straight to your own project repository.

Step 2: Install libraries

Open a terminal window and navigate to the supermodular2 folder. Install the NodeJS dependencies:

$npm install

Step 3: Install plugins and platforms

Install all the required Cordova plugins the app needs with the following command:

$ionic state restore

This command will actually restore all the platforms and plugins are included in the package.json file.

Note: In case you do not work on a Mac OS machine, open the package.json file and replace the iOS platform with the Android platform or leave the cordovaPlatforms array empty if you do not want to add a platform yet.

Step 4: Run the app

In your terminal, make sure you are located in the supermodular2 folder and run the command:

$ionic serve --lab

Also, you can run the app in a simulator. For example, in order to run the app in an iOS emulator execute the command:

$ionic emulate ios

Step 5: Scaffold the Paypal module

For starters, let’s just scaffold the new module following the modular architecture of the Supermodular2 app. In this step, we will add a new empty template accompanied by its page and make the new screen available as an option on the slide menu.

Firstly, open the app.module.ts file under the src/app/ path where all the app modules are collected and import our new PayPalModule as highlighted below:

Then, create a paypal folder where all the code related to this module will be included. Place this folder under the src/pages/ path. Now, we can create the PayPalModule module we imported previously. Therefore, in the paypal folder, create the paypal.module.ts file and paste the following code:

Since we just imported the PayPalPage in the PayPalModule, it is time to create the paypal.page.ts file with the following code that simply links it to the related HTML template:

The HTML template is going to be empty for now. Just create the paypal.html file and paste the code in there:

To end with the scaffolding, we are going to add a menu entry so we can access the new screen from the slide menu. In order to do that, open the app.component.ts file and add the highlighted lines of code:

Step 6: Run/Test

By now, we should be able to run our app and see the newly added screen:

Step 7: Install necessary plugins

To enable PayPal payments, we will make use of the Cordova Paypal plugin. We are going to install it by running:

$ cordova plugin add com.paypal.cordova.mobilesdk

Do not forget to include com.paypal.cordova.mobilesdk in your package.json file too, so it can be installed with the rest of the plugins anytime you install your project from scratch. To do that, open the package.json file and add com.paypal.cordova.mobilesdk in the cordovaPlugins array.

Step 8: Create the payment form

In this step, we will create the form in our HTML template that will let the user set a payment amount, currency, description and intent. At the end of the form, we will place a button. On click, it will call the function related to the payment completion.

Thus, open the paypal.html file we created earlier and paste the following section of code where highlighted:

Notice how we bind the amount, currency, description and intent inputs with ngModel directive by Angular 2. In the next step, we will set the available currencies for the payment and the initial values of the payment form.

Step 9: Send the Paypal payment

In the PayPalPage, we will create a payment object which is of type PayPalPayment with all the values we are going to initialize the payment form. The PayPalPayment object is provided by the Cordova PayPal plugin that we should import in our page. We will also create the currencies array holding the available currencies displayed in the template we created in the previous step. As a result, open the paypal.page.ts file and add the following lines:

In order to connect the mobile app with the related application created on the Paypal Developer Dashboard we will need to provide the Client ID. Since we are still in testing/development mode, we should pass the Paypal Sandbox environment through Config which is a basically a file with all the variables one should change in order to configure the app with their own settings. This file is called config.ts and is located in the src folder. Open it and add these two lines:

For more information on how to configure an application on the Paypal Developer Dashboard, refer to the “Configure a PayPal application” section at the bottom of this article. Also, in that section, you can find the steps needed for having your PayPal application live. For the time being, we will have an empty payPalEnvironmentProduction variable to prepare our app for going live.

Now, we are ready to implement the makePayment() function that is executed when the “Make payment” button of the template we created earlier is pressed. This function will be responsible for redirecting the user to log into Paypal with the payment amount and description preset.

In the makePayment() function, we will start by initializing the PayPal object with the PayPal environment (Sandbox or Production) to prepare the device for processing payments. Βy calling the prepareToRender() method we will pass the environment we set earlier. Finally, we will render the PayPal UI to collect the payment from the user by calling the renderSinglePaymentUI() method. Consequently, open the paypal.page.ts file and replace the code with the following section:

Notice how we set the payPalEnvironment variable to set the environment to either Sandbox or Production so we can use it throughout the whole PayPalPage.

Finally, note that we need to import the necessary objects from the plugin so we can use the init(), prepareToRender() and renderSinglePaymentUI() methods provided by that.

Final Result

Running the app on an iOS/Android emulator, you should be able to see the payment form.

Clicking on the”Make payment” button, you will be redirected to the PayPal UI to login and complete the payment with the payment amount already set.

Configure a PayPal application

In order to configure the app so the users can make paypal payments, firstly, you will need to create a business paypal account where you will receive the payments. For testing purposes, you can use the Sandbox test accounts for either to set up a business account (for merchant) or to create a personal account (for buyer) so you can make test payments. To obtain your Sandbox credentials follow the steps below:

Go to Sandbox Accounts and create a sandbox business and personal test accounts.
Go to My Apps & Credentials and generate a v.zero SDK sandbox credential and link it to your sandbox test account.
Go to My Apps & Credentials and create an app and make a note of the Client ID.

Finally, set the payPalEnvironmentSandbox variable in the config.ts file under the src folder, leaving empty the payPalEnvironmentProduction variable.

Go Live

Note that if you want to move from Sandbox to Production, you should go to My Apps & Credentials and click on your application. In the details page of your application, select the “Live” tab and follow the instructions.

Next, leave the payPalEnvironmentSandbox variable empty and fill the payPalEnvironmentProduction variable in the config.ts file with the live app Client ID:

Finally, open the paypal.page.ts file under the src/pages/paypal path and change the payPalEnvironment variable to payPalEnvironmentProduction as shown: