Payment Form UI Kit

Build a clean and structured payment form UI kit based on the provided design. The interface should include card registration sections, form inputs, validation states, component variants, and a modal layout for invoice or payment handling. Use HTML for structure, CSS for styling, and JavaScript for simple interactions such as selecting saved cards, toggling states, basic validation feedback, and opening or closing modal views. The final result should focus on clean spacing, reusable UI blocks, input states, and polished form styling.

Core Build

Project Requirements

Build the full payment UI based on the provided design
Use semantic HTML5 structure
Style the full interface using CSS
Use JavaScript for simple interactions
Create a section for registered cards
Display card details such as bank name, last digits, cardholder name, and expiry date
Build a form for adding a new card
Add fields for card number, cardholder name, expiry date, and CVV
Create validation states such as default, active, success, and error
Style input fields differently based on validation state
Build component variants for registered card rows
Create a modal-style payment or invoice layout
Allow selecting one saved card using JavaScript
Add a send invoice or submit button
Use hover and active states for rows, inputs, and buttons
Make the layout responsive for tablet and mobile devices
Keep code clean and organized across HTML, CSS, and JavaScript files

Submission Open

Ready to submit your solution?

Upload your project for mentor review and showcase your structure, polish, and implementation quality.

120+ developers joined

Login Required

You need to be logged in to submit your solution for this challenge.