Plugins
Templates
Powered By GitBook
Walletly - e-Wallet like Paypal Template

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 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)
    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 Structures

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 contain information about the account like account_number, bank_name and type, to show the type of account either current or savings.
Adding a bank account is directly linked to the NextBankAccount field from the user object. It determines the spot the bank account will take on the Dwolla customer account.
The default value is 1 and when adding a new bank account it will increase by 1, and decrease by 1 when deleting a bank account respectively. This field is used when a Plaid is being created on the account page (see the screenshot below).
Adding a bank account
Also please note that you can add a maximum of 2 bank accounts to a user using the test keys of Plaid.

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.

Payments

This template uses Dwolla and Plaid for payments.
For more information, please check Dwolla Plugin setup​

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

Demo to preview the template

Last modified 6d ago