Herbarium/title>  <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon"> <link rel="icon" href="images/favicon.png" type="image/x-icon">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">   </head> <body> <div class="page-wrapper">  <div class="preloader"></div>  <header class="main-header header-style-one"> <div class="outer-box">  <div class="header-top"> <div class="inner-container"> <div class="top-left">  <ul class="list-style-one"> <li><a href=""><span class="__cf_email__" data-cfemail="">hello@herbarium.com </span></a></li> </ul> </div> <div class="top-right"> <ul class="list-style-two"> <li>Mon to Sat: 9:00am – 6:00pm Sun: <a class="active" href="#">Closed</a></li> </ul> <ul class="social-icon-one"> <li><a href="#"><span class="icon fa fa-x"></span></a></li> <li><a href="#"><span class="icon fab fa-facebook-f"></span></a></li> <li><a href="#"><span class="icon fab fa-pinterest-p"></span></a></li> <li><a href="#"><span class="icon fab fa-vimeo-v"></span></a></li> </ul> </div> </div> </div>  <div class="header-lower">  <div class="main-box"> <div class="logo-box"> <div class="logo"><a href="index.html"><img class="navbar-logo-img" src="images/icons/Herbarium (1).png" alt="Logo"></a></div> </div>  <div class="nav-outer"> <nav class="nav main-menu"> <ul class="navigation"> <li class="current dropdown"><a href="index.html">Home</a> <li class="dropdown"><a href="#">Pages</a> <ul> <li><a href="page-about.html">About</a></li> <li><a href="page-gallery.html">Gallery</a></li> <li class="dropdown"><a href="#">Team</a> <ul> <li><a href="page-team.html">Team List</a></li> <li><a href="page-team-details.html">Team Details</a></li> </ul> </li> <li><a href="page-testimonial.html">Testimonial</a></li> <li><a href="page-faq.html">FAQ</a></li> <li><a href="page-404.html">Page 404</a></li> </ul> </li> <li class="dropdown"><a href="#">Services</a> <ul> <li><a href="page-services.html">Services List</a></li> <li><a href="page-service-details.html">Service Details</a></li> </ul> </li> <li class="dropdown"><a href="#">Shop</a> <ul> <li><a href="shop-products.html">Products</a></li> <li><a href="shop-products-sidebar.html">Products with Sidebar</a></li> <li><a href="shop-product-details.html">Product Details</a></li> <li><a href="shop-cart.html">Cart</a></li> <li><a href="shop-checkout.html">Checkout</a></li> </ul> </li> <li class="dropdown"><a href="#">News</a> <ul> <li><a href="news-grid.html">News Grid</a></li> </ul> </li> <li><a href="page-contact.html">Contact</a> </nav> </div>  <div class="outer-box">  <button class="ui-btn search-btn"> <i class="icon fal fa-search"></i> </button> <div class="divider"></div>  <div class="btn-box"> <a href="page-contact.html" class="theme-btn btn-style-one"><span class="btn-title">Book Now</span></a> </div>  <div class="mobile-nav-toggler"><span class="icon lnr-icon-bars"></span></div> </div> </div> </div> </div>  <div class="mobile-menu"> <div class="menu-backdrop"></div>  <nav class="menu-box"> <div class="upper-box"> <div class="nav-logo"><a href="index.html"><img class="navbar-logo-img" src="images/icons/Herbarium (1).png" alt="Logo"></a></div> <div class="close-btn"><i class="icon fa fa-times"></i></div> </div> <ul class="navigation clearfix">  </ul> <ul class="contact-list-one"> <li> <i class="icon lnr-icon-envelope1"></i> <span class="title">Send Email</span> <div class="text"><a href="https://html.kodesolution.com/cdn-cgi/l/email-protection#412d2036322e2f012439202c312d246f222e2c"><span class="__cf_email__" data-cfemail="79181514185715180e0a1617391c01181409151c571a1614">[email protected]</span></a></div> </li> </ul> <ul class="social-links"> <li><a href="#"><i class="icon fa fa-x"></i></a></li> <li><a href="#"><i class="icon fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="icon fab fa-pinterest-p"></i></a></li> <li><a href="#"><i class="icon fab fa-vimeo-v"></i></a></li> </ul> </nav> </div>  <div class="search-popup"> <span class="search-back-drop"></span> <button class="close-search"><span class="fa fa-times"></span></button> <div class="search-inner"> <form method="post" action="https://html.kodesolution.com/2024/purerelax-html/index.html"> <div class="form-group"> <input type="search" name="search-field" value="" placeholder="Search..." required=""> <button type="submit"><i class="fa fa-search"></i></button> </div> </form> </div> </div>   <div class="sticky-header"> <div class="auto-container"> <div class="inner-container">  <div class="logo"> <a href="index.html"><img src="images/logo.png" alt=""></a> </div>  <div class="nav-outer">  <nav class="main-menu"> <div class="navbar-collapse show collapse clearfix"> <ul class="navigation clearfix">  </ul> </div> </nav>  <div class="mobile-nav-toggler"><span class="icon lnr-icon-bars"></span></div> </div> </div> </div> </div>  </header>   <section class="page-title" style="background-image: url(images/banner/banner4.jpg);"> <h1 class="large-title">Checkout</h1> <div class="image-curve"></div> <div class="auto-container"> <div class="title-outer text-center"> <h1 class="title">Checkout</h1> <ul class="page-breadcrumb"> <li><a href="index.html">Home</a></li> <li>Shop</li> </ul> </div> </div> </section>   <section> <div class="container pt-70 pb-100"> <form class="checkout-form" id="checkout-form" action="#"> <div class="row mt-30"> <div class="col-md-6"> <div class="billing-details"> <h3 class="mb-30">Billing Details</h3> <div class="row"> <div class="mb-3 col-md-6"> <label for="checkuot-form-fname">First Name</label> <input id="checkuot-form-fname" type="email" class="form-control" placeholder="First Name"> </div> <div class="mb-3 col-md-6"> <label for="checkuot-form-lname">Last Name</label> <input id="checkuot-form-lname" type="email" class="form-control" placeholder="Last Name"> </div> <div class="col-md-12"> <div class="mb-3"> <label for="checkuot-form-cname">Company Name</label> <input id="checkuot-form-cname" type="email" class="form-control" placeholder="Company Name"> </div> <div class="mb-3"> <label for="checkuot-form-email">Email Address</label> <input id="checkuot-form-email" type="email" class="form-control" placeholder="Email Address"> </div> <div class="mb-3"> <label for="checkuot-form-address">Address</label> <input id="checkuot-form-address" type="email" class="form-control" placeholder="Street address"> </div> <div class="mb-3"> <input type="email" class="form-control" placeholder="Apartment, suite, unit etc. (optional)"> </div> </div> <div class="mb-3 col-md-6"> <label for="checkuot-form-city">City</label> <input id="checkuot-form-city" type="email" class="form-control" placeholder="City"> </div> <div class="mb-3 col-md-6"> <label>State/Province</label> <select class="form-control"> <option>Select Country</option> <option>Australia</option> <option>UK</option> <option>USA</option> </select> </div> <div class="mb-3 col-md-6"> <label for="checkuot-form-zip">Zip/Postal Code</label> <input id="checkuot-form-zip" type="email" class="form-control" placeholder="Zip/Postal Code"> </div> <div class="mb-3 col-md-6"> <label>Country</label> <select class="form-control"> <option>Select Country</option> <option>Australia</option> <option>UK</option> <option>USA</option> </select> </div> </div> </div> </div> <div class="col-md-6"> <h3>Additional information</h3> <label for="order_comments" class="">Order notes <span class="optional">(optional)</span></label> <textarea id="order_comments" class="form-control" rows="7" placeholder="Notes about your order, e.g. special notes for delivery."> </textarea> </div> <div class="col-md-12 mt-30"> <h3>Your order</h3> <table class="table table-striped table-bordered tbl-shopping-cart"> <thead> <tr> <th>Photo</th> <th>Product Name</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td class="product-thumbnail"><a href="shop-product-details.html"><img alt="product" src="images/resource/products/1.jpg"></a></td> <td class="product-name"><a href="shop-product-details.html">Headphone</a> x 2</td> <td><span class="amount">$36.00</span></td> </tr> <tr> <td class="product-thumbnail"><a href="shop-product-details.html"><img alt="product" src="images/resource/products/2.jpg"></a></td> <td class="product-name"><a href="shop-product-details.html">Lagage</a> x 3</td> <td><span class="amount">$115.00</span></td> </tr> <tr> <td class="product-thumbnail"><a href="shop-product-details.html"><img alt="product" src="images/resource/products/3.jpg"></a></td> <td class="product-name"><a href="shop-product-details.html">Watch</a> x 1</td> <td><span class="amount">$68.00</span></td> </tr> <tr> <td>Cart Subtotal</td> <td> </td> <td>$180.00</td> </tr> <tr> <td>Shipping and Handling</td> <td> </td> <td>Free Shipping</td> </tr> <tr> <td>Order Total</td> <td> </td> <td>$250.00</td> </tr> </tbody> </table> </div> <div class="col-md-12 mt-60"> <div class="payment-method"> <h3>Choose a Payment Method</h3> <ul class="accordion-box"> <li class="accordion block active-block"> <div class="acc-btn active"> <div class="icon-outer"><i class="lnr-icon-chevron-down"></i></div> Credir Card / Debit Card </div> <div class="acc-content current"> <div class="payment-info"> <div class="row clearfix"> <div class="col-lg-6 col-md-6 col-sm-12 column"> <div class="field-input mb-3"> <input type="text" class="form-control" name="name" placeholder="Name on the Card" required=""> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 column"> <div class="field-input mb-3"> <input type="text" class="form-control" name="number" placeholder="Card Number" required=""> </div> </div> <div class="col-lg-3 col-md-6 col-sm-12 column"> <div class="field-input mb-3"> <input type="text" class="form-control" name="date" placeholder="Expiry Date" required=""> </div> </div> <div class="col-lg-3 col-md-6 col-sm-12 column"> <div class="field-input mb-3"> <input type="text" class="form-control" name="code" placeholder="Security Code" required=""> </div> </div> <div class="col-lg-6 col-md-12 col-sm-12 column"> <div class="field-input message-btn"> <button type="submit" class="theme-btn btn-style-one" data-loading-text="Please wait..."><span class="btn-title">Make Payment</span></button> </div> </div> </div> </div> </div> </li> <li class="accordion block"> <div class="acc-btn"> <div class="icon-outer"><i class="lnr-icon-chevron-down"></i></div> Direct Bank Transfer </div> <div class="acc-content"> <div class="payment-info"> <p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p> </div> </div> </li> <li class="accordion block"> <div class="acc-btn"> <div class="icon-outer"><i class="lnr-icon-chevron-down"></i></div> Cheque Payment </div> <div class="acc-content"> <div class="payment-info"> <p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p> </div> </div> </li>  <li class="accordion block"> <div class="acc-btn"> <div class="icon-outer"><i class="lnr-icon-chevron-down"></i></div> M-Pesa </div> <div class="acc-content"> <div class="payment-info"> <div class="row"> <div class="col-12 mb-3 d-flex align-items-center">  <div style="width:140px;height:48px;display:flex;align-items:center;gap:12px"> <img src="images/mpesa.png" alt="M-Pesa" style="height:48px;" onerror="this.style.display='none'"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" style="height:48px;flex-shrink:0;" aria-hidden="true"> <rect width="300" height="100" rx="8" fill="none"></rect> <g transform="translate(6,10)"> <rect x="0" y="0" width="48" height="80" rx="8" fill="#e8f3e8"></rect> <path d="M14 24c6-6 20-6 26 0v32c-6 6-20 6-26 0V24z" fill="#e64a45"></path> <text x="70" y="54" font-family="Arial, Helvetica, sans-serif" font-size="46" font-weight="700" fill="#2fb64f">MPESA</text> </g> </svg> </div> </div> <div class="col-md-6 mb-3"> <label for="mpesa-phone-acc">Phone used for M-Pesa</label> <input id="mpesa-phone-acc" type="tel" class="form-control" placeholder="e.g. 2547XXXXXXXX" /> </div> <div class="col-md-6 mb-3"> <label for="mpesa-trans">M-Pesa Transaction Code</label> <input id="mpesa-trans" type="text" class="form-control" placeholder="Enter transaction code" /> </div> <div class="col-12"> <p>Please send the payment to our Paybill/Till number: <strong>+254 790 576 864</strong>. After payment, enter the transaction code above and click Confirm.</p> </div> <div class="col-12"> <div class="field-input message-btn"> <button id="mpesa-submit" type="button" class="theme-btn btn-style-one"><span class="btn-title">Confirm M-Pesa Payment</span></button> </div> </div> </div> </div> </div> </li> <li class="accordion block"> <div class="acc-btn"> <div class="icon-outer"><i class="lnr-icon-chevron-down"></i></div> Other Payment </div> <div class="acc-content"> <div class="payment-info"> <p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p> </div> </div> </li> </ul> </div> </div> </div> </form> </div> </section>   <footer class="main-footer">  <div class="widgets-section"> <div class="footer1-1 bounce-x"></div> <div class="auto-container"> <div class="row">  <div class="footer-column col-lg-4 col-md-6 order-1"> <div class="footer-widget timetable-widget"> <h3 class="widget-title">Open Hours</h3> <ul class="timetable"> <li>Monday to Friday : <span>09:00-20:00</span></li> <li>Saturday: <span>09:00-18:00</span></li> <li>Sunday: <span>09:00-18:00</span></li> </ul> </div> </div>  <div class="footer-column col-lg-4 col-md-6 order-0 order-lg-1"> <div class="footer-widget about-widget text-center"> <div class="logo"><a href="index.html"><img class="navbar-logo-img" src="images/icons/Herbarium (1).png" alt="Logo"></a></div> <div class="text">Connect with Nature, Connect with Us.</div> <ul class="social-icon"> <li><a href="#"><i class="icon fa fa-x"></i></a></li> <li><a href="#"><i class="icon fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="icon fab fa-pinterest-p"></i></a></li> <li><a href="#"><i class="icon fab fa-vimeo-v"></i></a></li> </ul> </div> </div>  <div class="footer-column col-lg-4 col-md-6 order-2"> <div class="footer-widget contacts-widget"> <h3 class="widget-title">Contact</h3> <div class="text">Westlands, Nairobi <br> Kenya 00100</div> <ul class="contact-info"> <li><a href="tel:012-3456-789">012-3456-789</a></li> <li><a href="https://html.kodesolution.com/cdn-cgi/l/email-protection#85fceaf0f7e1e0e8eac5e6eae8f5e4ebfcabe6eae8"><span class="__cf_email__" data-cfemail="661f09131402030b092605090b1607081f4805090b">[email protected]</span></a></li> </ul> </div> </div> </div> </div> </div>  <div class="footer-bottom"> <div class="auto-container"> <div class="inner-container"> <figure class="ima"><img src="images/icons/footer-bottom-img-1.png" alt="Image"></figure> <div class="copyright-text">© Herbarium <a href="index.html">Reserved By Safetek</a></div> <a class="link" href="index.html">Terms & Conditions</a> </div> </div> </div> </footer>  </div>  <div class="scroll-to-top scroll-to-target" data-target="html"><span class="fa fa-angle-up"></span></div> <script data-cfasync="false" src="https://html.kodesolution.com/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="js/jquery.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.fancybox.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/wow.js"></script> <script src="js/appear.js"></script> <script src="js/select2.min.js"></script> <script src="js/gsap.min.js"></script> <script src="js/ScrollTrigger.min.js"></script> <script src="js/splitType.js"></script> <script src="js/script.js"></script> <script> // Simple handler for M-Pesa confirm button — validates basic input and shows a confirmation alert (function(){ var btn = document.getElementById('mpesa-submit'); if(!btn) return; btn.addEventListener('click', function(){ var phone = document.getElementById('mpesa-phone-acc').value.trim(); var code = document.getElementById('mpesa-trans').value.trim(); if(!phone){ alert('Please enter the phone number used for M-Pesa (in international format, e.g. 2547...)'); return; } if(!code){ alert('Please enter the M-Pesa transaction code to confirm payment.'); return; } // In a real integration this would POST to the server to verify the transaction. alert('Thanks — we received your M-Pesa code: ' + code + '. We\'ll verify and update your order shortly.'); }); })(); </script> </body> </html>