Create an Online Payment Project using HTML CSS & JavaScript
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:
Approach:
- Create “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:
Example: 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 = "cards.png" 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.2 s linear; } .container { display : flex; justify- content : center ; align-items: center ; min-height : 100 vh; 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:
Contact Us