Skip to content

Latest commit

 

History

History
96 lines (75 loc) · 4.85 KB

README.md

File metadata and controls

96 lines (75 loc) · 4.85 KB
Raw

Flutterwave Developer Challenge: < Project Jumga > 🥉

  We've built this web application in line with the competition directives to show how easy it is to set up payments with the Flutterwave v3 API. Jumga is an e-commerce platform that takes full advantage of Flutterwave's Subaccounts system to set up easy payments for merchants and their couriers.

We've had too much fun building this, and we'd like to take you briefly through our thoughts and creative process.

A lot of things changed but this was a great method to set us on our way.

 

Technologies

The client-side of this application is built with React and configured as a PWA and the server-side is built with Go, both firsts for us as we looked to add a meta challenge. We use a PostgreSQL database to store application data and we used Docker as our local development environment to keep things consistent for collaboration purposes, starting this up locally is as easy as running docker-compose up in the root directory.

We also took the liberty of deploying this in staging just in case, with the main and merchant portals hosted with Netlify and the backend hosted with Heroku.

 

API Documentation

Click here to see the documentation for the server-side endpoints.

 

Ways we used the Flutterwave V3 API

  • Banks resource for form input selection on the frontend.
  • Bank account verification to validate account details input.
  • Flutterwave Standard to initiate payments.
  • Transaction verification to verify payments before value is given to the customer.
  • Subaccounts to set up dispatch and merchant accounts and split payments easily.

 

Competition Directive Checklist

  • Merchants can create shops on Jumga.
  • Each shop is assigned a dispatch rider > We allowed stores register their riders, no store would be allowed to list products for sale without approval or a registered rider.
  • Each shop can collect payments from Ghana, Nigeria, Kenya and UK.
  • Each shop created on Jumga pays a token of $20 to Jumga, once payment is confirmed, the shop will be approved. > Merchants can create their accounts but will not be able to perform any actions until approval is processed. Merchant subaccount is created on approval.
  • Every sale will be split according to the appropriate percentages between Jumga, the shop owner (merchant) and the dispatch rider. > We achieved this using the flat_subaccount charge type for split payment during payment initiation. Jumga takes a 25% on all delivery fees and 2.5% on all product fees.

 

How to Run this on your Local Machine?

We recommend you use Docker, clone this repository, edit the docker-compose.yml file with your own Flutterwave Test API Key and run docker-compose up in the root directory of the cloned repository. If you don't have docker installed you may proceed running the client, merchant-client and server applications in different shells. You would need to have Golang >=v15 installed, a postgres server running, as well as node.js.

When you have everything running, the client app should be visible on port :3000, the merchant on :8080 and the server on :8000

Database Setup

Set up your database and replace these lines in the /server/globals/globals.go file with your database credentials.

DBOpts = &pg.Options{
  User:     "postgres",
  Password: "password",
  Database: "postgres", // database name
  Addr:     "db:5432",  // hostname:port
}

Running Client and Merchant Client

  • cd into directory
  • run npm install
  • run npm start

be sure to run client on port :3000 and merchant-client on port :8080.

Running Server

# set environment variables FLUTTERWAVE_API_KEY and TOKEN_AUTH_SECRET
# FLUTTERWAVE_API_KEY is the secret key gotten from your flutterwave dashboard
# TOKEN_AUTH_SECRET is any arbitrary secret key
> cd server
> go build
> ./server

./server.exe on windows

server runs on port :8000

 

Demo Links

Presentation: http://bit.ly/apexflw

Demo: http://bit.ly/apexflwdemo