This is a front-end UI prototype for credit/debit card payment form. Click here to try out yourself.
- 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
- Stage 1: Checks for legitimate card details.
- 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.
Click here to check out my projects.