If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

In this tutorial you will learn how to import and use the PayPal API plug-in for Ionic & AngularJS. This plug-in makes it easier to add secure payments into your Appery.io mobile app and trigger any PayPal REST API.

By using PayPal, the world-famous payment system, you can build your mobile shop with online payment functionality.

This tutorial will also show how to create a Server Code script to implement server-side authentication which is totally secure – your app will not contain any sensitive data such as client secret or token.

The plug-in implements this flow provided by PayPal.

Before you begin

Tutorial level: intermediate.

Before using the PayPal API you will need to sign up for a free account: http://developer.paypal.com/. Then you should create your app on the PayPal side, allowing you to get an API key to use.

Create a new app

To start, you are going to create a new app.

  1. Click “Create new app.” For the app name, enter: PayPal App (use any name you want) and click “Create.”.
  2. When the app builder loads, you will see the Start page. Every new app has a default page. You can open the page by going to Pages > startScreen.

Next you are going to import the PayPal API plug-in.

Importing the plug-in

  1. To import the plug-in, click CREATE NEW > From Plug-in:
  2. Check the box for PayPal API.
  3. Click “Import selected plug-ins.”
  4. Select PayPal_Home page as start page.
  5. Click “Apply settings.”

That’s all for now.

Creating the database

  1. Create a new database called PayPalDB.
  2. Inside the database, create a collection called Credentials.
  3. Inside the Credentials collection, create two columns called: key and keyValue (both String type).
  4. Copy the created database ID and paste it to the PayPal_Settings > database_id (under the Services folder) in the Visual Builder.

The token will be stored to the collection via Server Code, so there is nothing more to add here. Here is how your collection should look:collection

Creating the Secure Proxy

  1. Click on “Secure Proxy” tab or go to http://appery.io/proxy.
  2. Click “Create new proxy,” and name the proxy PayPalProxy. Click “Create.”
  3. In the proxy setting page, check Use proxy + store sensitive (private) data in database.
  4. For Database select PayPalDB.
  5. For Collection select Credentials.
  6. For Key column select key and for Value column select keyValue.
  7. Click “Save.”

Now you need to tell the REST services to use this proxy:

  1. In the app builder, open Services > PayPal_Complete_Payment.
  2. Check Use Appery.io proxy and select the proxy that you just created. If you don’t see the proxy, click the refresh button.
  3. Repeat the same for the PayPal_Create_Payment service.

When Secure Proxy is turned on for REST Services, the token parameter will be automatically substituted with the actual value on the server side. To call any PayPal REST API, all you need to do is turn on the created proxy for that REST Service. The token value that was previously retrieved via the Server Code script will be automatically added to the REST.

Creating the Server Code script

This plug-in uses Server Code script to authenticate with PayPal. The script will return Success or Error events and it will be triggered once the app is loaded.

  1. Create a new Server Code script called PayPalAuth.
  2. Paste the following code into the script body:
  3. On the line 6, replace <YOUR CLIENT SECRET> with your PayPal app client ID and secret separated by a colon and encoded as base64. For example, you should combine the following string:
    And then encode it as base64.

  4. Copy the Service URL from the REST information tab and paste it to the PayPal_Settings > auth_script_url (under the Services folder) in the Visual Builder.

Your Server Code script should look like the following:
server_code

Filling return and cancel URLs

One more very minimal setup step is required – fill the return_url and cancel_url parameters in PayPal_Settings. This plug-in doesn’t handle payment canceling in any special way, so the URLs will be the same. But if you want to handle payment cancels you can use a unique URL for cancel_url. Change <YOUR_APP_ID> to your Appery.io app ID (copy it from the address bar) and paste the following string to return_url and cancel_url parameters:

Here is how your PayPal_Settings should look:
settings

Running the app

That’s all you need to do. You can now run the app by clicking the “TEST” button (using the frame isn’t permitted due to PayPal security reasons, so launch the app without the frame).

Once the app is loaded, the Server Code script will be triggered. Usually it’s a few seconds until the Server Code script will return Success.

The home page contains the predefined amount of money (6.99) and a Select component to change the currency (USD or EUR).

Click “Make Payment” to create a payment. Assume that user just clicked “Buy” in your online shop. Once the payment is created, PayPal website will be opened. On this page, the buyer credentials should be entered. You can use one of the PayPal test accounts to test the app.

Once the payment is approved on behalf of the buyer, the PayPal_Payment_Details page will be opened. The details of payment will be shown then.paypal_app