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: