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

$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

          <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.

Visa Debit Card

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

Mastercard Office

************1038

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

Martina Thomas**** 8880

Total amount due

$8245

Other amount

$
Go back

          <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.png" 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.png" 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.png" 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

visa

          <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.png"
                            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="&#9679;&#9679;&#9679;"
                              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

Saved cards:

Remove card
Remove card

Add new card:


          <section
            class="p-4 p-md-5"
            style="
              background-image: url(https://mdbcdn.b-cdn.net/img/Photos/Others/background3.jpg);
            "
          >
            <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 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 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.jpg"
                      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>