Natalie Monko Lead Project Manager

• Fintech
• Flutter

June 21, 2022 12 min read

How to Create a Payment App with Flutter: an Ultimate Guide

Increasing global adoption of smartphones, the COVID-19 outbreak, and a transition to 5G are just some of the factors that facilitate an exponential growth in mobile wallets and payment apps popularity. In 2021, the global mobile payment market size was estimated at almost $1.8 billion and is expected to reach $6 billion by 2027. While Southeast Asia shows the fastest rate of mobile payment technology adoption with an expected 311% increase in users in 2020 – 2025, other regions, such as South America and the Middle East are also projected to show almost 150% growth in five years. 

Today, the younger generation is skipping owning a credit or debit card, preferring to use their smartphone for paying, sending, and receiving funds. While Apple Pay and Google Pay are leading global payment solutions, and AliPay together with WeChat Pay dominate the Chinese market, there are still plenty of emerging successful apps on a regional level, competing with the big players for market share. 

When creating a reliable and secure payment app, it is important to choose a suitable tech stack that contributes both to an efficient development process and end-users convenience. With over 12 years of experience developing mobile apps, with both native and cross-platform solutions, Surf has chosen Flutter framework for many of them, including a number of fintech projects. In the article, we’ll talk about how to create a payment app using Flutter, the framework’s advantages, and the main steps of the development process.

Why build a payment app with Flutter

Developed by Google and released in 2017, Flutter is a cross-platform software development kit that allows creation of performant apps with native look and feel for Android and iOS devices. Flutter utilizes Dart language (another Google’s brainchild) and is based on the concept of widgets — the ‘building blocks’ of which apps consist. The framework’s engine is written mostly in C++, while graphics are powered by a high-performing Skia graphic engine. For a more in-depth review of Flutter’s architecture, we suggest checking out our dedicated article, while below we’ll go over the main advantages of building a payment app using Flutter.

Speed & cost of development

To create a successful payment app in today’s highly competitive market landscape, it is important to decrease both time-to-market and development costs without compromising the final product’s quality. Cross-platform development allows engineers to create apps for multiple platforms from a single codebase. With the introduction of Flutter 3, the framework now supports all six main platforms: iOS, Android, web, Windows, macOS, and Linux, meaning there is only one team of developers required to create apps for all of them. For example, when Surf had to create 6 apps for a pharmacy chain (iOS and Android apps for each of 3 brands), Flutter helped us to save almost 40% of the client’s initial budget for developing 6 native apps.

Also, the framework comes with the Hot Reload feature that enables Flutter app developers to see code changes instantly, without reloading the whole app, as well as a rich library of widgets and extensive testing support on all three levels (app’s single function or class; its component; the whole app), which all contribute to a more streamlined development process.

It is impossible not to mention Google Pay, the leading payment app, which was rebuilt on Flutter a few years ago. Despite adding new features, the codebase of the Flutter app version has a 35% smaller codebase, while the development team estimates saving 60-70% of the time, thanks to the framework’s ease of use and management.

Performance 

In contrast to other cross-platform technologies, such as Ionic, Flutter architecture eliminates a JavaScript ‘bridge’ and communicates directly with native components, which significantly improves response time. Combined with a powerful Skia rendering engine, this makes Flutter one of the fastest cross-platform frameworks, which delivers stable 60 FPS (frames per second) even in graphics-heavy apps.

Native look & feel

With Flutter, apps are built out of widgets that represent interface elements, layout options, and animations. Each widget can be configured as required and supports both Android-native Material Design and iOS-native Cupertino visual styles (icons, fonts, navigation, etc.), allowing creators to achieve consistent user experience on both platforms.

Security

Flutter’s source code is compiled into a non-human-readable native code, which cannot be reverse engineered, which makes the framework even more secure than some native frameworks and perfectly suitable for fintech apps. Soon after Flutter’s release, the Surf team developed the first banking app in Europe on Flutter. The app for one of the banks of Société Générale group was ranked the TOP-1 app in Banking, Finance, and Insurance category.

Flutter payment app features

Payment apps can be classified according to several types, such as digital wallets that provide a way to store card details and pay with the phone via NFC in the real world and payment API on the internet (Apple Pay), money transfers and currency exchange apps (Wise), P2P lending apps that offer microloans with low-interest rates (Prosper), and others. However, the universal trend toward super apps affects the payment apps as well — currently, the leading fintech apps unite under its ‘umbrella’ many payment services and provide access to them all within a unified interface (Paytm, AliPay, Gojek). Let’s take a look at the features, which are more or less essential to any modern payment app.

Login and authentication

The app’s user journey starts with the initial sign-up screen. It is important to make the registration procedure as convenient as possible so that new customers don’t get scared off by a lengthy onboarding process. A sign-on option using existing Facebook, Apple, or Gmail accounts can also save time required to fill in personal details. If the onboarding requires creating a bank account and ID verification, it is wise to integrate existing SDKs for that purpose. For example, when Surf developed an app for Pakistani neobank, we used the IDWise solution that allows users to verify their identity using photos of themselves and their documents without a visit to a bank office.

After the registration process is done, suggest to a user to set up a PIN or biometric identification to prevent third persons from accessing sensitive financial information and transaction history. Also, a two-factor authentication (via SMS or email) or OTP (one-time passcode) verification should be added to confirm transactions. 

Card storage

To develop functionality that lets customers use the payment app as a digital wallet and pay with saved cards on the go, developers can use Flutter packages, for example, flutter_credit_card and card_scanner, that allow to enter credit card details manually or just scan it with a device’s camera. Such packages implement checksum algorithms preventing errors when entering a card’s number. To safeguard card details, the payment app uses tokenization that encrypts data and substitutes real details with a virtual token used throughout virtual transactions and paying at points of sale. The card network validates the token with the customer’s actual card number, while card issuing and acquiring banks use decrypted billing information to complete the transaction.

Money transfer

One of the payment app essential features, money transfers, should have a clutter-free interface, so that users can browse and select recipients by phone number (an integration with the phonebook is a must here) or other identificators, and see any incurring commissions on their operations beforehand.

Notifications

Notifications regarding transactions, cashback, and other noteworthy events are useful in keeping app users engaged. Basically, there are two types of notifications: local (originate from the app itself) and push (triggered from a remote server). In Flutter, they are implemented via flutter_local_notifications package but, since every platform handles notifications differently, platform-specific calibrations are required.  It is important to supply customers with the ability to adjust notifications to their preferences — too many unimportant pushes can be as bad as missing something important.

Transaction history & documents

It is important to provide payment app users with a comprehensive transaction history as well as an ability to generate proof of transactions and quickly share them via email or messengers. When Surf worked on an app for corporate clients of Société Générale group bank, we designed a special ‘Documentation’ tab where users can search for documents by date, type, amount, and other characteristics and generate new invoices from scratch in just a few clicks.

Steps of payment app development

It’s hard to stress enough the importance of a structured development process to launch an app within the initial budget and deadlines. While some additional steps might be added, a standard payment app development roadmap consists of the following steps.

Planning & estimation

Payment app development starts from analyzing the current market and defining the target audience and future app functionality, which mostly involves project managers and business analysts. This step also allows the team to come up with a higher-level estimation of the project’s costs. Usually, it’s done by using one of two price models. The fixed price model means a precise list of features is carefully followed throughout development, with any additional work requiring a full agreement process with the client. On the other hand, time & material model, which is used by Surf, means more rough estimation prior to development, but greater flexibility during the process: the development is split into stages (sprints); the client pays for what’s done during the sprint, and any additional works (with the client’s agreement) are included in the next sprint.

UI/UX design

Designing a mobile payment experience that is user-centric is paramount for the app’s success. At this stage, UX and UI designers and project manager start by creating wireframes — digitized sketches of the app’s interface, depicting layouts and its elements, then work on a style guide that establishes visual consistency across all screens of the app and then create the app’s mockups — a combination of the wireframes and the style guide, showing app’s static designs. The final step of this stage is the creation of a working prototype of the app (MVP), which closely simulates the real user experience. Below, you can see how we’ve redesigned an app for a bank group.

Regulatory compliance

As with any fintech project, payment services are closely watched by regulators in any country, presenting a significant challenge for emerging startups. It is important to invest in the legal side of your app in advance and be prepared to interact frequently with regulatory bodies in the beginning. Since every country (and even state, in the case of the US) has its own requirements, hiring local lawyers specializing in finance is essential at this stage. One way to decrease the number of permissions to obtain is to partner with an already established finance company, such as a fully licensed bank. In this case, it is important to work out detailed partnership conditions to avoid legal disputes in the future.

App development & testing

After the app’s prototype is refined to suit all use case scenarios, the app development itself begins. This stage involves mainly developers and testers, as well as a project manager who facilitates the whole process. At Surf, our teams use an agile approach and split the development into 2-4 week sprints, with the app receiving a fully functional update or configuration at the end of each sprint. With fintech apps, we combine manual and automated tests and aim to comprehensively test the application in every aspect: performance, user experience, functionality, and security.

In its projects, Surf team uses its homegrown solutions, created to make Flutter app development more efficient and contribute to the Flutter community. Our Elementary library allows developers to create apps using the principles of Clean Architecture that divides their modules into blocks, decreasing the time required for maintenance, revisions, and testing, while SurfGen is a tool that generates routine app code automatically decreasing the time required to write an app’s service layer by 3-4 times.

App launch

Finally, when Day X arrives, the first public version of the app is released via Apple’s App Store and Google Play Store. Note that the Apple’s Store requires a review process that might take several weeks (unlike Google’s, where it is a matter of hours), so submit the app beforehand. Of course the app launch demands a proper celebration, however the app development does not stop after it, and instead takes us to the next stage…

App support & maintenance

The app’s release is only the beginning of a long road ahead — now it will require constant support to maintain the app’s health, fixing newly found bugs, and updating it to meet user expectations and full compatibility with new devices and OS versions. 

Since it is a common practice for companies to outsource fintech app development and transfer the project in-house for post-release support, we at Surf always aim to supply comprehensive documentation of the app’s every aspect. For example, when the time came for our team to handle banking app further maintenance to the client’s in-house team, we provided extensive documentation that covered existing features, backlog, and designs of the planned features, along with tests and knowledge base assembled by our QA. All of this helped the in-house team to continue the project’s support in a consistent and streamlined manner.

Summing it up

With a $1.43 trillion (2020) market size and estimated growth of 23.8% (2021-2026) mobile payments are rapidly growing in popularity across the globe, ousting cash and plastic cards as means of payments. While there are undoubtedly clear leaders with the largest market shares, such as Apple Pay and Google, there are still plenty of opportunities for emerging payment apps to establish a loyal user base and show impressive growth.

Making a payment app using Flutter development framework allows developers to create solutions for all main mobile and desktop platforms from a single code, saving significant resources, while the platform’s performance and adaptive UI ensure a smooth and modern user experience.