contactless donation platform
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
src
static/assets/images
styles
tests
views
.eslintrc.js
.eslintrc.json
.gitignore
.prettierrc
Procfile
README.md
database.sql
jest.config.js
package-lock.json
package.json
server.js
static.json
webpack.config.js

README.md

Screenshot

Better Change

In person cashless donations.

Enabling contactless charity donations without a card reader

Visit live demo


The vision

  • We live in an increasingly cashless society. Fewer people carry loose change.
  • Card readers cost £25–100 each and are expensive to distribute and manage.
  • Charity fundraisers and others who rely on cash donations are losing out.
  • Better Change solves this problem by enabling people to receive contactless payments without a card reader.

Installation and set up

Clone the project and run npm install

Create your own local PostreSQL database instance and create the tables by running pgweb navigating to localhost:8081 and running the query in the database.sql file.

Create a .env file with the following variables

DB_HOST=localhost
DB_NAME=
DB_USERNAME=
DB_PASSWORD=
TWILIO_SID_TEST=
TWILIO_AUTH_TEST=
TWILIO_SID_LIVE=
TWILIO_AUTH_LIVE=
S3_REGION=
S3_BUCKET=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
STRIPE_SECRET_KEY=

Run npm start to launch the app and navigate to localhost:8080

API Keys needed:

  • Amazon S3
  • Stripe
  • Twilio

Tech stack

Front end

  • React
  • Redux
  • React Router
  • Handlebars
  • SCSS

Back end

  • Node.js
  • Express
  • PostreSQL

Build tools

  • Webpack
  • Babel

Unit Testing

  • Jest
  • Enzyme

Features

QR code

  • 'qrcode' node package creates the QR code dynamically
  • The QR code isn't reliant on a 3rd party API
  • The QR code size, style and error correction level are customisable

'qrcode' node package

Card and native payment - Stripe elements

  • Stripe Elements API provides our secure hosting

'Stripe elements' node package

Image hosting - Amazon S3

  • We used the AWS-SDK node package to host images
  • Enabled us to upload / download images to an S3 bucket

Aws-sdk node package

Form validation - Formik

  • Formik node package managed the form validation
  • Solved the problem of getting values in and out of form state
  • Streamlined handling error messages and form submission

Formik node package

Data visulisations - Recharts.js

'Recharts' node package

Authorisation and authentication - Passport

Next Steps

  • Create React Native app
  • Emit bluetooth urls
  • Pay out to bank accounts

QR codes are not always the best solution for in person payment because they require you to be in close proximity to capture with a camera.

We have started playing around with Bluetooth beacons and have used an android phone to emit our unique payment urls for people to pick up in the immediate area.