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 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.
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
$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:
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
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
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
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.
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
Finally, note that we need to import the necessary objects from the plugin so we can use the
renderSinglePaymentUI() methods provided by that.
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
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:
Found this tutorial interesting?
To find PayPal payments and many more features to incorporate in any Ionic 2 mobile app, check out Barebone Ionic 2, the Swiss Army Knife of Ionic2!