How the Memento wallet is structured
Today we are introducing a new way of assembling a ready-made fintech wallet in 10 minutes. This is a tech blog where we dive into our technical structure and demonstrate to you how to use our React Native SDK.
Short intro to Memento
The process of creating fintech wallets is broken. Creating a safe, scalable fintech wallet app should not take months or years to set up and it should not be capital-intensive to get off the ground. You can think of us as the Shopify for fintech wallets. Before Shopify existed, deploying an E-commerce website was costly, time-consuming and required a lot of development power. It is like that today when it comes to fintech wallets but we have been working tirelessly for the last few years to change that. With Memento’s platform, you can now in 10 minutes assemble a fully functional fintech wallet to be quickly introduced and placed in your customer’s hands, easy as that.
Here’s what’s included:
- Ready-to-be-customized app for a fintech wallet service
- Pre-integrated card providers, IBAN providers, etc.
- Fintech-related products and automatic flows
- Dashboard for managing, configuring, and monitoring usage
- 24/7 hosting service
- A modular platform with plug-in architecture for your team to expand your product on both, the Back-End as well as the Front-End side.
The product
We will mainly be focusing on showing you our app product and how you can make it match your brand and vision.
The app modules are written in the React Native framework with Typescript, allowing clients to write one codebase to deploy apps on both android and IOS. Memento wanted to create a UI that scales and can be maintained, therefore we deploy our app modules as an NPM package, where we can make updates when new modules are added. In addition, this gives us control over the health of the modules, allowing us to bump up the version in case of any security vulnerabilities.
Since the modules are designed to integrate with our backend system, allowing the client not only to receive a UI but a fully functional fintech wallet, there is some boilerplate code needed. Therefore we’ve created a scaffold project to get our clients quickly off the ground. The client simply clones the bare project and runs the following lines in the terminal.
Having completed this step you already have months of work in your hand and can get started assembling the fintech wallet to match your brand.
Currently, our SDK comes with the following components: Sign Up, Sign In, Cards and Settings. These modules together include the screens and flows you would expect in a common Digital Wallet app. Memento can offer you the code with all the modules working together so you can either use the app as-is or keep on developing your own features on top of our offering. We built the app with it in mind that the client is not locked purely with our modules but can continue with their journey, with Memento as the base.
The <MementoCointainer /> component
You can think of the MementoContainer component as the brain behind the modules and what makes our system tick. The container is wrapped around your application allowing you to control our modules and work with it.
The Memento container has properties to take charge of the app, we’ll list the most important ones here
The API SDK
The Memento system also contains a typescript API SDK which takes care of the communication between the app and our backend. The API SDK is included in the scaffold project so you won’t need to worry about configuring it on your own. When the SDK is configured the app is fully connected to a real environment, the only thing needed is a PROJECT_ID and HOST stored in a .env file, which you’ll receive when you’ve chosen to work with us.
Actions
Actions is a neat prop that allows you to extend the wallet and catch events that happen in our modules. When an error occurs for example in our SDK, it will arrive as a callback in the MementoContainer, meaning you could handle it as you wish. The same goes for other events, such as logout. If you want to navigate to a different screen after the user logs out you can use your own navigation instance and your own flows or screens.
Active color theme
All the screens are designed both for light and dark modes depending on what the client prefers. There are three options to go about this feature. The client can
- Set activeColorTheme prop as “light” and force all the screens to be in light mode
- Set activeColorTheme prop as “dark” and force all the screen to be in dark mode
- Make activeColorTheme prop listen to the active colour scheme on each device
Color theme
the colorThemes prop allows the client to change the color theme of the application. If you want the app to represent your brand you can simply change the PRIMARY color, and even have the color vary between light and dark modes as you can see in the image below.
Translations
Do you want your app purely in Spanish or support multiple languages, or simply change the default text Memento offers? No problem. The translation prop allows you to easily manage different languages with ease.
Font
Memento uses Arial-Next as the default font but the client can easily change it with the font prop. We support all the fonts that React Native supports.
I hope this demonstrates how the SDK gives you the speed you need to build a Digital Wallet fast and securely and also allows for the flexibility to customize it to fit your brand and your customer's needs.
The modules
Let’s explain the modules that are wrapped inside the MementoContainer. Each module contains specific flows and when all these modules come together, a card app emerges.
As briefly mentioned above, the SDK contains four modules
- SignUp
- Signin
- Cards
- Settings
Every module offers the option to override the config in the MementoContainer, meaning, for example, if you want to have a different PRIMARY color for only the Signup, you could do that. The same goes for translations and fonts.
Sign up
This module is a true powerhouse since it gives you a fully tested, working authentication flow which normally takes months to create in-house. When the user finishes our sign-up flow a new real bank account will be created due to the Memento engine being connected to a Banking-as-a-Service provider. The module offers top-notch security features such as KYC flow and many kinds of validations.
When a user has entered the Signup flow he will be registered in our system and will appear in the admin dashboard. There you can review all the signups and make sure everything is working as expected.
Settings
This module is a must-have in any fintech wallet. Here the user can manage his app PIN, change his profile image, contact support, and read about your security and privacy policies. If you want to create other items in the Settings module, you can easily do so.
Sign In
This module is pretty self-explanatory. Here the user will receive an SMS to verify it is him, and then he is required to insert his app PIN to move into the app.
Cards
This is the most robust and important module we offer. With it, you can allow the user to take complete control over his card. The user can view the balance of his card and manage it by freezing it and viewing/setting the card PIN. Additionally, the user can see all of his transactions and get detailed information about each one.
Want to know more?
Payment card issuing (prepaid, debit and credit) is surging in most markets — replacing the use of cash and checks. Digital wallets have become an indispensable part of card issuing services, allowing cardholders to quickly check their balance, freeze/unfreeze cards, and offer full card management control in general, as well as essential remote KYC processes. With Memento you can enhance your offering as a Card Program Manager by offering your clients the most scalable wallet platform on the market. Read how we can partner here and do not hesitate to get in touch via www.mementopayments.com
