Skip to content

An attempt to build a credit/debit card payment UI prototype with 3D card flip and confetti animation. Uses LottieFiles js library by AirBnB

Notifications You must be signed in to change notification settings

NerdyVisky/card-payment-UI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ccb2504 · Oct 10, 2021

History

18 Commits
Oct 8, 2021
Oct 10, 2021
Oct 9, 2021
Oct 10, 2021
Oct 8, 2021

Repository files navigation

3D Card Payment UI Prototype

This is a front-end UI prototype for credit/debit card payment form. Click here to try out yourself.

Key features

  • Performs a 3D card flip on hover and on-input of the form.
  • Auto detects and displays the card company based on first two digits of card number in real time.
  • Goes through two factor authentication of card details
    1. Stage 1: Checks for legitimate card details.
    2. Stage 2: On card details authentication, sends details with amount to process payment and makes payment if card has sufficient balance.

(Please Note: A mock balance value of 10,000 has been set with a mock payment value of 500. Actual values to be fetched from server.)

  • Displays failure dialog box on incorrect card details.
  • Displays failure dialog box on insufficient card balance.
  • Displays success dialog box with confetti celebration on successful payment.

Screenshots

Author: Vishvesh Trivedi

Click here to check out my projects.