Web Designer Wall

Snippets Card

Bootstrap 5 Pricing Plan with Payment Details Form

A checkout card that shows the selected plan with its yearly price, saved payment methods with CVC fields, and a receipt email before paying.

Bootstrap 5 No jQuery Jul 2020 2.1K views 

<section class="wdw-stage pay-stage">
  <div class="container" style="max-width:960px">
    <form class="wdw-card p-4 p-lg-4" id="checkout" novalidate>
      <div class="row g-4">
        <div class="col-lg-7">
          <span class="wdw-eyebrow mb-1">Checkout</span>
          <h2 class="wdw-heading h3 mb-3">Upgrade your plan</h2>

          <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
            <div class="billing btn-group rounded-pill" role="group" aria-label="Billing period">
              <input type="radio" class="btn-check" name="billing" id="bill-month" value="month" autocomplete="off">
              <label class="btn btn-sm rounded-pill" for="bill-month">Monthly</label>
              <input type="radio" class="btn-check" name="billing" id="bill-year" value="year" autocomplete="off" checked>
              <label class="btn btn-sm rounded-pill" for="bill-year">Yearly</label>
            </div>
            <span class="badge rounded-pill text-bg-success">Save 20%</span>
          </div>

          <div class="plan d-flex align-items-center gap-3 p-3 rounded-4 mb-4">
            <span class="wdw-icon" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 13 9 5 9-5"/></svg>
            </span>
            <div class="me-auto">
              <div class="fw-bold" data-plan-name>Small Business</div>
              <button type="button" class="btn btn-link btn-sm px-0 text-decoration-none fw-semibold" data-plan-toggle>Switch to Team plan</button>
            </div>
            <div class="text-end">
              <span class="h3 mb-0 fw-bold" data-plan-price>$8,350</span>
              <span class="wdw-muted small" data-plan-period>/ year</span>
            </div>
          </div>

          <h3 class="wdw-eyebrow mb-2">Payment details</h3>
          <div class="d-grid gap-2 mb-2" role="radiogroup" aria-label="Payment method">
            <div class="method position-relative d-flex align-items-center gap-3 p-3 rounded-4">
              <input class="form-check-input mt-0" type="radio" name="method" id="m1" value="visa" checked>
              <span class="card-chip" aria-hidden="true">
                <svg width="26" height="26" 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 10h19"/></svg>
              </span>
              <label class="me-auto stretched-link" for="m1"><span class="d-block fw-semibold">Visa credit card</span><span class="wdw-muted small">•••• 2570</span></label>
              <label class="visually-hidden" for="cvc1">CVC for card ending 2570</label>
              <input id="cvc1" class="form-control cvc position-relative" inputmode="numeric" maxlength="4" placeholder="CVC" autocomplete="cc-csc">
            </div>
            <div class="method position-relative d-flex align-items-center gap-3 p-3 rounded-4">
              <input class="form-check-input mt-0" type="radio" name="method" id="m2" value="mc">
              <span class="card-chip" aria-hidden="true">
                <svg width="28" height="20" viewBox="0 0 28 20"><circle cx="10" cy="10" r="8" fill="#ef4444" opacity=".9"/><circle cx="18" cy="10" r="8" fill="#f59e0b" opacity=".85"/></svg>
              </span>
              <label class="me-auto stretched-link" for="m2"><span class="d-block fw-semibold">Mastercard credit card</span><span class="wdw-muted small">•••• 8880</span></label>
              <label class="visually-hidden" for="cvc2">CVC for card ending 8880</label>
              <input id="cvc2" class="form-control cvc position-relative" inputmode="numeric" maxlength="4" placeholder="CVC" autocomplete="cc-csc">
            </div>
          </div>
          <button type="button" class="btn btn-link btn-sm px-0 mb-2 text-decoration-none fw-semibold">+ Add payment method</button>

          <div class="form-floating">
            <input type="email" class="form-control" id="receipt" placeholder="[email protected]" required aria-describedby="receipt-err">
            <label for="receipt">Email for receipt</label>
            <div class="invalid-feedback" id="receipt-err">Enter a valid email for your receipt.</div>
          </div>
        </div>

        <div class="col-lg-5">
          <div class="summary rounded-4 p-4 h-100 d-flex flex-column">
            <h3 class="wdw-eyebrow mb-3">Order summary</h3>
            <dl class="mb-0 small">
              <div class="d-flex justify-content-between py-1"><dt class="fw-normal wdw-muted" data-sum-label>Small Business, yearly</dt><dd class="mb-0" data-sum-sub>$8,350</dd></div>
              <div class="d-flex justify-content-between py-1"><dt class="fw-normal wdw-muted">Tax (8%)</dt><dd class="mb-0" data-sum-tax>$668</dd></div>
              <div class="d-flex justify-content-between py-1 text-success-emphasis"><dt class="fw-normal">Yearly saving</dt><dd class="mb-0" data-sum-save>-$2,090</dd></div>
            </dl>
            <hr class="my-3">
            <div class="d-flex justify-content-between align-items-baseline mb-4">
              <span class="fw-bold">Total today</span>
              <span class="h3 fw-bold mb-0" data-sum-total>$9,018</span>
            </div>
            <button type="submit" class="btn btn-primary btn-lg rounded-pill w-100 mt-auto" data-pay>
              <svg width="18" height="18" 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 data-pay-label>Pay $9,018</span>
            </button>
            <p class="wdw-muted small text-center mt-3 mb-0" role="status" aria-live="polite" data-status>Secure payment. Cancel anytime.</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.

Related snippets

More card snippets