Files
sake/src/main/webapp/WEB-INF/views/sopmal/ordr/IndvdlSetleC.jsp
2025-10-29 17:08:05 +09:00

2143 lines
124 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>
<%--
Class Name:IndvdlSetleC.jsp
Description:개인결제
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-04-11 김혜인 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
<script src="<c:url value='/js/dlvylc/dlvylc.js'/>"></script>
<script>
$(document).ready(function() {
fn_event();
fn_init();
fn_modal_init();
});
/* ********************************************************
* 초기 설정
**********************************************************/
const fn_modal_init = function() {
$('.gcpayGuideSlick').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
});
$('#gcpay-info').on($.modal.OPEN, function (event, modal) {
$('.gcpayGuideSlick').slick('setPosition').slick(); // 모달 팝업 열었을 때 slick 재설정
});
// gcpay 사용안할 경우 기본 세팅
const gcpayCardUseAt = $('#gcpayCardUseAt').val();
let gcpayAt = ( gcpayCardUseAt === 'Y')? 'Y' : 'N';
const setleTy = $('#setleSetupTyCd').val(); //01:kcp, 02:toss
const setleTyCd = (setleTy==='01')?'#pg04':'#pg03';
if (gcpayAt === 'N') {
$(setleTyCd).click();
}
}
const fn_init = function() {
localStorage.clear();
const isDftDlvylc = $('#isDftDlvylc').val();
if ('N' === isDftDlvylc) {
$('input[name="dlvylcDvCd"][value="New"]').trigger('click');
}
const mbrDvCd = $('#mbrDvCd').val();
const mbrId = $('#mbrId').val();
//const mbrInnb = $('#mbrInnb').val();
const sopmalCd = $('#sopmalCd').val();
const paramVO = JSON.parse('${paramVO}');
let param = {
// 'mbrDvCd':mbrDvCd,
// 'mbrId':mbrId,
// 'mbrInnb':mbrInnb,
// 'sopmalCd':sopmalCd,
'goodsList':JSON.parse('${data.goodsListByJson}'),
'ordrInnb':paramVO.ordrInnb
};
fn_get_goods_list(param, null);
fn_get_setle_amt();
}
/* ********************************************************
* 이벤트 설정
**********************************************************/
const fn_event = function() {
/* ****************************
* 공통
******************************/
/* input 숫자만 입력 */
$(document).on('input', '.number-only', function() {
$(this).val(($(this).val().replace(/[^0-9]/g, '')).replace(/^0+/, ''));
});
/* 배송지정보 > 배송지 선택 라디오 박스 선택 이벤트 */
$('input[name="dlvylcDvCd"]').on('click', function() {
$('[class*="deliveryAddress"]').hide();
$('.deliveryAddress' + $(this).val()).show();
$('#dlvylcForm').find('.new').val('');
if ('Default' === $(this).val()) {
$('#btnDlvylcMngr').hide();
} else {
$('#btnDlvylcMngr').show();
}
});
/* 배송지정보 > 배송지 관리 버튼 선택 이벤트 */
$('#btnDlvylcMngr').on('click', function() {
const dlvylcDvCd = $('input[name="dlvylcDvCd"]:checked').val();
//const mbrInnb = $('#mbrInnb').val();
if ('Default' === dlvylcDvCd) {
return false;
}
//fn_move_dlvylc_manage_pop(1, mbrInnb, 'fn_set_dlvylc');
fn_move_dlvylc_manage_pop(1, 'fn_set_dlvylc');
});
//배송지정보 > 배송 요청사항 직접입력 글자수제한 숫자표시
$('.deliveryRequestSelect').on("change", function () {
const value = $(this).val();
const input = $('#dlvyMssageCn');
if ('write' === value) {
$('.deliveryRequestDetail').show();
$(input).val('');
} else {
$('.deliveryRequestDetail').hide();
$(input).val(value.trim());
}
});
// 배송지정보 > 배송 요청사항 직접입력 글자수제한 숫자표시
$('input[name="dlvyMssageCn"]').on("input", function () {
$(".inputLimit__current").text($(this).val().length);
});
/* 배송지정보 > 우편번호 찾기 버튼 선택 이벤트 */
$(document).on('click', '#btnPost', function() {
const button = $(this);
new daum.Postcode({
oncomplete: function (data) {
const postcode = data.zonecode;
const roadAddr = data.roadAddress;
const jibunAddress = data.jibunAddress;
let addressType = '';
let extraRoadAddr = '';
// userSelectedType R/J 검색 결과에서 사용자가 선택한 주소의 타입(R:도로명, J:지번)
if (data.userSelectedType === 'R') {
addressType = 'street';
} else {
addressType = 'zibun';
}
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if (data.buildingName !== '' && data.apartment === 'Y') {
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName:data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if (extraRoadAddr !== '' && roadAddr !== '') {
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
fn_set_dlvylc({
postcode:postcode,
roadAddress:roadAddr,
jibunAddress:jibunAddress,
addressType:'street' === addressType ? '01':'02',
extraAddress:extraRoadAddr
}, button);
}
}).open();
// 배송 요청사항 직접입력 글자수제한 숫자표시
$('input[name="btnAllUseMlgAmt"]').on("input", function () {
$(".inputLimit__current").text($(this).val().length);
});
});
/* 할인 정보 > 마일리지 할인 포커스 아웃 이벤트 */
$('#useMlgAmt').focusout(function() {
const useMlgAmt = $(this).val();
const mlgAmt = parseInt(!fn_is_empty(useMlgAmt) ? useMlgAmt:'0');
const ableMlgAmt = $(this).closest('div').find('input[name="ableMlgAmt"]').val();
/*
if (mlgAmt > ableMlgAmt) {
alert('사용가능 마일리지 금액을 넘을수 없습니다.');
$(this).val(ableMlgAmt);
return false;
}
const lmttUseMlg = $('#lmttUseMlg').val();
if (mlgAmt > Number(lmttUseMlg)) {
alert('사용하실수 있는 마일리지 한도(' + (lmttUseMlg).toLocaleString() + '원)보다 큽니다.');
$(this).val(ableMlgAmt);
return false;
}
*/
fn_set_enuri();
fn_get_setle_amt();
});
/* 할인 정보 > 마일리지 모두사용 버튼 선택 이벤트 */
$('#btnAllUseMlgAmt').on('click', function() {
const ableMlgAmt = parseInt($(this).closest('div').find('input[name="ableMlgAmt"]').val(), 10); // 보유 마일리지
const lmttUseMlg = parseInt($('#lmttUseMlg').val(), 10);
/*
if (0 >= ableMlgAmt) {
alert('사용할 수 있는 마일리지 금액이 없습니다.');
}
if (ableMlgAmt > Number(lmttUseMlg)) {
alert('사용하실수 있는 마일리지 한도(' + (lmttUseMlg).toLocaleString() + '원)보다 큽니다.');
$('#useMlgAmt').val(ableMlgAmt);
return false;
}
*/
const useMlgAmt = lmttUseMlg > ableMlgAmt ? ableMlgAmt : lmttUseMlg;
$(this).closest('div').find('input[name="useMlgAmt"]').val(useMlgAmt)
fn_set_enuri();
fn_get_setle_amt();
});
/* 결제정보 > 결제수단 버튼 선택 이벤트 */
$('input[name="pg"]').on('click', function() {
const form = $(this).closest('#setleForm')
const id = $(this).attr('id');
const pgCmpnyNm = $(this).val();
$(form).find('.pgContent').hide();
$(form).find('#' + id + 'Content').show();
$(form).find('#pgCmpnyNm').val(pgCmpnyNm);
if ('pg01' === id || 'pg02' === id) {
if ('pg02' === id) { // gcpay 간편계좌결제
$('#gc-pay-bank-cash-receipt').prop('checked', true).trigger("click");
$(form).find('#gc-pay-bank-cash-receipt').on('click', function () {
const checked = $(this).is(':checked');
if (checked) {
$('#' + $(this).attr('id') + '-content-inner').show();
fn_set_csh_rcipt_issu($(this).attr('id'));
} else {
$('#' + $(this).attr('id') + '-content-inner').hide();
}
});
}
$(form).find('#setleTyCd').val('pg01' === id ? '01' : '03'); // 카드 : 실시간 계좌이체
$('.bankSlideW, .cardSlideW').slick('setPosition');
} else if('pg05' === id){
$('#transfer-cash-receipt').prop('checked', true).trigger("click");
$(form).find('#transfer-cash-receipt').on('click', function () {
const checked = $(this).is(':checked');
if (checked) {
$('#' + $(this).attr('id') + '-content-inner').show();
fn_set_csh_rcipt_issu($(this).attr('id')); //퀵계좌 헌금영수증 폼
} else {
$('#' + $(this).attr('id') + '-content-inner').hide();
}
});
$(form).find('#setleTyCd').val('03');
} else {
$(form).find('#setleTyCd').val('');
$('.order-method-normal__btn').removeClass('active');
$('.order-method-normal__content').hide();
}
});
/* 결제정보 > 일반결제 > 결제수단 버튼 선택 이벤트 */
$('.order-method-normal__btn').on('click', function() {
const index = $(this).index();
const content = $('.order-method-normal__content');
$('.order-method-normal__btn').removeClass('active');
$(this).addClass('active');
$(content).hide();
$(content[index]).show();
const id = $(this).attr('id');
const setleTyCd = $(this).attr('name');
const form = $(this).closest('#setleForm')
$(form).find('#isKeyIn').val('N'); // 수기결제여부
if ('tosspay' === id || 'naverpay' === id || 'kakaopay' === id) {
$(form).find('#pgCmpnyNm').val(id);
$(form).find('#setleTyCd').val('01');
} else {
$(form).find('#pgCmpnyNm').val($('input[name="pg"]:checked').val());
if ('hndwr-card' !== id) {
if ('payco' === id || 'card' === id) {
$('#' + id + '-content').show();
} else {
fn_set_csh_rcipt_issu(id);
}
} else {
$(form).find('#isKeyIn').val('Y');
$('#hndwr-card-content-inner').find('.order-method-hndwr-card').val('');
}
$(form).find('#setleTyCd').val(setleTyCd);
}
});;
/* 결제예정금액 > 구매하기 버튼 선택 이벤트 */
$('#btnBuy').click(function () {
const data = fn_validate();
if (!data) {
return false;
}
/*
if (!confirm('주문을 <spring:message code="confirm.common.insert"/>')) {
return false;
}
*/
$.ajax({
type: 'post',
contentType: 'application/json',
url: '<c:url value="/sopmal/ordr/insertIndvdlSetle"/>',
data: JSON.stringify(data),
success: function (html) {
$('#setleDiv').html(html);
},
error: function (data) {
alert('<spring:message code="error.internal-server"/>');
}
});
});
}
/* ********************************************************
* function
**********************************************************/
/* 배송지정보 > 신규 배송지 정보 세팅 */
const fn_set_dlvylc = function(data) {
const form = $('#dlvylcForm');
$(form).find('input[name="recpntNm"]').val(data.recpntNm);
$(form).find('input[name="recpntTelnb"]').val(data.mbtlnb);
$(form).find('input[name="dlvylcZip"]').val(data.postcode);
$(form).find('input[name="dlvylcAdresDvCd"]').val(data.addressType);
$(form).find('input[name="dlvylcAdres"]').val('01' === data.addressType ? data.roadAddress:data.jibunAddress);
$(form).find('input[name="dlvylcLnbAdres"]').val(data.jibunAddress);
$(form).find('input[name="dlvylcRnmAdres"]').val(data.roadAddress);
$(form).find('input[name="dlvylcAdresDtl"]').val(data.dtlAdres);
}
/* 배송지정보 > 배송지 정보 조회 */
const fn_get_dlvylc_data = function() {
const dlvylcDvCd = $('input[name="dlvylcDvCd"]:checked').val();
let data = {};
if ('Default' === dlvylcDvCd) {
const form = $('#dlvylcForm');
$(form).find('.dft').each(function() {
const id = $(this).attr('id');
data[id] = $(this).val();
});
} else {
data = fn_get_form_obj('dlvylcForm');
}
return data;
}
/* 주문 상품 > 상품목록 조회 */
const fn_get_goods_list = function(param, obj) {
$.ajax({
type: 'post',
contentType: 'application/json',
url: '<c:url value="/sopmal/ordr/selectIndvdlSetleOrderGoodsList"/>',
data: JSON.stringify(param),
dataType: 'json',
async: false,
success: function (data) {
if (data.resBody != null) {
const result = JSON.parse(data.resBody.result);
if (!fn_is_empty(result.message)) {
alert(result.message);
if (!fn_is_empty(obj)) {
$(obj).val('0').attr('selected', true).niceSelect('update');
}
return false;
}
localStorage.setItem('goodsList', JSON.stringify(result.goodsList));
fn_set_goods_list(result.goodsList);
fn_set_prsnt_list(result.prsnt);
fn_set_enuri_amt(result.enuriAmt);
}
},
error: function (data) {
alert('<spring:message code="error.internal-server"/>');
}
});
}
/* 주문 상품 > 상품목록 세팅 */
const fn_set_goods_list = function(data) {
const tbody = $('#goodsList');
const sopmalCd = $('#sopmalCd').val();
const cdnurl = $('#cdnurl').val(); // 이미지 주소
let tr = '';
if (!fn_is_empty(data)) {
for (let i = 0; i < data.length; i++) {
const goods = data[i];
tr += '<tr class="ordrGoods">';
tr += ' <td>';
tr += ' <div class="cartItem">';
tr += ' <div class="cartItem__image">';
tr += ' <a href="/sopmal/goods/selectGoodsDtl?sopmalCd=' + sopmalCd + '&goodsInnb=' + goods.goodsInnb + '">';
tr += ' <img src="' + cdnurl + goods.goodsImgCours + '" onerror="this.src=\'/pc/images/image_placeholder.png\'" alt="' + goods.goodsNm + '">';
tr += ' </a>';
tr += ' </div>';
tr += ' <div class="cartItem__productInfo">';
tr += ' <a href="javascript:void(0);" class="cartItem__productTitle">' + goods.goodsNm + '</a>';
tr += ' <span class="cartItem__productOption"><span class="option-badge">옵션</span> ' + goods.optn + '</span>';
if (!fn_is_empty(goods.inputOptnText)) {
tr += ' <span class="cartItem__productOption">' + goods.inputOptnText + '</span>';
}
tr += ' </div>';
tr += ' </div>'
tr += ' <input type="hidden" class="dplctLmttCoupon" value="' + fn_nvl(goods.dplctLmttCoupon, '') + '"/>';
tr += ' <input type="hidden" class="dplctLmttEvtnm" value="' + fn_nvl(goods.dplctLmttEvtnm, '') + '"/>';
// tr += ' <input type="hidden" class="mbrInnb" value="' + fn_nvl(goods.mbrInnb, '') + '"/>';
tr += ' <input type="hidden" class="goodsInnb" value="' + fn_nvl(goods.goodsInnb, '') + '"/>';
tr += ' <input type="hidden" class="goodsOptnInnb" value="' + fn_nvl(goods.goodsOptnInnb, '') + '"/>';
tr += ' <input type="hidden" class="qy" value="' + fn_nvl(goods.qy, '') + '"/>';
tr += ' <input type="hidden" class="usedCoupons" value="' + fn_nvl(goods.usedCoupons, '') + '"/>';
tr += ' </td>';
tr += ' <td>';
tr += ' <span>' + goods.qy + '</span>';
tr += ' </td>';
tr += ' <td>';
tr += ' <span class="cartItem__discountPrice"><span class="cartItem__discountMinus">(-)</span><span class="comma">' + (goods.dscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
tr += ' </td>';
tr += ' <td>';
tr += ' <span class="cartItem__beforePrice"><span class="comma">' + (goods.subSlepric).toLocaleString() + '</span>원</span>';
tr += ' <span class="cartItem__afterPrice"><span class="comma">' + (goods.dscntApplyAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
tr += ' </td>';
tr += '</tr>';
}
} else {
tr += '<tr><td colSpan="100%"><spring:message code="common.nodata"/></td></tr>';
}
$(tbody).empty().append(tr);
$(tbody).closest('table').find('.select-box select').niceSelect();
}
/* 주문 상품 > 사은품 목록 세팅 */
const fn_set_prsnt_list = function(data) {
if (!fn_is_empty(data)) {
const tbody = $('#prsntList');
const keys = Object.keys(data);
const cdnurl = $('#cdnurl').val(); // 이미지 주소
let tr = ''
for (let j = 0; j < keys.length; j++) {
const key = keys[j];
const prsntList = data[key];
if (!fn_is_empty(prsntList)) {
for (let i = 0; i < prsntList.length; i++) {
const prsnt = prsntList[i];
tr += '<tr class="prsnt_' + key + '">';
tr += ' <td>';
tr += ' <div class="cartItem">';
tr += ' <div class="cartItem__image">';
tr += ' <img src="' + cdnurl + prsnt.goodsImgCours + '" onerror="this.src=\'/pc/images/image_placeholder.png\'" alt="' + prsnt.goodsNm + '"/>">';
tr += ' </div>';
tr += ' <div class="cartItem__productInfo">';
tr += ' <a href="javascript:void(0);" class="cartItem__productTitle">' + prsnt.goodsNm + '</a>';
tr += ' </div>';
tr += ' </div>';
tr += ' <input type="hidden" class="goodsInnb" value="' + fn_nvl(prsnt.goodsInnb, '') + '"/>';
tr += ' <input type="hidden" class="goodsOptnInnb" value="' + fn_nvl(prsnt.goodsOptnInnb, '') + '"/>';
tr += ' <input type="hidden" class="goodsNm" value="' + fn_nvl(prsnt.goodsNm, '') + '"/>';
tr += ' <input type="hidden" class="goodsImgCours" value="' + fn_nvl(prsnt.goodsImgCours, '') + '"/>';
tr += ' <input type="hidden" class="evtInnb" value="' + fn_nvl(prsnt.evtInnb, '') + '"/>';
tr += ' <input type="hidden" class="provdCnt" value="' + fn_nvl(prsnt.provdCnt, '') + '"/>';
tr += ' <input type="hidden" class="isRcvPrsnt" value="Y"/>';
tr += ' </td>';
tr += ' <td><span>' + (prsnt.provdCnt).toLocaleString() + '</span></td>';
if (i === 0) {
tr += ' <td rowspan="' + prsntList.length + '">';
tr += ' <div class="custom-radio-container">';
tr += ' <div class="custom-radio">';
tr += ' <input type="radio" name="isRcvPrsnt' + prsnt.evtInnb + '" id="Y' + prsnt.evtInnb + '" value="Y" class="rcvPrsnt" checked>';
tr += ' <label for="Y' + prsnt.evtInnb + '">수령</label>';
tr += ' </div>';
tr += ' <div class="custom-radio">';
tr += ' <input type="radio" name="isRcvPrsnt' + prsnt.evtInnb + '" id="N' + prsnt.evtInnb + '" value="N" class="rcvPrsnt">';
tr += ' <label for="N' + prsnt.evtInnb + '">미수령</label>';
tr += ' </div>';
tr += ' </div>';
tr += ' </td>';
}
tr += '</tr>';
}
}
}
$(tbody).empty().append(tr);
$(tbody).closest('table').find('.select-box select').niceSelect();
/* 수령여부 라디오 선택 이벤트 */
$(tbody).find('.rcvPrsnt').on('click', function () {
const evtInnb = $(this).closest('tr').find('.evtInnb').val();// $(this).attr('evtInnb')
const isRcvPrsnt = $(this).val();
$(this).closest('table').find('.prsnt_' + evtInnb).each(function() {
$(this).find('.isRcvPrsnt').val(isRcvPrsnt);
});
});
} else {
$('#prsnt').hide();
}
}
/* 사은품 데이타 세팅 */
const fn_get_prsnt_data = function(goodsInnb) {
const rows = $('#prsntList').find('[class*=prsnt_]');
let prsnts = [];
$(rows).each(function() {
const goodsInnb = $(this).find('.goodsInnb').val();
const goodsOptnInnb = $(this).find('.goodsOptnInnb').val();
const goodsNm = $(this).find('.goodsNm').val();
const goodsImgCours = $(this).find('.goodsImgCours').val();
const evtInnb = $(this).find('.evtInnb').val();
const provdCnt = $(this).find('.provdCnt').val();
const isRcvPrsnt = $(this).find('.isRcvPrsnt').val();
let prsnt = {
'goodsInnb':Number(goodsInnb),
'goodsOptnInnb':Number(goodsOptnInnb),
'goodsNm':goodsNm,
'goodsImgCours':goodsImgCours,
'evtInnb':Number(evtInnb),
'provdCnt':Number(provdCnt),
'isRcvPrsnt':isRcvPrsnt
}
prsnts.push(prsnt);
});
if (!fn_is_empty(goodsInnb)) {
return prsnts.filter(data => data['goodsInnb'] === goodsInnb)[0];
}
return prsnts;
}
/* 결제정보 > 일반결제 현금영수증 화면 세팅*/
const fn_set_csh_rcipt_issu = function(id) {
const div = $('#' + id + '-content-inner');
let table = '';
if ('gc-pay-bank-cash-receipt' !== id && 'transfer-cash-receipt' !== id) {
table += '<table class="table-transparent" id="payCashReceipt">';
table += ' <colgroup>';
table += ' <col style="width:16%;">';
table += ' <col style="width:auto;">';
table += ' </colgroup>';
table += ' <tbody>';
if ('bank' === id) {
table += ' <tr>';
table += ' <th>입금자명</th>';
table += ' <td>';
table += ' <div class="td-inner">';
table += ' <input type="text" name="rcpmnyerNm" id="rcpmnyerNm" class="order-method-bank input-text md" maxlength="15" title="입금자명" placeholder="입금자명">';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
table += ' <tr>';
table += ' <th>입금은행</th>';
table += ' <td>';
table += ' <div class="td-inner">';
table += ' <div class="select-box">';
table += ' <input type="hidden" name="dpstrNm" id="dpstrNm" value="">';
table += ' <input type="hidden" name="bnnkNm" id="bnnkNm" value="">';
table += ' <select name="rcpmnyAcntnb" id="rcpmnyAcntnb" class="order-method-bank md" title="입금은행">';
table += ' <option value="" selected disabled>입금은행을 선택해 주세요.</option>';
table += ' </select>';
table += ' </div>';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
}
table += ' <tr>';
table += ' <th>발급정보</th>';
table += ' <td>';
table += ' <div class="td-inner">';
table += ' <div class="custom-radio-container">';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="cshRciptIssuAt" id="cshRciptIssuAtN_' + id + '" value="" checked>';
table += ' <label for="cshRciptIssuAtN_' + id + '">발급안함</label>';
table += ' </div>';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="cshRciptIssuAt" id="cshRciptIssuAtY_' + id + '" value="01" >';
table += ' <label for="cshRciptIssuAtY_' + id + '">현금영수증</label>';
table += ' </div>';
table += ' </div>';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
table += ' <tr>';
table += ' <th></th>';
table += ' <td>';
table += ' <div id="cshRciptIssu" style="display: none">';
table += ' <div>';
table += ' <span class="visually-hidden">발급안함</span>';
table += ' </div>';
table += ' <div class="td-inner vertical">';
table += ' <div class="custom-radio-container cashReceipt-borderTop">';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="issuTrgetDvCd" id="issuTrgetDvCd0_' + id + '" value="01" checked>';
table += ' <label for="issuTrgetDvCd0_' + id + '">개인 소득공제</label>';
table += ' </div>';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="issuTrgetDvCd" id="issuTrgetDvCd1_' + id + '" value="02">';
table += ' <label for="issuTrgetDvCd1_' + id + '">사업자 지출증빙</label>';
table += ' </div>';
table += ' </div>';
table += ' <div class="w-full">';
table += ' <input type="text" name="issuTrgetMbtlnb" id="issuTrgetMbtlnb" oninput="fn_set_event(this, \'keyup\', fn_fmt_telno);" class="input-text md csh-rcipt-issu" maxlength="13" title="휴대폰번호" placeholder="휴대폰번호(\' - \'없이 입력)">';
table += ' <input type="text" name="issuTrgetBsnmNb" id="issuTrgetBsnmNb" class="number-only input-text md csh-rcipt-issu" maxlength="10" title="사업자번호" placeholder="사업자번호(\' - \'없이 입력)" style="display: none">';
table += ' </div>';
table += ' <p class="fyi gray-7 mt-10 ml-10">결제창에서 다시 현금영수증을 신청하지 마세요. 중복발행 됩니다.</p>';
table += ' </div>';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
table += ' </tbody>';
table += '</table>';
$('.easyPayCashReceipt').empty(); //기존의 발급영역 제거
} else {
table += '<div class="easyPayCashReceipt" id="cshRciptIssu">';
table += ' <table class="table-transparent">';
table += ' <colgroup>';
table += ' <col style="width:auto;">';
table += ' </colgroup>';
table += ' <tbody>';
table += ' <tr>';
table += ' <td>';
table += ' <div class="td-inner vertical">';
table += ' <div class="custom-radio-container radio-tab-trigger" data-radiotab="radio-tab-1">';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="issuTrgetDvCd" id="issuTrgetDvCd0_' + id + '" value="01" checked>';
table += ' <label for="issuTrgetDvCd0_' + id + '">개인 소득공제</label>';
table += ' </div>';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="issuTrgetDvCd" id="issuTrgetDvCd1_' + id + '" value="02">';
table += ' <label for="issuTrgetDvCd1_' + id + '">사업자 지출증빙</label>';
table += ' </div>';
table += ' </div>';
table += ' <div class="radio-tab-content w-full" id="radio-tab-1">';
table += ' <input type="text" name="issuTrgetMbtlnb" id="issuTrgetMbtlnb" oninput="fn_set_event(this, \'keyup\', fn_fmt_telno);" class="input-text md csh-rcipt-issu" maxlength="13" title="휴대폰번호" placeholder="휴대폰번호(\' - \'없이 입력)">';
table += ' <input type="text" name="issuTrgetBsnmNb" id="issuTrgetBsnmNb" class="number-only input-text md csh-rcipt-issu" maxlength="10" title="사업자번호" placeholder="사업자번호(\' - \'없이 입력)" style="display: none">';
table += ' <input type="hidden" name="cshRciptIssuAt" value="" >';
table += ' </div>';
table += ' <p class="textInfo">';
table += ' <p class="fyi gray-7 mt-10 ml-10">결제창에서 다시 현금영수증을 신청하지 마세요. 중복발행 됩니다.</p>';
table += ' </p>';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
table += ' </tbody>';
table += ' </table>';
table += '</div>';
$('#payCashReceipt').empty(); //기존의 발급영역 제거
}
$(div).empty().append(table)
$(div).find('.select-box select').niceSelect();
if ('bank' === id) {
fn_get_rcpmny_acntnb_list();
}
/* 결제정보 > 일반결제 현금영수증 발급 라디오 선택 이벤트 */
$(div).find('input[name="cshRciptIssuAt"]').on('click', function () {
$(this).prop("checked", true);
if ('01' == $(this).val()) {
$(this).closest('table').find('#cshRciptIssu').show();
} else {
$(this).closest('table').find('#cshRciptIssu').hide();
}
});
/* 결제정보 > 일반결제 현금영수증 발급 라디오 선택 이벤트 */
$(div).find('input[name="issuTrgetDvCd"]').on('click', function () {
const div = $(this).closest('#cshRciptIssu');
$(div).find('.input-text').hide();
$(div).find('.input-text').val('');
if ('01' === $(this).val()) {
$(div).find('#issuTrgetMbtlnb').show();
} else {
$(div).find('#issuTrgetBsnmNb').show();
}
});
/* 결제정보 > 무통장 입금은행 선택 이벤트 */
$(div).find('#rcpmnyAcntnb').on('change', function () {
const option = $('option:selected', this);
const dpstrNm = $(option).attr('dpstr-nm');
const bnnkNm = $(option).attr('bnnk-nm');
const td = $(this).closest('td');
$(td).find('#dpstrNm').val(dpstrNm);
$(td).find('#bnnkNm').val(bnnkNm);
});
/* 결제정보 > 휴대폰번호 입력 이벤트 */
$(div).find('#issuTrgetBsnmNb').on('input', function () {
fn_set_event($(this), 'keyup', fn_fmt_telno)
});
}
/* 할인 정보 > 할인 정보 정보 세팅 */
const fn_set_enuri_amt = function(enuriAmt) {
$('#enuriAmt').val(enuriAmt);
fn_set_enuri();
}
/* 할인 정보 > 할인 정보 정보 세팅 */
const fn_set_enuri = function() {
let enuri = fn_get_form_obj('enuriForm');
const cartCoupon = JSON.parse(localStorage.getItem('cartCoupon'));
if (!fn_is_empty(cartCoupon)) {
enuri = Object.assign({}, enuri, cartCoupon);
}
localStorage.setItem('enuri', JSON.stringify(enuri));
}
/* 결제예정금액 > 결제금액 조회 */
const fn_get_setle_amt = function() {
let setle = {};
setle['dlvylc'] = JSON.parse(localStorage.getItem('dlvylc'));
setle['goodsList'] = JSON.parse(localStorage.getItem('goodsList'));
setle['enuri'] = JSON.parse(localStorage.getItem('enuri'));
setle['sopmalCd'] = $('#sopmalCd').val();
$.ajax({
type: 'post',
contentType: 'application/json',
url: '<c:url value="/sopmal/ordr/selectSetleExpectAmt"/>',
data: JSON.stringify(setle),
dataType: 'json',
async : false,
success: function (data) {
if (data.resBody != null) {
let parseData = JSON.parse(data.resBody.result);
if (parseData.status === '1') {
alert(parseData.message);
let useMilg = $('.useMilg').text().replace(/,/g, '');
$('#useMlgAmt').val(useMilg);
} else {
const result = JSON.parse(data.resBody.result);
localStorage.setItem('goodsList', JSON.stringify(result.goodsList));
fn_set_setle_amt(result.setleExpectAmt);
}
}
},
error: function (data) {
alert('<spring:message code="error.internal-server"/>');
}
});
}
/* 결제예정금액 > 결제금액 세팅 */
const fn_set_setle_amt = function(data) {
if (!fn_is_empty(data)) {
const ul = $('.cartOrderBox__list');
$(ul).find('#goodsAmtSapn').text((data.goodsAmt).toLocaleString());
$(ul).find('#dlvyAmtSapn').text((data.dlvyAmt).toLocaleString());
$(ul).find('#dscntAmtSapn').text((data.dscntAmt).toLocaleString());
$('#accmlMlgAmtSapn').text((data.accmlMlgAmt).toLocaleString());
$('#setleAmtSapn').text((data.setleAmt).toLocaleString());
let li = '';
if (data.evtDscntAmt > 0) {
li += '<li class="cartOrderBox__miscItem first">';
li += ' <span class="cartOrderBox__miscTh">이벤트</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.evtDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.goodsCouponDscntAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">상품 쿠폰</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.goodsCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.dlvyCouponDscntAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">배송비 쿠폰</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.dlvyCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.cartCouponDscntAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">장바구니 쿠폰</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.cartCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.useMlgAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">마일리지 할인</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma useMilg">' + (data.useMlgAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.enuriAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">에누리 할인</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.enuriAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (!fn_is_empty(data.dlvyAmtMap)) {
const form = $('#dlvylcForm');
const dlvyMap = data.dlvyAmtMap;
$(form).find('input[name="dlvyGroupInnb"]').val(dlvyMap.dlvyGroupInnb);
$(form).find('input[name="dftDlvyAmt"]').val(dlvyMap.dftDlvyAmt);
$(form).find('input[name="dlvyAmt"]').val(dlvyMap.dlvyAmt);
}
if (!fn_is_empty(data.setleAmt)) {
$('#enuriForm').find('#setleAmt').val(data.setleAmt);
$('#setleForm').find('#rlSetleAmt').val(data.setleAmt);
}
if (!fn_is_empty(data.lmttUseMlg)) {
$('#lmttUseMlg').val(data.lmttUseMlg); // 사용 가능 마일리지 한도
}
$(ul).find('.cartOrderBox__miscItem').remove();
$(ul).append(li);
}
}
/* 결제예정금액 > 정합성 검사 */
const fn_validate = function() {
let order = {};
let isValid = true;
/* 배송지 정합성 검사 시작 */
const dlvylcDvCd = $('input[name="dlvylcDvCd"]:checked').val();
if ('New' === dlvylcDvCd) {
$('#dlvylcForm').find('.rqrd').each(function () {
const val = $(this).val();
if (fn_is_empty(val)) {
const name = $(this).attr('name');
const title = $(this).attr('title');
alert(title + ' 항목을 입력해 주십시요');
$('input[name="' + name + '"]').focus();
isValid = false;
return false;
}
});
}
if (!isValid) {
return false;
}
let dlvylc = JSON.parse(localStorage.getItem('dlvylc'));
if (!fn_is_empty(dlvylc)) {
dlvylc = Object.assign({}, fn_get_dlvylc_data(), dlvylc);
} else {
dlvylc = fn_get_dlvylc_data();
}
order['shipping'] = dlvylc;
/* 배송지 정합성 검사 종료 */
/* 주문자 정보 정합성 검사 시작 */
const purchsrForm = $('#purchsrForm');
$(purchsrForm).find('.input-text').each(function () {
const val = $(this).val();
if (fn_is_empty(val)) {
const id = $(this).attr('id');
const title = $(this).attr('title');
alert(title + ' 항목을 입력해 주십시요');
$('#' + id).focus();
isValid = false;
return false;
}
});
if (!isValid) {
return false;
}
let purchsr = {};
$(purchsrForm).find('input').each(function () {
const id = $(this).attr('id');
const val = $(this).val().trim();
//purchsr[id] = 'mbrInnb' === id ? parseInt(val):val;
purchsr[id] = val;
});
order['sopmalCd'] = $(purchsrForm).find('#sopmalCd').val();
//order['mbrInnb'] = $(purchsrForm).find('#mbrInnb').val();
order['purchsr'] = purchsr;
/* 주문자 정보 정합성 검사 종료 */
/* 결제정보 정합성 검사 시작 */
let pgCmpnyNm = $('input[name="pg"]:checked').val();
let setleTyCd = $('#setleTyCd').val();
//마일리지결제처리 --------------------------------------------------------
//결제금액이 0원이고, 마일리지 사용금액이 >0 이라면 결제정보 선택없이 무통장 형태로 주문등록 함
const setleAmt = parseInt(!fn_is_empty($('#rlSetleAmt').val()) ? $('#rlSetleAmt').val() : '0');
const useMlgAmt = parseInt(!fn_is_empty($('#useMlgAmt').val()) ? $('#useMlgAmt').val() : '0');
if(setleAmt===0 && useMlgAmt>0){
pgCmpnyNm = "mileage"; //bo단에서 "" 변경됨
setleTyCd = "08"; //마일리지결제
$('#setleForm').find('#pgCmpnyNm').val(pgCmpnyNm);
$('#setleForm').find('#setleTyCd').val(setleTyCd);
}
console.log("결제예정금액 : " , setleAmt, " 사용마일리지 : " , useMlgAmt, " 결제사명 : " , pgCmpnyNm, " 결제유형 : " , setleTyCd);
//--------------------------------------------------------
if (fn_is_empty(pgCmpnyNm)) {
alert('결제유형을 선택해 주십시요.');
return false;
}
if ('kcp' === pgCmpnyNm || 'toss' === pgCmpnyNm) {
const div = $('#setleForm').find('.order-method-normal');
if (!$(div).find('.order-method-normal__btn-container button').hasClass('active')) {
alert('결제방법을 선택해 주십시요.');
isValid = false;
return false;
}
if ('02' === setleTyCd) { // 무통장
const div = $('#bank-content-inner');
const input = $(div).find('#rcpmnyerNm');
if (fn_is_empty($(input).val())) {
alert($(input).attr('title') + ' 항목을 입력해 주십시요');
$('#' + $(input).attr('id')).focus();
isValid = false;
return false;
}
const rcpmnyAcntnb = $(div).find('#rcpmnyAcntnb option:selected');
if (fn_is_empty($(rcpmnyAcntnb).val())) {
alert($(div).find('#rcpmnyAcntnb').attr('title') + ' 항목을 선택해 주십시요');
return false;
}
}
const cshRciptIssuAt = $('input[name="cshRciptIssuAt"]:checked').val(); // 현금영수증 발급 여부
if (!fn_is_empty(cshRciptIssuAt) && '01' === cshRciptIssuAt) { // 현금영수증 발급
const issuTrgetDvCd = $('input[name="issuTrgetDvCd"]:checked').val();
const id = '01' === issuTrgetDvCd ? 'issuTrgetMbtlnb' : 'issuTrgetBsnmNb';
const setleTyId = $('kcp' === pgCmpnyNm ? '#pg04Content' : '#pg03Content').find('button[name="' + setleTyCd + '"]').attr('id');
const div = $('#' + setleTyId + '-content-inner');
const input = $(div).find('#' + id);
if (fn_is_empty($(input).val())) {
alert($(div).find('#' + id).attr('title') + ' 항목을 입력해 주십시요');
$(div).find('#' + id).focus();
isValid = false;
return false;
}
}
} else if ('toss03' === pgCmpnyNm){ //퀵계좌이체(추가된 결제수단이라 기존코드 유지위해 toss03이름으로 임시지정 후 toss로 변환)
const isChecked = $('#transfer-cash-receipt').is(':checked');
if (isChecked) {
const div = $('#transfer-cash-receipt').closest('.selectWrap');
const issuTrgetDvCd = $(div).find('input[name="issuTrgetDvCd"]:checked').val();
const id = '01' === issuTrgetDvCd ? 'issuTrgetMbtlnb' : 'issuTrgetBsnmNb';
const content = $(div).find('#transfer-cash-receipt-content-inner');
const input = $(content).find('#' + id);
if (fn_is_empty($(input).val())) {
alert($(content).find('#' + id).attr('title') + ' 항목을 입력해 주십시요');
$(content).find('#' + id).focus();
isValid = false;
return false;
}else{
$('#setleForm').find('input[name="cshRciptIssuAt"]').val('01');
}
}
pgCmpnyNm = "toss";
setleTyCd = "03";
$('#setleForm').find('#pgCmpnyNm').val(pgCmpnyNm);
$('#setleForm').find('#setleTyCd').val(setleTyCd);
} else {
if ('01' === setleTyCd) { // 카드
const index = $('.cardSlideW').slick('slickCurrentSlide');
const curCardId = $('#gcCardId' + index).val();
const curCardInstallmentPlan = $('#instl-month-' + index).val();
const curUseCardPoint = $('#use-card-point' + index);
if (!fn_is_empty(curCardId)) {
$('#gcpayMethodId').val(curCardId);
$('#gcpayCardInstallmentPlan').val(curCardInstallmentPlan); // 카드 할부 개월수
$('#gcpayUseCardPoint').val(!!$(curUseCardPoint).is(':checked')); // 카드 포인트 사용여부
} else {
alert('GCpay 간편결제의 선택된 카드가 없습니다.');
isValid = false;
return false;
}
} else if ('03' === setleTyCd){ // 계좌이체
const accountId = $('.bankSlideW').slick('slickCurrentSlide');
const curAccountId = $('#gcAccId' + accountId).val();
if (!fn_is_empty(curAccountId)) {
$('#gcpayMethodId').val(curAccountId);
} else {
alert('GCpay 간편결제의 선택된 계좌가 없습니다.');
isValid = false;
return false;
}
const isChecked = $('#gc-pay-bank-cash-receipt').is(':checked');
if (isChecked) { // 현금영수증 정보
const div = $('#gc-pay-bank-cash-receipt').closest('.selectWrap');
const issuTrgetDvCd = $(div).find('input[name="issuTrgetDvCd"]:checked').val();
const id = '01' === issuTrgetDvCd ? 'issuTrgetMbtlnb' : 'issuTrgetBsnmNb';
const content = $(div).find('#gc-pay-bank-cash-receipt-content-inner');
const input = $(content).find('#' + id);
if (fn_is_empty($(input).val())) {
alert($(content).find('#' + id).attr('title') + ' 항목을 입력해 주십시요');
$(content).find('#' + id).focus();
isValid = false;
return false;
}
}
}
}
if (!isValid) {
return false;
}
order['setle'] = fn_get_form_obj('setleForm');
/* 결제정보 정합성 검사 종료 */
/* 주문상품, 사은품 데이터 세팅 시작 */
let goodsList = localStorage.getItem('goodsList');
if (!fn_is_empty(goodsList)) {
order['goodsList'] = JSON.parse(goodsList);
}
order['prsnt'] = fn_get_prsnt_data();
/* 주문상품, 사은품 데이터 세팅 종료 */
/* 에누리 데이터 세팅 시작 */
const enuri = localStorage.getItem('enuri');
if (!fn_is_empty(enuri)) {
order['enuri'] = JSON.parse(enuri);
}
/* 에누리 데이터 세팅 종료 */
order['ordrTyCd'] = '03'; // 회원 개인결제
const param = JSON.parse('${paramVO}');
order['ordrInnb'] = param.ordrInnb;
return order;
}
/* 중복제한 쿠폰 체크 */
const fn_check_dplct_lmtt_coupon = function(cpnDvCd, obj) {
$('#goodsList').find('.ordrGoods').each(function () {
const dplctLmttCoupon = $(this).find('.dplctLmttCoupon').val();
if (!fn_is_empty(dplctLmttCoupon)) {
const dplctLmttEvtnm = $(this).find('.dplctLmttEvtnm').val();
if (dplctLmttCoupon.includes(cpnDvCd)) {
alert(dplctLmttEvtnm + '의 할인이 적용된경우 해당 쿠폰을 적용 할 수 없습니다.');
$(obj).val('0').attr('selected', true).niceSelect('update');
return false;
}
}
});
return false;
}
/* 무통장 입금 계좌번호 목록 조회 */
const fn_get_rcpmny_acntnb_list = function() {
$.ajax({
type:'post',
contentType:'application/json',
url:'<c:url value="/sopmal/ordr/selectRcpmnyAcntnbList"/>',
data:JSON.stringify({'sopmalCd':$('#sopmalCd').val()}),
dataType:'json',
success:function(data) {
if (data.resBody != null) {
const result = JSON.parse(data.resBody.result);
if (!fn_is_empty(result)) {
const setupNbkDpstVOList = result.setupNbkDpstVOList;
const div = $('#bank-content #bank-content-inner');
for (let i = 0; i < setupNbkDpstVOList.length; i++) {
const setup = setupNbkDpstVOList[i];
const title = setup.bankNm + ' ' + setup.acntnb + ' ' + setup.dpstrNm;
const option = '<option value="' + setup.acntnb + '" bnnk-nm="' + setup.bankNm + '" dpstr-nm="' + setup.dpstrNm + '">' + title + '</option>';
$(div).find('table tr #rcpmnyAcntnb').append(option);
}
$(div).find('.select-box select').niceSelect('update');
}
}
},
error: function(data) {
alert('<spring:message code="error.internal-server"/>');
}
});
}
/* form 정보 조회 */
const fn_get_form_obj = function(id) {
let formObj = {};
const inputs = $('#' + id).serializeArray();
$.each(inputs, function (i, input) {
formObj[input.name] = input.value.trim();
});
return formObj;
}
</script>
<script>
/****************************************************************/
/* m_Completepayment 설명 */
/****************************************************************/
/* 인증완료시 재귀 함수 */
/* 해당 함수명은 절대 변경하면 안됩니다. */
/* 해당 함수의 위치는 kcp_spay_hub.js 보다먼저 선언되어여 합니다. */
/* Web 방식의 경우 리턴 값이 form 으로 넘어옴 */
/****************************************************************/
function m_Completepayment(FormOrJson, closeEvent) {
var frm = document.order_info;
/********************************************************************/
/* FormOrJson은 가맹점 임의 활용 금지 */
/* frm 값에 FormOrJson 값이 설정 된 frm 값으로 활용 하셔야 됩니다. */
/********************************************************************/
GetField(frm, FormOrJson);
if (frm.res_cd.value == "0000"){
/* 결제인증 완료 후 결제승인 요청을 위한 비즈니스 로직 구현 */
frm.submit();
} else {
/* 결제인증 실패에 대한 처리 */
alert( "[" + frm.res_cd.value + "] " + frm.res_msg.value );
location.reload();
closeEvent();
}
}
</script>
<c:choose>
<c:when test="${data.payInfo.kcpMid eq 'T0007'}"><!-- 개발 결제창 호출 JS -->
<script type="text/javascript" src="https://testspay.kcp.co.kr/plugin/kcp_spay_hub.js"></script>
</c:when>
<c:otherwise><!-- 운영 결제창 호출 JS -->
<script type="text/javascript" src="https://spay.kcp.co.kr/plugin/kcp_spay_hub.js"></script>
</c:otherwise>
</c:choose>
<script>
/* 표준웹 실행 */
function jsf__pay(form) {
try {
KCP_Pay_Execute_Web(form);
} catch (e) {
console.log(e)
/* IE 에서 결제 정상종료시 throw로 스크립트 종료 */
}
}
</script>
<script src="https://js.tosspayments.com/v1"></script>
<script>
let tossPayments = TossPayments("${data.payInfo.tossClntKey}");
function pay(method, requestJson, pgNm) {
if(pgNm.equals("naverpay")||pgNm.equals("kakaopay"))
tossPayments = TossPayments("${data.payInfo.easypayClntKey}");
tossPayments.requestPayment(method, requestJson).catch(function (error) {
if (error.code === "USER_CANCEL") {
alert("결제를 취소하였습니다.");
location.reload();
} else {
alert(error.message);
}
});
}
</script>
</head>
<body>
<%-- 공통 Header --%>
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
<!-- 메인 컨텐츠 영역 -->
<main>
<div class="sub-wrapper">
<div class="sub-content">
<div class="cartOrder">
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<input type="hidden" id="cdnurl" value="${cdnurl}"/>
<h2 class="cartOrder__title">주문결제</h2>
<div class="cartOrder__inner">
<div class="cartOrder__left">
<div class="orderInfo">
<form id="purchsrForm">
<c:set var="purchsr" value="${data.purchsr}"/>
<input type="hidden" name="sopmalCd" id="sopmalCd" value="<c:out value="${purchsr.sopmalCd}"/>">
<!--<input type="hidden" name="mbrInnb" id="mbrInnb" value="<c:out value="${purchsr.mbrInnb}"/>">-->
<input type="hidden" name="mbrId" id="mbrId" value="<c:out value="${purchsr.mbrId}"/>">
<input type="hidden" name="mbrDvCd" id="mbrDvCd" value="<c:out value="${purchsr.mbrDvCd}"/>">
<input type="hidden" name="mbrTyCd" id="mbrTyCd" value="<c:out value="${purchsr.mbrTyCd}"/>">
<div class="orderInfo__section">
<h3 class="orderInfo__sectionTitle">주문자 정보</h3>
<div class="table-wrapper orderInfo__table">
<table class="table">
<caption>주문자 정보</caption>
<colgroup>
<col style="width: 180px;">
<col style="width: auto;">
</colgroup>
<tbody>
<tr>
<th><span class="orderInfo__title">이름</span></th>
<td><input type="text" name="mbrNm" id="mbrNm" value="<c:out value="${purchsr.mbrNm}"/>" class="input-text" title="이름" placeholder=""></td>
</tr>
<tr>
<th><span class="orderInfo__title">휴대폰 번호</span></th>
<td><input type="text" name="mbtlnb" id="mbtlnb" oninput="fn_set_event(this, 'keyup', fn_fmt_telno)" maxlength="13" value="<c:out value="${purchsr.mbtlnb}"/>" class="input-text number" title="휴대폰번호" placeholder="휴대폰번호 입력 (’-’ 없이)"></td>
</tr>
<tr>
<th><span class="orderInfo__title">이메일</span></th>
<td><input type="text" name="email" id="email" value="<c:out value="${purchsr.email}"/>" class="input-text" title="이메일" placeholder="이메일을 입력하세요."></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
<div class="orderInfo__section">
<h3 class="orderInfo__sectionTitle">배송지 정보</h3>
<form id="dlvylcForm">
<input type="hidden" id="isDftDlvylc" value="<c:out value="${not empty data.purchsr.dftDlvylc ? 'Y' : 'N'}"/>">
<input type="hidden" name="ordrDlvyInnb" id="ordrDlvyInnb" value="<c:out value="${data.order.ordrDlvyInnb}"/>" class="dft">
<input type="hidden" name="deviceType" id="deviceType" value="<c:out value="${deviceType}"/>">
<input type="hidden" name="dlvyGroupInnb" id="dlvyGroupInnb" class="dft">
<input type="hidden" name="dftDlvyAmt" id="dftDlvyAmt" class="dft">
<input type="hidden" name="dlvyAmt" id="dlvyAmt" class="dft">
<input type="hidden" name="couponInnb">
<input type="hidden" name="dwldCouponInnb">
<input type="hidden" name="dplctDscntAt">
<input type="hidden" name="otrCouponSmtmUseAt">
<input type="hidden" name="mngrFreeDlvyUseAt" value="N">
<!--<input type="hidden" name="mbrInnb" value="<c:out value="${data.purchsr.mbrInnb}"/>">-->
<c:set var="dftDlvylc" value="${data.purchsr.dftDlvylc}"/>
<div class="table-wrapper orderInfo__table">
<table class="table">
<caption>배송지 정보</caption>
<!-- 각 열 width 설정 -->
<colgroup>
<col style="width: 180px;">
<col style="width: auto;">
</colgroup>
<tbody>
<tr>
<th><span class="orderInfo__title">배송지 선택</span></th>
<td>
<div id="deliveryAddressRadio" class="custom-radio-container">
<div class="custom-radio is-medium">
<input type="radio" name="dlvylcDvCd" id="dlvylcDft" value="Default" checked>
<label for="dlvylcDft">기본 배송지</label>
</div>
<div class="custom-radio is-medium">
<input type="radio" name="dlvylcDvCd" id="dlvylcNew" value="New">
<label for="dlvylcNew">신규 배송지</label>
</div>
</div>
<a href="javascript:void(0);" id="btnDlvylcMngr" class="btn md outline orderInfo__editBtn" style="display: none;">배송지 관리</a>
</td>
</tr>
<!-- 기본 배송지 선택 시 Start -->
<tr class="deliveryAddressDefault">
<th><span class="orderInfo__title">받는분</span></th>
<td>
<input type="hidden" id="recpntNm" class="dft" value="<c:out value="${dftDlvylc.recpntNm}"/>">
<span class="orderInfo__text"><c:out value="${dftDlvylc.recpntNm}"/></span>
</td>
</tr>
<tr class="deliveryAddressDefault">
<th><span class="orderInfo__title">주소</span></th>
<td>
<input type="hidden" id="dlvylcAdresDvCd" class="dft" value="<c:out value="${dftDlvylc.adresDv}"/>">
<input type="hidden" id="dlvylcZip" class="dft" value="<c:out value="${dftDlvylc.zip}"/>">
<input type="hidden" id="dlvylcLnbAdres" class="dft" value="<c:out value="${dftDlvylc.lnbAdres}"/>">
<input type="hidden" id="dlvylcRnmAdres" class="dft" value="<c:out value="${dftDlvylc.rnmAdres}"/>">
<input type="hidden" id="dlvylcAdresDtl" class="dft" value="<c:out value="${dftDlvylc.dtlAdres}"/>">
<span class="orderInfo__text">
<c:out value="${not empty dftDlvylc.zip ? '(' += dftDlvylc.zip += ')':''}"/>
<c:out value="${dftDlvylc.adres}"/>
<c:out value="${dftDlvylc.dtlAdres}"/>
</span>
</td>
</tr>
<tr class="deliveryAddressDefault">
<th><span class="orderInfo__title">휴대폰번호</span></th>
<td>
<input type="hidden" id="recpntMbtlnb" class="dft" value="<c:out value="${dftDlvylc.mbtlnb}"/>">
<span class="orderInfo__text"><c:out value="${dftDlvylc.mbtlnb}"/></span>
</td>
</tr>
<!-- 기본 배송지 선택 시 End -->
<!-- 신규 배송지 선택 시 Start -->
<tr class="deliveryAddressNew" style="display:none;">
<th><span class="orderInfo__title">받는분</span></th>
<td><input type="text" name="recpntNm" class="new rqrd input-text" title="받는분 이름" placeholder="받는분 이름을 입력하세요."></td>
</tr>
<tr class="deliveryAddressNew" style="display:none;">
<th><span class="orderInfo__title">주소</span></th>
<td>
<div class="inputAddress">
<div class="inputAddress__postalCode">
<input type="text" name="dlvylcZip" class="new input-text" title="우편번호" placeholder="" readonly>
<button type="button" id="btnPost" class="btn md theme outline">우편번호 찾기</button>
</div>
<input type="text" name="dlvylcAdres" class="new rqrd input-text full" title="주소" placeholder="" disabled>
<input type="text" name="dlvylcAdresDtl" class="new rqrd input-text full" title="나머지 주소" placeholder="나머지 주소를 입력해 주세요.">
<input type="hidden" name="dlvylcAdresDvCd" class="new">
<input type="hidden" name="dlvylcLnbAdres" class="new">
<input type="hidden" name="dlvylcRnmAdres" class="new">
</div>
</td>
</tr>
<tr class="deliveryAddressNew" style="display:none;">
<th> <span class="orderInfo__title">휴대폰번호</span></th>
<td>
<input type="text" name="recpntMbtlnb" oninput="fn_set_event(this, 'keyup', fn_fmt_telno)" maxlength="13" class="new rqrd input-text number" title="휴대폰번호" placeholder="휴대폰번호 입력 (’-’ 없이)">
</td>
</tr>
<!-- 신규 배송지 선택 시 End -->
<tr>
<th><span class="orderInfo__title">배송요청사항</span></th>
<td>
<div class="orderInfo__deliveryRequest">
<div class="select-box">
<select class="deliveryRequestSelect" title="배송요청사항">
<option value="" selected>배송 시 요청 사항을 선택해주세요</option>
<option value="배송 전 연락 주세요">배송 전 연락 주세요.</option>
<option value="부재 시 문 앞에 놓아 주세요">부재 시 문 앞에 놓아 주세요</option>
<option value="부재 시 경비실에 맡겨 주세요.">부재 시 경비실에 맡겨 주세요.</option>
<option value="write">직접입력</option>
</select>
</div>
<div class="inputLimit deliveryRequestDetail" style="display:none;">
<input type="text" name="dlvyMssageCn" id="dlvyMssageCn" maxlength="50" class="input-text dft" title="배송요청사항" placeholder="50자 이내로 입력해 주세요.">
<span class="inputLimit__text">
<span class="inputLimit__current">0</span>
<span class="inputLimit__divider">/</span>
<span class="inputLimit__total">50</span>
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
<div class="orderInfo__section">
<h3 class="orderInfo__sectionTitle">주문 상품</h3>
<div class="cartOrder__list">
<div class="table-wrapper">
<table class="table vertical">
<caption>주문 상품</caption>
<colgroup>
<col style="width: 400px;">
<col style="width: 120px">
<col style="width: 128px">
<col style="width: 128px">
<col style="width: auto;">
</colgroup>
<thead>
<tr>
<th>상품명</th>
<th>주문수량</th>
<th>할인금액</th>
<th>상품금액</th>
</tr>
</thead>
<tbody id="goodsList"></tbody>
</table>
</div>
</div>
</div>
<div id="prsnt" class="orderInfo__section">
<h3 class="orderInfo__sectionTitle">사은품</h3>
<div class="cartOrder__list">
<div class="table-wrapper">
<table class="table vertical">
<caption>사은품</caption>
<colgroup>
<col style="width: 400px;">
<col style="width: 128px">
<col style="width: 128px">
<col style="width: auto;">
</colgroup>
<thead>
<tr>
<th>상품명</th>
<th>수량</th>
<th>수령여부</th>
</tr>
</thead>
<tbody id="prsntList"></tbody>
</table>
</div>
</div>
</div>
<div class="orderInfo__section">
<c:if test="${'Y' == data.order.indvdlSetleMlgUsePosblAt}">
<h3 class="orderInfo__sectionTitle">할인 정보</h3>
</c:if>
<form id="enuriForm">
<input type="hidden" name="setleAmt" id="setleAmt" value="">
<input type="hidden" name="couponInnb" id="couponInnb" value="">
<input type="hidden" name="dwldCouponInnb" id="dwldCouponInnb" value="">
<input type="hidden" name="dplctDscntAt" id="dplctDscntAt" value="">
<input type="hidden" name="otrCouponSmtmUseAt" id="otrCouponSmtmUseAt" value="">
<input type="hidden" name="enuriAmt" id="enuriAmt" value="">
<input type="hidden" name="mngrFreeDlvyUseAt" value="N">
<input type="hidden" name="sopmalCd" id="sopmalCd" value="<c:out value="${purchsr.sopmalCd}"/>">
<input type="hidden" name="mbrDvCd" id="mbrDvCd" value="<c:out value="${purchsr.mbrDvCd}"/>">
<!--<input type="hidden" name="mbrInnb" value="<c:out value="${data.purchsr.mbrInnb}"/>">-->
<c:if test="${'Y' == data.order.indvdlSetleMlgUsePosblAt}">
<div class="table-wrapper orderInfo__table">
<table class="table">
<caption>할인 정보</caption>
<colgroup>
<col style="width: 180px;">
<col style="width: auto;">
</colgroup>
<tbody>
<tr>
<th><span class="orderInfo__title">마일리지</span></th>
<td>
<div class="orderInfo__mileage">
<div class="inputWithBtn">
<input type="hidden" name="ableMlgAmt" id="ableMlgAmt" value="<c:out value="${purchsr.ableMlgAmt}"/>">
<input type="text" name="useMlgAmt" id="useMlgAmt" class="input-text text-right" title="마일리지" placeholder="0">
<button type="button" id="btnAllUseMlgAmt" class="btn md outline">모두 사용</button>
</div>
<span class="orderInfo__mileageText">사용가능 마일리지:<em><span class="comma"><c:out value="${purchsr.ableMlgAmt}"/></span>원</em></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</c:if>
</form>
<div class="infoBox">
<div class="infoBox__title">예상 적립혜택</div>
<ul class="infoBox__list">
<li> 구매 확정 시 <i id="accmlMlgAmtSapn"></i> 적립
<c:forEach var="ntc" items="${data.mlgAccmlNtcList}">
<li>
<c:choose>
<c:when test="${'06' == ntc.bbsTyCd}">
리뷰 작성시 일반리뷰 <i><c:out value="${ntc.gnrlRvwAmt}"/>원</i> 적립, 사진리뷰 <i><c:out value="${ntc.photoRvwAmt}"/>원</i> 적립
</c:when>
<c:otherwise>
한달리뷰 <i><c:out value="${ntc.photoRvwAmt}"/>원</i> 적립
</c:otherwise>
</c:choose>
<c:if test="${not empty ntc.bgnDe && not empty ntc.endDe}">
<fmt:parseDate value="${ntc.bgnDe}" var="bgnDeDate" pattern="yyyyMMdd"/>
<fmt:formatDate value="${bgnDeDate}" var="bgnDe" pattern="yyyy-MM-dd"/>
<fmt:parseDate value="${ntc.endDe}" var="endDeDate" pattern="yyyyMMdd"/>
<fmt:formatDate value="${endDeDate}" var="endDe" pattern="yyyy-MM-dd"/>
(<c:out value="${bgnDe}"/> ~ <c:out value="${endDe}"/> 까지 <i><c:out value="${ntc.aditMlgAmt}"/>원</i> 추가 적립)
</c:if>
</li>
</c:forEach>
</ul>
</div>
</div>
<div class="orderInfo__section">
<c:set var="payInfo" value="${data.payInfo}"/>
<c:set var="setlMthCdList" value="${data.setlMthCdList}"/>
<c:set var="gcpayCardUseAt" value="${'Y' == payInfo.gcpayCardUseAt && fn:contains(setlMthCdList, '01')}"/>
<c:set var="gcpayAcntnbUseAt" value="${'Y' == payInfo.gcpayAcntnbUseAt && fn:contains(setlMthCdList, '03')}"/>
<c:choose>
<c:when test="${gcpayCardUseAt || gcpayAcntnbUseAt}"><%-- GCpay 일때만 보여줌 --%>
<div class="orderInfo__sectionHeader">
<h3 class="orderInfo__sectionTitle">결제 정보</h3>
<div class="orderInfo__btnContainer">
<a href="#gcpay-cardInfo-pop" rel="modal:open" class="btn sm outline"><i class="icon icon_info"></i>GC PAY 카드 무이자 할부 행사 안내</a>
<a href="#gcpay-info" rel="modal:open" class="btn sm outline"><i class="icon icon_info"></i>GC PAY 안내</a>
<a href="javascript:void(0);" id="gcpay_set" class="btn sm outline">GC PAY 설정</a>
</div>
</div>
<div class="orderInfo__orderInfoTop">
<div class="gcpayEvent">
<img class="gcpayEvent__icon" src="/pc/images/icon_couponEvent.png" alt="">
<p class="gcpayEvent__title">[EVENT] GC PAY 간편결제 등록 시 5,000원 쿠폰 증정 <span class="misc">(계정당 최초 1회)</span></p>
<p class="gcpayEvent__content">사용 조건 : 3만원 이상 구매 시 사용 가능 (자사몰, 오프라인 매장)<br>유효 기간 : 발급일 기준 15일 이내 사용 가능</p>
</div>
<p class="textInfo textInfo--dot">GC PAY 기존 등록 고객은 <em>"[GC PAY 설정]을 눌러 본인인증 후 좌측상단의 [&#60;]를 클릭"</em>하시면 목록에 보입니다.</p>
</div>
</c:when>
<c:otherwise>
<div class="orderInfo__sectionHeader">
<h3 class="orderInfo__sectionTitle">결제 정보</h3>
</div>
</c:otherwise>
</c:choose>
<form id="setleForm">
<input type="hidden" name="rlSetleAmt" id="rlSetleAmt" value="">
<input type="hidden" name="lmttUseMlg" id="lmttUseMlg" value="">
<input type="hidden" name="siteCdMid" id="siteCdMid" value="<c:out value="${payInfo.kcpMid}"/>">
<input type="hidden" name="dueDt" id="dueDt" value="<c:out value="${payInfo.dueDt}"/>">
<c:choose>
<c:when test="${gcpayCardUseAt || gcpayAcntnbUseAt}">
<input type="hidden" name="pgCmpnyNm" id="pgCmpnyNm" value="gcpay">
<input type="hidden" name="setleTyCd" id="setleTyCd" value="${gcpayCardUseAt ? '01' : '03'}">
</c:when>
<c:otherwise>
<input type="hidden" name="pgCmpnyNm" id="pgCmpnyNm" value="">
<input type="hidden" name="setleTyCd" id="setleTyCd" value="">
</c:otherwise>
</c:choose>
<input type="hidden" name="ordrDvCd" id="ordrDvCd" value="01">
<input type="hidden" name="gcpayCardUseAt" id="gcpayCardUseAt" value="${payInfo.gcpayCardUseAt}">
<input type="hidden" name="gcpayAcntnbUseAt" id="gcpayAcntnbUseAt" value="${payInfo.gcpayAcntnbUseAt}">
<input type="hidden" name="gcpayMethodId" id="gcpayMethodId" value="">
<input type="hidden" name="gcpayCardInstallmentPlan" id="gcpayCardInstallmentPlan" value="">
<input type="hidden" name="gcpayUseCardPoint" id="gcpayUseCardPoint" value="">
<input type="hidden" name="setleSetupTyCd" id="setleSetupTyCd" value="${payInfo.setleSetupTyCd}">
<div class="order-method ${gcpayCardUseAt || gcpayAcntnbUseAt ? 'order_gcPay' : ''}">
<c:if test="${gcpayCardUseAt}">
<div class="custom-radio is-medium listW chk_on">
<input type="radio" name="pg" id="pg01" value="gcpay" ${gcpayCardUseAt ? 'checked' : ''}>
<label for="pg01"><i class="icon icon_gcpay ml-5 mr-5"></i>카드간편결제</label>
</div>
<!--간편결제 영역-->
<div id="pg01Content" class="conW pgContent">
<div class="slideW cardSlideW">
</div>
<!--무이자 할부 하단영역-->
<div class="slideDep selectWrap">
</div>
<!--//무이자 할부 영역-->
</div>
<!--//간편결제 영역-->
</c:if>
<c:if test="${gcpayAcntnbUseAt}">
<div class="custom-radio is-medium ${gcpayCardUseAt ? '' : 'listW chk_on'}">
<input type="radio" name="pg" id="pg02" value="gcpay" ${gcpayCardUseAt ? '' : 'checked'}>
<label for="pg02"><i class="icon icon_gcpay ml-5 mr-5"></i>계좌간편결제</label>
</div>
<div id="pg02Content" class="conW pgContent" ${gcpayCardUseAt ? 'style="display: none"' : ''}>
<div class="slideW bankSlideW">
</div>
<div class="selectWrap">
<div class="b-checkbox-container cashReceipt-container">
<label class="b-checkbox checkbox is-medium" id="cashReceipt-check">
<input type="checkbox" id="gc-pay-bank-cash-receipt" value="">
<span class="check"></span>
<span class="control-label">현금영수증 신청하기</span>
</label>
</div>
<div id="gc-pay-bank-cash-receipt-content-inner"></div>
</div>
</div>
</c:if>
<%-- 퀵계좌이체 시작 --%>
<c:if test="${'Y' eq payInfo.rltmAcntUseAt}">
<div class="custom-radio is-medium">
<input type="radio" name="pg" id="pg05" value="toss03">
<label for="pg05">퀵계좌이체(0.5% 즉시할인)</label>
</div>
<div id="pg05Content" class="pgContent" style="display: none">
<div class="selectWrap">
<div class="b-checkbox-container cashReceipt-container">
<label class="b-checkbox checkbox is-medium" id="transfer-cashReceipt-check">
<input type="checkbox" id="transfer-cash-receipt" value="">
<span class="check"></span>
<span class="control-label">현금영수증 신청하기</span>
</label>
</div>
<div id="transfer-cash-receipt-content-inner"></div>
</div>
</div>
</c:if>
<%-- 퀵계좌이체 끝 --%>
<!-- toss 결제 시작 -->
<c:if test="${'02' eq payInfo.setleSetupTyCd}">
<div class="custom-radio is-medium">
<input type="radio" name="pg" id="pg03" value="toss">
<label for="pg03">일반결제</label>
</div>
<div id="pg03Content" class="pgContent order-method-normal" style="display: none">
<div class="order-method-normal__btn-container">
<c:if test="${'Y' eq payInfo.cardUseAt && fn:contains(setlMthCdList, '01')}">
<button type="button" name="01" id="card" class="order-method-normal__btn">신용카드</button>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt && fn:contains(setlMthCdList, '04')}">
<button type="button" name="04" id="virtual" class="order-method-normal__btn">가상계좌</button>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt && fn:contains(setlMthCdList, '04')}">
<button type="button" name="05" id="escrow-virtual" class="order-method-normal__btn">가상계좌(에스크로)</button>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt && fn:contains(setlMthCdList, '01')}">
<button type="button" name="10" id="payco" class="order-method-normal__btn">PAYCO</button>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt && fn:contains(setlMthCdList, '02')}">
<button type="button" name="02" id="bank" class="order-method-normal__btn">무통장</button>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt && fn:contains(setlMthCdList, '01')}">
<button type="button" name="tosspay" id="tosspay" class="order-method-normal__btn">토스페이</button>
</c:if>
<c:if test="${'Y' eq payInfo.npayUseAt}">
<button type="button" name="naverpay" id="naverpay" class="order-method-normal__btn">네이버페이</button>
</c:if>
<c:if test="${'Y' eq payInfo.kpayUseAt}">
<button type="button" name="kakaopay" id="kakaopay" class="order-method-normal__btn">카카오페이</button>
</c:if>
</div>
<div class="order-method-normal__content-wrapper">
<c:if test="${'Y' eq payInfo.cardUseAt && fn:contains(setlMthCdList, '01')}">
<div id="card-content" class="order-method-normal__content" style="display: none">
<div id="card-content-inner" class="order-method-normal__content-inner">
<p class="fyi gray-7 mt-10 ml-10">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt && fn:contains(setlMthCdList, '04')}">
<div id="virtual-content" class="order-method-normal__content" style="display: none">
<div id="virtual-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt && fn:contains(setlMthCdList, '04')}">
<div id="escrow-virtual-content" class="order-method-normal__content" style="display: none">
<div id="escrow-virtual-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt && fn:contains(setlMthCdList, '01')}">
<div id="payco-content" class="order-method-normal__content" style="display: none">
<div id="payco-content-inner" class="order-method-normal__content-inner">
<div class="infoBox">
<h6 class="infoBox__title">PAYCO 간편결제 안내</h6>
<ol class="infoBox__list">
<li>PAYCO는 온/오프라인 쇼핑은 물론 송금, 멤버십 적립까지 가능한 통합 서비스입니다.</li>
<li>휴대폰과 카드 명의자가 동일해야 결제 가능하며, 결제금액 제한은 없습니다.
<br>- 지원카드: 모든 국내 신용/체크카드
</li>
</ol>
</div>
<p class="textInfo"><i class="icon icon_textInfo--sm"></i>발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt && fn:contains(setlMthCdList, '02')}">
<div id="bank-content" class="order-method-normal__content" style="display: none">
<div id="bank-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt && fn:contains(setlMthCdList, '01')}">
<div id="acount-content" class="order-method-normal__content" style="display: none">
<div id="acount-content-inner" class="order-method-normal__content-inner">
<p class="fyi gray-7 mt-10 ml-10">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
</div>
</div>
</c:if>
<!-- toss 결제 종료 -->
<!-- kcp 결제 시작 -->
<c:if test="${'01' eq payInfo.setleSetupTyCd}">
<div class="custom-radio is-medium">
<input type="radio" name="pg" id="pg04" value="kcp">
<label for="pg04">일반결제</label>
</div>
<div id="pg04Content" class="pgContent order-method-normal" style="display: none">
<div class="order-method-normal__btn-container">
<c:if test="${'Y' eq payInfo.cardUseAt && fn:contains(setlMthCdList, '01')}">
<button type="button" name="01" id="card" class="order-method-normal__btn">신용카드</button>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt && fn:contains(setlMthCdList, '04')}">
<button type="button" name="04" id="virtual" class="order-method-normal__btn">가상계좌</button>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt && fn:contains(setlMthCdList, '04')}">
<button type="button" name="05" id="escrow-virtual" class="order-method-normal__btn">가상계좌(에스크로)</button>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt && fn:contains(setlMthCdList, '01')}">
<button type="button" name="10" id="payco" class="order-method-normal__btn">PAYCO</button>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt && fn:contains(setlMthCdList, '02')}">
<button type="button" name="02" id="bank" class="order-method-normal__btn">무통장</button>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt && fn:contains(setlMthCdList, '01')}">
<button type="button" name="tosspay" id="tosspay" class="order-method-normal__btn">토스페이</button>
</c:if>
<c:if test="${'Y' eq payInfo.npayUseAt}">
<button type="button" name="naverpay" id="naverpay" class="order-method-normal__btn">네이버페이</button>
</c:if>
<c:if test="${'Y' eq payInfo.kpayUseAt}">
<button type="button" name="kakaopay" id="kakaopay" class="order-method-normal__btn">카카오페이</button>
</c:if>
</div>
<div class="order-method-normal__content-wrapper">
<c:if test="${'Y' eq payInfo.cardUseAt && fn:contains(setlMthCdList, '01')}">
<div id="card-content" class="order-method-normal__content" style="display: none">
<div id="card-content-inner" class="order-method-normal__content-inner">
<p class="fyi gray-7 mt-10 ml-10">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt && fn:contains(setlMthCdList, '04')}">
<div id="virtual-content" class="order-method-normal__content" style="display: none">
<div id="virtual-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt && fn:contains(setlMthCdList, '04')}">
<div id="escrow-virtual-content" class="order-method-normal__content" style="display: none">
<div id="escrow-virtual-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt && fn:contains(setlMthCdList, '01')}">
<div id="payco-content" class="order-method-normal__content" style="display: none">
<div id="payco-content-inner" class="order-method-normal__content-inner">
<div class="infoBox">
<h6 class="infoBox__title">PAYCO 간편결제 안내</h6>
<ol class="infoBox__list">
<li>PAYCO는 온/오프라인 쇼핑은 물론 송금, 멤버십 적립까지 가능한 통합 서비스입니다.</li>
<li>휴대폰과 카드 명의자가 동일해야 결제 가능하며, 결제금액 제한은 없습니다.
<br>- 지원카드: 모든 국내 신용/체크카드
</li>
</ol>
</div>
<p class="textInfo"><i class="icon icon_textInfo--sm"></i>발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt && fn:contains(setlMthCdList, '02')}">
<div id="bank-content" class="order-method-normal__content" style="display: none">
<div id="bank-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt && fn:contains(setlMthCdList, '01')}">
<div id="acount-content" class="order-method-normal__content" style="display: none">
<div id="acount-content-inner" class="order-method-normal__content-inner">
<p class="fyi gray-7 mt-10 ml-10">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
</div>
</div>
</c:if>
<!-- kcp 결제 종료 -->
</div>
</form>
</div>
</div>
</div>
<div class="cartOrder__right">
<div class="cartOrder__sticky">
<div class="cartOrderBox">
<h5 class="cartOrderBox__title">결제예정금액</h5>
<ul class="cartOrderBox__list">
<li>
<span class="cartOrderBox__th">총 주문금액</span>
<span class="cartOrderBox__td"><span class="comma" id="goodsAmtSapn">0</span><span class="priceUnit">원</span></span>
</li>
<li>
<span class="cartOrderBox__th">배송비</span>
<span class="cartOrderBox__td"><span class="comma" id="dlvyAmtSapn">0</span><span class="priceUnit">원</span></span>
</li>
<li>
<span class="cartOrderBox__th">총 할인금액</span>
<span class="cartOrderBox__td"><span class="cartOrderBox__discountMinus">(-)</span><span id="dscntAmtSapn" class="comma">0</span><span class="priceUnit">원</span></span>
</li>
</ul>
<div class="cartOrderBox__total">
<span class="cartOrderBox__totalTh">결제예정금액</span>
<span class="cartOrderBox__totalTd"><span id="setleAmtSapn" class="comma">0</span><span class="priceUnit">원</span></span>
</div>
<button type="button" id="btnBuy" class="btn theme large cartOrderBox__buyBtn">구매하기</button>
<%--
<div class="product-btn-container">
<button class="gift-btn">선물</button>
<button class="btn large outline">여러곳 배송</button>
<button onclick="fn_go_ordr_failr()" class="btn large gray2">정기배송</button>
</div>
--%>
</div>
<div style="margin-top: 24px;">
<div id="NC_ID_1699495131279295" class="npay_storebtn_bx">
<div id="NPAY_BUTTON_BOX_ID" class="npay_button_box ">
<div class="npay_button">
<div class="npay_text"><span class="npay_blind">NAVER 네이버 ID로 간편구매 네이버페이</span></div>
<table class="npay_btn_list" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="npay_btn_item">
<a id="NPAY_BUY_LINK_IDNC_ID_1699495131279295" href="#" class="npay_btn_link npay_btn_pay btn_green" style="box-sizing:content-box; " title="새창">
<span class="npay_blind">네이버페이 구매하기</span>
</a>
</td>
<td class="npay_btn_item btn_width">
<a id="NPAY_WISH_LINK_IDNC_ID_1699495131279295" href="#" class="npay_btn_link npay_btn_zzim" style="box-sizing:content-box; " title="새창">
<span class="npay_blind">찜하기</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="NPAY_EVENT_ID" class="npay_event">
<a id="NPAY_PROMOTION_PREV_IDNC_ID_1699495131279295" href="#" class="npay_more npay_more_prev">
<span class="npay_blind">이전</span>
</a>
<p id="NPAY_PROMOTION_IDNC_ID_1699495131279295" class="npay_event_text">
<strong class="event_title">이벤트</strong>
<a href="https://new-m.pay.naver.com/pcpay/eventbenefit" class="event_link" target="_blank">네이버페이</a>
</p>
<a id="NPAY_PROMOTION_NEXT_IDNC_ID_1699495131279295" href="#" class="npay_more npay_more_next">
<span class="npay_blind">다음</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<%-- 공통 Footer --%>
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
<c:if test="${'Y' == data.payInfo.gcpayCardUseAt || 'Y' == payInfo.gcpayAcntnbUseAt}">
<script src="https://js.tosspayments.com/v1/brandpay"></script>
<script>
const gcPayClientKey = '${data.payInfo.bpayClntKey}';
let tokenYn = false;
</script>
<script type="text/javascript" src="<c:url value='/pc/js/gcpay.js'/>"></script>
<script type="text/javascript" src="<c:url value='/pc/css/jqueryui/slick.min.js'/>"></script>
<link rel="stylesheet" href="<c:url value='/pc/css/gcpay.css'/>">
<link rel="stylesheet" href="<c:url value='/pc/css/slick.css'/>">
<link rel="stylesheet" href="<c:url value='/pc/css/slick-theme.css'/>">
<c:if test="${not empty sessionScope.gcpay_token && not empty sessionScope.gcpay_id}">
<script><!-- 추후 삭제
console.log('Token : ','${sessionScope.gcpay_token}');
console.log('세션아이디 : ','${sessionScope.gcpay_id}');
console.log('로그인아이디 : ','${data.purchsr.mbrInnb}');-->
</script>
<c:if test="${sessionScope.gcpay_id == data.purchsr.mbrInnb}">
<script>
tokenYn = true;
</script>
</c:if>
</c:if>
<script>
set_slick(true);
gcpay_add_info();
get_promotion_data();
initBrandPay('<c:out value="${data.purchsr.mbrInnb}"/>',tokenYn);
</script>
<!-- GC PAY 카드 무이자 할부 행사 안내 모달 -->
<div id="gcpay-cardInfo-pop" class="modal" style="max-width: 540px;">
<div class="modal-header">
<h4>GC PAY 카드 무이자 할부 행사 안내</h4>
</div>
<div class="modal-content">
<div class="table-wrapper">
<table class="table vertical tight">
<caption>카드 무이자 할부 행사</caption>
<colgroup>
<col style="width: 24%;">
<col style="width: 38%;">
<col style="width: 38%;">
</colgroup>
<thead>
<tr>
<th>카드명</th>
<th>금액기준(이상)</th>
<th>행사 개월수</th>
</tr>
</thead>
<tbody>
<tr class="row-no-data">
<td colspan="100%" class="text-center">조회된 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
<div class="gcpay-eventInfo">
<p class="fyi">GC PAY 카드간편결제 시 무이자 할부 결제 금액과 행사 개월수에 대한 안내입니다.</p>
<p class="fyi">일반결제의 신용카드 및 타 결제 수단에 대한 무이자 할부 기준은 다르며, 별도 안내를 참고해 이용해주세요.</p>
<p class="fyi">법인(개인사업자카드 포함)/체크/기프트카드 등 일부 카드 제외.</p>
<p class="fyi">제휴사이트를 통한 접속 시 무이자 혜택이 제외될 수 있습니다.</p>
<p class="fyi">※ 별도 고지없이 행사 내용/기간 변경될 수 있으며, 자세한 문의는 각 카드사로 확인 부탁드립니다.</p>
</div>
</div>
</div>
<!-- GC PAY 사용안내 모달 -->
<div id="gcpay-info" class="modal default" style="max-width: 500px;">
<div class="modal-header">
<div class="modal-header__title">GC PAY 안내</div>
</div>
<div class="modal-content">
<div class="gcpayGuide">
<img src="/pc/images/popup_setting_top.png" alt="">
<div class="gcpayGuideSlick">
<div class="gcpayGuideSlick__item">
<img src="/pc/images/popup_setting_01.png" alt="">
</div>
<div class="gcpayGuideSlick__item">
<img src="/pc/images/popup_setting_02.png" alt="">
</div>
<div class="gcpayGuideSlick__item">
<img src="/pc/images/popup_setting_03.png" alt="">
</div>
</div>
</div>
<div class="infoBox">
<div class="infoBox__title">GCPay 간편결제의 장점</div>
<ul class="infoBox__list">
<li>주로 사용하는 결제 수단(카드, 계좌)을 쉽게 등록 관리할 수 있어요.</li>
<li>결제 비밀번호만 입력하면 등록 결제 수단으로 빠르게 결제할 수 있어요.</li>
<li>간편결제로 등록한 신용카드도 각 카드사의 혜택은 그대로 받을 수 있어요.</li>
<li>※ 카드사 행사에 따라 무이자 할부 가능. 카드사에 따라 카드사 포인트 사용 가능</li>
</ul>
</div>
</div>
</div>
</c:if>
<div id="modalDiv"></div>
<div id="setleDiv"></div>
</body>
</html>