Checkout

URL:

/user/order/deliverydetail?orderId%5B0%5D=00000

/User/Order/OrderSummary?orderId=00000&AddressId=00000

/user/checkout/select-gateway?id=00000&cartitemids=00000&addressid=00000&CartNote=

/user/checkout/success/ABC00000?isGuest=False

List of Elements

Progress Bar 

<div class="delivery-top-sec">
   <div class="container">
      <div class="checkout-top-processbar">
         <div class="delivery-menu-desktop order-prcs-tmln-sec">
            <span class="prcs-icon icon-active">Delivery</span>
            <span class="tmln tmln1"></span>
            <span class="prcs-icon">Review</span>
            <span class="tmln tmln2"></span>
            <span class="prcs-icon">Pay </span>
         </div>
         <div class="delivery-menu-mobile order-prcs-tmln-sec">
            <span class="prcs-icon icon-active">Delivery</span>
            <span class="tmln tmln1"></span> 
         </div>
      </div>
   </div>
</div>

Fill in personal information 

<div class="grey_section">
	<div class="delivery_white_section">
		<div class="delivery-line-container">
			<div class="container">
				<div class="delivery-setting">
					<div class="col-md-12 delivery-setting-title">
						Fill in your personal information
					</div>
					<div class="item-form-group">
						<div class="col-md-6">
							<label>First name</label>
							<input type="text" name="first-name"
							id="first-name" class="required" value="Prefilled if
							exist">
						</div>
						<div class="col-md-6">
							<label>Last name</label>
							<input type="text" class="required"
							id="last-name" name="last-name" value="Prefilled if
							exist">
						</div>
					</div>
					<div class="item-form-group">
						<div class="col-md-6">
							<label>Notification email</label>
							<input type="text" class="required
							emailOnly" id="notification-email"
							name="notification-email" value=”Prefilled if exist">
						</div>
						<div class="col-md-6">
							<label>Contact number</label>
							<input type="text" class="required
							numbersOnly" id="contact-number" name="contact-number" value="Prefilled if exist">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Saved Address 

<div class="grey_section">
	<div class="delivery_white_section">
		<div class="delivery-line-container"> … </div>
		<div class="delivery-line-container">
			<div class="container">
				<div class="col-md-12 delivery-setting-title">
					Where would you like this service to be delivered to?
				</div>
				<div class="delivery-address-sec">
					<div class="saved-address">
						<div class="address-box col-md-4 col-sm-6 gutter-30"
							data-id="47516">
							<div class="svd-adrsbox-inner">
								<div class="description">
									Nora Allen <br>
									52 Central City Street <br>
									<br>
									Singapore<br>
									<br>
									Singapore<br>
									589201 <br>
								</div>
								<div class="action">
									<span class="fancy-radio address-sel">
									<input type="radio"
									checked="checked"
									name="delivery-method" id="delivery1"
									addressid="47516" count="1">
									<label for="delivery1"
									class="">Select address</label>
									</span>
									<span class="remove-address">
									<a
									onclick="remove_address(47516)"
									href="javascript:void(0);">
									<span class="icon-close">
									<i class="fa fa-times"
									aria-hidden="true"></i>
									</span>
									</a>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Add New Button 

<div class="delivery-address-sec">
	<div class="saved-address"> … </div>
	<div id="add-new-ads" class="col-md-12" style="">
		<a href="javascript:void(0)" onclick="ShowNewAdsSec()"
		class="btn-black-small-cmn">
		Add New</a>
	</div>
</div>

New Address Form 

<div class="delivery-address-sec">
	<div class="saved-address"> … </div>
	<div id="add-new-ads" class="col-md-12" style=""> … </div>
	<div id="add-new-delivery-ads" class="border-on-top" style="display: none;">
		<div class="col-md-12 delivery-setting-title">Enter a new address</div>
		<div class="item-form-group">
			<div class="col-md-12">
				<label>Address</label>
				<input type="text" name="address" class="big-textbox required"
				value="">
			</div>
		</div>
		<div class="item-form-group">
			<div class="col-md-6">
				<label>Country</label>
				<select name="country" id="country" class="required"
				onchange="OnCountriesChange(this)">
					<option value="">(Select Country)</option>
					<option value="AF">Afghanistan</option>
					<option value="AL">Albania</option>
					… <!-- list of countries -->
				</select>
			</div>
			<div class="col-md-6">
				<label>State</label>
				<input type="text" name="state" id="state" class="" value="">
			</div>
		</div>
		<div class="item-form-group">
			<div class="col-md-6">
				<label>City</label>
				<input type="text" name="city" id="city" value="" class="required">
			</div>
			<div class="col-md-6">
				<label>Postal code</label>
				<input type="text" class="required" name="postalcode"
				id="postalcode" value="">
			</div>
		</div>
			<span class="col-md-12">
				<a href="javascript:void(0)" class="chk-cancel-btn btn-gray-small-cmn">
				Cancel</a>
				<a href="javascript:void(0)" class="chk-add-btn btn-black-small-cmn">
				Add</a>
			</span>
		</div>
	</div>
</div>

Next Button 

<div class="grey_section">
   <div class="delivery_white_section">
      <div class="delivery-line-container"> … </div>
      <div class="delivery-line-container">
         <div class="container"> … </div>
         <div class="next-tab-area">
            <div class="container">
               <a class="my-btn btn-red" id="next-tab" href="javascript:void(0);">
               Next</a>
            </div>
         </div>
      </div>
   </div>
</div>

Service photo and service provider 

<div class=”container”>
	<div class=”row”>
		<div class="view-review-left col-sm-7" style="min-height: 297px;">
			<div class="review-left-container" data-id="32683">
				<div class="review-left">
					<div class="review-delivery-icon">
						<img
						src="/images/items/item-40025-636662794529613777-jBfr
						SQ.jpg" alt="product image" style="width: 100%; height:
						100%">
					</div>
					<div class="review-delivery-user">
						<a
						href="/user/merchantaccount?merchantid=40025">
						<img class="user-avtar"
						src="/images/user/admin-lreituj8ly.jpg">
						<span>Admin</span></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Service Name 

<div class="view-review-left col-sm-7" style="min-height: 297px;">
	<div class="review-left-container" data-id="32683">
		<div class="review-left"> … </div>
		<div class="review-right">
			<p class="review-delivery-name">Blue tennis court</p>
		</div>
	</div>
</div>

Service Address 

<div class="review-right">
	<p class="review-delivery-name"> … </p>
	<p class="review-delivery-address">
	<i class="fa fa-map-marker" aria-hidden="true"></i>
	52 Central City Street, Singapore, , Singapore, 589201
	</p>
</div>

Booking details 

<div class="review-right">
	<p class="review-delivery-name"> … </p>
	<p class="review-delivery-address"> … </p>
	<div class="review-delivery-details">
	   <span class="review-info-detail">
		   <span class="d-text">Date:</span>
		   <span class="d-sub" id="startDate" data-booking-datetime="08/14/2018
		      12:00:00 AM">
		   14/08/2018
	    </span>
	    <span class="d-text">to</span>
	    <span id="endDate" data-booking-datetime="08/14/2018 12:00:00 AM"
	      class="d-sub">
	      1 4/08/2018
	   </span>
	   </span>
	   <span class="review-info-detail hide-if-wholeday" style="display: none;">
		   <span class="d-text">Time:</span>
		   <span class="d-sub" id="startTime">12:00 AM</span>
		   <span class="d-text">to</span>
		   <span id="endTime" class="d-sub">12:00 AM</span>
	   </span>
	   <span class="review-info-detail">
		   <span class="d-text">No. of day:</span>
		   <span class="d-sub">1</span>
	   </span>
	   <span class="review-info-detail">
		   <span class="d-text">Rate:</span>
		   <span class="d-sub">SGD $221.00 / day</span>
	   </span>
	</div>
</div>

Add-ons 

<div class="review-right">
…
	<div class="review-delivery-details"> .... </div>
	<!-- booking detail - -->
		<div class="review-delivery-details">
			<span class="review-info-detail-text">Add-ons</span>
			<ul>
				<li class="d-sub">Racket +SGD $20.00</li>
			</ul>
		</div>
	</div>
</div>

Subtotal 

<div class="review-right">
	…
	<div class="review-delivery-details"> … </div>
		<!-- Add-ons-->
		<div class="review-delivery-details">
			<span class="review-info-detail-text">
				Service sub-total:
				<span class="review-service-sub-total">SGD $241.00</span>
			</span>
		</div>
	</div>
</div>

Delivery Method 

<div class="review-right">
…
	<div class="review-delivery-details"> … </div>
	<!-- Subtotal-->
	<div class="review-delivery-details">
		<span class="review-info-detail-text">Delivery method</span>
		<ul>
		<li class="d-sub"> </li>
		</ul>
		<div id="changeShippingMethod" class="btn-gray-small-cmn"
		onclick="change_method('32683', '200419', '1')" style="display: none;">
		Change
	    </div>
	</div>
</div>

Note to seller 

<div class="review-right">
…
	<div class="review-delivery-details"> … </div>
	<!-- Delivery Method -->
	<div class="review-delivery-details">
		<span class="review-info-detail-text">Note to seller</span>
		<textarea id="txtNote" class="review-textarea"></textarea>
	</div>
</div>

Order Summary Title 

<div class=”container”>
	<div class=”row”>
		<div class="view-review-left col-sm-7" style="min-height: 297px;">
			<div class="view-chat-right col-sm-5" style="height: 596px;">
				<div class="review-fixed-sec" style="max-height: 452px; height: 297px;top: 70px;">
					<div class="review-order-summary-container">
						<p class="review-delivery-name">
						Order summary
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Order Summary Detail 

<div class="view-chat-right col-sm-5" style="height: 596px;">
	<div class="review-fixed-sec" style="max-height: 452px; height: 297px; top: 70px;">
		<div class="review-order-summary-container">
			<div class="review-order-summary">
			...
				<p class="review-delivery-address">
					Delivery address
				</p>
				<span class="d-sub">
					Nora Allen
				</span>
				<span class="d-sub">
					52 Central City Street, Singapore, Singapore,, 589201
				</span>
			</div>
		</div>
	</div>
</div>

Total Price & Detail 

<div class="view-chat-right col-sm-5" style="height: 596px;">
	<div class="review-fixed-sec" style="max-height: 452px; height: 297px; top: 70px;">
		<div class="review-order-summary-container">
			<div class="review-order-summary">
			...
				<div class="order-summary-price">
					<div class="review-order-container">
						<div class="review-order-detail">Subtotal</div>
						<div class="review-order-price">SGD
						$241.00</div>
					</div>
					<div class="review-order-container">
						<div class="review-order-detail">Delivery
						cost</div>
						<div class="review-order-price">SGD $0.00</div>
					</div>
					<div class="review-order-container">
						<div class="review-order-detail">Total</div>
						<div class="review-order-price
						review-price-green">SGD $241.00</div>
					</div>
				</div>
			</div>
	    </div>
    </div>
</div>

Previous & Next Button 

<div class="view-chat-right col-sm-5" style="height: 596px;">
	<div class="review-fixed-sec" style="max-height: 452px; height: 297px; top: 70px;">
		<div class="review-order-summary-container"> … </div>
		<div class="review-button">
			<div class="btn-gray-small-cmn">
				<a href="/user/order/deliverydetail?orderId=17119">Previous</a>
			</div>
			<div class="btn-green-small-cmn">
				<a id="btnNext"
				href="/user/checkout/select-gateway?addressid=47516&amp;id=17119&a
				mp;cartitemids=32683">Next</a>
			</div>
		</div>
	</div>
</div>

Amount to Pay 

<div class="delivery_white_section payment" style="min-height: 625px; position: relative;">
	<div class="delivery-line-container">
		<div class="container">
			<div class="delivery-setting">
				<div class="col-md-12 payment-amount-pay">
					Amount to Pay: <span class="">SGD $ 241.00</span>
				</div>
			</div>
		</div>
	</div>
</div>

Payment Option 

<div class="delivery_white_section payment" style="min-height: 625px; position: relative;">
	<div class="delivery-line-container">
		<div class="container">
			<div class="delivery-setting">
				<div class="col-md-12 payment-amount-pay"> … </div>
				<div class="item-form-group">
					<div class="col-md-6">
						<label>Select a payment method</label>
						<select class="checkout-payment-method-opt"
						id="SelectedGateway"
						name="PaymentMethod.SelectedGateway">
							<option value="stripe">Stripe</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Payment disclaimer 

<div class="delivery_white_section payment" style="min-height: 625px; position: relative;">
	<div class="delivery-line-container">
		<div class="container">
			<div class="delivery-setting">
				<div class="col-md-12 payment-amount-pay"> … </div>
				<div class="item-form-group"> … </div>
				<div class="col-md-12 payment-info-detail">
					Upon clicking the ‘Pay Now’ button, you will be re-directed
					to the Payment Processor page to continue with your transaction.
				</div>
			</div>
		</div>
	</div>
</div>

Pay now button 

<div class="delivery_white_section payment" style="min-height: 625px; position: relative;">
	<div class="delivery-line-container">
		<div class="container"> … </div>
		<div class="next-tab-area">
			<div class="container">
				<a class="my-btn btn-red" id="next-tab" href="javascript:void(0);">
				Pay now</a>
				<a class="my-btn-gray" id="previous-tab"
				href="/user/order/ordersummary?addressid=47516&amp;orderId=17119"
				>
				Previous</a>
			</div>
		</div>
	</div>
</div>

Green Tick 

<div class="delivery_white_section payment" style="min-height: 625px; position: relative;">
	<div class="delivery-line-container">
		<div class="container">
			<div class="white_section_thankyou" align="center">
				<div class="sucess-tick">
					<svg xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
					id="Layer_1" x="0px" y="0px" width="96px" height="96px"
					viewBox="0 0 96 96" enable-background="new 0 0 96 96"
					xml:space="preserve" class="success-tick replaced-svg"> …
					</svg>
				</div>
			</div>
		</div>
	</div>
</div>

Thank you for your purchase 

<div class="white_section_thankyou" align="center">
	<div class="sucess-tick"> … </div>
	<p class="thank-for-shop-txt">Thank you for your purchase!</p>
</div>

Check out information and invoice ID 

<div class="white_section_thankyou" align="center">
	<div class="sucess-tick"> … </div>
	<p class="thank-for-shop-txt"> … </p>
	<div class="thank-page-invoice">
		<p class="thank-small-txt">
			You will receive an order confirmation email shortly. If you have any
			enquiry, please contact our us.
		</p>
		<p class="thank-small-txt contact-us-href">
			<a href="/user/policy/contact%20us">
			Contact us</a>
		</p>
		<p class="thank-small-id">
			Your invoice id:
			<span class="invoice-id">RENTACO-1533549424319</span>
		</p>
	</div>
</div>

Action Button 

<div class="delivery_white_section payment" style="min-height: 625px; position: relative;">
	<div class="delivery-line-container">
		<div class="container"> …. </div>
		<div class="next-tab-area">
			<div class="container thankyou">
				<a class="my-btn btn-red" id="" href="/user/order/orderhistory">
				Purchase history</a>
				<a class="my-btn-gray" id="" href="/user">Home page</a>
			</div>
		</div>
	</div>
</div>