Payment Forms

Bootstrap 5 Payment Forms

Responsive Payment Forms built with the latest Bootstrap 5. Credit card, PayPal, Stripe, eCommerce checkout, multi-step payment, donation form & more examples.

Basic example

Multi-step checkout template with discount details, order details, tax information and credit card form with switchable option.

Eligible

Pay
Cancel and return to the website
$85.00
Diabites Pump & Supplies
Insurance Responsibility
$71.76
Add Insurer card

Insurance claim and all neccessary dependencies will be submitted to your insurer for the covered portion of this order.

Aetna - Open Access Aetna - OAP
Patient Balance
$13.24
Add Payment card

Insurance claim and all neccessary dependencies will be submitted to your insurer for the covered portion of this order.

Proceed to payment
Order Recap
contracted Price $186.86
Amount Deductible $0.0
Coinsurance(0%) + $0.0
Copayment + 40.00
Total Deductible,
Coinsurance and copay $40.00
Maximum out-of-pocket
on insurance policy $40.00
Insurance Responsibility $71.76
Patient Balance $13.24
Total $85.00
Edit in sandbox 
<section>
  <div class="d-flex justify-content-between align-items-center mb-5">
    <div class="d-flex flex-row align-items-center">
      <h4 class="text-uppercase mt-1">Eligible</h4>
      <span class="ms-2 me-3">Pay</span>
    </div>
    <a href="#!">Cancel and return to the website</a>
  </div>

  <div class="row">
    <div class="col-md-7 col-lg-7 col-xl-6 mb-4 mb-md-0">
      <h5 class="mb-0 text-success">$85.00</h5>
      <h5 class="mb-3">Diabites Pump & Supplies</h5>
      <div>
        <div class="d-flex justify-content-between">
          <div class="d-flex flex-row mt-1">
            <h6>Insurance Responsibility</h6>
            <h6 class="fw-bold text-success ms-1">$71.76</h6>
          </div>
          <div class="d-flex flex-row align-items-center text-primary">
            <span class="ms-1">Add Insurer card</span>
          </div>
        </div>
        <p>
          Insurance claim and all neccessary dependencies will be submitted to your
          insurer for the covered portion of this order.
        </p>
        <div class="p-2 d-flex justify-content-between align-items-center bg-body-tertiary">
          <span>Aetna - Open Access</span>
          <span>Aetna - OAP</span>
        </div>
        <hr />
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex flex-row mt-1">
            <h6>Patient Balance</h6>
            <h6 class="fw-bold text-success ms-1">$13.24</h6>
          </div>
          <div class="d-flex flex-row align-items-center text-primary">
            <span class="ms-1">Add Payment card</span>
          </div>
        </div>
        <p>
          Insurance claim and all neccessary dependencies will be submitted to your
          insurer for the covered portion of this order.
        </p>
        <div class="d-flex flex-column mb-3">
          <div data-mdb-ripple-init class="btn-group-vertical" role="group" aria-label="Vertical button group">
            <input type="radio" data-mdb-ripple-init class="btn-check" name="options" id="option1" autocomplete="off" />
            <label data-mdb-ripple-init class="btn btn-outline-primary btn-lg" for="option1">
              <div class="d-flex justify-content-between">
                <span>VISA </span>
                <span>**** 5436</span>
              </div>
            </label>

            <input type="radio" data-mdb-ripple-init class="btn-check" name="options" id="option2" autocomplete="off" checked />
            <label data-mdb-ripple-init class="btn btn-outline-primary btn-lg" for="option2">
              <div class="d-flex justify-content-between">
                <span>MASTER CARD </span>
                <span>**** 5038</span>
              </div>
            </label>
          </div>
        </div>
        <div data-mdb-ripple-init class="btn btn-success btn-lg btn-block">Proceed to payment</div>
      </div>
    </div>
    <div class="col-md-5 col-lg-4 col-xl-4 offset-lg-1 offset-xl-2">
      <div class="p-3 bg-body-tertiary">
        <span class="fw-bold">Order Recap</span>
        <div class="d-flex justify-content-between mt-2">
          <span>contracted Price</span> <span>$186.86</span>
        </div>
        <div class="d-flex justify-content-between mt-2">
          <span>Amount Deductible</span> <span>$0.0</span>
        </div>
        <div class="d-flex justify-content-between mt-2">
          <span>Coinsurance(0%)</span> <span>+ $0.0</span>
        </div>
        <div class="d-flex justify-content-between mt-2">
          <span>Copayment </span> <span>+ 40.00</span>
        </div>
        <hr />
        <div class="d-flex justify-content-between mt-2">
          <span class="lh-sm">Total Deductible,<br />
            Coinsurance and copay
          </span>
          <span>$40.00</span>
        </div>
        <div class="d-flex justify-content-between mt-2">
          <span class="lh-sm">Maximum out-of-pocket <br />
            on insurance policy</span>
          <span>$40.00</span>
        </div>
        <hr />
        <div class="d-flex justify-content-between mt-2">
          <span>Insurance Responsibility </span> <span>$71.76</span>
        </div>
        <div class="d-flex justify-content-between mt-2">
          <span>Patient Balance </span> <span>$13.24</span>
        </div>
        <hr />
        <div class="d-flex justify-content-between mt-2">
          <span>Total </span> <span class="text-success">$85.00</span>
        </div>
      </div>
    </div>
  </div>
</section>
.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child) {
margin-top: 0;
}

Ecommerce checkout page

A variation of a checkout page template - using radio buttons for debit card choice, and highlighting crucial payment information with different typography and icons.

ELIGIBLE |
Pay

$85.00

Diabetes Pump & Supplies

Insurance Responsibility $71.76

Add insurance card

Insurance claims and all necessary dependencies will be submitted to your insurer for the coverred portion of this order

Aetna-Open Access
OAP

Patient Balance $13.24

Add payment card

This is an estimate for the portion of your order (not covered by insurance) due today . once insurance finalizes their review refunds and/or balances will reconcile automatically.

Visa Debit Card

************3456

Mastercard Office

************1038
Cancel and return to website

Order Recap

Contracted Price
$186.76
Amount toward deductible
$0.00
Coinsurance( 0% )
+ $0.00
Copayment
+ $40.00
Total Deductible, Coinsurance, and Copay
$40.00
Maximum out-of-pocket on Insurance Policy (not reached)
$6500.00
Insurance Responsibility
$71.76
Patient Balance
$71.76
Total
$85.00
Edit in sandbox 
<section style="background-color: #eee;">
  <div class="container py-5">
    <div class="card">
      <div class="card-body">
        <div class="row d-flex justify-content-center pb-5">
          <div class="col-md-7 col-xl-5 mb-4 mb-md-0">
            <div class="py-4 d-flex flex-row">
              <h5><span class="far fa-check-square pe-2"></span><b>ELIGIBLE</b> |</h5>
              <span class="ps-2">Pay</span>
            </div>
            <h4 class="text-success">$85.00</h4>
            <h4>Diabetes Pump & Supplies</h4>
            <div class="d-flex pt-2">
              <div>
                <p>
                  <b>Insurance Responsibility <span class="text-success">$71.76</span></b>
                </p>
              </div>
              <div class="ms-auto">
                <p class="text-primary">
                  <i class="fas fa-plus-circle text-primary pe-1"></i>Add insurance card
                </p>
              </div>
            </div>
            <p>
              Insurance claims and all necessary dependencies will be submitted to your
              insurer for the coverred portion of this order
            </p>
            <div class="rounded d-flex bg-body-tertiary">
              <div class="p-2">Aetna-Open Access</div>
              <div class="ms-auto p-2">OAP</div>
            </div>
            <hr />
            <div class="pt-2">
              <div class="d-flex pb-2">
                <div>
                  <p>
                    <b>Patient Balance <span class="text-success">$13.24</span></b>
                  </p>
                </div>
                <div class="ms-auto">
                  <p class="text-primary">
                    <i class="fas fa-plus-circle text-primary pe-1"></i>Add payment card
                  </p>
                </div>
              </div>
              <p>
                This is an estimate for the portion of your order (not covered by
                insurance) due today . once insurance finalizes their review refunds
                and/or balances will reconcile automatically.
              </p>
              <form class="pb-3">
                <div class="d-flex flex-row pb-3">
                  <div class="d-flex align-items-center pe-2">
                    <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1"
                      value="" aria-label="..." checked />
                  </div>
                  <div class="rounded border d-flex w-100 p-3 align-items-center">
                    <p class="mb-0">
                      <i class="fab fa-cc-visa fa-lg text-primary pe-2"></i>Visa Debit
                      Card
                    </p>
                    <div class="ms-auto">************3456</div>
                  </div>
                </div>

                <div class="d-flex flex-row">
                  <div class="d-flex align-items-center pe-2">
                    <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel2"
                      value="" aria-label="..." />
                  </div>
                  <div class="rounded border d-flex w-100 p-3 align-items-center">
                    <p class="mb-0">
                      <i class="fab fa-cc-mastercard fa-lg text-bodu pe-2"></i>Mastercard
                      Office
                    </p>
                    <div class="ms-auto">************1038</div>
                  </div>
                </div>
              </form>
              <input type="button" value="Proceed to payment" data-mdb-ripple-init class="btn btn-primary btn-block btn-lg" />
            </div>
          </div>

          <div class="col-md-5 col-xl-4 offset-xl-1">
            <div class="py-4 d-flex justify-content-end">
              <h6><a href="#!">Cancel and return to website</a></h6>
            </div>
            <div class="rounded d-flex flex-column p-2 bg-body-tertiary">
              <div class="p-2 me-3">
                <h4>Order Recap</h4>
              </div>
              <div class="p-2 d-flex">
                <div class="col-8">Contracted Price</div>
                <div class="ms-auto">$186.76</div>
              </div>
              <div class="p-2 d-flex">
                <div class="col-8">Amount toward deductible</div>
                <div class="ms-auto">$0.00</div>
              </div>
              <div class="p-2 d-flex">
                <div class="col-8">Coinsurance( 0% )</div>
                <div class="ms-auto">+ $0.00</div>
              </div>
              <div class="p-2 d-flex">
                <div class="col-8">Copayment</div>
                <div class="ms-auto">+ $40.00</div>
              </div>
              <div class="border-top px-2 mx-2"></div>
              <div class="p-2 d-flex pt-3">
                <div class="col-8">Total Deductible, Coinsurance, and Copay</div>
                <div class="ms-auto">$40.00</div>
              </div>
              <div class="p-2 d-flex">
                <div class="col-8">
                  Maximum out-of-pocket on Insurance Policy (not reached)
                </div>
                <div class="ms-auto">$6500.00</div>
              </div>
              <div class="border-top px-2 mx-2"></div>
              <div class="p-2 d-flex pt-3">
                <div class="col-8">Insurance Responsibility</div>
                <div class="ms-auto"><b>$71.76</b></div>
              </div>
              <div class="p-2 d-flex">
                <div class="col-8">
                  Patient Balance <span class="fa fa-question-circle text-dark"></span>
                </div>
                <div class="ms-auto"><b>$71.76</b></div>
              </div>
              <div class="border-top px-2 mx-2"></div>
              <div class="p-2 d-flex pt-3">
                <div class="col-8"><b>Total</b></div>
                <div class="ms-auto"><b class="text-success">$85.00</b></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Payment card / Donation form

A simple payment form with credit card number and basic dollar amount input for customized amounts of payments / donations.

Martina Thomas**** 8880

Total amount due

$8245

Other amount

$
Go back
Edit in sandbox 
<section style="background-color: #eee;">
  <div class="container py-5">
    <div class="row d-flex justify-content-center">
      <div class="col-md-8 col-lg-6 col-xl-4">
        <div class="card rounded-3">
          <div class="card-body mx-1 my-2">
            <div class="d-flex align-items-center">
              <div>
                <i class="fab fa-cc-visa fa-4x text-body pe-3"></i>
              </div>
              <div>
                <p class="d-flex flex-column mb-0">
                  <b>Martina Thomas</b><span class="small text-muted">**** 8880</span>
                </p>
              </div>
            </div>

            <div class="pt-3">
              <div class="d-flex flex-row pb-3">
                <div class="rounded border border-primary border-2 d-flex w-100 p-3 align-items-center"
                  style="background-color: rgba(18, 101, 241, 0.07);">
                  <div class="d-flex align-items-center pe-3">
                    <input class="form-check-input" type="radio" name="radioNoLabelX" id="radioNoLabel11"
                      value="" aria-label="..." checked />
                  </div>
                  <div class="d-flex flex-column">
                    <p class="mb-1 small text-primary">Total amount due</p>
                    <h6 class="mb-0 text-primary">$8245</h6>
                  </div>
                </div>
              </div>

              <div class="d-flex flex-row pb-3">
                <div class="rounded border d-flex w-100 px-3 py-2 align-items-center">
                  <div class="d-flex align-items-center pe-3">
                    <input class="form-check-input" type="radio" name="radioNoLabelX" id="radioNoLabel22"
                      value="" aria-label="..." />
                  </div>
                  <div class="d-flex flex-column py-1">
                    <p class="mb-1 small text-primary">Other amount</p>
                    <div class="d-flex flex-row align-items-center">
                      <h6 class="mb-0 text-primary pe-1">$</h6>
                      <input type="text" class="form-control form-control-sm" id="numberExample"
                        style="width: 55px;" />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="d-flex justify-content-between align-items-center pb-1">
              <a href="#!" class="text-muted">Go back</a>
              <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg">Pay amount</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing plan with credit card payment details

Upgrade payment form with basic pricing plan card and a credit card form input.

Upgrade your plan

Please make the payment to start enjoying all the features of our premium plan as soon as possible

Small Business CHANGE PLAN
$ 8,350 / year

Payment details

Credit Card 1234 XXXX XXXX 2570
Credit Card 2344 XXXX XXXX 8880
ADD PAYMENT METHOD
Edit in sandbox 
<section style="background-color: #eee;">
  <div class="container py-5">
    <div class="row d-flex justify-content-center">
      <div class="col-md-12 col-lg-10 col-xl-8">
        <div class="card">
          <div class="card-body p-md-5">
            <div>
              <h4>Upgrade your plan</h4>
              <p class="text-muted pb-2">
                Please make the payment to start enjoying all the features of our premium
                plan as soon as possible
              </p>
            </div>

            <div class="px-3 py-4 border border-primary border-2 rounded mt-4 d-flex justify-content-between">
              <div class="d-flex flex-row align-items-center">
                <img src="https://i.imgur.com/S17BrTx.webp" class="rounded" width="60" />
                <div class="d-flex flex-column ms-4">
                  <span class="h5 mb-1">Small Business</span>
                  <span class="small text-muted">CHANGE PLAN</span>
                </div>
              </div>
              <div class="d-flex flex-row align-items-center">
                <sup class="dollar font-weight-bold text-muted">$</sup>
                <span class="h2 mx-1 mb-0">8,350</span>
                <span class="text-muted font-weight-bold mt-2">/ year</span>
              </div>
            </div>

            <h4 class="mt-5">Payment details</h4>

            <div class="mt-4 d-flex justify-content-between align-items-center">
              <div class="d-flex flex-row align-items-center">
                <img src="https://i.imgur.com/qHX7vY1.webp" class="rounded" width="70" />
                <div class="d-flex flex-column ms-3">
                  <span class="h5 mb-1">Credit Card</span>
                  <span class="small text-muted">1234 XXXX XXXX 2570</span>
                </div>
              </div>
              <div>
                <input type="text" class="form-control" placeholder="CVC" style="width: 70px;" />
              </div>
            </div>

            <div class="mt-2 d-flex justify-content-between align-items-center">
              <div class="d-flex flex-row align-items-center">
                <img src="https://i.imgur.com/qHX7vY1.webp" class="rounded" width="70" />
                <div class="d-flex flex-column ms-3">
                  <span class="h5 mb-1">Credit Card</span>
                  <span class="small text-muted">2344 XXXX XXXX 8880</span>
                </div>
              </div>
              <div>
                <input type="text" class="form-control" placeholder="CVC" style="width: 70px;" />
              </div>
            </div>

            <h6 class="mt-4 mb-3 text-primary text-uppercase">ADD PAYMENT METHOD</h6>

            <div data-mdb-input-init class="form-outline">
              <input type="text" id="formControlLg" class="form-control form-control-lg" />
              <label class="form-label" for="formControlLg">Email address</label>
            </div>
            <div class="mt-3">
              <button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block btn-lg">
                Proceed to payment <i class="fas fa-long-arrow-alt-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Credit card payment form

Simplistic card details payment step. This template is ideal if you have your shopping cart on a separate page.

visa
Edit in sandbox 
<section class="gradient-custom">
  <div class="container my-5 py-5">
    <div class="row d-flex justify-content-center py-5">
      <div class="col-md-7 col-lg-5 col-xl-4">
        <div class="card" style="border-radius: 15px;">
          <div class="card-body p-4">
            <form>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <div data-mdb-input-init class="form-outline">
                  <input type="text" id="typeText" class="form-control form-control-lg" siez="17"
                    placeholder="1234 5678 9012 3457" minlength="19" maxlength="19" />
                  <label class="form-label" for="typeText">Card Number</label>
                </div>
                <img src="https://img.icons8.com/color/48/000000/visa.png" alt="visa" width="64px" />
              </div>

              <div class="d-flex justify-content-between align-items-center mb-4">
                <div data-mdb-input-init class="form-outline">
                  <input type="text" id="typeName" class="form-control form-control-lg" siez="17"
                    placeholder="Cardholder's Name" />
                  <label class="form-label" for="typeName">Cardholder's Name</label>
                </div>
              </div>

              <div class="d-flex justify-content-between align-items-center pb-2">
                <div data-mdb-input-init class="form-outline">
                  <input type="text" id="typeExp" class="form-control form-control-lg" placeholder="MM/YYYY"
                    size="7" id="exp" minlength="7" maxlength="7" />
                  <label class="form-label" for="typeExp">Expiration</label>
                </div>
                <div data-mdb-input-init class="form-outline">
                  <input type="password" id="typeText2" class="form-control form-control-lg"
                    placeholder="&#9679;&#9679;&#9679;" size="1" minlength="3" maxlength="3" />
                  <label class="form-label" for="typeText2">Cvv</label>
                </div>
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-lg btn-rounded">
                  <i class="fas fa-arrow-right"></i>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
.gradient-custom {
  background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%),
    linear-gradient(121.28deg, #669600 0%, #ff0000 100%),
    linear-gradient(360deg, #0029ff 0%, #8fff00 100%),
    radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%),
    radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
  background-blend-mode: screen, color-dodge, overlay, difference, normal;
}

Credit card payment settings form template

Credit card configuration panel with an option to save your credit card numbers.

Settings

Payment

Saved cards:

Remove card
Remove card

Add new card:

Edit in sandbox 
<section class="p-4 p-md-5" style="
    background-image: url(https://mdbcdn.b-cdn.net/img/Photos/Others/background3.webp);
  ">
  <div class="row d-flex justify-content-center">
    <div class="col-md-10 col-lg-8 col-xl-5">
      <div class="card rounded-3">
        <div class="card-body p-4">
          <div class="text-center mb-4">
            <h3>Settings</h3>
            <h6>Payment</h6>
          </div>
          <form action="">
            <p class="fw-bold mb-4 pb-2">Saved cards:</p>

            <div class="d-flex flex-row align-items-center mb-4 pb-1">
              <img class="img-fluid" src="https://img.icons8.com/color/48/000000/mastercard-logo.png" />
              <div class="flex-fill mx-3">
                <div data-mdb-input-init class="form-outline">
                  <input type="text" id="formControlLgXc" class="form-control form-control-lg"
                    value="**** **** **** 3193" />
                  <label class="form-label" for="formControlLgXc">Card Number</label>
                </div>
              </div>
              <a href="#!">Remove card</a>
            </div>

            <div class="d-flex flex-row align-items-center mb-4 pb-1">
              <img class="img-fluid" src="https://img.icons8.com/color/48/000000/visa.png" />
              <div class="flex-fill mx-3">
                <div data-mdb-input-init class="form-outline">
                  <input type="text" id="formControlLgXs" class="form-control form-control-lg"
                    value="**** **** **** 4296" />
                  <label class="form-label" for="formControlLgXs">Card Number</label>
                </div>
              </div>
              <a href="#!">Remove card</a>
            </div>

            <p class="fw-bold mb-4">Add new card:</p>

            <div data-mdb-input-init class="form-outline mb-4">
              <input type="text" id="formControlLgXsd" class="form-control form-control-lg"
                value="Anna Doe" />
              <label class="form-label" for="formControlLgXsd">Cardholder's Name</label>
            </div>

            <div class="row mb-4">
              <div class="col-7">
                <div data-mdb-input-init class="form-outline">
                  <input type="text" id="formControlLgXM" class="form-control form-control-lg"
                    value="1234 5678 1234 5678" />
                  <label class="form-label" for="formControlLgXM">Card Number</label>
                </div>
              </div>
              <div class="col-3">
                <div data-mdb-input-init class="form-outline">
                  <input type="password" id="formControlLgExpk" class="form-control form-control-lg"
                    placeholder="MM/YYYY" />
                  <label class="form-label" for="formControlLgExpk">Expire</label>
                </div>
              </div>
              <div class="col-2">
                <div data-mdb-input-init class="form-outline">
                  <input type="password" id="formControlLgcvv" class="form-control form-control-lg"
                    placeholder="Cvv" />
                  <label class="form-label" for="formControlLgcvv">Cvv</label>
                </div>
              </div>
            </div>

            <button data-mdb-button-init data-mdb-ripple-init class="btn btn-success btn-lg btn-block">Add card</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Payment form

Payment form as a product card, it's possible to integrate this form with an eCommerce gallery.

Black Chair

Retro Chair

$760

Your payment details

Edit in sandbox 
<section style="background-color: #f9c9aa;">
  <div class="container py-5">
    <div class="row d-flex justify-content-center">
      <div class="col-md-9 col-lg-7 col-xl-5">
        <div class="card">
          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-forms/img1.webp"
            class="card-img-top" alt="Black Chair" />
          <div class="card-body">
            <div class="card-title d-flex justify-content-between mb-0">
              <p class="text-muted mb-0">Retro Chair</p>
              <p class="mb-0">$760</p>
            </div>
          </div>
          <div class="rounded-bottom bg-body-tertiary">
            <div class="card-body">
              <p class="mb-4">Your payment details</p>

              <div data-mdb-input-init class="form-outline mb-3">
                <input type="text" id="formControlLgXM8" class="form-control"
                  placeholder="1234 5678 1234 5678" />
                <label class="form-label" for="formControlLgXM8">Card Number</label>
              </div>

              <div class="row mb-3">
                <div class="col-6">
                  <div data-mdb-input-init class="form-outline">
                    <input type="password" id="formControlLgExpk8" class="form-control"
                      placeholder="MM/YYYY" />
                    <label class="form-label" for="formControlLgExpk8">Expire</label>
                  </div>
                </div>
                <div class="col-6">
                  <div data-mdb-input-init class="form-outline">
                    <input type="password" id="formControlLgcvv8" class="form-control" placeholder="Cvv" />
                    <label class="form-label" for="formControlLgcvv8">Cvv</label>
                  </div>
                </div>
              </div>

              <button data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-block">Order now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>