Create an Online Payment UI design using HTML/CSS

Last Updated : 04 Mar, 2024

For anyone who is running an online business, checkout becomes an important part of the selling process to maintain the convenience for online sales and Fast transactions. An appealing user interface (UI) will help us in bringing in potential visitors and facilitate the user experience.

In this article, we will be creating a payment page for transaction purposes. The simple project is a perfect example of how easily we can make a User Interface design using HTML and CSS.

Steps to Create Online Payment UI Design using HTML and CSS

First create the HTML structure starting with a main content div for the brand name (e.g., “GeeksforGeeks”).
Create a central content div for displaying the course price and a short description.
Add a section for payment options, such as buttons for applying coupons and paying with Netbanking.
Design a card details section with input fields for the card number, expiry date, CVV, and cardholder name. Include a “Submit” button to finalize the payment process.
At last Apply styling with CSS for an attractive background, color scheme, and font choices to enhance the design.

Example: This example demonstrates designing an Online payment UI with the help of HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet"
          href="style.css" class="css" />
</head>
 
<body>
    <div class="container">
        <div class="main-content">
            <p class="text">GeeksforGeeks</p>
        </div>
 
        <div class="centre-content">
            <h1 class="price">2499<span>/-</span></h1>
            <p class="course">
                Buy DSA Self-Paced Course Now !
            </p>
        </div>
 
        <div class="last-content">
            <button type="button" class="pay-now-btn">
                Apply Coupons
            </button>
            <button type="button" class="pay-now-btn">
                Pay with Netbanking
            </button>
 
            <!-- <button type="button" class="pay-now-btn">
        Netbanking options
        </button> -->
        </div>
 
        <div class="card-details">
            <p>Pay using Credit or Debit card</p>
 
            <div class="card-number">
                <label> Card Number </label>
                <input type="text" class="card-number-field"
                       placeholder="###-###-###" />
            </div>
            <br />
            <div class="date-number">
                <label> Expiry Date </label>
                <input type="text" class="date-number-field"
                       placeholder="DD-MM-YY" />
            </div>
 
            <div class="cvv-number">
                <label> CVV number </label>
                <input type="text" class="cvv-number-field"
                       placeholder="xxx" />
            </div>
            <div class="nameholder-number">
                <label> Card Holder name </label>
                <input type="text" class="card-name-field"
                       placeholder="Enter your Name" />
            </div>
            <button type="submit" class="submit-now-btn">
                Submit
            </button>
        </div>
    </div>
</body>
 
</html>

CSS

/*Filename: style.css File  */
* {
    margin: 0;
    padding: 0;
}
 
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}
 
.container {
    height: 900px;
    width: 400px;
    background-image: linear-gradient(#1e6b30, #308d46);
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    position: absolute;
    border-bottom-left-radius: 180px;
    border-top-right-radius: 150px;
}
 
.main-content {
    height: 235px;
    background-color: #1b9236;
    border-bottom-left-radius: 90px;
    border-bottom-right-radius: 80px;
    border-top: #1e6b30;
}
 
.text {
    text-align: center;
    font-size: 300%;
    text-decoration: aliceblue;
    color: aliceblue;
}
 
.course {
    color: black;
    font-size: 25px;
    font-weight: bolder;
}
 
.centre-content {
    height: 180px;
    margin: -70px 30px 20px;
    color: aliceblue;
    text-align: center;
    font-size: 20px;
    border-radius: 25px;
    padding-top: 0.5px;
    background-image: linear-gradient(#1e6b30, #308d46);
}
 
.centre-content-h1 {
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: normal;
}
 
.price {
    font-size: 60px;
    margin-left: 5px;
    bottom: 15px;
    position: relative;
}
 
.pay-now-btn {
    cursor: pointer;
    color: #fff;
    height: 50px;
    width: 290px;
    border: none;
    margin: 5px 30px;
    background-color: rgb(71, 177, 61);
    position: relative;
}
 
.card-details {
    background: rgb(8, 49, 14);
    color: rgb(225, 223, 233);
    margin: 10px 30px;
    padding: 10px;
    /* border-bottom-left-radius: 80px; */
}
 
.card-details p {
    font-size: 15px;
}
 
.card-details label {
    font-size: 15px;
    line-height: 35px;
}
 
.submit-now-btn {
    cursor: pointer;
    color: #fff;
    height: 30px;
    width: 240px;
    border: none;
    margin: 5px 30px;
    background-color: rgb(71, 177, 61);
}