How to Use Mollie for Mobile Payments in Ionic App

Mollie is in the same space as PayPal, Stripe and enables your business to receive online payments. Mollie also offers APIs for developers which means you can easily add Mollie supported payments to your Appery.io app.

Connecting to Mollie Payment API

To show you how simple it is to connect to Mollie API, I created a Server Code script that initiates a payment.

var url = "https://api.mollie.nl/v1/payments";

var XHRResponse = Apperyio.XHR2.send("POST", url, {
  'body': {
    'amount':'350.00',
    'description': 'My cool new product',
    'redirectUrl': 'http://appery.io'
  },
  "headers": {
    "Authorization": "Bearer test_qgzeg5Bb................"
  }
});

Apperyio.response.success(XHRResponse.body, "application/json");

This is how the script looks in the Server Code editor. The right side shows the script tested and the response from Mollie:

Screen Shot 2016-03-28 at 2.43.03 PM.png

Testing Mollie payment API

Building an Ionic app

Once you tested the connection to Mollie Payment API, the next step is to build an Ionic app that uses the script and makes a payment.

This is how the Ionic app looks inside the visual editor:

Screen Shot 2016-03-28 at 3.01.43 PM

Ionic app

In this app you can enter a price, and product description. When you click Purchase, the script you wrote above will be invoked. In the Payment ID card you show the transaction id from Mollie. This means the payment was successful. You can include any other information from Mollie Payment response.

Running the app:

Screen Shot 2016-03-28 at 3.07.15 PM.png

Running the app

This is how the scope looks with the makePayment function:

Screen Shot 2016-03-28 at 4.27.18 PM.png

AngularJS scope in the Ionic app

Connecting to any API is very straight forward using Server Code script as you can see in this short example.

If you like this, quickly create an Appery.io account and build your next app with any APIs.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s