webdevpuneet.com

Related Snippets

57 in Mobile Screens category
40–45 of 57

Mobile Checkout Screen

Mobile Feed Screen

Mobile Settings Screen

Mobile Chat Screen

Dialer Keypad

Camera UI

Mobile Checkout Screen — Free HTML CSS JS Snippet

Mobile Checkout Screen · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
TagsE-CommerceMobile UI

Copy & paste

Source Code

<div class="mck-phone">
  <div class="mck-screen">
    <div class="mck-status"><span>9:41</span><span class="mck-batt"><i></i></span></div>
    <header class="mck-head">
      <button class="mck-back" aria-label="Back">&#8249;</button>
      <h1>Checkout</h1>
    </header>
    <div class="mck-scroll">
      <div class="mck-card mck-ship">
        <div class="mck-crow"><span class="mck-ic">&#128205;</span><div><b>Delivery address</b><small>221B Baker Street, London NW1</small></div><button class="mck-chg">Change</button></div>
      </div>

      <div class="mck-card">
        <div class="mck-clabel">Your items</div>
        <div class="mck-item" data-price="42">
          <div class="mck-thumb t1">👟</div>
          <div class="mck-meta"><b>Runner Pro</b><small>Size 9 · Black</small></div>
          <div class="mck-qty"><button class="mck-dec" aria-label="Decrease">−</button><span>1</span><button class="mck-inc" aria-label="Increase">+</button></div>
        </div>
        <div class="mck-item" data-price="18">
          <div class="mck-thumb t2">🧦</div>
          <div class="mck-meta"><b>Sport Socks (3-pack)</b><small>One size · Grey</small></div>
          <div class="mck-qty"><button class="mck-dec" aria-label="Decrease">−</button><span>2</span><button class="mck-inc" aria-label="Increase">+</button></div>
        </div>
      </div>

      <div class="mck-card">
        <div class="mck-clabel">Payment</div>
        <label class="mck-pay"><input type="radio" name="mckpay" checked><span class="mck-pdot"></span><span class="mck-pic v">VISA</span><span>•••• 4242</span></label>
        <label class="mck-pay"><input type="radio" name="mckpay"><span class="mck-pdot"></span><span class="mck-pic ap">Pay</span><span>Apple&nbsp;Pay</span></label>
      </div>

      <div class="mck-card mck-promo">
        <input id="mckPromo" type="text" placeholder="Promo code" autocomplete="off">
        <button id="mckApply">Apply</button>
      </div>
      <p class="mck-promomsg" id="mckPromoMsg" hidden></p>

      <div class="mck-card mck-sum">
        <div class="mck-line"><span>Subtotal</span><span id="mckSub">$0</span></div>
        <div class="mck-line"><span>Shipping</span><span id="mckShip">$5.00</span></div>
        <div class="mck-line mck-disc" id="mckDiscLine" hidden><span>Discount</span><span id="mckDisc">-$0</span></div>
        <div class="mck-line mck-total"><span>Total</span><span id="mckTotal">$0</span></div>
      </div>
    </div>
    <div class="mck-bar">
      <div class="mck-bartotal"><small>Total</small><b id="mckBarTotal">$0</b></div>
      <button class="mck-place" id="mckPlace">Place order</button>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Live order total
One recalc function keeps every figure in sync.
Quantity steppers
Plus/minus with a floor of one per item.
Working promo code
SAVE10 applies a real 10% discount.
Three promo states
Applied, invalid, and empty feedback.
Custom radios
Real inputs styled with a sibling selector.
Sticky pay bar
Total stays visible below the scroll area.
Confirmed state
Place-order button flips to green on tap.
No dependency
Pure HTML, CSS, and vanilla JavaScript.

About this UI Snippet

Mobile Checkout Screen — Order Review UI

Screenshot of the Mobile Checkout Screen snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA checkout renders with an address, two items, payment options, a promo field, and a summary.
  2. 2
    Adjust quantitiesThe plus and minus steppers change item counts and the subtotal and total update instantly.
  3. 3
    Apply a promo codeType SAVE10 and tap Apply — a green discount line appears and the total drops 10%.
  4. 4
    Try an invalid codeAny other code shows a red error and clears the discount.
  5. 5
    Pick a payment methodThe custom radios let only one method be selected.
  6. 6
    Place the orderThe sticky button flips to a green confirmed state.

Real-world uses

Common Use Cases

Mobile commerce checkout
Complete a purchase after the mini cart, with quantity steppers that never drop an item below one.
Order review panels
Pair with an order summary layout so line items, discounts and totals match on every screen size.
Responsive payment forms
Compare with a desktop checkout form, keeping payment radios and the sticky place-order bar within thumb reach.
Promo code behaviour
Show applied, invalid and empty feedback states for a code like SAVE10, reusing the field alongside a promo code input.
Centralised cart maths
Study how one recalculation function keeps every figure, from line totals to the final price, in sync after any quantity or promo change.
Related: Mobile Banking Screen
See the Mobile Banking Screen for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

All figures are written by one recalc() function. It sums each item's data-price times its quantity, applies the discount rate, adds flat shipping, and updates the subtotal, discount line, summary total, and sticky-bar total together. Every interaction calls this one function, so the numbers can never disagree.

The decrement handler only reduces the quantity while it is above one. This is a deliberate guard: dropping to zero from a stepper is ambiguous, so real carts require an explicit remove action instead. To support removal, add a trash button that deletes the item and calls recalc().

SAVE10 applies a 10% discount. The input is upper-cased before comparison so save10 also works. An empty field shows a prompt to enter a code, and any other value shows an invalid-code error and clears the discount. In production you would validate the code against your backend rather than a hard-coded string.

Yes. Each is a hidden radio input grouped by the same name attribute, with a styled dot driven by the :checked ~ sibling selector. Because they are genuine radios, only one can be selected and keyboard and screen-reader users can choose a method without any JavaScript.

Hold the cart items, selected payment, and discount in state, and compute the totals as derived values with useMemo (React), computed (Vue), or a getter (Angular) instead of writing to the DOM. Bind the steppers and promo apply to handlers that update state, and submit the order on place. The CSS and Tailwind utilities port directly.