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$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
Coinsurance and copay $40.00
Maximum out-of-pocket
on insurance policy $40.00
on insurance policy $40.00
Insurance Responsibility $71.76
Patient Balance $13.24
Total $85.00
<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.
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
<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.
<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
<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.
<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="●●●" 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
<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.
Retro Chair
$760
Your payment details
<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>