Over a million developers have joined DZone.

How to Use Mollie for Mobile Payments in Ionic App

DZone's Guide to

How to Use Mollie for Mobile Payments in Ionic App

Fewer than 15 lines of code are enough to add payment processing to an application.

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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': {
 '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.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

api ,ionic ,payment ,mobile payment ,mobile ,web dev

Published at DZone with permission of Max Katz, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}