Building a payment app that connects to Open Banking in a weekend (open source)

Yapily developers participated to (and runner-ed? up) the ForgeRock Hackathon last weekend! It was a great event and our congrats to the winning team, IT Smart Systems, for their impressive payment request app. What both companies demonstrated is how fun and easy it will be to innovate in fintech with Open Banking going forward. Here, I’ll walk you through how in just 2 days we were able to demo a production quality app.

We knew we wanted to make a payment app that worked with QR codes. A couple of the scenarios that we imagined were:

  1. QR codes for static payment requests (e.g. charity donations) to remove the need for typing in credit card details
  2. Generating QR codes on your mobile device so you can chase debts immediately from your friends

Keeping in mind that QR codes are more secure than typing credit card details, the name of the game for us was speed. And thanks to our selection of tools, we achieved quite a lot in a short amount of time. Those tools that we would like to thank (in no particular order) are:

  • Flutter — a mobile development framework for building Android and iOS compatible apps
  • Firebase — a Google tool that provides backend functionality for web and mobile applications. We used this to handle image uploads but it offers a lot more
  • Yapily (of course) — our API that we used to obtain the login URL and authorise the payment for the ForgeRock test bank
  • ForgeRock sandbox — ForgeRock provided the mock bank for us to simulate user authentication, third party app authorisation and payments
  • Open Banking directory — this is where entities must register in order to be able to connect to Open Banking APIs. It’s also worth noting that ForgeRock provides a testing directory as an alternative.

MONEY ME — The app that makes payment requests easy

User journey from scanning the payment request QR to viewing the embedded payment details
The user selects his/her institution of choice and is directed to the bank website to authorise our payment app to execute this payment

Making the connection to ForgeRock.. and a bunch of other banks!

This part of the hack was done by creating an application in the Yapily Dashboard.

Our application SSA (software statement assertion) registered in the Open Banking directory was used to sign our requests and create the authorisation url for the end user. And to leverage the power of our Swagger documentation for the Yapily API, we generated a Dart SDK to work with our Flutter app.

Details of our technical implementation to follow in another post (here’s the code for now).

However…

Making this connection was likely the most challenging aspect of connecting to the ForgeRock sandbox bank, largely due to the requirements of understanding the Open Banking specification, generating the necessary signing and transport certificates, sharing and obtaining the relevant keys, knowing how to use the SSA’s and configuring your API client and the rest of your code to make properly-authorised requests.

Kudos to the teams that managed to get connected in that short time and the hackathon mentors for guiding the teams through the process.

Connecting via Yapily

Each TPP (third party provider, aka the app connecting to the bank), even connecting using Yapily, will still need to be registered in the Open Banking directory. A key difference is that the usage of certificates, SSAs and the subsequent signing of API requests are handled by the Yapily API.

In our experience during the hackathon, even for a small prototype/hackathon project, some benefits became clear:

  1. Quicker integrations to bank APIs
  2. An app that is ready to connect to multiple banks

In a real application we would have seen even more benefits, including reducing the number of APIs to manage, response normalisation, various token management features, centralised analytics and monitoring.

To conclude

It was a fun experience to use Flutter to quickly build a nice clean mobile app; it was also great to use Firebase for backend functionality without having to write code for a single controller, even if we didn’t get to play with the database; but the easiest part was connecting our mobile app to ForgeRock using our very own Yapily API!


Innovating in fintech just became so much easier! So what’s your idea? Get in touch at hello@yapily.com, we would love to help!


And finally thanks to the rest of the Yapily team and the judges:

the ForgeRock team:

  • Allan Foster
  • Agnes Blach-Barth
  • Hollie Dabson
  • Ranjana Sharma
  • Nick Caley
  • Ben Jefferies
  • Jamie Bowen
  • Steve Ferris
  • Fraser Wallace
  • Quentin
  • Wayne Blacklock
  • Maxime Salnikov

volunteers:

  • Julian Coombes
  • Glyn Jackson

the Raidiam team:

  • Barry O’Donohoe
  • Ralph Bragg
  • John Heaton-Armstrong
  • Mark Haine

Disclaimer: This post is about a hackathon project. Any names used in this project, including Money Me, are in no way affiliated with any brand bearing the same or a similar name.