Checkout
PHP
<section class="checkout">
<div class="wrapper">
<form action="/cart_processor.php" class="checkout_form || validate_form" id="checkout" method="post">
<div class="row_f || checkout_wrap">
<div class="col_6 || col_sm_12">
<div class="checkout_header || checkout_header_first">
<div class="checkout_title">
<span>1</span>
<h2>Shipping details</h2>
</div>
<div class="checkout_checkbox">
<input type="checkbox" class="checkbox || checkbox_input" name="shipping[pickup]" value="1" id="is_pickup" onclick="$('#shipping_inputs').slideToggle();">
<label for="is_pickup" class="checkbox_same">Pickup At Store</label>
</div>
</div>
<div class="row_f || checkout_row">
<div class="col_6 || col_xs_12">
<label>
<span>First name:</span>
<input name="shipping[name]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Last name:</span>
<input name="shipping[lastname]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Address:</span>
<input name="shipping[address]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>City:</span>
<input name="shipping[town]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_6 || col_xs_12">
<span>Province:</span>
<label class="label_select">
<select name="shipping[province]" class="input || validate_select" id="calc_shipping_state">
<option value="" selected="">Select Province</option>
<option value="AB"> Alberta</option>
<option value="BC"> British Columbia</option>
<option value="MB"> Manitoba</option>
<option value="NB"> New Brunswick</option>
<option value="NF"> Newfoundland</option>
<option value="NT"> North West Territory</option>
<option value="NS"> Nova Scotia</option>
<option value="ON"> Ontario</option>
<option value="PE"> Prince Edward Island</option>
<option value="QC"> Quebec</option>
<option value="SK"> Saskatchewan</option>
<option value="YT"> Yukon Territory</option>
</select>
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Postal Code:</span>
<input name="shipping[postcode]" class="input || postal_mask || validate" type="text" value="" inputmode="text">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Phone:</span>
<input name="shipping[phone]" class="input || phone_us || validate_tel" type="text" value="" id="phone">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Email:</span>
<input name="shipping[email]" class="input || validate_email" type="text" value="">
</label>
</div>
<div class="col_12">
<label>
<span>Notes about your order, e.g. special notes for delivery:</span>
<textarea name="notes" class="input"> </textarea>
</label>
</div>
</div>
<div class="checkout_header">
<div class="checkout_title">
<span>2</span>
<h2>Billing details</h2>
</div>
<div class="checkout_checkbox" id="billing_info">
<input type="checkbox" class="checkbox || checkbox_input" name="billing[same]" value="1" id="same_as_billing" onclick="$('#billing_inputs').slideToggle();">
<label for="same_as_billing" class="checkbox_same">Same as Shipping</label>
</div>
</div>
<div class="row_f || checkout_row">
<div class="col_6 || col_xs_12">
<label>
<span>First name:</span>
<input name="billing[name]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Last name:</span>
<input name="billing[lastname]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Address:</span>
<input name="billing[address]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>City:</span>
<input name="billing[town]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_6 || col_xs_12">
<span>Province:</span>
<label class="label_select">
<select name="billing[province]" class="input || validate_select">
<option value="" selected="">Select Province</option>
<option value="AB"> Alberta</option>
<option value="BC"> British Columbia</option>
<option value="MB"> Manitoba</option>
<option value="NB"> New Brunswick</option>
<option value="NF"> Newfoundland</option>
<option value="NT"> North West Territory</option>
<option value="NS"> Nova Scotia</option>
<option value="ON"> Ontario</option>
<option value="PE"> Prince Edward Island</option>
<option value="QC"> Quebec</option>
<option value="SK"> Saskatchewan</option>
<option value="YT"> Yukon Territory</option>
</select>
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Postal Code:</span>
<input name="billing[postcode]" class="input || postal_mask || validate" type="text" value="" inputmode="text">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Phone:</span>
<input name="billing[phone]" class="input || phone_us || validate_tel" type="text" value="" id="phone">
</label>
</div>
<div class="col_6 || col_xs_12">
<label>
<span>Email:</span>
<input name="billing[email]" class="input || validate_email" type="text" value="">
</label>
</div>
</div>
<div class="checkout_header">
<div class="checkout_title">
<span>3</span>
<h2>Payment Info</h2>
</div>
</div>
<div class="row_f || checkout_row">
<div class="col_12">
<label>
<span>Card Holder Name:</span>
<input name="payment[name]" class="input || validate" type="text" value="">
</label>
</div>
<div class="col_9 || col_sm_8">
<label>
<span>Credit Card Number:</span>
<input name="payment[card_number]" class="input || validate || card_number" value="">
</label>
</div>
<div class="col_3 || col_sm_4">
<label>
<span>CVV/CVD:</span>
<input name="payment[cvv]" class="input || validate || cvv" type="number" value="">
</label>
</div>
<div class="col_6">
<span>Expiry Month:</span>
<label class="label_select">
<select name="payment[expiry_month]" class="input" onchange="checkExpiry()" id="expiry_month">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</label>
</div>
<div class="col_6">
<span>Expiry Year:</span>
<label class="label_select">
<select name="payment[expiry_year]" class="input" onchange="checkExpiry()" id="expiry_year">
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</label>
</div>
</div>
</div>
<div class="col_6 || col_sm_12 || order_col || sticky_block">
<div class="checkout_header || checkout_header_order">
<div class="checkout_title">
<h2>Your order</h2>
</div>
</div>
<div class="order_wrap">
<div class="checkout_order_item">
<a href="/img/product1.png" data-fancybox="product1" class="img_wrap">
<img src="/img/product1.png" alt="">
<span class="qty">1</span>
</a>
<div class="checkout_order_desc">
<div class="checkout_order_name">
<p>Hayward Aquavac 600 robotic pool cleaner with caddy</p>
</div>
<div class="checkout_order_price">
<p>$1449.00</p>
</div>
</div>
</div>
<div class="checkout_order_item">
<a href="/img/product2.png" data-fancybox="product2" class="img_wrap">
<img src="/img/product2.png" alt="">
<span class="qty">10</span>
</a>
<div class="checkout_order_desc">
<div class="checkout_order_name">
<p>Hayward Aquavac 600 robotic pool cleaner</p>
</div>
<div class="checkout_order_price">
<p>$449.00</p>
</div>
</div>
</div>
<div class="checkout_order_item">
<a href="/img/product3.png" data-fancybox="product3" class="img_wrap">
<img src="/img/product3.png" alt="">
<span class="qty">111</span>
</a>
<div class="checkout_order_desc">
<div class="checkout_order_name">
<p>Hayward Aquavac 600</p>
</div>
<div class="checkout_order_price">
<p>$2449.00</p>
</div>
</div>
</div>
</div>
<div class="row_f || cart_totals_wrap">
<div class="col_12">
<h4>Cart totals</h4>
</div>
<div class="col_6">
<p>Subtotal</p>
</div>
<div class="col_6 || tr">
<p> $<span>179.99</span></p>
</div>
<div class="col_6">
<p>Shipping</p>
</div>
<div class="col_6 || tr">
<p><span>Free</span></p>
</div>
<div class="col_12">
<hr>
</div>
<div class="col_6">
<p>HST (<span>0</span>%)</p>
</div>
<div class="col_6 || tr">
<p><span>No Tax</span></p>
</div>
<div class="col_12">
<hr>
</div>
<div class="col_6 || total_col">
<p>Total</p>
</div>
<div class="col_6 || total_col || total_col_price || tr">
<p>$<span>179.99</span></p>
</div>
<div class="col_12">
<hr>
</div>
<div class="col_12 || tc">
<button type="submit" class="button || btn_icon">
<?= svg('iconCheckList', '') ?>
<span>Place Order</span>
</button>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</form>
</div>
</section>CSS
.checkout .checkout_wrap{-webkit-box-align:start;-webkit-align-items:flex-start;-moz-box-align:start;-ms-flex-align:start;align-items:flex-start}
.checkout .checkout_header{font-size:0;position:relative;text-align:justify;padding:2rem 0;border-bottom:.1rem solid #ccc}
.checkout .checkout_header.checkout_header_first{padding:0 0 2rem}
.checkout .checkout_header.checkout_header_order{padding:.2rem 0 2.1rem}
.checkout .checkout_header::after{content:'';display:inline-block;width:100%}
.checkout .checkout_title{display:inline-block;vertical-align:middle;width:55%}
.checkout .checkout_title span{font-size:2rem;font-weight:700;color:#fff;background-color:#066978;padding:0 .8rem;margin:0 1rem 0 0;display:inline-block;vertical-align:middle}
.checkout .checkout_title h2{display:inline-block;vertical-align:middle;font-size:2.4rem;line-height:1;font-weight:700;margin:0;color:#09a5be;text-align:left}
.checkout .checkout_checkbox{display:inline-block;vertical-align:middle;text-align:right;width:45%}
.checkout .checkout_checkbox input[type='checkbox'] + label{margin:0}
.checkout .checkout_row{margin-top:1.1rem;margin-bottom:.7rem;position:relative}
.checkout .checkout_row:last-child::after{display:none}
.checkout .checkout_row::after{content:'';position:absolute;bottom:-.7rem;left:1.5rem;display:block;width:-webkit-calc(100% - 3rem);width:-moz-calc(100% - 3rem);width:calc(100% - 3rem);height:.1rem;background-color:#ccc}
.checkout .order_wrap{margin:0 0 2rem}
.checkout .checkout_order_item{padding:1rem 0;font-size:0;border-bottom:.1rem solid #ccc}
.checkout .checkout_order_item .img_wrap{display:inline-block;vertical-align:middle;position:relative;width:8rem;margin:0 1rem 0 0}
.checkout .checkout_order_item .img_wrap img{width:8rem;height:8rem;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;';-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.checkout .checkout_order_item .img_wrap .qty{position:absolute;top:0;right:0;font-size:1.4rem;font-weight:500;height:2rem;line-height:1.9rem;-webkit-border-radius:2rem;-moz-border-radius:2rem;border-radius:2rem;text-align:center;white-space:nowrap;padding:0 .6rem;background-color:#09a5be;color:#fff;z-index:3}
.checkout .checkout_order_item .checkout_order_desc{display:inline-block;vertical-align:middle;width:-webkit-calc(100% - 9rem);width:-moz-calc(100% - 9rem);width:calc(100% - 9rem)}
.checkout .checkout_order_item .checkout_order_desc p{font-size:1.6rem;line-height:1.3;margin:0}
.checkout .checkout_order_item .checkout_order_name{display:inline-block;vertical-align:middle;width:70%;margin:0 1rem 0 0}
.checkout .checkout_order_item .checkout_order_price{display:inline-block;vertical-align:middle;text-align:right;width:-webkit-calc(30% - 1rem);width:-moz-calc(30% - 1rem);width:calc(30% - 1rem)}
.checkout .checkout_order_item .checkout_order_price p{color:#066978}
.checkout .cart_totals_wrap{width:50%;float:right;margin:0}
.checkout .cart_totals_wrap .total_col p{font-size:1.4rem}
.checkout .cart_totals_wrap p{font-size:1.4rem}
@media only screen and (max-width: 992px) {
.checkout .checkout_title h2{font-size:1.8rem}
.checkout .checkout_title span{font-size:1.9rem}
.checkout .checkout_row label span{font-size:1.4rem}
.checkout .checkout_checkbox input[type='checkbox'] + label{font-size:1.4rem}
.checkout .cart_totals_wrap{width:75%}
.checkout .checkout_order_item .checkout_order_desc p{font-size:1.4rem}
.checkout .checkout_order_item .img_wrap{width:6rem}
.checkout .checkout_order_item .img_wrap img{width:6rem;height:6rem}
.checkout .checkout_order_item .checkout_order_desc{width:-webkit-calc(100% - 7rem);width:-moz-calc(100% - 7rem);width:calc(100% - 7rem)}
.checkout .input{height:3rem}
.checkout textarea.input{min-height:7.5rem}
}
@media only screen and (max-width: 767px) {
.checkout .cart_totals_wrap{width:25rem}
}
@media only screen and (max-width: 370px) {
.checkout .checkout_title{display:block;width:100%}
.checkout .checkout_checkbox{margin:1.4rem 0 0;width:100%;text-align:left}
.checkout .checkout_order_item .checkout_order_desc p{font-size:1.2rem}
}SCSS
/* Vars */
$main: #09a5be;
$dark: #066978;
$white: #ffffff;
.checkout {
.checkout_wrap {
align-items: flex-start;
}
.checkout_header {
font-size: 0;
position: relative;
text-align: justify;
padding: 2rem 0 2rem;
border-bottom: .1rem solid #cccccc;
&.checkout_header_first {
padding: 0 0 2rem;
}
&.checkout_header_order {
padding: 0.2rem 0 2.1rem;
}
&::after {
content: '';
display: inline-block;
width: 100%;
}
}
.checkout_title {
display: inline-block;
vertical-align: middle;
width: 55%;
span {
font-size: 2rem;
font-weight: 700;
color: $white;
background-color: $dark;
padding: 0 0.8rem;
margin: 0 1rem 0 0;
display: inline-block;
vertical-align: middle;
}
h2 {
display: inline-block;
vertical-align: middle;
font-size: 2.4rem;
line-height: 1;
font-weight: 700;
margin: 0;
color: $main;
text-align: left;
}
}
.checkout_checkbox {
display: inline-block;
vertical-align: middle;
text-align: right;
width: 45%;
input[type='checkbox'] + label {
margin: 0;
}
}
.checkout_row {
margin-top: 1.1rem;
margin-bottom: 0.7rem;
position: relative;
&:last-child {
&::after {
display: none;
}
}
&::after {
content: '';
position: absolute;
bottom: -.7rem;
left: 1.5rem;
display: block;
width: calc(100% - 3rem);
height: .1rem;
background-color: #cccccc;
}
}
.order_wrap {
margin: 0 0 2rem;
}
.checkout_order_item {
padding: 1rem 0;
font-size: 0;
border-bottom: .1rem solid #cccccc;
.img_wrap {
display: inline-block;
vertical-align: middle;
position: relative;
width: 8rem;
margin: 0 1rem 0 0;
img {
width: 8rem;
height: 8rem;
object-fit: contain;
font-family: 'object-fit: contain;';
-webkit-transition: .3s linear;
-o-transition: .3s linear;
-moz-transition: .3s linear;
transition: .3s linear;
}
.qty {
position: absolute;
top: 0;
right: 0;
font-size: 1.4rem;
font-weight: 500;
height: 2rem;
line-height: 1.9rem;
border-radius: 2rem;
text-align: center;
white-space: nowrap;
padding: 0 0.6rem;
background-color: $main;
color: $white;
z-index: 3;
}
}
.checkout_order_desc {
display: inline-block;
vertical-align: middle;
width: calc(100% - 9rem);
p {
font-size: 1.6rem;
line-height: 1.3;
margin: 0;
}
}
.checkout_order_name {
display: inline-block;
vertical-align: middle;
width: 70%;
margin: 0 1rem 0 0;
}
.checkout_order_price {
display: inline-block;
vertical-align: middle;
text-align: right;
width: calc(30% - 1rem);
p {
color: $dark;
}
}
}
.cart_totals_wrap {
width: 50%;
float: right;
margin: 0;
.total_col {
p {
font-size: 1.4rem;
}
}
p {
font-size: 1.4rem;
}
}
}
@media only screen and (max-width: 992px) {
.checkout .checkout_title h2 {font-size: 1.8rem;}
.checkout .checkout_title span {font-size: 1.9rem;}
.checkout .checkout_row label span{font-size: 1.4rem}
.checkout .checkout_checkbox input[type='checkbox'] + label {font-size: 1.4rem}
.checkout .cart_totals_wrap {width: 75%;}
.checkout .checkout_order_item .checkout_order_desc p {font-size: 1.4rem;}
.checkout .checkout_order_item .img_wrap {width: 6rem;}
.checkout .checkout_order_item .img_wrap img {width: 6rem;height: 6rem;}
.checkout .checkout_order_item .checkout_order_desc {width: calc(100% - 7rem);}
.checkout .input {height: 3rem;}
.checkout textarea.input {min-height: 7.5rem;}
}
@media only screen and (max-width: 767px) {
.checkout .cart_totals_wrap {width: 25rem;}
}
@media only screen and (max-width: 370px) {
.checkout .checkout_title {display: block;width: 100%;}
.checkout .checkout_checkbox {margin:1.4rem 0 0;width: 100%;text-align: left}
.checkout .checkout_order_item .checkout_order_desc p {font-size: 1.2rem;}
}Mask libraries
JavaScript
// Phone
$('.phone_us').mask('000.000.0000');
// Postal Code
$('.postal_mask').inputmask({"mask": "A9A 9A9", greedy: false});
// Card Number & CVV
$('.card_number').keyup(function(){
if ($(this).val().substring(0, 1) == 3) {
$('.card_number').mask('0000 - 000000 - 00000');
$('.cvv').mask('0000');
} else {
$('.card_number').mask('0000 - 0000 - 0000 - 0000');
$('.cvv').mask('000');
}
});