File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<%@ 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="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ 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="ec" uri="/WEB-INF/tld/ecnet_tld.tld"%>
<%-- 토스 클라이언트키(공개키)는 환경별 globals_*.properties 에서 주입 --%>
<spring:eval expression="@globalSettings['Globals.pay.toss.clientKey']" var="tossClientKey"/>
<style>
/*.charg_cont .area_tab li{ width: calc((100% - 80px)/5);}*/
</style>
<!-- KG 모빌리언스 -->
<script src="https://mup.mobilians.co.kr/js/ext/ext_inc_comm.js"></script>
<script type="text/javascript" src="<c:url value='/js/MJUtill.js'/>"></script>
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
<script>
let paymentWidget;
let paymentMethodWidget;
$(document).ready(function(){
// 서버에서 보낸 payErrorMsg가 있는지 확인
var errorMsg = "${payErrorMsg}";
if (errorMsg && errorMsg !== "") {
// 사용자에게 익숙한 alert 띄우기
alert("결제에 실패하였습니다.\n사유: " + errorMsg);
}
// 토스페이먼츠 위젯 초기화 세팅 (clientKey는 서버 globals_*.properties 에서 주입)
const clientKey = '${tossClientKey}';
const customerKey = 'test_customer_1234'; // 테스트용 가상 고객 ID (실제 연동 시에는 로그인한 유저의 고유 ID를 넣으세요)
paymentWidget = PaymentWidget(clientKey, customerKey);
// 초기 충전금액(입력값 기준, 공급가액)
var initSupply = parseInt(($("#price").val() || '0').replace(/[^0-9]/g, ''), 10) || 0;
var initAmount = initSupply + Math.round(initSupply * 0.1);
// 결제수단 및 약관 위젯 화면에 렌더링
paymentMethodWidget = paymentWidget.renderPaymentMethods('#payment-method', { value: initAmount });
paymentWidget.renderAgreement('#agreement');
// 선택한 결제수단 → 아래 신용카드 타이틀 텍스트 동기화
try {
if (paymentMethodWidget && typeof paymentMethodWidget.on === 'function') {
// 위젯 렌더 완료 후 초기 반영 + 선택 변경 감지(폴링: v1은 select 이벤트 미보장)
paymentMethodWidget.on('ready', function () {
updatePayMethodTitle();
setInterval(updatePayMethodTitle, 100);
});
// select 이벤트가 지원되면 즉시 반영
paymentMethodWidget.on('paymentMethodSelect', updatePayMethodTitle);
}
} catch (e) { /* 이벤트 미지원 환경 무시 */ }
// 초기 금액 표시 갱신
updatePrice(initSupply);
// 금액 추가 버튼 클릭
$('.add_money .btn').on('click', function () {
var addAmount = Number($(this).data('price'));
var currentValue = $("#price").val().replace(/[^0-9]/g, '');
currentValue = currentValue ? Number(currentValue) : 0;
var total = currentValue + addAmount;
$("#price").val(numberWithCommas(total));
updatePrice(total);
});
// 직접 입력
$("#price").on('input', function () {
var value = $(this).val().replace(/[^0-9]/g, '');
value = value ? Number(value) : 0;
$(this).val(numberWithCommas(value));
updatePrice(value);
});
});
// 금액 업데이트 (price = 공급가액)
function updatePrice(price) {
var $message = $('.input_message');
var supplyPrice = price;
var vatPrice = Math.round(supplyPrice * 0.1);
var lastPrice = supplyPrice + vatPrice;
// 화면 표시
$('#supplyPriceStr').text(numberWithCommas(supplyPrice));
$('#vatPriceStr').text(numberWithCommas(vatPrice));
$('#lastPriceStr').text(numberWithCommas(lastPrice));
// 토스 결제 금액 변경
if (typeof paymentMethodWidget !== 'undefined') {
paymentMethodWidget.updateAmount(lastPrice);
}
// 충전금액 제한 체크
if (price > 150000 || price < 5000) {
$(".money_input").addClass('error');
$message.addClass('active');
if (price < 5001) {
$message.find(".msg").text("최소 충전금액 5천원 이상 입력해주세요.");
} else {
$message.find(".msg").text("휴대폰 결제는 최대 150,000원까지 입력 가능합니다.");
}
} else {
$(".money_input").removeClass('error');
$message.removeClass('active');
}
}
// 선택된 결제수단명을 신용카드 타이틀에 반영
function updatePayMethodTitle() {
try {
var sel = paymentMethodWidget.getSelectedPaymentMethod();
if (!sel || !sel.method) return;
var method = sel.method; // 카드 / 가상계좌 / 계좌이체 / 휴대폰 / 간편결제 ...
var label = (method === '카드') ? '신용·체크카드' : method;
var $t = $('#payMethodTitle');
if ($t.length && $t.text() !== label) {
$t.text(label);
}
} catch (e) { /* 위젯 준비 전 호출 무시 */ }
}
// 후불제여부 체크
function getMjUserAfterPayCheck() {
var isAfterPay = false;
$.ajax({
type: "POST",
url: "/web/main/selectUserAfterPayAjax.do",
data: {},
dataType:'json',
async: false,
success: function (data) {
if (data.isSuccess) {
if (data.isAfterPay == true) {
isAfterPay = true;
}
}
},
error: function (e) {
}
});
return isAfterPay;
}
function pgOpenerPopup(){
// 후불제여부 체크 (기존 로직 유지)
if (getMjUserAfterPayCheck() == true) {
alert("후불제 고객은 해당 서비스를 이용할수 없습니다.");
return false;
}
// 충전금액(공급가액) 추출
var chargePrice = parseInt(($("#price").val() || '0').replace(/[^0-9]/g, ''), 10);
if (isNaN(chargePrice) || chargePrice < 5000) {
alert("최소 충전금액 5천원 이상 입력해주세요.");
return false;
}
// 최종 결제금액(부가세 포함)
var lastPrice = chargePrice + Math.round(chargePrice * 0.1);
// 토스페이먼츠 결제창 바로 호출
paymentWidget.requestPayment({
orderId: 'ORDER_' + new Date().getTime(), // 고유한 상점 주문번호 생성
orderName: '문자온 충전 ' + lastPrice + '원',
successUrl: window.location.origin + '/web/member/pay/tossSuccess.do', // 결제 성공 시 이동할 URL
failUrl: window.location.origin + '/web/member/pay/tossFail.do', // 결제 실패 시 이동할 URL
customerEmail: $('#mberEmailAdres').val(), // 로그인한 사용자의 이메일 매핑
customerName: $('#mberNm').val(), // 로그인한 사용자의 이름 매핑
customerMobilePhone: $('#moblphonNo').val()
}).catch(function (error) {
if (error.code === 'USER_CANCEL') {
alert('결제를 취소하셨습니다.');
} else {
alert(error.message);
}
});
}
/* 윈도우팝업 열기 */
function infoPop(pageUrl){
document.infoPopForm.pageType.value = pageUrl;
document.infoPopForm.action = "/web/pop/infoPop.do";
document.infoPopForm.method = "post";
window.open("about:blank", 'infoPop', 'width=790, height=220, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbars=1');
document.infoPopForm.target = "infoPop";
document.infoPopForm.submit();
}
/* 사용내역서 클릭 시 내역서 새창 팝업 오픈 */
function fnShowVaViewPrintPopup() {
//만들려는 팝업의 크기
var popup_wid = '840';
var popup_ht = '800';
var popup_left = (window.screen.width / 2) - (popup_wid / 2);
var popup_top =(window.screen.height / 2) - (popup_ht / 2);
$("#pgForm").attr("target","payVaPrint");
window.open('', 'payVaPrint', 'width='+ popup_wid +', height='+ popup_ht +', left=' + popup_left + ', top='+ popup_top +',scrollbars=1');
$("#pgForm").attr({"action":"/web/member/pay/selectVaViewPrintPopupAjax.do", "method":"post"}).submit();
}
</script>
<!-- </head>
<body> -->
<form id="payTypeForm" name="payTypeForm" method="post">
<input type="hidden" name="payTypeCode" />
</form>
<form id="pgForm" name="pgForm" action="/web/member/pay/PayActionAjax.do" method="post">
<input type="hidden" id="payMethod" name="payMethod" />
<input type="hidden" id="accMsg" name="accMsg" />
<input type="hidden" id="sendCnt" name="sendCnt" value="<c:out value='${resultMsgInfo.sendCnt}'/>" />
<input type="hidden" id="mberEmailAdres" value="<c:out value='${mberManageVO.mberEmailAdres}'/>" />
<input type="hidden" id="moblphonNo" value="<c:out value='${mberManageVO.moblphonNo}'/>" />
<input type="hidden" id="mberNm" value="<c:out value='${mberManageVO.mberNm}'/>" />
<!-- content 영역 -->
<div class="inner">
<!-- send top -->
<div class="send_top">
<!-- tab button -->
<ul class="tabType4">
<li class="tab"><button type="button" onclick="location.href='/web/pay/PayGuide.do'">요금안내/견적내기</button></li>
<li class="tab active"><button type="button">결제하기</button></li>
<li class="tab"><button type="button" onclick="location.href='/web/member/pay/PayList.do'">요금 결제내역</button></li>
<li class="tab"><button type="button" onclick="location.href='/web/member/pay/payUserSWList.do'">요금 사용내역</button></li>
<!-- 현금영수증 자동발행 주석 -->
<!-- <li class="tab"><button type="button" onclick="location.href='/web/member/pay/BillPub.do'">계산서/현금영수증 발행 등록</button></li> -->
<li class="tab"><button type="button" onclick="location.href='/web/member/pay/BillPub.do'">세금계산서 발행 등록</button></li>
</ul><!--// tab button -->
<!-- 결제관리 - 결제하기 -->
<div class="serv_content charg_cont current" id="tab5_2">
<div class="heading">
<h2>결제하기</h2>
<button type="button" class="button info" onclick="infoPop('PayView');">사용안내</button>
</div>
<%--<div class="titBox">
<p>- 서비스 이용을 위해 충전이 필수 입니다.</p>
<p>- 충전 자체로 매출 인식이 되지 않는 서비스 특성상, 부가세 신고는 전자 세금계산서로만 가능합니다.</p>
<p>- 모든 요금은 VAT별도 금액입니다.</p>
</div>--%>
<div>
<!-- 토스페이먼츠 결제수단 위젯 영역 -->
<div id="payment-method" class="toss_wrap"></div>
<!-- 토스페이먼츠 이용약관 영역 -->
<div id="agreement" class="toss_wrap"></div>
<!-- 신용카드 -->
<div class="area_tabcont on" id="tab2_1">
<p class="tType1_title"><img src="/publish/images/credit_small.png" alt="신용카드"> <span id="payMethodTitle">신용·체크카드</span></p>
<table class="tType1">
<colgroup>
<col style="width: 100px;">
<col style="width: auto;">
</colgroup>
<tbody>
<tr class="charge_content">
<th scope="row">충전금액</th>
<td class="flex">
<div class="money_form_wrap form_wrap">
<input type="text" name="price" id="price" class="input money_input" placeholder="5,000원 이상 입력해주세요." value="50,000" />
<p class="input_in">원</p>
<p class="input_message error">
<i class="icon error">!</i> <span class="msg">휴대폰 결제는 최대 150,000원까지 입력 가능합니다.</span>
</p>
</div>
<div class="btn_wrap add_money w100per">
<button type="button" class="btn" data-price="10000">+ 1만원</button>
<button type="button" class="btn" data-price="50000">+ 5만원</button>
<button type="button" class="btn" data-price="100000">+ 10만원</button>
<button type="button" class="btn" data-price="1000000">+ 100만원</button>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="amount_wrap">
<dl>
<dt>최종 결제금액 :</dt>
<dd>
<ul>
<li><strong id="supplyPriceStr">50,000</strong>원(공급가액)</li>
<li><span class="plus"></span><strong id="vatPriceStr">5,000</strong>원(부가세)</li>
<li class="total"><span class="equal"></span><strong class="c_e40000" id="lastPriceStr">55,000</strong>원(최종금액)</li>
</ul>
</dd>
</dl>
<button type="button" class="btn btnType fill primary btn_pay" onclick="pgOpenerPopup(); return false;">충전하기</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--누적결제액별 등급 및 단가 추가 시작-->
<div class="accrue_price" id="grdShowArea" style="display: none;">
</div>
<div class="accrue_level" id="mberGrdSettingArea" style="display: none;">
<p class="tType1_title level"><img src="/publish/images/level/accrue.png" alt="누적결제액별 등급 및 단가 아이콘"> 누적결제액별 등급 및 단가
</p>
<table class="tType2 tType2_level">
<caption></caption>
<colgroup>
<col style="width: 13%;">
<col style="width: auto;">
<col style="width: 11%;">
<col style="width: 11%;">
<col style="width: 11%;">
<col style="width: 11%;">
<col style="width: 11%;">
</colgroup>
<thead>
<tr>
<th>등급</th>
<th class="th_second">누적결제액<span id="levelSubTitle"></span></th>
<th>단문</th>
<th>장문</th>
<th>그림(1장)</th>
<th>그림(2장)</th>
<th>그림(3장)</th>
</tr>
</thead>
<tbody>
<c:forEach var="result" items="${mberGrdSettingList}" varStatus="status">
<tr>
<th><c:out value="${result.grdSetNm}"/></th>
<td class="level_price"><c:out value="${result.stdAmtComma}"/></td>
<td><c:out value="${result.shortPrice}"/></td>
<td><c:out value="${result.longPrice}"/></td>
<td><c:out value="${result.picturePrice}"/></td>
<td><c:out value="${result.picture2Price}"/></td>
<td><c:out value="${result.picture3Price}"/></td>
</tr>
</c:forEach>
</tbody>
</table>
<span class="reqTxt4">
* 등급별 요금제는 당사의 정책 및 운영의 필요상 수정, 중단 또는 변경될 수 있습니다. <br>
* 누적결제액은 등급별 요금제 적용일로부터 적립된 결제금액을 말하며, 누적결제액에 따라 등급은 자동으로 적용됩니다. <br>
* "첫결제 이벤트" 등 이벤트 결제금액은 등급별 요금제 누적결제액에서 제외됩니다. <br>
</span>
<p class="reqTxt4 reqTxt4_last">
* 문자피싱, 스미싱, 주식, 도박, 로또, 스팸, 사기, 협박, 범죄, 유사투자, 유사수신 등을 목적으로 하거나 교사 또는 방조하는 내용의 정보, 발신번호 조작
등으로 인지되는 문자에 대해서는
사전 또는 즉시 발송을 차단하고
이용을 정지시킬 수 있으며, 이에 대한 어떠한 환불이나 보상을 실시하지 않습니다. 또한, 상기 문자를 발송한 회원에 대해서는 그 즉시 등급별 요금제 혜택을
취소합니다.
</p>
</div>
<!--문자_등급별 요금 안내 추가 끝-->
</div><!-- 결제관리 - 결제하기 -->
</div><!--// send top -->
</div>
</form>
<form name="infoPopForm" id="infoPopForm" method="post">
<input type="hidden" name="pageType" id="pageType" value=""/>
</form>
<!-- KG 모빌리언스 CARD -->
<form name="payCardForm" accept-charset="euc-kr">
<input type="hidden" name="CASH_GB">
<input type="hidden" name="CN_SVCID">
<input type="hidden" name="PAY_MODE">
<input type="hidden" name="VER">
<input type="hidden" name="Prdtprice">
<input type="hidden" name="Prdtnm">
<input type="hidden" name="Tradeid">
<input type="hidden" name="Siteurl">
<input type="hidden" name="Okurl">
<input type="hidden" name="Notiurl">
<input type="hidden" name="CALL_TYPE">
<input type="hidden" name="Failurl">
<input type="hidden" name="Userid">
<input type="hidden" name="Username">
<input type="hidden" name="MSTR">
<input type="hidden" name="Payeremail">
<input type="hidden" name="Cryptyn">
<input type="hidden" name="Cryptstring">
<input type="hidden" name="Closeurl">
<input type="hidden" name="CN_BILLTYPE">
<input type="hidden" name="CN_TAX">
<input type="hidden" name="CN_TAXFREE">
<input type="hidden" name="CN_FREEINTEREST">
<input type="hidden" name="CN_POINT">
<input type="hidden" name="Termregno">
<input type="hidden" name="APP_SCHEME">
<input type="hidden" name="CN_FIXCARDCD">
<input type="hidden" name="CN_DIRECT">
<input type="hidden" name="CN_INSTALL">
<input type="hidden" name="Deposit">
</form>
<!-- KG 모빌리언스 MOBILE -->
<form name="payMobileForm" accept-charset="euc-kr">
<input type="hidden" name="CASH_GB">
<input type="hidden" name="Okurl">
<input type="hidden" name="MC_SVCID">
<input type="hidden" name="Prdtnm">
<input type="hidden" name="Prdtprice">
<input type="hidden" name="Siteurl">
<input type="hidden" name="PAY_MODE">
<input type="hidden" name="Tradeid">
<input type="hidden" name="LOGO_YN">
<input type="hidden" name="CALL_TYPE">
<input type="hidden" name="MC_AUTHPAY">
<input type="hidden" name="Notiurl">
<input type="hidden" name="MC_AUTOPAY">
<input type="hidden" name="Closeurl">
<input type="hidden" name="MC_PARTPAY">
<input type="hidden" name="Failurl">
<input type="hidden" name="MC_No">
<input type="hidden" name="MC_FIXNO">
<input type="hidden" name="MC_Cpcode">
<input type="hidden" name="Userid">
<input type="hidden" name="Item">
<input type="hidden" name="Prdtcd">
<input type="hidden" name="Payeremail">
<input type="hidden" name="MC_DEFAULTCOMMID">
<input type="hidden" name="MC_FIXCOMMID">
<input type="hidden" name="MSTR">
<input type="hidden" name="Sellernm">
<input type="hidden" name="Sellertel">
<input type="hidden" name="Notiemail">
<input type="hidden" name="IFRAME_NAME">
<input type="hidden" name="INFOAREA_YN">
<input type="hidden" name="FOOTER_YN">
<input type="hidden" name="HEIGHT">
<input type="hidden" name="PRDT_HIDDEN">
<input type="hidden" name="EMAIL_HIDDEN">
<input type="hidden" name="CONTRACT_HIDDEN">
<input type="hidden" name="Cryptyn">
<input type="hidden" name="Cryptstring">
<input type="hidden" name="MC_EZ_YN">
<input type="hidden" name="MC_EZ_KEY">
<input type="hidden" name="MC_PUSH_KEY">
</form>
<!-- KG 모빌리언스 BANK -->
<form name="payBankForm" accept-charset="euc-kr">
<input type="hidden" name="CASH_GB">
<input type="hidden" name="Okurl">
<input type="hidden" name="RA_SVCID">
<input type="hidden" name="Prdtnm">
<input type="hidden" name="Prdtprice">
<input type="hidden" name="Siteurl">
<input type="hidden" name="PAY_MODE">
<input type="hidden" name="Tradeid">
<input type="hidden" name="LOGO_YN">
<input type="hidden" name="CALL_TYPE">
<input type="hidden" name="Notiurl">
<input type="hidden" name="Closeurl">
<input type="hidden" name="Failurl">
<input type="hidden" name="Userid">
<input type="hidden" name="Item">
<input type="hidden" name="Prdtcd">
<input type="hidden" name="Payeremail">
<input type="hidden" name="MSTR">
<input type="hidden" name="Notiemail">
<input type="hidden" name="IFRAME_NAME">
<input type="hidden" name="INFOAREA_YN">
<input type="hidden" name="FOOTER_YN">
<input type="hidden" name="HEIGHT">
<input type="hidden" name="PRDT_HIDDEN">
<input type="hidden" name="EMAIL_HIDDEN">
<input type="hidden" name="CONTRACT_HIDDEN">
<input type="hidden" name="Cryptyn">
<input type="hidden" name="Cryptstring">
<input type="hidden" name="Deposit">
<input type="hidden" name="Billyn">
</form>