---
layout: default
title: Checkout
---

<!--Payment Wrapper-->
<div class="shop-wrapper">
  <div class="cart-container">
    <div class="cart-header">
      <div class="header-inner">
        <h2 id="checkout-step-title">1. Confirm your order</h2>
        <div class="header-actions">
          <div class="buttons">
            <a id="checkout-back" class="button is-light" data-step="0">
              <span class="icon is-small">
                <i data-feather="arrow-left"></i>
              </span>
              <span>Back</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!--Checkout content-->
    <div class="cart-content">
      <div class="columns">
        <div class="column is-8">
          <!--Checkout section 1-->
          <div id="checkout-section-1" class="checkout-section is-active">
            <!--Table-->
            <div class="flex-table">
              <!--Table header-->
              <div class="flex-table-header">
                <span class="product"><span>Product</span></span>
                <span class="quantity">Quantity</span>
                <span class="price">Price</span>
                <span class="discount">Discount</span>
                <span class="total">Total</span>
              </div>
              <!--Table item-->
              <div class="flex-table-item">
                <div class="product">
                  <img src="assets/img/products/2.svg" alt="" />
                  <span class="product-name">Cool Shirt</span>
                </div>
                <div class="quantity">
                  <span class="has-price">1</span>
                </div>
                <div class="price">
                  <span class="has-price">29.00</span>
                </div>
                <div class="discount">
                  <span class="has-price">0</span>
                </div>
                <div class="total">
                  <span class="has-price">29.00</span>
                </div>
              </div>
              <!--Table item-->
              <div class="flex-table-item">
                <div class="product">
                  <img src="assets/img/products/3.svg" alt="" />
                  <span class="product-name">Military Short</span>
                </div>
                <div class="quantity">
                  <span class="has-price">1</span>
                </div>
                <div class="price">
                  <span class="has-price">39.00</span>
                </div>
                <div class="discount">
                  <span class="has-price">0</span>
                </div>
                <div class="total">
                  <span class="has-price">39.00</span>
                </div>
              </div>
              <!--Table item-->
              <div class="flex-table-item">
                <div class="product">
                  <img src="assets/img/products/4.svg" alt="" />
                  <span class="product-name">Cool Backpack</span>
                </div>
                <div class="quantity">
                  <span class="has-price">1</span>
                </div>
                <div class="price">
                  <span class="has-price">125.00</span>
                </div>
                <div class="discount">
                  <span class="has-price">0</span>
                </div>
                <div class="total">
                  <span class="has-price">125.00</span>
                </div>
              </div>
            </div>
          </div>

          <!--Checkout section-->
          <div id="checkout-section-2" class="checkout-section">
            <div class="columns is-multiline">
              <div class="column is-6">
                <div class="address-box shipping-address">
                  <input type="radio" name="shipping_address" />
                  <div class="address-box-inner">
                    <p>Jenna Davis</p>
                    <p>53 Miguel Abrejo St.</p>
                    <p>Suite G 63, 92618</p>
                    <p>Los Angeles, CA</p>
                  </div>
                </div>
              </div>
              <div class="column is-6">
                <div class="address-box shipping-address">
                  <input type="radio" name="shipping_address" />
                  <div class="address-box-inner">
                    <p>Jenna Davis</p>
                    <p>578 Juan Velasquez Parkway.</p>
                    <p>Appartment 88, 92612</p>
                    <p>Los Angeles, CA</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="add-address-link">
              <a>
                <i data-feather="plus"></i>
                <span>Add Address</span>
              </a>
            </div>
          </div>

          <!--Checkout section-->
          <div id="checkout-section-3" class="checkout-section">
            <div class="columns is-multiline">
              <div class="column is-4">
                <div class="shipping-box">
                  <input type="radio" name="shipping_method" />
                  <div class="shipping-box-inner">
                    <img
                      src="assets/img/icons/checkout/world-dark.svg"
                      alt=""
                    />
                    <p>Worldwide</p>
                  </div>
                </div>
              </div>
              <div class="column is-4">
                <div class="shipping-box">
                  <input type="radio" name="shipping_method" />
                  <div class="shipping-box-inner">
                    <img src="assets/img/icons/checkout/ups.svg" alt="" />
                    <p>UPS</p>
                  </div>
                </div>
              </div>
              <div class="column is-4">
                <div class="shipping-box">
                  <input type="radio" name="shipping_method" />
                  <div class="shipping-box-inner">
                    <img src="assets/img/icons/checkout/usps.svg" alt="" />
                    <p>USPS</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--Checkout section-->
          <div id="checkout-section-4" class="checkout-section">
            <div class="columns is-multiline">
              <div class="column is-6">
                <div class="address-box billing-address">
                  <input type="radio" name="billing_address" />
                  <div class="address-box-inner">
                    <p>Jenna Davis</p>
                    <p>53 Miguel Abrejo St.</p>
                    <p>Suite G 63, 92618</p>
                    <p>Los Angeles, CA</p>
                  </div>
                </div>
              </div>
              <div class="column is-6">
                <div class="address-box billing-address">
                  <input type="radio" name="billing_address" />
                  <div class="address-box-inner">
                    <p>Jenna Davis</p>
                    <p>578 Juan Velasquez Parkway.</p>
                    <p>Appartment 88, 92612</p>
                    <p>Los Angeles, CA</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="add-address-link">
              <a>
                <i data-feather="plus"></i>
                <span>Add Address</span>
              </a>
            </div>
          </div>
        </div>

        <!--Right Side-->
        <div class="column is-4">
          <div class="cart-summary">
            <div class="summary-header">
              <h3>Order Summary</h3>
            </div>

            <!--card-->
            <div
              id="shipping-placeholder-box"
              class="summary-card has-text-centered"
            >
              <img
                class="light-image"
                src="assets/img/icons/questions/cart.svg"
                alt=""
              />
              <img
                class="dark-image"
                src="assets/img/icons/questions/cart-dark.svg"
                alt=""
              />
              <h4>Shipping</h4>
              <p>Please verify your order before proceeding with shipping.</p>
            </div>

            <!--card-->
            <div id="shipping-address-box" class="summary-card is-hidden">
              <img
                class="light-image shipping-logo"
                src="assets/img/icons/checkout/world.svg"
                alt=""
              />
              <img
                class="dark-image shipping-logo"
                src="assets/img/icons/checkout/world-dark.svg"
                alt=""
              />
              <h3>Shipping Address</h3>
            </div>

            <!--card-->
            <div class="summary-card">
              <div class="order-line">
                <span>Subtotal</span>
                <span>193.00</span>
              </div>
              <div id="shipping-amount" class="order-line">
                <span>Shipping</span>
                <span class="is-text">Not calculated</span>
              </div>
              <div class="order-line">
                <span>Taxes</span>
                <span>8.92</span>
              </div>
              <div id="total-amount" class="order-line">
                <span class="is-total">Total</span>
                <span class="is-total">201.92</span>
              </div>
              <div class="button-wrap">
                <button
                  id="checkout-button"
                  class="button is-solid primary-button raised is-fullwidth"
                  data-step="2"
                >
                  Continue
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>