Web Designer Wall

Snippets Form

Bootstrap 5 Payment Form with Order Summary

A checkout layout with an order summary panel beside a card payment form with brand selector, auto-formatted card number and expiry, and validation.

Bootstrap 5 No jQuery Jul 2020 2.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:980px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 wdw-aurora p-4 p-lg-5 d-flex flex-column justify-content-between gap-4">
          <div>
            <span class="wdw-eyebrow" style="color:#c7d2fe">Checkout</span>
            <h2 class="fw-bold mt-2 mb-4">Order summary</h2>
            <ul class="list-unstyled d-grid gap-3 mb-0">
              <li class="d-flex justify-content-between"><span>Pro plan, annual</span><span class="fw-semibold">$108.00</span></li>
              <li class="d-flex justify-content-between"><span>Extra seats (2)</span><span class="fw-semibold">$24.00</span></li>
              <li class="d-flex justify-content-between opacity-75"><span>Tax</span><span>$13.20</span></li>
            </ul>
          </div>
          <div class="pt-3 border-top border-light border-opacity-25 d-flex justify-content-between align-items-end">
            <span class="opacity-75">Total due today</span>
            <span class="display-6 fw-bold" id="payTotal">$145.20</span>
          </div>
        </div>
        <div class="col-lg-7 p-4 p-lg-5">
          <h3 class="h4 wdw-heading mb-1">Payment details</h3>
          <p class="wdw-muted mb-4 small">Pay securely with your card. This demo form never sends data.</p>
          <form id="payForm" novalidate>
            <div class="mb-3" role="group" aria-label="Payment method">
              <div class="d-flex gap-2 flex-wrap">
                <input type="radio" class="btn-check" name="brand" id="bVisa" checked><label class="btn btn-outline-primary btn-sm rounded-pill px-3" for="bVisa">Visa</label>
                <input type="radio" class="btn-check" name="brand" id="bMc"><label class="btn btn-outline-primary btn-sm rounded-pill px-3" for="bMc">Mastercard</label>
                <input type="radio" class="btn-check" name="brand" id="bAmex"><label class="btn btn-outline-primary btn-sm rounded-pill px-3" for="bAmex">Amex</label>
              </div>
            </div>
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="pName" placeholder="Name on card" autocomplete="cc-name" required>
              <label for="pName">Name on card</label>
            </div>
            <div class="input-group mb-3">
              <div class="form-floating flex-grow-1">
                <input type="text" inputmode="numeric" class="form-control" id="pNum" placeholder="Card number" autocomplete="cc-number" maxlength="19" required>
                <label for="pNum">Card number</label>
              </div>
              <span class="input-group-text px-3" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/></svg>
              </span>
            </div>
            <div class="row g-3 mb-4">
              <div class="col-6 form-floating">
                <input type="text" inputmode="numeric" class="form-control" id="pExp" placeholder="MM/YY" autocomplete="cc-exp" maxlength="5" required>
                <label for="pExp" class="ms-2">Expiry (MM/YY)</label>
              </div>
              <div class="col-6 form-floating">
                <input type="password" inputmode="numeric" class="form-control" id="pCvc" placeholder="CVC" autocomplete="cc-csc" maxlength="4" required>
                <label for="pCvc" class="ms-2">CVC</label>
              </div>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Pay $145.20</button>
            <p class="text-center small wdw-muted mt-3 mb-0 d-flex align-items-center justify-content-center gap-2" id="payNote" role="status">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
              <span>Encrypted and secure checkout</span>
            </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.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More Form snippets