Add to Cart / Wishlist AddToCart AddToWishlist

Product Image
Wireless Headphones
WH-001
$149.00
Product Image
Smart Watch Pro
SW-002
$299.00
Product Image
Laptop Stand
LS-003
$79.00
Product Image
USB-C Hub
UH-004
$49.00
<!-- Product cards -->
  <div class="info-chk-itm-pf">
    <!-- Product details -->
    <div class="info-itm-id-pf">WH-001</div>
    <div class="info-itm-prc-pf">$149.00</div>
    <input type="number" class="info-itm-qnty-pf" value="1" min="1" />

    <!-- Action buttons -->
    <button class="action-btn-cart-005-pf">Add to Cart</button>
    <button class="action-btn-wl-006-pf">Wishlist</button>
  </div>

Initiate Checkout InitiateCheckout

Order Summary

Wireless Headphones
WH-001
Qty: 2
$298.00
Smart Watch Pro
SW-002
Qty: 1
$299.00
USB-C Hub
UH-004
Qty: 1
$49.00
Total $646.00
<!-- Order summary container -->
<div class="info-chk-itm-ctnr-pf">

  <!-- Cart item -->
  <div class="info-chk-itm-pf">
    <div class="info-itm-id-pf">WH-001</div>
    <div class="info-itm-prc-pf">$298.00</div>
    <span class="info-itm-qnty-pf">2</span>
  </div>

  <!-- Another cart item -->
  <div class="info-chk-itm-pf">
    <div class="info-itm-id-pf">SW-002</div>
    <div class="info-itm-prc-pf">$299.00</div>
    <span class="info-itm-qnty-pf">1</span>
  </div>

  <!-- Order total -->
  <div class="info-totl-amt-pf">$646.00</div>

  <!-- Checkout button -->
  <button class="action-btn-buy-004-pf">Proceed to Checkout</button>

</div>

Complete Purchase Purchase AddPaymentInfo

Payment Information

Order Summary

Wireless Headphones
WH-001
Qty: 2
$298.00
Smart Watch Pro
SW-002
Qty: 1
$299.00
Subtotal $597.00
Shipping $15.00
Tax $34.00
Total $646.00
<!-- Checkout container wraps form, order summary, and purchase button -->
<div class="info-chk-itm-ctnr-pf">

  <!-- Add Payment Info Form (Optional) -->
  <div class="info-frm-cntr-pf">
    <!-- Customer information -->
    <input type="text" class="info-cust-fn-pf" placeholder="First Name" />
    <input type="text" class="info-cust-ln-pf" placeholder="Last Name" />
    <input type="email" class="info-cust-em-pf" placeholder="Email" />
    <input type="tel" class="info-cust-ph-pf" placeholder="Phone" />

    <!-- Payment action -->
    <button class="action-btn-pymt-001-pf">Save Payment Method</button>
  </div>

  <!-- Order summary -->
  <div class="info-chk-itm-pf">
    <div class="info-itm-id-pf">WH-001</div>
    <div class="info-itm-prc-pf">$298.00</div>
    <span class="info-itm-qnty-pf">2</span>
  </div>
  <div class="info-totl-amt-pf">$646.00</div>

  <!-- Purchase button is directly inside checkout container -->
  <button class="action-btn-plc-ord-018-pf">Complete Purchase</button>

</div>