Skip to content

alxmcr/fe-speedypay-widget-react-ts

Repository files navigation

Frontend. Payment Widget

Customizing a Payment checkout, order, and charge.

Features

  • Checkout form
  • Order view
  • Charge view
  • Light/dark mode toggle
  • Multiple color scales switch

Color Scales Reference

Color Hex
Atoll #19eef7 #19eef7
Valhalla #7a77ff #7a77ff
Sea buckthorn #f2a541 #f2a541
Wine berry #d195bf #d195bf

Run Locally

Clone the project

  git clone https://github.com/alxmcr/fe-speedypay-widget-react-ts

Go to the project directory

  cd fe-speedypay-widget-react-ts

Install dependencies

  npm install

Start the server

  npm run start

Tech Stack

  • "bwip-js": "^4.1.2"
  • "date-fns": "^3.0.6"
  • "imask": "^7.2.0"
  • "react": "^18.2.0"
  • "react-dom": "^18.2.0"
  • "react-imask": "^7.2.0"
  • "react-input-mask": "^2.0.4"
  • "react-router-dom": "^6.21.0"
  • "sass": "^1.69.5"
  • "styled-components": "^6.1.1"

Screenshots

Checkout form

  • Light

Payment widget light.

  • Dark

Payment widget dark.

Order

  • Light

Payment reference light.

Payment reference light.

Charge

  • Light

Charge - Payment confirmation light.

  • Dark

Charge - Payment confirmation dark.

Demo

https://fe-speedypay-widget-app.netlify.app/

Authors

Feedback

If you have any feedback, please reach out to me at [email protected].

Releases

No releases published

Packages

No packages published

Languages