Web Designer Wall

Snippets Card

Bootstrap 5 Checkout Form with Order Summary

A two-column checkout with shipping and card fields beside a live order summary that updates quantities, totals and gift codes.

Bootstrap 5 No jQuery Jul 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <nav aria-label="Checkout progress" class="mb-4">
      <ol class="breadcrumb justify-content-center small fw-semibold text-uppercase mb-0">
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none wdw-muted">Shop</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none wdw-muted">Shopping bag</a></li>
        <li class="breadcrumb-item active text-primary" aria-current="page">Checkout</li>
      </ol>
    </nav>
    <div class="row g-4">
      <div class="col-lg-7">
        <form class="wdw-card p-4 p-md-5" id="checkoutForm" novalidate>
          <h1 class="wdw-heading h3 mb-4">Checkout</h1>
          <h2 class="wdw-eyebrow mb-3">Shipping details</h2>
          <div class="row g-3 mb-4">
            <div class="col-12"><div class="form-floating"><input class="form-control" id="coName" placeholder="Full name" value="Alex Morgan" autocomplete="name" required><label for="coName">Full name</label><div class="invalid-feedback">Please enter your name.</div></div></div>
            <div class="col-12"><div class="form-floating"><input class="form-control" id="coAddr" placeholder="Address" value="12 Garden Row, Stockholm" autocomplete="street-address" required><label for="coAddr">Address</label><div class="invalid-feedback">Please enter your address.</div></div></div>
          </div>
          <h2 class="wdw-eyebrow mb-3">Payment details</h2>
          <div class="row g-3">
            <div class="col-12"><div class="form-floating"><input class="form-control" id="coCardName" placeholder="Name on card" autocomplete="cc-name" required><label for="coCardName">Name on card</label><div class="invalid-feedback">Enter the name on the card.</div></div></div>
            <div class="col-12"><div class="form-floating"><input class="form-control" id="coCard" placeholder="Card number" inputmode="numeric" autocomplete="cc-number" maxlength="19" minlength="19" required><label for="coCard">Card number</label><div class="invalid-feedback">Enter a 16-digit card number.</div></div></div>
            <div class="col-6"><div class="form-floating"><input class="form-control" id="coExp" placeholder="MM/YY" autocomplete="cc-exp" maxlength="5" minlength="5" pattern="(0[1-9]|1[0-2])/\d\d" required><label for="coExp">Valid through</label><div class="invalid-feedback">Use the format MM/YY.</div></div></div>
            <div class="col-6"><div class="form-floating"><input class="form-control" id="coCvc" placeholder="CVC" inputmode="numeric" autocomplete="cc-csc" maxlength="4" minlength="3" required><label for="coCvc">CVC</label><div class="invalid-feedback">Enter the 3 or 4 digit code.</div></div></div>
          </div>
          <button type="submit" class="btn btn-primary btn-lg rounded-pill w-100 mt-4" data-pay>Pay</button>
          <div class="small mt-3 text-center" id="payMsg" role="status"></div>
          <p class="small wdw-muted text-center mt-3 mb-0">Payments are encrypted. You can cancel your subscription any time.</p>
        </form>
      </div>
      <div class="col-lg-5">
        <aside class="wdw-card p-4 align-self-start sticky-lg-top" style="top:1.5rem" aria-label="Order summary">
          <div class="d-flex justify-content-between align-items-center">
            <h2 class="wdw-eyebrow mb-0">Your order</h2>
            <a href="#" class="small fw-semibold">Edit bag</a>
          </div>
          <ul class="list-unstyled mb-0 mt-2 border-bottom">
            <li class="co-item py-3" data-item data-price="179">
              <img class="co-thumb rounded-3" src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=160&h=160&fit=crop&q=70" width="64" height="64" alt="Navy canvas backpack" loading="lazy">
              <div class="co-info"><div class="fw-semibold text-body-emphasis">Standard Bag</div><div class="small wdw-muted">1 week subscription</div></div>
              <div class="co-price fw-bold text-end" data-line></div>
              <div class="co-qty d-flex align-items-center gap-1" role="group" aria-label="Quantity for Standard Bag, 1 week subscription">
                <button type="button" class="qty-btn" data-qty="-1" aria-label="Decrease quantity">−</button>
                <output class="qty-val fw-semibold" data-q aria-live="polite">2</output>
                <button type="button" class="qty-btn" data-qty="1" aria-label="Increase quantity">+</button>
              </div>
            </li>
            <li class="co-item py-3" data-item data-price="179">
              <img class="co-thumb rounded-3" src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=160&h=160&fit=crop&q=70" width="64" height="64" alt="Tan leather tote bag" loading="lazy">
              <div class="co-info"><div class="fw-semibold text-body-emphasis">Standard Bag</div><div class="small wdw-muted">2 week subscription</div></div>
              <div class="co-price fw-bold text-end" data-line></div>
              <div class="co-qty d-flex align-items-center gap-1" role="group" aria-label="Quantity for Standard Bag, 2 week subscription">
                <button type="button" class="qty-btn" data-qty="-1" aria-label="Decrease quantity">−</button>
                <output class="qty-val fw-semibold" data-q aria-live="polite">1</output>
                <button type="button" class="qty-btn" data-qty="1" aria-label="Increase quantity">+</button>
              </div>
            </li>
            <li class="co-item py-3" data-item data-price="249">
              <img class="co-thumb rounded-3" src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=160&h=160&fit=crop&q=70" width="64" height="64" alt="Black structured handbag" loading="lazy">
              <div class="co-info"><div class="fw-semibold text-body-emphasis">Premium Bag</div><div class="small wdw-muted">1 month subscription</div></div>
              <div class="co-price fw-bold text-end" data-line></div>
              <div class="co-qty d-flex align-items-center gap-1" role="group" aria-label="Quantity for Premium Bag, 1 month subscription">
                <button type="button" class="qty-btn" data-qty="-1" aria-label="Decrease quantity">−</button>
                <output class="qty-val fw-semibold" data-q aria-live="polite">1</output>
                <button type="button" class="qty-btn" data-qty="1" aria-label="Increase quantity">+</button>
              </div>
            </li>
          </ul>
          <dl class="row gy-2 my-3 small">
            <dt class="col-6 fw-normal wdw-muted">Subtotal</dt><dd class="col-6 text-end mb-0" data-sub></dd>
            <dt class="col-6 fw-normal wdw-muted">Shipping</dt><dd class="col-6 text-end mb-0">Free</dd>
            <dt class="col-6 fw-normal wdw-muted d-none" data-disc-row>Gift code</dt><dd class="col-6 text-end mb-0 text-success d-none" data-disc-row data-disc></dd>
            <dt class="col-6 fs-5 text-body-emphasis">Total</dt><dd class="col-6 text-end mb-0 fs-5 fw-bold text-body-emphasis" data-total></dd>
          </dl>
          <form class="d-flex gap-2" id="giftForm">
            <label class="visually-hidden" for="giftCode">Gift code</label>
            <input class="form-control rounded-pill px-3" id="giftCode" placeholder="Gift code (try SAVE10)" autocomplete="off">
            <button class="btn btn-primary rounded-pill px-4" type="submit">Apply</button>
          </form>
          <div class="small mt-2" id="giftMsg" role="status"></div>
          <p class="small wdw-muted d-flex align-items-center gap-2 mt-4 mb-0 pt-3 border-top"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-primary flex-shrink-0"><rect x="4" y="11" width="16" height="10" rx="3"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>Secure checkout. Free returns within 30 days.</p>
        </aside>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More card snippets