Shopping Cart V07
Template Details
Author: Colorlib
Released: September 2026
License: CC BY 3.0
Description
A standalone card payment form beside a dark order panel with a live card preview and a seat quantity stepper. The card brand is detected from the number prefix (Visa, Mastercard or American Express), which switches a generic brand mark, the card preview colour, the number grouping and the CVC length. The Pay button always shows the amount due and switches to a loading state with a spinner before a demo approval message.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 269 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- Brand detection by prefix with generic inline SVG marks
- Live card preview for number, name and expiry
- Amex 4-6-5 grouping and 4-digit CVC switch
- Luhn and future-expiry checks through setCustomValidity
- Pay $X button with aria-busy loading state
- Seat stepper updates tax and amount due
Similar Templates
