Web Designer Wall

Snippets Card

Bootstrap 5 Credit Card Payment Form with Payment Methods

A checkout layout with an order summary panel and a payment form offering four methods, an account-type toggle and auto-formatted card fields with validation.

Bootstrap 5 No jQuery Jul 2020 3.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 980px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-lg-5 wdw-aurora p-4 p-lg-5 d-flex flex-column justify-content-between gap-5">
          <div>
            <span class="small fw-bold text-uppercase opacity-75" style="letter-spacing:.08em">Order summary</span>
            <h2 class="fw-bold mt-2 mb-1" style="letter-spacing:-.02em">Studio plan</h2>
            <p class="opacity-75 mb-0">Annual billing, cancel any time.</p>
          </div>
          <div>
            <div class="d-flex justify-content-between py-2 border-bottom border-light border-opacity-25"><span class="opacity-75">Subtotal</span><span>EUR 92.00</span></div>
            <div class="d-flex justify-content-between py-2 border-bottom border-light border-opacity-25"><span class="opacity-75">VAT (8.7%)</span><span>EUR 8.00</span></div>
            <div class="d-flex justify-content-between pt-3 fs-4 fw-bold"><span>Total</span><span>EUR 100.00</span></div>
          </div>
        </aside>
        <form class="col-lg-7 p-4 p-lg-5" id="payForm" novalidate>
          <h3 class="wdw-heading h4 mb-4">Payment method</h3>
          <div class="row g-2 mb-4" id="methods" role="radiogroup" aria-label="Payment method">
            <div class="col-6 col-sm-3"><input type="radio" class="btn-check" name="method" id="m-dk" value="Dankort" autocomplete="off" checked><label class="wdw-method" for="m-dk"><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.5" y="5" width="19" height="14" rx="3"/><path d="M2.5 10h19M6.5 15h4"/></svg>Debit</label></div>
            <div class="col-6 col-sm-3"><input type="radio" class="btn-check" name="method" id="m-visa" value="Visa" autocomplete="off"><label class="wdw-method" for="m-visa"><span class="fw-bolder fst-italic fs-5">VISA</span></label></div>
            <div class="col-6 col-sm-3"><input type="radio" class="btn-check" name="method" id="m-mc" value="Mastercard" autocomplete="off"><label class="wdw-method" for="m-mc"><span class="wdw-mc" aria-hidden="true"></span><span class="visually-hidden">Mastercard</span></label></div>
            <div class="col-6 col-sm-3"><input type="radio" class="btn-check" name="method" id="m-pp" value="PayPal" autocomplete="off"><label class="wdw-method" for="m-pp"><span class="fw-bold">PayPal</span></label></div>
          </div>
          <div class="btn-group mb-4 w-100" role="group" aria-label="Account type">
            <input type="radio" class="btn-check" name="acct" id="a-priv" autocomplete="off" checked><label class="btn btn-outline-primary rounded-start-pill" for="a-priv">Private</label>
            <input type="radio" class="btn-check" name="acct" id="a-biz" autocomplete="off"><label class="btn btn-outline-primary rounded-end-pill" for="a-biz">Business</label>
          </div>
          <div class="form-floating mb-3"><input type="text" class="form-control" id="cName" placeholder="Name" autocomplete="cc-name" required><label for="cName">Name on card</label><div class="invalid-feedback">Enter the cardholder name.</div></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" pattern="(\d{4} ){3}\d{4}" required><label for="cNum">Card number</label><div class="invalid-feedback">Enter all 16 digits.</div></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" pattern="(0[1-9]|1[0-2])/\d{2}" required><label for="cExp">Expiry (MM/YY)</label><div class="invalid-feedback">Use MM/YY.</div></div></div>
            <div class="col-6"><div class="form-floating"><input type="password" class="form-control" id="cCvv" placeholder="CVV" inputmode="numeric" autocomplete="cc-csc" maxlength="4" pattern="\d{3,4}" required><label for="cCvv">CVV</label><div class="invalid-feedback">3 or 4 digits.</div></div></div>
          </div>
          <button type="submit" class="btn btn-primary btn-lg rounded-pill w-100" id="payBtn">Pay EUR 100.00</button>
          <p class="small wdw-muted text-center mt-3 mb-0" id="payNote">Payments are encrypted. This demo does not send data anywhere.</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.

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

Related snippets

More card snippets