Tappo Super App

Inspiration

Popularised in Asia, Super Apps have reached nearly all four corners of the world. With the likes of Wechat, Alipay, Grab, Gojek, Meituan, PayTM, Rappi, Opay and more dominating different regions. Despite the rise of Revolut and Affirm in recent years, Europe and North America remain the last frontier for Super Apps with no recognisable incumbent.

As a result, we wanted to build a true Super App around payments that would disrupt the way of life. We believe the emergence of a Super App will deliver greater convenience and savings to consumers and businesses and bring Europe and North America to the Super App spotlight.

What it does

Tappo's consumer mobile app lets users link their bank accounts, make payments, manage finances, store and send crypto, order food, access travel and accommodation, cashback and more. In comparison, the web app is a light version offering users the ability to order food and pay businesses directly.

The current range of services on the consumer mobile app include:

P2P payments (fiat & crypto)
Aggregate multiple bank accounts
Personal finance management (budgeting & spending analysis)
Cashback
Food Ordering
Hotel Booking
Flight Booking
Train Booking*
Non-custodial crypto wallet (crypto-assets & NFTs)
Buy, sell, spend, and store crypto

*Only completed backend integration

Tappo for business

Tappo for business lets businesses offer services through a white-label website (hosted on Tappo) and the Tappo food marketplace. Companies and sole traders can register and get set up in as little as 5 minutes using the web and mobile app. The registration process is quick and easy, with KYC and KYB checks conducted asynchronously.

The list of services businesses can utilise are:

Payments (Open Banking, Cards, and Crypto)
Online food ordering (delivery, pickup and contactless ordering in-store)
Order aggregation from different platforms (JustEats, UberEats, and Deliveroo)
Gift card issuance
Split bill
Invoicing
Whitelabel website

Rapyd Hackathon

To participate in the Rapyd Hackaton we integrated Rapyd's APIs and added new functionalities to transform our Super App.

Integrated Rapyd's hosted checkout into our web app, allowing users to order food and make direct payments to businesses.
Rapyd Disburse is used to enable users to cash out their loyalty points and receive fiat payments when they sell their crypto.
Created split bill payments feature from scratch to allow restaurants to charge their customers and enable them to pay with cards (through Rapyd) and Open banking.
Integrated Crypto payments to enable payment from over 50+ coins for businesses and our managed services

How we built it

We built our application across 3 different environments testing, staging and production.

Design: We used Figma to create the designs for all the applications.

Frontend: The consumer and merchant mobile applications (iOS and Android) were developed on React Native. In comparison, the consumer web app and merchant web portal were built on React (Next.js).

Backend: Our backend system is built using a microservices architecture with Java (Spring Boot) and Go (Echo). We integrated with various third-party providers to allow users to access the range of services mentioned above.

Rapyd Implementation: We used Java (Spring Boot) to implement the Split bill feature and Go (Echo framework) for Rapyd Collect, Disburse and crypto payments.

Challenges we ran into

The Super App journey challenges

We had to deal with very different business logic in building the Super App. Food, hotels, flights and trains were all different, and correctly mapping various data was extremely arduous. In addition, we faced issues handling different payment statuses, session timeouts and errors to match the business logic. There were many unknown and unexpected issues which required additional investigation time. As payment statuses were critical, we had to use a real-time database to ensure status would update instantly without refreshing on the front end. But at times real-time database would suddenly stop working for no apparent reason. Furthermore, as we were dealing with Open Banking APIs, we had to adhere to FAPI standards, which resulted in additional development time.

As the features grew complex, so did the communication between the team when implementing new features. The problem became acute when there was a lack of documentation from certain service providers. This led to missing data in API calls, and many issues could only be discovered through trial and error. Then this information had to be relayed to different members of the team.

Hackathon challenges

In building the features for the Rapyd hackathon, we met a very similar set of issues. We had to handle complex payment and order statuses for our Split Bill feature. Timeout for payment needs to be carefully managed and differs significantly from our other services. For instance, we have a 10-minute timeout for online orders, which is unsuitable for the Splitbill. We also had to synchronise payment amounts and statuses from the consumer app as well as on the business app.

In addition, we had to implement a UX flow that would be clear to the users. As we wanted to build features that we would still be able to utilise after the hackathon, we also had to be wary of what features we should integrate and how our product range may be beyond the risk tolerance of the Rapyd compliance team.

Most importantly, our crypto payment provider's sandbox API was unavailable most of the time causing many issues with our crypto integration for payments. We had to hardcode some of their API responses such as destination wallet address to make the application work.

Accomplishments that we're proud of

We are extremely proud of the new knowledge acquired during the entire journey, trying out new things, doing things that very few are attempting and being able to successfully integrate multiple very complex business logics. As a result of these difficult challenges our team was able to constantly grow and surpassed expectations as time went on.

Furthermore, we came out of stealth mode with our web app in November 2021. To date, we have spent nothing on marketing and have processed over $1m in payments through Open Banking for hundreds of small businesses. Since releasing and promoting our consumer app at the end of July, we've had nearly 1000 users sign up at zero user acquisition cost and generated almost $20,000 of sales.

The features we built for the hackathon required very close collaboration between the Front-end and Back-end teams. We are extremely proud that the team was able to achieve the completion of the feature in time with minimal management.

What we learned

What we learned from building the Super App

We first learned that building a working super app is very challenging, and we gained a lot of knowledge about the different business logic we integrated. For instance, the hotel booking feature enabled users to reserve a room and pay later. As Open banking lacked many card payment features, we had to adapt this.

We had to learn how to do many things from scratch, such as designing and building a secure service side application system from nothing, using cloud deployment tools to speed up application deployment, integrating with financial grade APIs, working with blockchain, crypto, IPFS, and more.

What we learned from the Hackathon

During the Hackathon, we implemented crypto payments for merchants and our self-managed services. Through this, we realised there was still much more we could learn from integrating payments. We had to deal with GBP base price, but the settlement would be in USDC, and users could pay with over 50 different coins. We had to figure out how to manage and display these data and deal with refunds.

In implementing the split bill feature, we learned that apart from managing the session timeouts ourselves, it would also be critical to allow the customers to clear any pending payment sessions manually to prevent delays at the table.

Some of our members were using Go for the first time, and participating in the Hackathon allowed them to test their coding skills and learn how to use libraries to implement features faster.