Web Designer Wall

Snippets Checkout

Bootstrap 5 Checkout Form with Live Card Preview

A three-step checkout with a live card preview, order summary and a formatted card payment form.

Bootstrap 5 No jQuery May 2020 2.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width:980px">
    <ol class="ck-steps list-unstyled d-flex justify-content-center gap-2 gap-md-4 mb-4" aria-label="Checkout progress">
      <li class="ck-step is-done"><span class="ck-dot">1</span><span class="d-none d-sm-inline">Cart</span></li>
      <li class="ck-step is-done"><span class="ck-dot">2</span><span class="d-none d-sm-inline">Shipping</span></li>
      <li class="ck-step is-current" aria-current="step"><span class="ck-dot">3</span><span>Payment</span></li>
    </ol>
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 wdw-aurora p-4 p-md-5 d-flex flex-column justify-content-between gap-4">
          <div>
            <span class="wdw-eyebrow text-white-50">Order summary</span>
            <div class="ck-card mt-3" aria-hidden="true">
              <div class="d-flex justify-content-between align-items-center">
                <svg width="34" height="26" viewBox="0 0 34 26" fill="none"><rect x="1" y="1" width="32" height="24" rx="5" stroke="currentColor" stroke-width="1.75"/><path d="M1 9h32M8 17h6" stroke="currentColor" stroke-width="1.75"/></svg>
                <span class="small fw-semibold opacity-75" id="ckBrand">Card</span>
              </div>
              <div class="ck-num mt-4" id="ckNumPrev">•••• •••• •••• ••••</div>
              <div class="d-flex justify-content-between mt-3 small">
                <span id="ckNamePrev" class="text-uppercase">Your name</span>
                <span id="ckExpPrev">MM/YY</span>
              </div>
            </div>
          </div>
          <ul class="list-unstyled small mb-0">
            <li class="d-flex justify-content-between py-2 border-bottom border-light border-opacity-25"><span>Studio monitor (1)</span><span>$1,299.00</span></li>
            <li class="d-flex justify-content-between py-2 border-bottom border-light border-opacity-25"><span>Express shipping</span><span>$25.00</span></li>
            <li class="d-flex justify-content-between py-2 border-bottom border-light border-opacity-25"><span>Tax</span><span>$125.00</span></li>
            <li class="d-flex justify-content-between pt-3 fs-5 fw-bold"><span>Grand total</span><span>$1,449.00</span></li>
          </ul>
        </div>
        <div class="col-lg-7 p-4 p-md-5">
          <h1 class="h3 wdw-heading mb-1">Pay with card</h1>
          <p class="wdw-muted mb-4">Your payment is encrypted and processed securely.</p>
          <div class="d-flex gap-2 mb-4" role="group" aria-label="Payment method">
            <input type="radio" class="btn-check" name="ckMethod" id="ckCard" checked>
            <label class="btn btn-outline-primary rounded-pill flex-fill" for="ckCard">Card</label>
            <input type="radio" class="btn-check" name="ckMethod" id="ckPaypal">
            <label class="btn btn-outline-primary rounded-pill flex-fill" for="ckPaypal">PayPal</label>
            <input type="radio" class="btn-check" name="ckMethod" id="ckApple">
            <label class="btn btn-outline-primary rounded-pill flex-fill" for="ckApple">Apple Pay</label>
          </div>
          <form id="ckForm" novalidate>
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="ckNumber" inputmode="numeric" autocomplete="cc-number" placeholder="Card number" maxlength="19" required>
              <label for="ckNumber">Card number</label>
            </div>
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="ckName" autocomplete="cc-name" placeholder="Name on card" required>
              <label for="ckName">Cardholder name</label>
            </div>
            <div class="row g-3 mb-4">
              <div class="col-6">
                <div class="form-floating">
                  <input type="text" class="form-control" id="ckExp" inputmode="numeric" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
                  <label for="ckExp">Expiry (MM/YY)</label>
                </div>
              </div>
              <div class="col-6">
                <div class="form-floating">
                  <input type="text" class="form-control" id="ckCvv" inputmode="numeric" autocomplete="cc-csc" placeholder="CVV" maxlength="4" required>
                  <label for="ckCvv">CVV</label>
                </div>
              </div>
            </div>
            <button type="submit" class="btn btn-primary btn-lg rounded-pill w-100">Pay $1,449.00</button>
            <p class="small wdw-muted text-center mt-3 mb-0" id="ckMsg" role="status">Secured with 256-bit SSL encryption</p>
          </form>
        </div>
      </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 checkout snippets