Web Designer Wall

Snippets BuyCalls

Bootstrap 5 Billing Checkout Page with Plan Switcher

A two-step checkout page with selectable monthly and yearly billing cards, card payment fields and a sticky order summary that updates with the chosen plan.

Bootstrap 5 No jQuery Dec 2019 3.2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="mb-4">
      <span class="wdw-eyebrow">Secure checkout</span>
      <h1 class="wdw-heading h2 mt-1 mb-0">You're almost there</h1>
    </div>
    <form class="row g-4 align-items-start" id="checkoutForm" novalidate>
      <div class="col-lg-7">
        <div class="wdw-card p-4 p-md-5 d-grid gap-4">
          <fieldset>
            <legend class="h6 fw-bold mb-3"><span class="co-step">1</span>Choose your billing cycle</legend>
            <div class="row g-3">
              <div class="col-sm-6">
                <input type="radio" class="btn-check" name="cycle" id="cycleYear" value="year" checked>
                <label class="co-option" for="cycleYear">
                  <span class="d-flex justify-content-between align-items-start">
                    <span class="fw-semibold">Yearly</span>
                    <span class="badge text-bg-success rounded-pill">Save 81%</span>
                  </span>
                  <span class="fs-4 fw-bold text-body-emphasis">$45.99<small class="fs-6 fw-medium text-body-secondary"> / year</small></span>
                  <span class="small text-body-secondary">Just $3.83 per month</span>
                </label>
              </div>
              <div class="col-sm-6">
                <input type="radio" class="btn-check" name="cycle" id="cycleMonth" value="month">
                <label class="co-option" for="cycleMonth">
                  <span class="d-flex justify-content-between align-items-start">
                    <span class="fw-semibold">Monthly</span>
                  </span>
                  <span class="fs-4 fw-bold text-body-emphasis">$19.99<small class="fs-6 fw-medium text-body-secondary"> / month</small></span>
                  <span class="small text-body-secondary">Cancel any time</span>
                </label>
              </div>
            </div>
          </fieldset>

          <fieldset>
            <legend class="h6 fw-bold mb-3"><span class="co-step">2</span>Payment details</legend>
            <div class="d-flex gap-2 mb-3" role="group" aria-label="Card type">
              <input type="radio" class="btn-check" name="brand" id="brandVisa" checked>
              <label class="btn btn-outline-secondary rounded-pill px-4" for="brandVisa">Visa</label>
              <input type="radio" class="btn-check" name="brand" id="brandDiscover">
              <label class="btn btn-outline-secondary rounded-pill px-4" for="brandDiscover">Discover</label>
            </div>
            <div class="row g-3">
              <div class="col-12">
                <label for="ccNumber" class="form-label small fw-semibold">Card number</label>
                <input id="ccNumber" type="text" inputmode="numeric" class="form-control" placeholder="1234 5678 9012 3456" autocomplete="cc-number" maxlength="19" required>
              </div>
              <div class="col-6">
                <label for="ccExp" class="form-label small fw-semibold">Expiration date</label>
                <input id="ccExp" type="text" inputmode="numeric" class="form-control" placeholder="MM / YY" autocomplete="cc-exp" maxlength="7" required>
              </div>
              <div class="col-6">
                <label for="ccCvc" class="form-label small fw-semibold">CVV</label>
                <input id="ccCvc" type="text" inputmode="numeric" class="form-control" placeholder="123" autocomplete="cc-csc" maxlength="4" required>
              </div>
              <div class="col-sm-8">
                <label for="ccCountry" class="form-label small fw-semibold">Country</label>
                <select id="ccCountry" class="form-select">
                  <option selected>United States</option>
                  <option>India</option>
                  <option>United Kingdom</option>
                  <option>China</option>
                </select>
              </div>
              <div class="col-sm-4">
                <label for="ccZip" class="form-label small fw-semibold">ZIP</label>
                <input id="ccZip" type="text" class="form-control" placeholder="10001" autocomplete="postal-code">
              </div>
            </div>
          </fieldset>
        </div>
      </div>

      <div class="col-lg-5">
        <div class="wdw-card overflow-hidden co-summary">
          <div class="wdw-aurora p-4">
            <span class="badge rounded-pill text-bg-light mb-2">Professional plan</span>
            <h2 class="h4 fw-bold mb-1">BBBootstrap Professional</h2>
            <p class="mb-0 small opacity-75">Billed now: <strong id="coBilled">$45.99</strong> <span id="coPeriod">per year</span></p>
          </div>
          <div class="p-4">
            <p class="text-body-secondary small mb-3">Professional software and website development, delivered on time and at a fair price by a team with years of offshore delivery experience.</p>
            <ul class="list-unstyled d-grid gap-2 mb-4 small">
              <li class="d-flex gap-2"><svg class="co-check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Strategic consulting</li>
              <li class="d-flex gap-2"><svg class="co-check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>UI and UX design</li>
              <li class="d-flex gap-2"><svg class="co-check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Client application</li>
              <li class="d-flex gap-2"><svg class="co-check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>E-commerce</li>
              <li class="d-flex gap-2"><svg class="co-check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>IT consulting</li>
            </ul>
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" id="coTerms" required>
              <label class="form-check-label small" for="coTerms">I agree to the <a href="#" class="fw-semibold">BBBootstrap Terms</a></label>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Buy now</button>
            <p class="text-center small text-body-secondary mt-3 mb-0" id="coMsg" role="status">Encrypted payment. Cancel any time.</p>
          </div>
        </div>
      </div>
    </form>
  </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 BuyCalls snippets