style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : OrderPaymentInfoWeb.html
 * @desc    : 결제정보 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.01   jsh77b     최초 작성
 *******************************************************************************
 -->
<div class="fold_head">
	<a href="javascript:void(0)">
		<div>
			<div class="fold_tit"><span>결제수단 선택</span></div>
			<div class="data"><span>STYLE24 간편결제</span></div>
		</div>
	</a>
</div>
<div class="fold_cont" style="display: none;">
	<div class="area_paymethod">
		<div class="form_field">
			<div class="radio_blk">
				<div class="paymethod_radio">
					<input type="radio" name="rdi-paymethod" id="rdi-paymethod-quick" value=""> 
					<label for="rdi-paymethod-quick"><span>STYLE24 간편결제</span></label>
					<div class="quickpay_bnr">
						<span>3초면 결제 끝! 추가 혜택 할인과 함께 만나는 STYLE24 간편결제! 지금 바로 등록하세요!</span>
						<button type="button" class="btn_close_bnr">
							<span class="sr-only">닫기</span>
						</button>
					</div>
				</div>
				<div class="paymethod_box" style="display: none;">
					<div class="card_quickpay">
						<!-- 등록카드 없을때 -->
						<div class="empty">
							<button type="button" class="btn_addcard">
								<span>결제수단 등록</span>
							</button>
						</div>
						<!-- //등록카드 없을때 -->
						
						<!-- 등록카드 있을때 -->
						<div class="list_card swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<!-- 등록된 카드 -->
									<div class="card">
										<span class="logo_samsung">삼성카드</span>
										<p class="number">
											<span>9410</span> <span>09**</span> <span>****</span>
											<span>1287</span>
										</p>
										<p class="name">삼성개인특별카드</p>
										<select name="" id="" class="select_month">
											<option value="">일시불</option>
											<option value="">2개월 무이자</option>
											<option value="">3개월 무이자</option>
											<option value="">4개월 무이자</option>
											<option value="">5개월 무이자</option>
											<option value="">6개월 무이자</option>
											<option value="">7개월</option>
											<option value="">8개월</option>
											<option value="">9개월</option>
											<option value="">10개월</option>
											<option value="">11개월</option>
											<option value="">12개월</option>
										</select>
										<div class="etc">
											<button type="button" class="btn_favorcard">
												<span><i class="ico ico_star"></i><em class="sr-only">즐겨찾기</em></span>
											</button>
											<button type="button" class="btn_delcard">
												<span><i class="ico ico_trash_wh"></i><em class="sr-only">카드삭제</em></span>
											</button>
										</div>
									</div>
									<!-- //등록된 카드 -->
								</div>
								<div class="swiper-slide">
									<!-- 등록된 카드 -->
									<div class="card">
										<span class="logo_hyundai">현대카드</span>
										<p class="number">
											<span>9410</span> <span>09**</span> <span>****</span>
											<span>1287</span>
										</p>
										<p class="name">현대 M3 카드</p>
										<select name="" id="" class="select_month">
											<option value="">일시불</option>
											<option value="">2개월 무이자</option>
											<option value="">3개월 무이자</option>
											<option value="">4개월 무이자</option>
											<option value="">5개월 무이자</option>
											<option value="">6개월 무이자</option>
											<option value="">7개월</option>
											<option value="">8개월</option>
											<option value="">9개월</option>
											<option value="">10개월</option>
											<option value="">11개월</option>
											<option value="">12개월</option>
										</select>
										<div class="etc">
											<button type="button" class="btn_favorcard active">
												<span><i class="ico ico_star"></i><em class="sr-only">즐겨찾기</em></span>
											</button>
											<button type="button" class="btn_delcard">
												<span><i class="ico ico_trash_wh"></i><em class="sr-only">카드삭제</em></span>
											</button>
										</div>
									</div>
									<!-- //등록된 카드 -->
								</div>
								<div class="swiper-slide">
									<!-- 카드추가버튼 -->
									<button type="button" class="btn_addcard">
										<span>결제수단 등록</span>
									</button>
									<!-- //카드추가버튼 -->
								</div>
							</div>
							<div class="swiper-button-next"></div>
							<div class="swiper-button-prev"></div>
						</div>
						<!-- //등록카드 있을때 -->
					</div>
					<ul class="info_quick">
						<li>결제수단 등록 한번으로 간편하게 결제하실 수 있습니다.</li>
						<li>국내 8개 카드에 대해 이용 가능합니다. (법인카드,기프트카드,해외카드 제외)</li>
						<li>일반 신용카드의 할인혜택은 적용되지 않습니다.</li>
					</ul>
				</div>
			</div>
			<div class="radio_blk">
				<div class="paymethod_radio">
					<input type="radio" name="rdi-paymethod" id="rdi-paymethod-normal" value=""> 
					<label for="rdi-paymethod-normal"><span>일반 결제</span></label>
				</div>
				<div class="paymethod_box" style="display: none;">
					<ul class="sel_method">
						<li>
							<input type="radio" name="rdi-paynormal" id="rdi-paynormal1" value=""> 
							<label for="rdi-paynormal1"><span>신용카드</span></label>
						</li>
						<li>
							<input type="radio" name="rdi-paynormal" id="rdi-paynormal2" value=""> 
							<label for="rdi-paynormal2"><span>실시간계좌이체</span></label>
						</li>
						<li>
							<input type="radio" name="rdi-paynormal" id="rdi-paynormal3" value=""> 
							<label for="rdi-paynormal3"><span>무통장입금</span></label>
						</li>
						<li>
							<input type="radio" name="rdi-paynormal" id="rdi-paynormal4" value=""> 
							<label for="rdi-paynormal4"><span>휴대폰 결제</span></label>
						</li>
						<li>
							<input type="radio" name="rdi-paynormal" id="rdi-paynormal5" value=""> 
							<label for="rdi-paynormal5">
								<span>
									<em class="sr-only">카카오페이 결제</em>
									<em class="payimg kakao"></em>
								</span>
							</label>
						</li>
						<li>
							<input type="radio" name="rdi-paynormal" id="rdi-paynormal6" value=""> 
							<label for="rdi-paynormal6">
								<span>
									<em class="sr-only">네이버페이 결제</em>
									<em class="payimg naver"></em>
								</span>
							</label>
						</li>
						<li>
							<input type="radio" name="rdi-paynormal" id="rdi-paynormal7" value=""> 
							<label for="rdi-paynormal7">
								<span>
									<em class="sr-only">페이코 결제</em>
									<em class="payimg payco"></em>
								</span>
							</label>
						</li>
					</ul>
					<div class="agree_insurance">
						<input id="chk-insurance" type="checkbox"> 
						<label for="chk-insurance"> 
							<span>소비자 피해 보상보험 신청&nbsp;&nbsp;<em class="tmark_optional">(선택)</em></span>
							<button type="button" class="btn_link_popup" id="">
								<span>FAQ확인</span>
							</button>
						</label>
						<p>
							‘전자상거래 등에서의 소비자보호에 관한 법률‘에 따라 현금 결제 시 서울보증보험㈜가 제공하는
							소비자 피해보상보험을<br>신청할 수 있도록 해드리고 있습니다.
							(2013.11.28부터 시행)
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="form_field">
			<div class="agree_paymethod">
				<input id="chk-agree_paymethod" type="checkbox">
				<label for="chk-agree_paymethod"> 
					<span>선택한 결제수단으로 향후 결제 이용에 동의합니다.&nbsp;&nbsp;<em class="tmark_optional">(선택)</em>
				</span>
				</label>
			</div>
		</div>
	</div>
	<div class="area_paymentinfo">
		<div class="paymentinfo">
			<div class="payinfo_blk on">
				<a href=""> 개인정보 제공에 대한 동의 <span>닫기</span>
				</a>
				<div class="infotxt">개인정보제공에 대한 동의 내용입니다.개인정보제공에
					대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
					내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
					대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
					내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
					대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
					내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
					대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
					내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
					대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
					내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
					대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
					내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
					대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
					내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.</div>
			</div>
			<div class="payinfo_blk">
				<a href=""> 결제대행 서비스 약관 동의 <span>보기</span>
				</a>
				<div class="infotxt">결제대행서비스 약관 동의 내용입니다.결제대행서비스
					약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
					내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
					약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
					내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
					약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
					내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
					약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
					내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
					약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
					내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
					약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
					내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
					약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
					내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.</div>
			</div>
		</div>

		<div class="agree_payment">위 주문내역을 확인 하였으며, 회원 본인은 결제에 동의합니다.</div>
	</div>
	<div class="area_paybtn">
		<div class="form_field">
			<button type="button" class="btn btn_primary btn_block" id="btn_payment">동의 후 123,456,789원 결제하기</button>
		</div>
	</div>
</div> 

<script th:inline="javascript">
var dispYn = [[${order.dispYn}]]; // 노출여부

//컨텐츠 호출
$(document).ready( function() {
	dispYn = "Y";
	
	// 화면펼침
	if (dispYn == "Y") {
		$("#paymentInfo .fold_head").addClass("on");
		$("#paymentInfo .fold_cont").css("display", "block");
	}
});
</script>

</html>