oxil-net1

<div class="grid px1 px2l pb3 pt2"> <kc-checkout data-security-url="/checkout/security" data-billing-url="/billing" {{ with .Page.Params.logoutoncomplete }}data-logout-on-complete="true"{{end}}> <div id="checkout-wrapper" > <div class="flex flex-wrap vue-wrapper"> <div class="w-75 "> <div class="grid pb1 "> <h1 class="f3 ">{{.Site.Title}}</h1> <p class=" ">Please review your order and payment details</p> <div class="bort3 ge pt2l pt1 pb2 pl4l px1 mb125" kb-if="billingContact.id"> <h4 class=" thin">Your Billing details</h4> <div class="flex-grid flex-row-reverse"> <div class="w-40" kb-html="billingContact.htmlAddressLinesString"> </div> <div class="w-60"> <p class="thin small">Carefully check all information provided</p> <a kb-href="billingURL" class="but butsoftwh butsm ">Change these details</a> </div> </div> </div> <div class="ge pt2l pt1 pb2 pl4l px1 "> <h4 class="normal">Payment</h4> <div kb-if="cart.total | substring 1 | gt 0"> <div class="flex align-center mb075"> <label class="mb0"><input name="configurestaticpackage" type="radio" checked="checked"> Pay with credit card </label> <img height="60" src="/images/payment_methods.png" alt=""> </div> <div class="white p150 mb2"> <label class="mb050 blk" kb-each-method="paymentMethods"> <input name="paymentselected" type="radio" kb-value="method.id"> ending <b>{method.payment.card.last4}</b> (expires {method.payment.card.exp_month}/{method.payment.card.exp_year} {method.payment.card.brand}) </label> <label class="blk"><input name="paymentselected" type="radio" value="new"> <span kb-if="paymentMethods.length | gt 0">use a different card</span> <span kb-if="paymentMethods.length | equals 0">Add a card</span> </label> <kc-stripe-element id="stripe-element" class="p1"></kc-stripe-element> <div id="loading-payment" class=" progress-modal flex justify-center align-center"> <div class="white"> <p>Processing payment method ...</p> <div class="text-center"> <img width="35" src="/images/loading.gif" alt=""> </div> </div> </div> </div> </div> <div kb-if="cart.total | substring 1 | equals 0"> <p>No payment required</p> </div> <div class="flex-grid align-center"> <div class="w-60"> <p class="thin small">I accept the latest <a href="/terms/">Terms & Conditions</a> </p> </div> <div class="w-40"> <button class="but butgn place-order">place order & pay <i class="net-chevron-right"></i></button> </div> </div> </div> <div class="pl4l pt4"> <h4 class="thin">Order summary</h4> <table class="table table-pricing white"> <thead> <tr> <th width="100%">Item</th> <th class="text-right">Price</th> <th></th> </tr> </thead> <tbody> <tr kb-each-item="cart.items"> <td> <div class="bold">{item.title}</div> <div kb-if="item.subtitle">{item.subtitle}</div> <div class="tiny"kb-if="item.description">{item.description}</div> <div class="tiny" kb-each-subitem="item.subItems"> - {subitem.title}: {subitem.quantity} </div> </td> <td class="text-right">{item.total}</td> <td>         </td> </tr> </tbody> <tfoot> <tr> <th colspan="2" class="text-right-lg "> <div class="pt1 pb2"><span class="bold pr1">Total ex. VAT</span><span class="f3 normal py2">{cart.subtotal}</span></div> </th> <th></th> </tr> </tfoot> </table> <div class="flex-grid align-center text-right justify-between bort3 bortdd pt2"> <div class="w-60"> <p class="thin small text-right">I accept the latest <a href="/terms/">Terms & Conditions</a> </p> </div> <a href="/order-confirmation/" class="but butgn">place order & pay <i class="net-chevron-right"></i></a> </div> </div> </div> </div> <div class="w-25 pl2l "> <div class="bort3 bortbk"> <div class="flex justify-end"><a class="inv small flex align-center normal ib py050" href="/cart/">edit cart <i class="net-launch-out"></i></a></div> <div class="p050 flex thin align-center small ge mb1"> <i class="net-cart-hollow f4"></i> <span class="f4">{cartItems}</span> item in your cart </div> <div class="bort1 borb1 py050 "> <div class="pb1 small"> <div class="flex" v-for="item in cart.items"> <div class="flex1"> <b>{item.title}</b> </div> <div class="w-30 text-right">{item.total}</div> </div> </div> </div> <div class="borb1 small py1"> <div class="flex"> <div class="w-66 text-right">Total (ex VAT)</div> <div class="w-33 text-right">{cart.subtotal}</div> </div> <div class="flex py075"> <div class="w-66 text-right">VAT</div> <div class="w-33 text-right">{cart.taxes}</div> </div> <div class="flex"> <div class="w-66 text-right bold">Total</div> <div class="w-33 text-right bold">{cart.total}</div> </div> </div> <div class="py1"> <button class="but butgn butblkm place-order">place order & pay <i class="net-chevron-right"></i></button> </div> </div> </div> </div> </div> <div id="loading-checkout" class=" progress-modal flex justify-center align-center"> <div class="white p2 m2 br8tl br8tr br8bl br8br"><h4>Loading checkout ...</h4> <p class="message">Please wait ...</p> <div class="text-center pt2 "> <img width="100" src="/images/loading.gif" alt=""> </div> </div> </div> </kc-checkout> </div> <div id="processing-order" class=" progress-modal flex justify-center align-center"> <div class="white p2 m2 br8tl br8tr br8bl br8br"><h4>Processing your order ...</h4> <p class="message">Please wait ... processing payment</p> <div class="text-center pt2 "> <img width="100" src="/images/loading.gif" alt=""> </div> </div> </div>