Shopping Cart V05

Author: Colorlib
Released: September 2026
License: CC BY 3.0
A single-page checkout with numbered sections for contact details, shipping address, shipping method and payment, next to an editable order summary. The shipping method radio cards change the shipping line and total, the card number is grouped as you type and checked with the Luhn algorithm, and the expiry field is masked to MM / YY. Everything uses native form validation and autocomplete tokens, and the Pay button shows the live total.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 573 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- Shipping method radio cards that update the total
- Card number grouping (Amex 4-6-5) with Luhn validation
- MM / YY expiry mask that rejects past dates
- Native validation with autocomplete and inputmode on every field
- Editable summary with quantity steppers and remove
- Pay button label follows the live total

