Create an Online Payment Project using HTML CSS & JavaScript Last Updated : 15 Jul, 2024 Comments Improve Suggest changes Like Article Like Report In this article, We will create a responsive online payment page using HTML, CSS & Javascript.Here, we will learn about the project's structure before beginning to code each page individually. To ensure adequate understanding, we also gave the project's output after it was created.Prerequisites:HTMLCSSJAVASCRIPTApproachCreate "index.html" file, this is the skeleton of the project. Create the main structure using outer <div>, and other HTML tags. Create two columns in the <form>, one for the billing address and the other for the payment. In this project, we will create a payment using cards only, that is why we will use an image of cards after that added the checkout button.Now add the CSS file <head> section of "index.html". Add background color, margin, and padding. Here we added responsiveness, and hover effects for a better view.Now add "index.js" to the javascript file before the <body> tag ends in the "index.html" file. So that the javascript will be rendered with the body tag in web browsers.In JavaScript, we will add the logic to split the card number when the user inputs their card number.Project Structure:File StructureExample: This example shows the implementation of above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Online Payment-Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <form action="#"> <div class="row"> <div class="col"> <h3 class="title"> Billing Address </h3> <div class="inputBox"> <label for="name"> Full Name: </label> <input type="text" id="name" placeholder="Enter your full name" required> </div> <div class="inputBox"> <label for="email"> Email: </label> <input type="text" id="email" placeholder="Enter email address" required> </div> <div class="inputBox"> <label for="address"> Address: </label> <input type="text" id="address" placeholder="Enter address" required> </div> <div class="inputBox"> <label for="city"> City: </label> <input type="text" id="city" placeholder="Enter city" required> </div> <div class="flex"> <div class="inputBox"> <label for="state"> State: </label> <input type="text" id="state" placeholder="Enter state" required> </div> <div class="inputBox"> <label for="zip"> Zip Code: </label> <input type="number" id="zip" placeholder="123 456" required> </div> </div> </div> <div class="col"> <h3 class="title">Payment</h3> <div class="inputBox"> <label for="name"> Card Accepted: </label> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240715140014/Online-Payment-Project.webp" alt="credit/debit card image"> </div> <div class="inputBox"> <label for="cardName"> Name On Card: </label> <input type="text" id="cardName" placeholder="Enter card name" required> </div> <div class="inputBox"> <label for="cardNum"> Credit Card Number: </label> <input type="text" id="cardNum" placeholder="1111-2222-3333-4444" maxlength="19" required> </div> <div class="inputBox"> <label for="">Exp Month:</label> <select name="" id=""> <option value="">Choose month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> </div> <div class="flex"> <div class="inputBox"> <label for="">Exp Year:</label> <select name="" id=""> <option value="">Choose Year</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> </select> </div> <div class="inputBox"> <label for="cvv">CVV</label> <input type="number" id="cvv" placeholder="1234" required> </div> </div> </div> </div> <input type="submit" value="Proceed to Checkout" class="submit_btn"> </form> </div> <script type="text/javascript" src="index.js"></script> </body> </html> CSS @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; border: none; outline: none; font-family: 'Poppins', sans-serif; text-transform: capitalize; transition: all 0.2s linear; } .container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 25px; background: #d6eef1; } .container form { width: 700px; padding: 20px; background: #fff; box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); } .container form .row { display: flex; flex-wrap: wrap; gap: 15px; } .container form .row .col { flex: 1 1 250px; } .col .title { font-size: 20px; color: rgb(237, 55, 23); padding-bottom: 5px; } .col .inputBox { margin: 15px 0; } .col .inputBox label { margin-bottom: 10px; display: block; } .col .inputBox input, .col .inputBox select { width: 100%; border: 1px solid #ccc; padding: 10px 15px; font-size: 15px; } .col .inputBox input:focus, .col .inputBox select:focus { border: 1px solid #000; } .col .flex { display: flex; gap: 15px; } .col .flex .inputBox { flex: 1 1; margin-top: 5px; } .col .inputBox img { height: 34px; margin-top: 5px; filter: drop-shadow(0 0 1px #000); } .container form .submit_btn { width: 100%; padding: 12px; font-size: 17px; background: rgb(1, 143, 34); color: #fff; margin-top: 5px; cursor: pointer; letter-spacing: 1px; } .container form .submit_btn:hover { background: #3d17fb; } input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { display: none; } JavaScript let cardNumInput = document.querySelector('#cardNum') cardNumInput.addEventListener('keyup', () => { let cNumber = cardNumInput.value cNumber = cNumber.replace(/\s/g, "") if (Number(cNumber)) { cNumber = cNumber.match(/.{1,4}/g) cNumber = cNumber.join(" ") cardNumInput.value = cNumber } }) Output:Create an Online Payment Project using HTML CSS & JavaScript Comment More infoAdvertise with us Next Article Create an Online Payment Project using HTML CSS & JavaScript skelaf Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League JavaScript-Projects Geeks Premier League 2023 +1 More Similar Reads Create a User Polls Project using HTML CSS & JavaScript Creating a user polls project has various valuable purposes, including gathering feedback, engaging users, personalizing content, fostering community, conducting research, A/B testing, and improving the user experience. Clear objectives are crucial, and in this example, we focus on collecting data o 3 min read How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v 7 min read Create an Online Payment UI design using HTML/CSS Creating an Online Payment UI design using HTML/CSS involves structuring elements to facilitate secure and intuitive payment transactions. This entails designing visually appealing forms, buttons, and layouts while ensuring responsiveness and accessibility for seamless user interactions throughout t 3 min read Create a User Blocking project using HTML CSS & JavaScript The User Blocking project is a simple application that allows users to block or unblock certain users. It provides a basic interface to add users to a block list and remove them from the list. In this article, we are going to implement the functionality that can block a user by clicking a button and 4 min read Create a Trigonometry Toolbox using HTML CSS and JavaScript This article will demonstrate how we can create a Trigonometry Toolbox using HTML, CSS, and JavaScript. Here, we have to give an angle in degrees as input in the input box and it calculates the corresponding value of the given angle. The application is user-friendly users can easily find the trigono 3 min read How to create Twitter Login Page using HTML CSS JavaScript ? In this article, we will see How To Make a Twitter Login Page Like Using HTML CSS JavaScript. The code produces an attractive login page with a design similar to the Twitter login interface. The JavaScript incorporates straightforward validation for the email input field upon submitting the form.Pre 4 min read Create a Prime Number Finder using HTML CSS and JavaScript In this article, we will see how to create a Prime Number Finder using HTML, CSS, and JavaScript. The main objective of this project is to allow users to input a number and check if it is a prime number or not. Prime numbers are those, that can only be divided by 1 and themselves. We'll develop a ba 3 min read Create a Bookmark Landing Page using HTML CSS and JavaScript In this article, we are going to implement a Bookmark Landing Page using HTML, CSS, and JavaScript. Users can effortlessly add, manage, and remove bookmarks, resulting in a tidy digital library for their favorite websites. Bookmarking the Landing Page refers to a web page or website where the users 4 min read How to create Pay Role Management Webpage using HTML CSS JavaScript ? In this article, we are going to make a Pay Role Management webpage with Javascript. In this project, we are going to learn and clear the concepts of basic javascript.Prerequisites: The pre-requisites for this project are-ES6 JavaScriptQuery SelectorsApproach: To create our Pay Role Management webpa 6 min read Create an Online Art Auction using HTML, CSS and JavaScript In this article, we'll guide you through the process of creating an online art auction website using HTML, CSS, and JavaScript. Art auctions are exciting events where collectors and enthusiasts bid on prized artworks. It will provide a foundation for displaying art listings and creating an appealing 3 min read Like