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
Valhalla	#7a77ff
Sea buckthorn	#f2a541
Wine berry	#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

.

• Dark

.

Order

• Light

.

.

Charge

• Light

.

• Dark

.

Demo

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

Authors

• Alejandro M. Coca Rojas (@alxmcr)

Feedback

If you have any feedback, please reach out to me at amcocarojas@gmail.com.