Web Designer Wall

Snippets Cart

Bootstrap 5 Shopping Cart Checkout with Payment Options

A shopping bag with quantity steppers and a live order summary, a selectable payment method and a card details form.

Bootstrap 5 No jQuery May 2020 2.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="mb-4"><span class="wdw-eyebrow">Checkout</span><h1 class="wdw-heading h3 mt-1 mb-0">Shopping bag</h1></div>
    <div class="row g-4 checkout">
      <div class="col-lg-7">
        <div class="wdw-card p-3 p-sm-4">
          <ul class="list-unstyled mb-0 cart-items">
            <li class="cart-item d-flex align-items-center gap-3 py-3" data-price="9.99">
              <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=200&q=70" alt="Book cover" class="cart-img" width="64" height="88">
              <div class="flex-grow-1">
                <h2 class="h6 fw-bold mb-0">Thinking, Fast and Slow</h2>
                <p class="small wdw-muted mb-0">Daniel Kahneman · <span class="badge bg-body-secondary text-body-secondary">Digital</span></p>
              </div>
              <div class="d-flex flex-column align-items-end gap-2">
                <strong class="item-total">$9.99</strong>
                <div class="qty btn-group" role="group" aria-label="Quantity">
                  <button type="button" class="btn btn-outline-secondary qty-minus" aria-label="Decrease quantity">−</button>
                  <output class="qty-val" aria-live="polite">1</output>
                  <button type="button" class="btn btn-outline-secondary qty-plus" aria-label="Increase quantity">+</button>
                </div>
              </div>
            </li>
            <li class="cart-item d-flex align-items-center gap-3 py-3 border-top" data-price="13.50">
              <img src="https://images.unsplash.com/photo-1512820790803-83ca734da794?w=200&q=70" alt="Book cover" class="cart-img" width="64" height="88">
              <div class="flex-grow-1">
                <h2 class="h6 fw-bold mb-0">Homo Deus</h2>
                <p class="small wdw-muted mb-0">Yuval Noah Harari · <span class="badge bg-body-secondary text-body-secondary">Paperback</span></p>
              </div>
              <div class="d-flex flex-column align-items-end gap-2">
                <strong class="item-total">$13.50</strong>
                <div class="qty btn-group" role="group" aria-label="Quantity">
                  <button type="button" class="btn btn-outline-secondary qty-minus" aria-label="Decrease quantity">−</button>
                  <output class="qty-val" aria-live="polite">1</output>
                  <button type="button" class="btn btn-outline-secondary qty-plus" aria-label="Increase quantity">+</button>
                </div>
              </div>
            </li>
          </ul>
          <hr class="my-2">
          <h2 class="h6 fw-bold mt-3 mb-3">Payment method</h2>
          <div class="row g-2 pay-options" role="radiogroup" aria-label="Payment method">
            <div class="col-4"><input type="radio" class="btn-check" name="pay" id="pay-credit" checked><label class="pay-opt" for="pay-credit"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2.5"/><path d="M2 10h20"/></svg>Credit card</label></div>
            <div class="col-4"><input type="radio" class="btn-check" name="pay" id="pay-debit"><label class="pay-opt" for="pay-debit"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2.5"/><path d="M6 15h4"/></svg>Debit card</label></div>
            <div class="col-4"><input type="radio" class="btn-check" name="pay" id="pay-paypal"><label class="pay-opt" for="pay-paypal"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h13v4"/><path d="M3 7v11a2 2 0 0 0 2 2h14a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1H5a2 2 0 0 1-2-2z"/><circle cx="16" cy="14.5" r="1"/></svg>Wallet</label></div>
          </div>
          <form class="row g-3 mt-1" id="card-form" onsubmit="return false">
            <div class="col-sm-6"><label for="cname" class="form-label small fw-semibold">Name on card</label><input type="text" id="cname" class="form-control" placeholder="Jane Doe" autocomplete="cc-name"></div>
            <div class="col-sm-6"><label for="cnum" class="form-label small fw-semibold">Card number</label><input type="text" id="cnum" class="form-control" placeholder="1111 2222 3333 4444" inputmode="numeric" autocomplete="cc-number"></div>
            <div class="col-6"><label for="exp" class="form-label small fw-semibold">Expiry</label><input type="text" id="exp" class="form-control" placeholder="MM/YY" autocomplete="cc-exp"></div>
            <div class="col-6"><label for="cvv" class="form-label small fw-semibold">CVV</label><input type="text" id="cvv" class="form-control" placeholder="123" inputmode="numeric" autocomplete="cc-csc"></div>
          </form>
        </div>
      </div>
      <div class="col-lg-5">
        <aside class="wdw-card summary p-4 p-sm-4 d-flex flex-column">
          <h2 class="h6 fw-bold mb-3">Order summary</h2>
          <dl class="d-flex flex-column gap-2 mb-3">
            <div class="d-flex justify-content-between"><dt class="fw-normal wdw-muted">Subtotal</dt><dd class="mb-0 fw-semibold" id="sum-sub">$23.49</dd></div>
            <div class="d-flex justify-content-between"><dt class="fw-normal wdw-muted">Shipping</dt><dd class="mb-0 fw-semibold" id="sum-ship">$2.99</dd></div>
            <div class="d-flex justify-content-between"><dt class="fw-normal wdw-muted">Tax</dt><dd class="mb-0 fw-semibold" id="sum-tax">$0.00</dd></div>
          </dl>
          <div class="d-flex justify-content-between align-items-center border-top pt-3 mb-4"><span class="fw-bold">Total</span><span class="h4 fw-bold mb-0" id="sum-total">$26.48</span></div>
          <button type="button" class="btn btn-primary rounded-pill btn-lg mt-2">Pay <span id="pay-amt">$26.48</span></button>
          <p class="small wdw-muted text-center mt-3 mb-0">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 cart snippets