A summary checkout page with "Billing information", "Payment Method" and "Order Summary".
- A classical and simple two-column layout.
Checkout
Open in New Window@use 'sprucecss/scss/spruce' as *;
.l-checkout {
&__inner {
display: grid;
gap: spacer-clamp('l', 'xl');
grid-template-columns: minmax(0, 1fr);
@include breakpoint('md') {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
}
&__column {
display: flex;
flex-direction: column;
gap: spacer-clamp('l', 'xl');
}
&__title {
margin-block: 0;
}
&__form {
@include layout-stack('m');
}
&__billing,
&__summary,
&__payment {
@include layout-stack('m');
}
&__summary {
block-size: 100%;
display: flex;
flex-direction: column;
}
&__order {
@include layout-stack('xs');
margin-block-start: auto;
padding-top: spacer('m');
.form-group--submit {
margin-block-start: spacer('m');
}
}
}<div class="l-checkout">
<div class="container">
<form class="l-checkout__inner">
<div class="l-checkout__column">
<div class="l-checkout__billing">
<h2 class="l-checkout__title">Billing information</h2>
<div class="l-checkout__form">
<div class="form-row--mixed">
<div class="form-group">
<label class="form-label" for="name">Name</label>
<input class="form-control" type="text" id="name" />
</div>
<div class="form-group">
<label class="form-label" for="email">Email</label>
<input class="form-control" type="text" id="email" />
</div>
</div>
<div class="form-row--mixed">
<div class="form-group">
<label class="form-label" for="country">Country</label>
<input class="form-control" type="text" id="country" />
</div>
<div class="form-group">
<label class="form-label" for="zip">ZIP code</label>
<input class="form-control" type="text" id="zip" />
</div>
<div class="form-group">
<label class="form-label" for="city">City</label>
<input class="form-control" type="text" id="city" />
</div>
</div>
<div class="form-group">
<label class="form-label" for="address">Address</label>
<input class="form-control" type="text" id="address" />
</div>
</div>
</div>
<div class="l-checkout__payment">
<h2 class="l-checkout__title">Payment method</h2>
<div class="payment-card">
<label class="form-check">
<input class="form-check__control" type="radio" name="payment-type" value="stripe" checked="checked" aria-label="Stripe" />
</label>
<div class="payment-card__caption"><img class="payment-card__logo" src="https://ui.sprucecss.com/img/stripe-logo.svg" alt="Stripe" height="67" width="28" />
<p class="payment-card__description">You will be redirect to Stripe to complete the payment.</p>
</div>
</div>
<div class="payment-card">
<label class="form-check">
<input class="form-check__control" type="radio" name="payment-type" value="paypal" aria-label="PayPal" />
</label>
<div class="payment-card__caption"><img class="payment-card__logo" src="https://ui.sprucecss.com/img/paypal-logo.svg" alt="Stripe" height="104" width="28" />
<p class="payment-card__description">You will be redirect to PayPal to complete the payment.</p>
</div>
</div>
</div>
</div>
<div class="l-checkout__column">
<div class="l-checkout__summary">
<h2 class="l-checkout__title">Order summary</h2>
<div class="order-card">
<div class="order-card__data">
<h3 class="order-card__title">
<a class="order-card__link" href="#">WooCommerce SimplePay integration for 3 websites</a>
</h3>
<div class="order-card__meta">
<strong>50 €</strong>
</div>
<div class="number-group" x-cloak x-data="{ quantity: 2, min: 1, max: 99 }" x-init="$watch('quantity', (value) => { quantity = value < min ? min : (value > max ? max : value) })">
<button class="btn btn--primary btn--sm btn--icon number-group__decrement" type="button" data-action="decrement" aria-label="Decrement quantity" @click="quantity = Math.max(min, --quantity)">
<svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<line x1='5' y1='12' x2='19' y2='12'></line>
</svg>
</button>
<input class="number-group__input" x-model="quantity" type="number" :min="min" :max="max" />
<button class="btn btn--primary btn--sm btn--icon number-group__increment" type="button" data-action="increment" aria-label="Increment quantity" @click="quantity = Math.min(max, ++quantity)">
<svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<line class='vertical-line' x1='12' y1='5' x2='12' y2='19'></line>
<line x1='5' y1='12' x2='19' y2='12'></line>
</svg>
</button>
</div>
</div>
<button class="btn btn--primary btn--sm btn--icon order-card__remove" type="button" aria-label="Delete product">
<svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<line x1='18' y1='6' x2='6' y2='18'></line>
<line x1='6' y1='6' x2='18' y2='18'></line>
</svg>
</button>
</div>
<div class="order-card">
<div class="order-card__data">
<h3 class="order-card__title">
<a class="order-card__link" href="#">Root SEO extension for 1 website</a>
</h3>
<div class="order-card__meta">
<strong>100 €</strong>
</div>
<div class="number-group" x-cloak x-data="{ quantity: 1, min: 1, max: 99 }" x-init="$watch('quantity', (value) => { quantity = value < min ? min : (value > max ? max : value) })">
<button class="btn btn--primary btn--sm btn--icon number-group__decrement" type="button" data-action="decrement" aria-label="Decrement quantity" @click="quantity = Math.max(min, --quantity)">
<svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<line x1='5' y1='12' x2='19' y2='12'></line>
</svg>
</button>
<input class="number-group__input" x-model="quantity" type="number" :min="min" :max="max" />
<button class="btn btn--primary btn--sm btn--icon number-group__increment" type="button" data-action="increment" aria-label="Increment quantity" @click="quantity = Math.min(max, ++quantity)">
<svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<line class='vertical-line' x1='12' y1='5' x2='12' y2='19'></line>
<line x1='5' y1='12' x2='19' y2='12'></line>
</svg>
</button>
</div>
</div>
<button class="btn btn--primary btn--sm btn--icon order-card__remove" type="button" aria-label="Delete product">
<svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<line x1='18' y1='6' x2='6' y2='18'></line>
<line x1='6' y1='6' x2='18' y2='18'></line>
</svg>
</button>
</div>
<div class="l-checkout__order">
<p>Total: <strong class="lead">150 €</strong>
</p>
<label class="form-check">
<input class="form-check__control" type="checkbox" value="true" name="privacy" />
<span class="form-label form-check__label">I accept the <a href="#" target="_blank">privacy policy</a> and the <a href="#">terms and conditions</a>.</span>
</label>
<div class="form-group--submit">
<button class="btn btn--primary btn--lg btn--block btn--primary-shadow" type="submit">
<svg aria-hidden='true' focusable='false' role='img' height='24' style='fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<path d='M24,4.8l0,14.4c0,0.66 -0.235,1.225 -0.705,1.695c-0.47,0.47 -1.035,0.705 -1.695,0.705l-19.2,0c-0.66,0 -1.225,-0.235 -1.695,-0.705c-0.47,-0.47 -0.705,-1.035 -0.705,-1.695l-0,-14.4c-0,-0.66 0.235,-1.225 0.705,-1.695c0.47,-0.47 1.035,-0.705 1.695,-0.705l19.2,0c0.66,0 1.225,0.235 1.695,0.705c0.47,0.47 0.705,1.035 0.705,1.695Zm-21.6,2.4l19.2,0l0,-2.4l-19.2,0l0,2.4Zm0,4.8l0,7.2l19.2,0l0,-7.2l-19.2,0Zm0,7.2l0,-14.4l0,14.4Z'></path>
</svg>
Pay 150 €
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>Checkout
On this page
