Section & Variations › Payment
Available Variations
Starter Kit Codes
<!-- include sections/payment -->
<section class="cart checkout payment cart-variation-1">
<div class="container">
<div class="section-header">
<a class="btn-back" href="checkout.html"><i class="ic ic-caret-left dark-1"></i></a>
<h3 class="section-title">Payment method</h3>
</div>
<div class="section-content">
<div class="cart-payment-form">
<form class="form-checkout">
<div class="form-checkout-section">
<div class="form-checkout-section-content">
<div class="form-group form-group-radio">
<div class="form-check">
<input class="form-check-input" type="radio" name="shipping" id="shipping-1">
<label class="form-check-label" for="shipping-1">
<div class="radio-label"><strong>Credit Card</strong></div>
<div class="payment-logo"><img src="assets/images/ic-mastercard.svg"><img src="assets/images/ic-visa.svg"><img src="assets/images/ic-americanexpress.svg"></div>
<div class="form-check-details"><div class="form-group"><input type="text" class="form-control form-control-lg" placeholder="Card number" /></div><div class="form-group"><input type="text" class="form-control form-control-lg" placeholder="Name on card" /></div><div class="row"><div class="col-md-4"><div class="form-group"><select class="form-select form-select-lg"><option value="1">January</option><option value="2">February</option></select></div></div><div class="col-md-4"><div class="form-group"><select class="form-select form-select-lg"><option value="2025">2025</option><option value="2026">2026</option></select></div></div><div class="col-md-4"><div class="form-group"><input type="text" class="form-control form-control-lg" placeholder="CCV" /></div></div></div></div>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="shipping" id="shipping-2">
<label class="form-check-label" for="shipping-2"><div class="radio-label"><strong>Paypal</strong></div><div class="payment-logo"><img src="assets/images/ic-paypal.svg"></div></label>
</div>
</div>
</div>
</div>
<div class="form-checkout-footer"><a class="btn btn-lg btn-brand-primary" href="payment-success.html">Book Now</a></div>
</form>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/payment -->
<section class="cart checkout payment cart-variation-2">
<div class="container-fluid">
<div class="section-header">
<h3 class="section-title">Payment</h3>
</div>
<div class="section-content">
<div class="cart-payment-form">
<form class="form-checkout">
<div class="form-checkout-section">
<div class="form-checkout-section-content">
<p>All transactions are secure and encrypted.</p>
<div class="form-group form-group-radio">
<div class="form-check">
<input class="form-check-input" type="radio" name="shipping" id="shipping-1">
<label class="form-check-label" for="shipping-1">
<div class="radio-label">
<strong>Credit Card</strong>
</div>
<div class="payment-logo">
<img src="assets/images/ic-mastercard.svg">
<img src="assets/images/ic-visa.svg">
<img src="assets/images/ic-americanexpress.svg">
</div>
<div class="form-check-details">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Card number" />
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Name on card" />
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select class="form-select form-select-lg">
<option value="1">January</option>
<option value="2">February</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-select form-select-lg">
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="CCV" />
</div>
</div>
</div>
</div>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="shipping" id="shipping-2">
<label class="form-check-label" for="shipping-2">
<div class="radio-label">
<strong>Paypal</strong>
</div>
<div class="payment-logo">
<img src="assets/images/ic-paypal.svg">
</div>
</label>
</div>
</div>
</div>
</div>
<div class="form-checkout-footer">
<a class="btn-back" href="checkout.html"><i class="ic ic-caret-left dark-1"></i> Return</a>
<a class="btn btn-xl btn-brand-primary" href="payment-success.html">CONTINUE</a>
</div>
</form>
</div>
<div class="cart-summary">
<div class="cart-summary-header">
<h4>Summary</h4>
</div>
<div class="cart-summary-content">
<div class="cart-item-row">
<div class="cart-item-image">
<img src="assets/images/fashion-product-list-5.png" class="product-category-bg" />
</div>
<div class="cart-item-content">
<div class="cart-item-content-top">
<h4>Slim Fit Waffled polo shirt</h4>
<div class="col-right">
<span class="col-item cart-item-subtotal">$29.00</span>
</div>
</div>
<div class="cart-item-variables">
<div class="cart-item-variable">
<strong>QTY:</strong>
<span>2</span>
</div>
<div class="cart-item-variable">
<strong>Color: </strong>
<span>Pale Taupe</span>
</div>
<div class="cart-item-variable">
<strong>Size: </strong>
<span>XL</span>
</div>
</div>
</div>
</div>
<div class="cart-item-row">
<div class="cart-item-image">
<img src="assets/images/fashion-product-list-snippet-4.png" class="product-category-bg" />
</div>
<div class="cart-item-content">
<div class="cart-item-content-top">
<h4>Man in Green Zip Up Jacket</h4>
<div class="col-right">
<span class="col-item cart-item-subtotal">$29.00</span>
</div>
</div>
<div class="cart-item-variables">
<div class="cart-item-variable">
<strong>QTY:</strong>
<span>1</span>
</div>
<div class="cart-item-variable">
<strong>Color: </strong>
<span>Olive Green</span>
</div>
<div class="cart-item-variable">
<strong>Size: </strong>
<span>XL</span>
</div>
</div>
</div>
</div>
<div class="cart-summary-item strong">
<strong>Total</strong>
<span>$500.00</span>
</div>
</div>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/payment -->
<section class="cart checkout payment cart-variation-3">
<div class="container">
<div class="section-header">
<ul class="nav nav-tabs nav-cart-steps">
<li class="nav-item">
<a class="nav-link passed" aria-current="page" href="#">
<span class="no">1</span>
<strong>Shopping bag</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link passed" href="#">
<span class="no">2</span>
<strong>Shipping</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">
<span class="no">3</span>
<strong>Payment</strong>
</a>
</li>
</ul>
</div>
<div class="section-content">
<div class="cart-payment-form">
<form class="form-checkout">
<h3 class="section-title">Payment</h3>
<div class="form-checkout-section">
<div class="form-checkout-section-content">
<div class="form-group form-group-radio">
<div class="form-check">
<input class="form-check-input" type="radio" name="shipping" id="shipping-1">
<label class="form-check-label" for="shipping-1">
<div class="radio-label">
<strong>Credit Card</strong>
</div>
<div class="payment-logo">
<img src="assets/images/ic-mastercard.svg">
<img src="assets/images/ic-visa.svg">
<img src="assets/images/ic-americanexpress.svg">
</div>
<div class="form-check-details">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Card number" />
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Name on card" />
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select class="form-select form-select-lg">
<option value="1">January</option>
<option value="2">February</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-select form-select-lg">
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="CCV" />
</div>
</div>
</div>
</div>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="shipping" id="shipping-2">
<label class="form-check-label" for="shipping-2">
<div class="radio-label">
<strong>Paypal</strong>
</div>
<div class="payment-logo">
<img src="assets/images/ic-paypal.svg">
</div>
</label>
</div>
</div>
</div>
</div>
<div class="form-checkout-footer">
<a class="btn-back" href="checkout.html"><i class="ic ic-caret-left dark-1"></i> Return</a>
<a class="btn btn-xl btn-brand-primary" href="payment-success.html">CONTINUE</a>
</div>
</form>
</div>
<div class="cart-summary">
<div class="cart-summary-header">
<h4>Summary</h4>
</div>
<div class="cart-summary-content">
<div class="cart-item-row">
<div class="cart-item-image">
<img src="assets/images/cosmetics-product-details-2.png" class="product-category-bg" />
</div>
<div class="cart-item-content">
<div class="cart-item-content-top">
<strong class="product-category">Skincare</strong>
<h4>Virena Smoothing Starter Set</h4>
<div class="col-right">
<div class="col-item">
<div class="form-group input-qty">
<label>QTY</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<span class="col-item cart-item-subtotal">$320.00</span>
</div>
</div>
</div>
</div>
<div class="cart-item-row">
<div class="cart-item-image">
<img src="assets/images/cosmetics-product-list-9.png" class="product-category-bg" />
</div>
<div class="cart-item-content">
<div class="cart-item-content-top">
<strong class="product-category">Skincare</strong>
<h4>Advanced Super Revitalizing Cream</h4>
<div class="col-right">
<div class="col-item">
<div class="form-group input-qty">
<label>QTY</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<span class="col-item cart-item-subtotal">$18.00</span>
</div>
</div>
</div>
</div>
<div class="cart-summary-item strong">
<strong>Total</strong>
<span>$500.00</span>
</div>
</div>
</div>
</div>
</div>
</section>