style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
							<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="web/common/layout/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : OrderAddPaymentWeb.html
 * @desc	: 추가결제화면 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.13   jsh77b	 최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">

<!-- payment.js -->
<script type="text/javascript" th:src="${@environment.getProperty('pg.kcp.js.url')}" src=""></script>
<script type="text/javascript" src="/biz/payment.js"></script>

<!-- 주문정보form -->
<form id="order_info" name="order_info" method="post" action="/order/addPay/result/response" style="display:none"></form>
<!-- //주문정보form -->

<form class="form_wrap" name="addPayForm" id="addPayForm">
	<input type="hidden" name="refundAmt" th:value="${refundAmt}">
	<input type="hidden" name="ordNo" th:value="${ordNo}">
	<input type="hidden" name="addPayCost" th:value="${addPayCost}">
	<input type="hidden" name="ordChgSq" th:value="${ordChgSq}">
	
	<input type="hidden" name="chgGb" th:value="${chgGb}">
	<input type="hidden" name="chgerPhnno" th:value="${chgerPhnno}">
	<input type="hidden" name="chgerNm" th:value="${chgerNm}">
	<input type="hidden" name="goodsNm" th:value="${goodsNm}"> 
	
	<!--  container -->
	<div id="container" class="container od">
		<div class="wrap">
			<div class="content odPayment"> <!-- 페이지특정 클래스 = odPayment 클래스 추가 -->
				<div class="cont_head">
					<h2>추가결제</h2>
				</div>
				<div class="cont_body">
					<!-- CONT-BODY -->
					<div class="od_cont">
							<div class="sec_body">
								<div class="extra_pay">
									<div class="tit_pay">
										<span>결제수단 선택</span>
									</div>
									<div class="area_paymethod">
										<div class="form_field">
											<div class="paymethod_box">
												<ul class="sel_method">
													<li>
														<input type="radio" name="rdi-paynormal" id="payCreditCard" class="KCP" value="KCP|G014_30" checked="checked">
														<label for="payCreditCard"><span>신용카드</span></label>
													</li>
													<li>
														<input type="radio" name="rdi-paynormal" id="payCellphone" class="KCP" value="KCP|G014_60">
														<label for="payCellphone"><span>휴대폰 결제</span></label>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="area_paymentinfo">
									<div class="paymentinfo">
										<!-- 210421_수정 : 테이블 추가. -->
										<div class="payinfo_blk">
											<a href="javascript:void(0)">
												개인정보 제공에 대한 동의
												<span>보기</span>
											</a>
											<div class="infotxt">
												STYLE24는 다음과 같이 회원님의 개인정보를 제3자에게 제공합니다.
												<table>
													<colgroup>
														<col width="25%">
														<col width="*">
														<col width="25%">
														<col width="25%">
													</colgroup>
													<thead>
														<tr>
															<th>제공받는 자</th>
															<th>제공하는 항목</th>
															<th>제공 목적</th>
															<th>보유 및 이용기간</th>
														</tr>
													</thead> 
													<tbody>
														<tr>
															<td>
																서울보증보험㈜, ㈜유세이프
															</td>
															<td>
																구매자명, 구매자 생년월일,
																구매자 성별, 구매자 연락처
																(일반전화 및 핸드폰), 구매자
																이메일, 주문번호,
																배송지 정보, 주문 금액
															</td>
															<td>
																쇼핑몰보증보험 가입 및 보험가입 제반 사항
															</td>
															<td>
																개별서비스 제공기간
															</td>
														</tr>
														<tr>
															<td>
																더비오유컴퍼니 주식회사
															</td>
															<td>
																성명, 주소, 연락처
															</td>
															<td>
																주문상품의 배송, 고객상담 및 불만처리
															</td>
															<td>
																이용목적 달성 시 까지
															</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
										<!-- 210421_수정 : 테이블 추가. -->
										<div class="payinfo_blk">
											<a href="">
												결제대행 서비스 약관 동의
												<span>보기</span>
											</a>
											<div class="infotxt">
												결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.
											</div>
										</div>
									</div>
									<div class="agree_payment">
										위 주문내역을 확인 하였으며, 회원 본인은 결제에 동의합니다. (전자상거래법 제 8조 제2항) <!-- 210421_수정 : 텍스트 수정. -->
									</div>
								</div>
							<div class="area_paybtn">
								<div class="form_field">
									<button type="button" class="btn btn_primary btn_block" id="btn_payment">
										<span>동의 후 <em th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}원|"></em> 결제하기</span>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="od_side">
						<div class="area_order">
							<div class="tit_box"><h3>결제내역</h3></div>
							<div class="od_item_box">
								<!-- 반품상품 내역 -->
								<div class="part_dlvr">
									<th:block th:if="${chGb} == 'G680_20'">
										<h4 class="sr-only">반품상품</h4>
									</th:block>
									<th:block th:if="${chGb} == 'G680_30'">
										<h4 class="sr-only">반품상품</h4>
									</th:block>
									<th:block th:if="${chGb} == 'G680_40'">
										<h4 class="sr-only">교환상품</h4>
									</th:block>
									<div class="gd_list">
										<th:block th:each="goods, i : ${orderAddPayGoodsList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
										<div class="item_gd">
											<figure>
												<span class="thumb">
													<img th:src="${imageUrl + '/' + goods.sysImgNm}" src="/" width="100%" alt="">
												</span>
												<figcaption>
													<div class="brand" th:text="${goods.brandEnm} + ' ' + ${goods.brandKnm}"></div>
													<div class="name goodsNm" th:text="${goods.goodsNm}"></div>
													<div class="option" th:each="colorNm, index : ${goods.colorNmArr}">
														<span th:text="${colorNm}+'/'+${goods.optCd2Arr[index.index]}"></span> 
													</div>
													<div class="option">
														<span>수량:<em th:text="${goods.chgQty}"></em>개</span>
													</div>
													<div class="price">
														<span class="selling_price" th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.chgQty, 1, 'COMMA')}"></span>
													</div>
												</figcaption>
											</figure>
										</div>
										</th:block>
									</div>
								</div>
								<!-- //반품상품 내역 -->
							</div>
							<div class="od_amount_box">
								<dl>
									<div>
										<dt>환불 상품금액</dt>
										<dd><em th:text="|${#numbers.formatInteger(refundAmt, 1, 'COMMA')}|"></em>원</dd>
									</div>
									<div>
										<dt>반품/교환 배송비</dt>
										<dd><em th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}|"></em>원</dd>
									</div>
								</dl>
							</div>
							<div class="totalprice_box">
								<dl>
									<dt>총 결제 예정 금액</dt>
									<dd><span th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}|"></span>원</dd>
								</dl>
								<p class="info_extra">
									환불할 상품금액이 반품/교환 배송비보다 적을<br>
									경우 배송비 를 결제하신 후 남은 상품금액이<br>
									환불처리 됩니다.
								</p>
							</div>
						</div>
					</div>
					<!-- // CONT-BODY -->
				</div>
			</div>
		</div>
	</div>
	<!-- // container -->	
</form>

<script th:inline="javascript">
// 개인정보동의 열고닫기
$(document).on('click','.area_paymentinfo .payinfo_blk a',function(e){
	e.preventDefault();
	$(this).parents('.payinfo_blk').toggleClass('on');
	$(this).parents('.payinfo_blk').siblings('.payinfo_blk').removeClass('on'); //210428_수정 : 아코디언 추가.
	var privacyToggle = $(this).find('span');
	$(privacyToggle).text($(privacyToggle).text() == '보기' ? '닫기' : '보기');
	return false;
});

//결재하기
$("#btn_payment").on("click", function(){
	var paynormal			= $("input[name='rdi-paynormal']:checked").val();
	var paynormalArr		= paynormal.split("|");
	var pgGb				= paynormalArr[0];
	var payMeans			= paynormalArr[1];
	
	// 주문데이타 생성
	var orderData = {
		"pgGb"					: pgGb
		,"payMeans"				: payMeans // 네이버페이, 카카오페이
		,"ordNo"				: $("#addPayForm input[name=ordNo]").val()
		,"addPayCost"			: $("#addPayForm input[name=addPayCost]").val()
		,"ordChgSq"				: $("#addPayForm input[name=ordChgSq]").val()
		,"chgGb"				: $("#addPayForm input[name=chgGb]").val()
		,"chgerPhnno"			: $("#addPayForm input[name=chgerPhnno]").val()
		,"chgerNm"				: $("#addPayForm input[name=chgerNm]").val()
		,"goodsNm"				: $("#addPayForm input[name=goodsNm]").val()
	};
	
	$.ajax( {
		type		: "POST",
		url 		: '/order/addPayment',
		data		: JSON.stringify(orderData),
		dataType 	: 'html',
		beforeSend : function(xhr, settings) {
			xhr.setRequestHeader("AJAX"			, "true");
			xhr.setRequestHeader('Accept'		, 'application/json');
			xhr.setRequestHeader('Content-Type'	, 'application/json');
		},
		success 	: function(result) {
			// 결재정보로드
			$("#order_info").html(result);
			
			var pgGb = $("#order_info input[name=pgGb]").val();
			
			if (pgGb == "NAVER") {
				fnNaverPaymentReady();
			} else if (pgGb == "KAKAO") {
				fnKakaoPaymentReady();
			} else if (pgGb == "KCP" || pgGb == "PAYCO") {
				jsf__pay(document.order_info);
			}
		}
	});
});

</script>
</th:block>
</body>
</html>