Online shopping has become increasingly popular, making secure and user-friendly checkout forms essential for e-commerce websites. One crucial element of these forms is the credit card checkout section, where customers input their payment information securely.
In this blog post, we’ll walk through the process of creating a simple yet effective credit card checkout form using HTML and CSS.
Step 1: HTML Structure for Payment Details Form
The given HTML defines the structure and content of a payment details form. It utilizes various HTML elements such as <div>, <svg>, <label>, and <input> to create the layout and input fields for capturing information like name, card number, expiration date, and CVC. Additionally, it uses inline SVGs for visual elements like icons. The HTML structure is organized hierarchically with appropriate classes and IDs for styling and JavaScript interaction. Here is Code Example
<div class="main"> <div class="container"> <svg id="exit" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.35 8.95C4.004 6.173 6.173 4.004 8.95 3.353C10.956 2.882 13.044 2.882 15.05 3.353C17.827 4.004 19.996 6.173 20.647 8.95C21.118 10.956 21.118 13.044 20.647 15.05C19.996 17.827 17.827 19.996 15.05 20.647C13.044 21.118 10.956 21.118 8.95 20.647C6.173 19.996 4.004 17.827 3.35 15.05C2.882 13.044 2.882 10.956 3.35 8.95Z" stroke="#1B1B1B" stroke-width="1.5"/> <path d="M13.768 10.232L10.232 13.768M13.768 13.768L10.232 10.232" stroke="#1B1B1B" stroke-width="1.5" stroke-linecap="round"/> </svg> <div class="heading"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.399 7.646C13.495 7.377 13.88 7.377 13.976 7.646L14.24 8.381C14.271 8.467 14.34 8.535 14.427 8.565L15.171 8.826C15.443 8.921 15.443 9.301 15.171 9.396L14.427 9.657C14.34 9.687 14.271 9.755 14.24 9.841L13.976 10.576C13.88 10.845 13.495 10.845 13.399 10.576L13.135 9.841C13.104 9.755 13.036 9.687 12.948 9.657L12.204 9.396C11.932 9.301 11.932 8.921 12.204 8.826L12.948 8.565C13.036 8.535 13.104 8.467 13.135 8.381L13.399 7.646Z" fill="#1B1B1B"/> <path d="M16.307 10.912C16.372 10.733 16.628 10.733 16.693 10.912L16.868 11.402C16.889 11.46 16.935 11.505 16.993 11.525L17.489 11.699C17.67 11.762 17.67 12.016 17.489 12.079L16.993 12.253C16.935 12.273 16.889 12.318 16.868 12.376L16.693 12.866C16.628 13.045 16.372 13.045 16.307 12.866L16.132 12.376C16.111 12.318 16.065 12.273 16.007 12.253L15.511 12.079C15.33 12.016 15.33 11.762 15.511 11.699L16.007 11.525C16.065 11.505 16.111 11.46 16.132 11.402L16.307 10.912Z" fill="#1B1B1B"/> <path d="M17.769 3.292C17.909 2.903 18.466 2.903 18.606 3.292L19.084 4.626C19.129 4.75 19.228 4.848 19.354 4.892L20.705 5.365C21.098 5.503 21.098 6.053 20.705 6.191L19.354 6.663C19.228 6.707 19.129 6.805 19.084 6.93L18.606 8.264C18.466 8.653 17.909 8.653 17.769 8.264L17.291 6.93C17.246 6.805 17.147 6.707 17.021 6.663L15.67 6.191C15.277 6.053 15.277 5.503 15.67 5.365L17.021 4.892C17.147 4.848 17.246 4.75 17.291 4.626L17.769 3.292Z" fill="#1B1B1B"/> <path d="M3 13.46C3 17.624 6.474 21 10.76 21C14.059 21 16.877 19 18 16.178C17.111 16.584 16.118 16.811 15.071 16.811C11.261 16.811 8.173 13.81 8.173 10.108C8.173 8.56 8.713 7.135 9.621 6C5.875 6.536 3 9.671 3 13.46Z" stroke="#1B1B1B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h1>Payment details</h1> </div> <label for="name">Name</label> <input type="text" id="name" name="name" placeholder="Name"/> <br> <label for="card">Card number</label> <input type="text" minlength="16" maxlength="16" id="card" name="card" placeholder="0000 0000 0000 0000"/> <br> <div class="exp-cvc"> <div class="expiration"> <label for="expiry">Expiration date</label> <input class="inputCard" name="expiry" id="expiry" type="text" required placeholder="00/00"/> <br> </div> <div class="security"> <label for="cvc">CVC</label> <input type="text" minlength="3" maxlength="4" id="cvc" name="cvc" placeholder="XXX" /> <br> </div> </div> <div class="btn"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.877 16.168C13.029 15.753 13.638 15.753 13.79 16.168L14.207 17.302C14.255 17.435 14.364 17.539 14.501 17.587L15.677 17.988C16.108 18.135 16.108 18.722 15.677 18.869L14.501 19.271C14.364 19.318 14.255 19.422 14.207 19.555L13.79 20.689C13.638 21.104 13.029 21.104 12.877 20.689L12.46 19.555C12.411 19.422 12.303 19.318 12.165 19.271L10.989 18.869C10.559 18.722 10.559 18.135 10.989 17.988L12.165 17.587C12.303 17.539 12.411 17.435 12.46 17.302L12.877 16.168Z" stroke="#1B1B1B" stroke-width="1.5" stroke-linejoin="round"/> <path d="M14.639 3.473C14.871 2.842 15.796 2.842 16.027 3.473L16.821 5.633C16.895 5.835 17.06 5.994 17.269 6.065L19.51 6.831C20.163 7.054 20.163 7.946 19.51 8.169L17.269 8.935C17.06 9.006 16.895 9.165 16.821 9.367L16.027 11.527C15.796 12.158 14.871 12.158 14.639 11.527L13.846 9.367C13.771 9.165 13.607 9.006 13.397 8.935L11.157 8.169C10.503 7.946 10.503 7.054 11.157 6.831L13.397 6.065C13.607 5.994 13.771 5.835 13.846 5.633L14.639 3.473Z" stroke="#1B1B1B" stroke-width="1.5" stroke-linejoin="round"/> <path d="M6.486 9.363C6.658 8.879 7.342 8.879 7.514 9.363L7.982 10.686C8.037 10.841 8.159 10.963 8.314 11.018L9.637 11.486C10.121 11.658 10.121 12.342 9.637 12.514L8.314 12.982C8.159 13.037 8.037 13.159 7.982 13.314L7.514 14.637C7.342 15.121 6.658 15.121 6.486 14.637L6.018 13.314C5.963 13.159 5.841 13.037 5.686 12.982L4.363 12.514C3.879 12.342 3.879 11.658 4.363 11.486L5.686 11.018C5.841 10.963 5.963 10.841 6.018 10.686L6.486 9.363Z" stroke="#1B1B1B" stroke-width="1.5" stroke-linejoin="round"/> </svg> <span id="submit">Submit</span> </div> </div> </div>
Step 2: CSS Styling for Payment Details Form
This CSS code provides styles for a payment details form, including layout, typography, input fields, buttons, and hover effects, aiming for a professional and visually appealing design.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
display: flex;
align-items: center;
justify-content: center;
background-color:#54553b;
font-family: inter, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 50px;
margin-bottom: 80px;position: relative;
width: 48vw;
height: auto;border-radius: 16px;
background-color: #5eca5529;
border: 2px solid #1B1B1B;
box-sizing: border-box;
box-shadow: 6px 6px 0px #1B1B1B;
border-radius: 8px;
}
.heading {
display: flex;
flex-direction: row;
align-items: center;
}
#exit {
align-self: flex-end;
}
h1 {
margin-left: 10px;
font-size: 2rem;
font-weight: 800;
}
label {
font-weight: 600;
}
input {
display: flex;
flex-direction: row;
align-items: flex-start;
margin-top: 10px;
padding: 16px 24px;
width: 90%;
height: 15%;
left: 1048px;
top: 16px;
border: 2px solid #1B1B1B;
box-sizing: border-box;
border-radius: 16px;
transition: 0.2s;
}
textarea:focus, input:focus{
outline: none;
background: #605A37;
border: 3px solid #1B1B1B;
border-radius: 16px;
}
.exp-cvc {
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
}
.expiration {
font-size: 0.75rem;
width: 50%;
margin-right: 20px;
}
.security {
font-size: 0.75rem;
width: 50%;
margin-left: 20px;
}
span {
padding-left: 5px;
cursor: pointer;
}
.btn {
background-color: grey;
border: 2px solid #1B1B1B;
box-sizing: border-box;
border-radius: 16px;
padding: 16px 32px 16px 16px;
text-align: center;
font-weight: 800;
margin-top: 20px;
width: 141px;
height: 56px;
left: 16px;
top: 88px;
display: flex;
flex-direction: row;
align-items: center;
align-self: flex-end;
cursor: pointer;
transition: 0.16s ease-out;
}
.btn:hover {
background: #B8D4D94D;
border: 4px solid #1B1B1B;
box-sizing: border-box;
box-shadow: 0px 0px 0px 4px #C1BFFA;
border-radius: 16px;
}
#exit {
cursor: pointer;
}How To Design Credit Card Checkout With HTML & CSS Demo
By following these simple steps, you can create a credit card checkout form using HTML and CSS for your e-commerce website. Remember to prioritize user experience, security, and data integrity when designing and implementing checkout forms.
