Templates
Template Setup Guides

Walletly - The e-Wallet Template

Template page link: https://zeroqode.com/template/walletly---the-e-wallet-template-1571391614961x214878924900725020

Introduction

Walletly is a no-code template designed as an electronic wallet web application that enables you to pay and get paid online as well as deposit/withdraw funds to/from your wallet. The template currently supports credit card (backed by Stripe) and bank account operations (backed by Plaid API for US bank accounts)

Features

  • User-to-user payments

  • Bank account payments using Plaid API (supports only US bank accounts)

  • Credit card operations through Stripe

  • Adding/withdrawing funds from/to the wallet

  • Fully responsive pages and user account dashboard

  • Fully responsive admin dashboard for overall management

  • An user dashboard page where users can manage their bank account details and see transaction history

Data Structure

User

Users are the walletly account holders who use the platform to make transactions and withdraw money. This also stores the admin's information. They store the usual profile info (photo, Name, EmailAddress, Username), logintimestamp to store when last the user logged in, balance, to show the user's current account balance, bank_accounts, to show a list of all the bank accounts the user owns, cards, to show the user's list of cards, transactions, to show the a list of transactions carried out by the user,admin field to show whether or not the user is an admin.

Bank Accounts

Bank accounts contains the information about the account like account_number, bank_name and type, to show the type of account either current or savings.

Card

Card data contains all the information about a debit or credit card owned by the user, it contains information such as number, (which is the card number), cvv, expiry_date and last4, (which is the last four digits of the card number).

Transaction

Transaction data contains all the information about users transactions, it contains information such as amount, (i.e the amount of the transaction), date, id, status, type, user, (i.e the specific user that carried out the transaction.

Pages

Index

This is the main landing page of the template, it is fully responsive and has a pop-up mobile menu and contains basic information for new users to learn more about the Walletly platform. It has a header, the buttons on the header contains, how it works, admin, get started and login, which takes you to the index page, dashboard page, sign up page and login page respectively.

Next on the index page is the abridged information section, that has thumbnails grid list of some functions walletly has to offer.

Next is how it works section that explains in details how walletly operates.

Then we have the why choose us section, that has a link to the sign up page.

The next section contains button for downloading the mobile app on any smartphone device.

The last section on the index page is the footer section that has quick-links, social media profile of the company and a brief information about walletly.

About Us

This page contains detailed information about walletly, it has a header and a hero section, it describes walletly's mission and has a "what we value" section and the the footer.

Join our team

This page is more like the careers section of this template, it contains available roles for the team at walletly. It also has a header and hero section, and the footer.

Login

This contains the login form and allows users (walletly users and admins) to login with their email and password.

Sign Up

This contains the sign up form and allows users (walletly users and admins) to sign up to Walletly.

Reset_pw

This page is where users can set a new password for their account.

Forgot_password

This page is for users to request a password reset link with their email address.

Account

This page is the main page of this template that handles all the functions carried out by users on their walletly account, which includes, withdrawal, transfer, updating user profile and account settings. It has sub-pages that are navigated by a Router plugin.

Element

State

Note

Page

Dashboard

view

This contains an overview of the user's account, (i.e account summary, recent transaction, e.t.c.)

Page

Accounts

view

This contains all the bank accounts and cards owned by the user.

Page

Withdrawal

withdraw_money

This sub-page carries out withdrawals on any account owned by the user. Theres also a button to add a new account to withdraw from.

Page

Fund Wallet

deposit_money

This sub-page deposits money into the any account of the user.

Page Send

transfer_money

This sub-page carries out money transfer authorised by the user to another user on walletly.

Page Settings

make_changes

This sub-page carries editing and updating action by the user on their profile and account. Actions like; (change password, edit name and picture etc.)

Admin

The dashboard can be used to make changes to the template such as updating user profile, deleting users, keeping track of the login time and keeping track of users transactions.

Element

State

Note

Page

view

Takes a text value of either dashboard, transactions or users and shows the relevant group in the process.

The admin page is currently open to all visitors logged in or not but with read-only access (they can't perform any actions). To have full access the user must have their current user's is_admin field set to yes. There is also a disabled workflow that redirects users back to previous page if they don't have admin access. You should enabled this workflow when you get this template. Step by step below:

  • Signup as a user

  • Find your user in the Bubble database and set is_admin field to yes

  • Go to the /admin page workflow tab and enable the 2nd workflow

  • Go to the /admin page design tab, click Group Page element, untick "This element is visible on page load"

  • Freely visit the admin page with full access as long as you are logged in while users without is_admin set to yes would have no access.

​Specific References

The account in this template make use of the Zeroqode Router for Navigation plugin. The way it works is similar for most pages, on page load the URL is inspected and the value of the path is used to determine what values to given the custom states responsible for changing views and in the case where the url contains a slug (a unique readable string used to identify an object in the database), the slug is used to fetch the data to be displayed to a certain group.

Navigation between tab on the admin page is powered by the custom state current on the element dashboard menu and conditional statements on the sub page groups that make them visible when true.

Reusable Elements

This template has 2 reusable elements listed below:

  • Header: This is used for both white BG and image background.

  • footer: Footer with quick links and disclaimer

Payment

This template uses Dwolla and Plaid for payments.

For more information, please check Dwolla Plugin setup

Demo to preview the template