Payment Forms

React Bootstrap 5 Payment Forms 

Responsive React 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 
import React from "react";
import {
  MDBContainer,
  MDBCol,
  MDBRow,
  MDBBtnGroup,
  MDBBtn,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <div className="d-flex justify-content-between align-items-center mb-5">
        <div className="d-flex flex-row align-items-center">
          <h4 className="text-uppercase mt-1">Eligible</h4>
          <span className="ms-2 me-3">Pay</span>
        </div>
        <a href="#!">Cancel and return to the website</a>
      </div>
      <MDBRow>
        <MDBCol md="7" lg="7" xl="6" className="mb-4 mb-md-0">
          <h5 className="mb-0 text-success">$85.00</h5>
          <h5 className="mb-3">Diabites Pump &amp; Supplies</h5>
          <div>
            <div className="d-flex justify-content-between">
              <div className="d-flex flex-row mt-1">
                <h6>Insurance Responsibility</h6>
                <h6 className="fw-bold text-success ms-1">$71.76</h6>
              </div>
              <div className="d-flex flex-row align-items-center text-primary">
                <span className="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
              className="p-2 d-flex justify-content-between align-items-center"
              style={{ backgroundColor: "#eee" }}
            >
              <span>Aetna - Open Access</span>
              <span>Aetna - OAP</span>
            </div>
            <hr />
            <div className="d-flex justify-content-between align-items-center">
              <div className="d-flex flex-row mt-1">
                <h6>Patient Balance</h6>
                <h6 className="fw-bold text-success ms-1">$13.24</h6>
              </div>
              <div className="d-flex flex-row align-items-center text-primary">
                <span className="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">
              <MDBBtnGroup vertical aria-label="Vertical button group">
                <input
                  type="radio"
                  className="btn-check"
                  name="options"
                  id="option1"
                  autocomplete="off"
                />
                <label className="btn btn-outline-primary btn-lg" for="option1">
                  <div className="d-flex justify-content-between">
                    <span>VISA </span>
                    <span>**** 5436</span>
                  </div>
                </label>

                <input
                  type="radio"
                  className="btn-check"
                  name="options"
                  id="option2"
                  autocomplete="off"
                  checked
                />
                <label className="btn btn-outline-primary btn-lg" for="option2">
                  <div className="d-flex justify-content-between">
                    <span>MASTER CARD </span>
                    <span>**** 5038</span>
                  </div>
                </label>
              </MDBBtnGroup>
            </div>
            <MDBBtn color="success" size="lg" block>
              Proceed to payment
            </MDBBtn>
          </div>
        </MDBCol>
        <MDBCol md="5" lg="4" xl="4" offsetLg="1" offsetXl="2">
          <div className="p-3" style={{ backgroundColor: "#eee" }}>
            <span className="fw-bold">Order Recap</span>
            <div className="d-flex justify-content-between mt-2">
              <span>contracted Price</span> <span>$186.86</span>
            </div>
            <div className="d-flex justify-content-between mt-2">
              <span>Amount Deductible</span> <span>$0.0</span>
            </div>
            <div className="d-flex justify-content-between mt-2">
              <span>Coinsurance(0%)</span> <span>+ $0.0</span>
            </div>
            <div className="d-flex justify-content-between mt-2">
              <span>Copayment </span> <span>+ 40.00</span>
            </div>
            <hr />
            <div className="d-flex justify-content-between mt-2">
              <span className="lh-sm">
                Total Deductible,
                <br />
                Coinsurance and copay
              </span>
              <span>$40.00</span>
            </div>
            <div className="d-flex justify-content-between mt-2">
              <span className="lh-sm">
                Maximum out-of-pocket <br />
                on insurance policy
              </span>
              <span>$40.00</span>
            </div>
            <hr />
            <div className="d-flex justify-content-between mt-2">
              <span>Insurance Responsibility </span> <span>$71.76</span>
            </div>
            <div className="d-flex justify-content-between mt-2">
              <span>Patient Balance </span> <span>$13.24</span>
            </div>
            <hr />
            <div className="d-flex justify-content-between mt-2">
              <span>Total </span> <span class="text-success">$85.00</span>
            </div>
          </div>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}

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
import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBRadio,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer fluid className="p-5" style={{ backgroundColor: "#eee" }}>
      <MDBCard>
        <MDBCardBody>
          <MDBRow className="d-flex justify-content-center pb-5">
            <MDBCol md="7" xl="5" className="mb-4 mb-md-0">
              <div className="py-4 d-flex flex-row">
                <h5>
                  <span className="far fa-check-square pe-2"></span>
                  <b>ELIGIBLE</b> |
                </h5>
                <span className="ps-2">Pay</span>
              </div>
              <h4 className="text-success">$85.00</h4>
              <h4>Diabetes Pump &amp; Supplies</h4>
              <div className="d-flex pt-2">
                <div>
                  <p>
                    <b>
                      Insurance Responsibility{" "}
                      <span className="text-success">$71.76</span>
                    </b>
                  </p>
                </div>
                <div className="ms-auto">
                  <p className="text-primary">
                    <MDBIcon
                      fas
                      icon="plus-circle"
                      className="text-primary pe-1"
                    />
                    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
                className="rounded d-flex"
                style={{ backgroundColor: "#f8f9fa" }}
              >
                <div className="p-2">Aetna-Open Access</div>
                <div className="ms-auto p-2">OAP</div>
              </div>
              <hr />
              <div className="pt-2">
                <div className="d-flex pb-2">
                  <div>
                    <p>
                      <b>
                        Patient Balance{" "}
                        <span className="text-success">$13.24</span>
                      </b>
                    </p>
                  </div>
                  <div className="ms-auto">
                    <p className="text-primary">
                      <MDBIcon
                        fas
                        icon="plus-circle"
                        className="text-primary pe-1"
                      />
                      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>
                <div className="d-flex flex-row pb-3">
                  <div className="d-flex align-items-center pe-2">
                    <MDBRadio name="radioNoLabel" id="radioNoLabel1" checked />
                  </div>
                  <div className="rounded border d-flex w-100 p-3 align-items-center">
                    <p className="mb-0">
                      <MDBIcon
                        fab
                        icon="cc-visa"
                        size="lg"
                        className="text-primary pe-2"
                      />{" "}
                      Visa Debit Card
                    </p>
                    <div className="ms-auto">************3456</div>
                  </div>
                </div>
                <div className="d-flex flex-row pb-3">
                  <div className="d-flex align-items-center pe-2">
                    <MDBRadio name="radioNoLabel" id="radioNoLabel1" checked />
                  </div>
                  <div className="rounded border d-flex w-100 p-3 align-items-center">
                    <p className="mb-0">
                      <MDBIcon
                        fab
                        icon="cc-mastercard"
                        size="lg"
                        className="text-dark pe-2"
                      />{" "}
                      Mastercard Office
                    </p>
                    <div className="ms-auto">************1038</div>
                  </div>
                </div>
                <MDBBtn block size="lg">
                  Proceed to payment
                </MDBBtn>
              </div>
            </MDBCol>
            <MDBCol md="5" xl="4" offsetXl="1">
              {" "}
              <div className="py-4 d-flex justify-content-end">
                <h6>
                  <a href="#!">Cancel and return to website</a>
                </h6>
              </div>
              <div
                className="rounded d-flex flex-column p-2"
                style={{ backgroundColor: "#f8f9fa" }}
              >
                <div className="p-2 me-3">
                  <h4>Order Recap</h4>
                </div>
                <div className="p-2 d-flex">
                  <MDBCol size="8">Contracted Price</MDBCol>
                  <div className="ms-auto">$186.76</div>
                </div>
                <div className="p-2 d-flex">
                  <MDBCol size="8">Amount toward deductible</MDBCol>
                  <div className="ms-auto">$0.00</div>
                </div>
                <div className="p-2 d-flex">
                  <MDBCol size="8">Coinsurance(0%)</MDBCol>
                  <div className="ms-auto">+ $0.00</div>
                </div>
                <div className="p-2 d-flex">
                  <MDBCol size="8">Copayment</MDBCol>
                  <div className="ms-auto">+ $40.00</div>
                </div>
                <div className="border-top px-2 mx-2"></div>
                <div className="p-2 d-flex pt-3">
                  <MDBCol size="8">
                    Total Deductible, Coinsurance, and Copay
                  </MDBCol>
                  <div className="ms-auto">$40.00</div>
                </div>
                <div className="p-2 d-flex">
                  <MDBCol size="8">
                    Maximum out-of-pocket on Insurance Policy (not reached)
                  </MDBCol>
                  <div className="ms-auto">$6500.00</div>
                </div>
                <div className="border-top px-2 mx-2"></div>
                <div className="p-2 d-flex pt-3">
                  <MDBCol size="8">Insurance Responsibility</MDBCol>
                  <div className="ms-auto">
                    <b>$71.76</b>
                  </div>
                </div>
                <div className="p-2 d-flex">
                  <MDBCol size="8">
                    Patient Balance{" "}
                    <span className="fa fa-question-circle text-dark"></span>
                  </MDBCol>
                  <div className="ms-auto">
                    <b>$71.76</b>
                  </div>
                </div>
                <div className="border-top px-2 mx-2"></div>
                <div className="p-2 d-flex pt-3">
                  <MDBCol size="8">
                    <b>Total</b>
                  </MDBCol>
                  <div className="ms-auto">
                    <b className="text-success">$85.00</b>
                  </div>
                </div>
              </div>
            </MDBCol>
          </MDBRow>
        </MDBCardBody>
      </MDBCard>
    </MDBContainer>
  );
}

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 
import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBInput,
  MDBRadio,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer fluid className="py-5" style={{ backgroundColor: "#eee" }}>
      <MDBRow className="d-flex justify-content-center">
        <MDBCol md="8" lg="6" xl="4">
          <MDBCard className="rounded-3">
            <MDBCardBody className="mx-1 my-2">
              <div className="d-flex align-items-center">
                <div>
                  <MDBIcon
                    fab
                    icon="cc-visa"
                    size="4x"
                    className="text-black pe-3"
                  />
                </div>
                <div>
                  <p className="d-flex flex-column mb-0">
                    <b>Martina Thomas</b>
                    <span className="small text-muted">**** 8880</span>
                  </p>
                </div>
              </div>
              <div className="pt-3">
                <div className="d-flex flex-row pb-3">
                  <div
                    className="rounded border border-primary border-2 d-flex w-100 p-3 align-items-center"
                    style={{ backgroundColor: "rgba(18, 101, 241, 0.07)" }}
                  >
                    <div className="d-flex align-items-center pe-3">
                      <MDBRadio
                        name="radioNoLabelX"
                        id="radioNoLabel11"
                        defaultChecked
                      />
                    </div>
                    <div className="d-flex flex-column">
                      <p className="mb-1 small text-primary">
                        Total amount due
                      </p>
                      <h6 className="mb-0 text-primary">$8245</h6>
                    </div>
                  </div>
                </div>
              </div>
              <div className="d-flex flex-row pb-3">
                <div className="rounded border d-flex w-100 px-3 py-2 align-items-center">
                  <div className="d-flex align-items-center pe-3">
                    <MDBRadio name="radioNoLabelX" id="radioNoLabel11" />
                  </div>
                  <div className="d-flex flex-column py-1">
                    <p className="mb-1 small text-primary">Other amount</p>
                    <div className="d-flex flex-row align-items-center">
                      <h6 className="mb-0 text-primary pe-1">$</h6>
                      <MDBInput
                        id="typeNumber"
                        type="number"
                        size="sm"
                        style={{ width: "55px" }}
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div className="d-flex justify-content-between align-items-center pb-1">
                <a href="#!" className="text-muted">
                  Go back
                </a>
                <MDBBtn size="lg">Pay amount</MDBBtn>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}

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
import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBInput,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer fluid className="py-5" style={{ backgroundColor: "#eee" }}>
      <MDBRow className="d-flex justify-content-center">
        <MDBCol md="12" lg="10" xl="8">
          <MDBCard>
            <MDBCardBody className="p-md-5">
              <div>
                <h4>Upgrade your plan</h4>
                <p className="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 className="px-3 py-4 border border-primary border-2 rounded mt-4 d-flex justify-content-between">
                <div className="d-flex flex-row align-items-center">
                  <img
                    src="https://i.imgur.com/S17BrTx.webp"
                    className="rounded"
                    width="60"
                  />
                  <div className="d-flex flex-column ms-4">
                    <span className="h5 mb-1">Small Business</span>
                    <span className="small text-muted">CHANGE PLAN</span>
                  </div>
                </div>
                <div className="d-flex flex-row align-items-center">
                  <sup className="dollar font-weight-bold text-muted">$</sup>
                  <span className="h2 mx-1 mb-0">8,350</span>
                  <span className="text-muted font-weight-bold mt-2">
                    / year
                  </span>
                </div>
              </div>
              <h4 className="mt-5">Payment details</h4>
              <div className="mt-4 d-flex justify-content-between align-items-center">
                <div className="d-flex flex-row align-items-center">
                  <img
                    src="https://i.imgur.com/qHX7vY1.webp"
                    className="rounded"
                    width="70"
                  />
                  <div className="d-flex flex-column ms-3">
                    <span className="h5 mb-1">Credit Card</span>
                    <span className="small text-muted">
                      1234 XXXX XXXX 2570
                    </span>
                  </div>
                </div>
                <MDBInput
                  label="CVC"
                  id="form1"
                  type="text"
                  style={{ width: "70px" }}
                />
              </div>
              <div className="mt-4 d-flex justify-content-between align-items-center">
                <div className="d-flex flex-row align-items-center">
                  <img
                    src="https://i.imgur.com/qHX7vY1.webp"
                    className="rounded"
                    width="70"
                  />
                  <div className="d-flex flex-column ms-3">
                    <span className="h5 mb-1">Credit Card</span>
                    <span className="small text-muted">
                      2344 XXXX XXXX 8880
                    </span>
                  </div>
                </div>
                <MDBInput
                  label="CVC"
                  id="form2"
                  type="text"
                  style={{ width: "70px" }}
                />
              </div>
              <h6 className="mt-4 mb-3 text-primary text-uppercase">
                ADD PAYMENT METHOD
              </h6>
              <MDBInput
                label="Email address"
                id="form3"
                size="lg"
                type="email"
              />
              <MDBBtn block size="lg" className="mt-3">
                {" "}
                Proceed to payment <MDBIcon fas icon="long-arrow-alt-right" />
              </MDBBtn>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}

Credit card payment form

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

visa 
import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBInput,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer fluid className="py-5 gradient-custom">
      <MDBRow className="d-flex justify-content-center py-5">
        <MDBCol md="7" lg="5" xl="4">
          <MDBCard style={{ borderRadius: "15px" }}>
            <MDBCardBody className="p-4">
              <MDBRow className="d-flex align-items-center">
                <MDBCol size="9">
                  <MDBInput
                    label="Card Number"
                    id="form1"
                    type="text"
                    placeholder="1234 5678 9012 3457"
                  />
                </MDBCol>
                <MDBCol size="3">
                  <img
                    src="https://img.icons8.com/color/48/000000/visa.png"
                    alt="visa"
                    width="64px"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <MDBInput
                    label="Cardholder's Name"
                    id="form2"
                    type="text"
                    placeholder="Cardholder's Name"
                  />
                </MDBCol>

                <MDBCol size="6">
                  <MDBInput
                    label="Expiration"
                    id="form2"
                    type="text"
                    placeholder="MM/YYYY"
                  />
                </MDBCol>
                <MDBCol size="3">
                  <MDBInput
                    label="CVV"
                    id="form2"
                    type="text"
                    placeholder="&#9679;&#9679;&#9679;"
                  />
                </MDBCol>
                <MDBCol size="3">
                  <MDBBtn color="info" rounded size="lg">
                    <MDBIcon fas icon="arrow-right" />
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}
.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:

import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBInput,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer
      className="py-5"
      fluid
      style={{
        backgroundImage:
          "url(https://mdbcdn.b-cdn.net/img/Photos/Others/background3.webp)",
      }}
    >
      <MDBRow className=" d-flex justify-content-center">
        <MDBCol md="10" lg="8" xl="5">
          <MDBCard className="rounded-3">
            <MDBCardBody className="p-4">
              <div className="text-center mb-4">
                <h3>Settings</h3>
                <h6>Payment</h6>
              </div>
              <p className="fw-bold mb-4 pb-2">Saved cards:</p>
              <div className="d-flex flex-row align-items-center mb-4 pb-1">
                <img
                  className="img-fluid"
                  src="https://img.icons8.com/color/48/000000/mastercard-logo.png"
                />
                <div className="flex-fill mx-3">
                  <div className="form-outline">
                    <MDBInput
                      label="Card Number"
                      id="form1"
                      type="text"
                      size="lg"
                      value="**** **** **** 3193"
                    />
                  </div>
                </div>
                <a href="#!">Remove card</a>
              </div>
              <div className="d-flex flex-row align-items-center mb-4 pb-1">
                <img
                  className="img-fluid"
                  src="https://img.icons8.com/color/48/000000/visa.png"
                />
                <div className="flex-fill mx-3">
                  <div className="form-outline">
                    <MDBInput
                      label="Card Number"
                      id="form2"
                      type="text"
                      size="lg"
                      value="**** **** **** 4296"
                    />
                  </div>
                </div>
                <a href="#!">Remove card</a>
              </div>
              <p className="fw-bold mb-4">Add new card:</p>
              <MDBInput
                label="Cardholder's Name"
                id="form3"
                type="text"
                size="lg"
                value="Anna Doe"
              />
              <MDBRow className="my-4">
                <MDBCol size="7">
                  <MDBInput
                    label="Card Number"
                    id="form4"
                    type="text"
                    size="lg"
                    value="1234 5678 1234 5678"
                  />
                </MDBCol>
                <MDBCol size="3">
                  <MDBInput
                    label="Expire"
                    id="form5"
                    type="password"
                    size="lg"
                    placeholder="MM/YYYY"
                  />
                </MDBCol>
                <MDBCol size="2">
                  <MDBInput
                    label="CVV"
                    id="form6"
                    type="password"
                    size="lg"
                    placeholder="CVV"
                  />
                </MDBCol>
              </MDBRow>
              <MDBBtn color="success" size="lg" block>
                Add card
              </MDBBtn>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}

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

import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardImage,
  MDBCardTitle,
  MDBCol,
  MDBContainer,
  MDBInput,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer fluid className="py-5" style={{ backgroundColor: "#f9c9aa" }}>
      <MDBRow className="d-flex justify-content-center">
        <MDBCol md="9" lg="7" xl="5">
          <MDBCard>
            <MDBCardImage
              src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-forms/img1.webp"
              position="top"
              alt="..."
            />
            <MDBCardBody>
              <MDBCardTitle className="d-flex justify-content-between mb-0">
                <p className="text-muted mb-0">Retro Chair</p>
                <p className="mb-0">$760</p>
              </MDBCardTitle>
            </MDBCardBody>
            <div className="rounded-bottom" style={{ backgroundColor: "#eee" }}>
              <MDBCardBody>
                {" "}
                <p className="mb-4">Your payment details</p>
                <MDBInput
                  label="Card Number"
                  id="form1"
                  type="text"
                  placeholder="1234 5678 1234 5678"
                  wrapperClass="mb-3"
                />
                <MDBRow className="mb-3">
                  <MDBCol size="6">
                    <MDBInput
                      label="Expire"
                      id="form2"
                      type="password"
                      placeholder="MM/YYYY"
                      wrapperClass="mb-3"
                    />
                  </MDBCol>
                  <MDBCol size="6">
                    <MDBInput
                      label="CVV"
                      id="form4"
                      type="password"
                      placeholder="CVV"
                      wrapperClass="mb-3"
                    />
                  </MDBCol>
                </MDBRow>
                <MDBBtn block color="info">
                  Order now
                </MDBBtn>
              </MDBCardBody>
            </div>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}