Web Designer Wall

Snippets Details

Bootstrap 5 Credit Card Payment Form with Order Summary

A checkout layout pairing an order summary and price breakdown with a payment form that has selectable methods and formatted card fields.

Bootstrap 5 No jQuery May 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1000px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 pay-summary p-4 p-lg-5 border-end">
          <span class="wdw-eyebrow mb-3">Order summary</span>
          <img class="pay-img rounded-4 w-100 mb-4" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=800&q=70" width="800" height="520" alt="Red running sneaker on a red background">
          <div class="d-flex justify-content-between align-items-start gap-3 mb-1">
            <div><h2 class="h5 wdw-heading mb-1">Aero Run Sneakers</h2><small class="text-body-secondary">Size 42 · Quantity 1</small></div>
            <span class="fw-bold">$120.00</span>
          </div>
          <hr class="my-3">
          <dl class="row mb-0 small">
            <dt class="col-6 fw-normal text-body-secondary">Subtotal</dt><dd class="col-6 text-end">$120.00</dd>
            <dt class="col-6 fw-normal text-body-secondary">Shipping</dt><dd class="col-6 text-end">$6.00</dd>
            <dt class="col-6 fw-normal text-body-secondary">Tax</dt><dd class="col-6 text-end">$9.60</dd>
            <dt class="col-6 fs-6 pt-2">Total</dt><dd class="col-6 text-end fs-5 fw-bold pt-2 mb-0">$135.60</dd>
          </dl>
        </div>
        <form class="col-lg-7 p-4 p-lg-5 d-flex flex-column justify-content-center" id="payForm" novalidate>
          <h1 class="h3 wdw-heading mb-1">Payment details</h1>
          <p class="wdw-muted mb-4">Complete your purchase securely.</p>
          <fieldset class="mb-4">
            <legend class="form-label fs-6 fw-semibold">Payment method</legend>
            <div class="d-flex flex-wrap gap-2" role="radiogroup">
              <input type="radio" class="btn-check" name="method" id="m-card" checked><label class="btn btn-outline-secondary pay-method rounded-pill" for="m-card"><i class="bi bi-credit-card"></i> Card</label>
              <input type="radio" class="btn-check" name="method" id="m-paypal"><label class="btn btn-outline-secondary pay-method rounded-pill" for="m-paypal"><i class="bi bi-paypal"></i> PayPal</label>
              <input type="radio" class="btn-check" name="method" id="m-apple"><label class="btn btn-outline-secondary pay-method rounded-pill" for="m-apple"><i class="bi bi-apple"></i> Apple Pay</label>
            </div>
          </fieldset>
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="cName" placeholder="Cardholder name" autocomplete="cc-name" required>
            <label for="cName">Cardholder name</label>
          </div>
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="cNum" placeholder="Card number" inputmode="numeric" autocomplete="cc-number" maxlength="19" required>
            <label for="cNum">Card number</label>
          </div>
          <div class="row g-3 mb-4">
            <div class="col-6"><div class="form-floating"><input type="text" class="form-control" id="cExp" placeholder="MM/YY" inputmode="numeric" autocomplete="cc-exp" maxlength="5" required><label for="cExp">MM/YY</label></div></div>
            <div class="col-6"><div class="form-floating"><input type="text" class="form-control" id="cCvv" placeholder="CVV" inputmode="numeric" autocomplete="cc-csc" maxlength="4" required><label for="cCvv">CVV</label></div></div>
          </div>
          <button type="submit" class="btn btn-primary rounded-pill w-100 btn-lg"><i class="bi bi-lock"></i> Pay $135.60</button>
          <p class="small text-body-secondary text-center mt-3 mb-0" id="payMsg" role="status"><i class="bi bi-shield-check"></i> Payments are encrypted and secure.</p>
        </form>
      </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 details snippets