Mobile Checkout Screen — Free HTML CSS JS Snippet

A checkout screen is the last, highest-stakes step in mobile commerce — a delivery address, the cart items with quantity controls, a payment method, a promo field, and an order summary under a sticky pay button. This snippet builds a complete, calculating one inside a CSS phone frame: quantity steppers update the subtotal, a promo code applies a real discount, and the total recomputes live in both the summary and the sticky bar — in HTML, CSS, and vanilla JavaScript with no dependency.

The live order math

Each cart item carries a data-price attribute and shows a quantity. A single recalc() function walks every item, multiplies price by quantity, sums the subtotal, applies the current discount rate, adds flat shipping, and writes the result to the subtotal, discount, total, and sticky-bar figures at once. Centralizing the math in one function means every interaction — stepper or promo — calls the same code path, so the numbers can never drift out of sync.

Quantity steppers with a floor

Each item has a minus/plus stepper. The plus button always increments; the minus button only decrements while the quantity is above one, so an item never drops to zero from the stepper — the same guard real carts use to force an explicit remove action instead. Every change re-runs recalc().

A promo code that actually discounts

Entering SAVE10 and tapping Apply sets a 10% discount rate, reveals the previously hidden discount line in green, and lowers the total; an unknown code shows a red error and clears any discount. The code is upper-cased before comparison so save10 works too, and an empty field prompts you to enter one — the three states every promo field needs.

Custom payment radios

The payment methods are real radio inputs, visually hidden, with a styled .mck-pdot ring driven by the :checked ~ sibling selector so only one can be active. Because they are genuine radios grouped by name, keyboard and screen-reader selection work without any JavaScript.

Sticky action bar

The place-order button lives in a bar pinned below the scroll area, showing the total again so it stays visible as you scroll the summary. Tapping it flips the button to a green confirmed state.

Accessibility and performance

The payment options are genuine radio inputs grouped by name, so arrow keys move between them and screen readers announce the selected method — no custom keyboard handling needed. The steppers and promo controls are real buttons with aria-labels, and the promo feedback is plain text that assistive tech reads on change, with color reinforced by wording rather than carried by color alone. Performance is trivial here: the recalc() function does a single pass over a handful of items and writes a few text nodes, so it can run on every stepper tap without any perceptible cost, and there is no re-render of the item list. Because the total is derived rather than accumulated, there is no risk of floating-point drift compounding across many interactions — each recalculation starts fresh from the item prices. The sticky bar is positioned with the layout rather than on scroll listeners, so scrolling the summary stays smooth. For a real cart, validate promo codes server-side and debounce the field if you check them as the user types.

Reusing it

Replace the items with your cart data, wire the address and payment rows to your real sources, validate promo codes against your backend, and submit the order on place. Lift it out of the phone frame for a responsive web checkout, or keep it framed after a mini cart to present the full purchase flow.