Payment Forms
Bootstrap 5 Payment Forms
Responsive Payment Forms built with the latest Bootstrap 5. Credit card, PayPal, Stripe, eCommerce checkout and many more examples.
Basic example
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"
style="background-color: #eee;"
>
<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 class="btn-group-vertical" role="group" aria-label="Vertical button group">
<input
type="radio"
class="btn-check"
name="options"
id="option1"
autocomplete="off"
/>
<label 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"
class="btn-check"
name="options"
id="option2"
autocomplete="off"
checked
/>
<label 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 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" style="background-color: #eee;">
<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
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" style="background-color: #f8f9fa;">
<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-dark pe-2"></i>Mastercard
Office
</p>
<div class="ms-auto">************1038</div>
</div>
</div>
</form>
<input
type="button"
value="Proceed to payment"
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"
style="background-color: #f8f9fa;"
>
<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
<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-black 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" class="btn btn-primary btn-lg">Pay amount</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Pricing plan with credit card payment details
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 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 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
<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 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.webp"
alt="visa"
width="64px"
/>
</div>
<div class="d-flex justify-content-between align-items-center mb-4">
<div 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 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 class="form-outline">
<input
type="password"
id="typeText"
class="form-control form-control-lg"
placeholder="●●●"
size="1"
minlength="3"
maxlength="3"
/>
<label class="form-label" for="typeText">Cvv</label>
</div>
<button type="button" 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 form template
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.webp"
/>
<div class="flex-fill mx-3">
<div 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.webp"
/>
<div class="flex-fill mx-3">
<div 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 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 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 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 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 class="btn btn-success btn-lg btn-block">Add card</button>
</form>
</div>
</div>
</div>
</div>
</section>
Payment form
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://mdbootstrap.com/img/Photos/new-templates/bootstrap-forms/img1.webp"
class="card-img-top"
alt="..."
/>
<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" style="background-color: #eee;">
<div class="card-body">
<p class="mb-4">Your payment details</p>
<div 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 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 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 class="btn btn-info btn-block">Order now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>