Walletly - e-Wallet like Paypal Template
Template page link: https://zeroqode.com/template/walletly---e-wallet-template-like-pyapal-1571391614961x214878924900725020​
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)
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
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 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).
Also please note that you can add a maximum of 2 bank accounts to a user using the test keys of Plaid.
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 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.
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.
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.
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.
This contains the login form and allows users (walletly users and admins) to login with their email and password.
This contains the sign up form and allows users (walletly users and admins) to sign up to Walletly.
This page is where users can set a new password for their account.
This page is for users to request a password reset link with their email address.
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.) |
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.
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.
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
This template uses Dwolla and Plaid for payments.
For more information, please check Dwolla Plugin setup​
Live Demo: https://walletly.bubbleapps.io/​