File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>문자온</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/publish/css/reset.css">
<link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
<link rel="stylesheet" href="/publish/css/common.css">
<link rel="stylesheet" href="/publish/css/style.css">
<link rel="stylesheet" href="/publish/css/button.css">
<link rel="stylesheet" href="/publish/css/content.css">
<link rel="stylesheet" href="/publish/css/mem.css">
<link rel="stylesheet" href="/publish/css/font.css">
<link rel="stylesheet" href="/publish/css/popupLayer.css">
<script src="/publish/js/jquery-3.5.0.js"></script>
<script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/publish/js/common.js"></script>
<script src="/publish/js/content.js"></script>
<script src="/publish/js/calendar.js"></script>
<script src="/publish/js/popup.js"></script>
<script src="/publish/js/popupLayer.js"></script>
<script src="https://mup.mobilians.co.kr/js/ext/ext_inc_comm.js"></script>
<script type="text/javascript" src="/js/MJUtill.js"></script>
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
<script>
let paymentWidget;
let paymentMethodWidget;
$(document).ready(function () {
// 토스페이먼츠 위젯 초기화 세팅
const clientKey = 'test_gck_KNbdOvk5rk15kdKpqQGo3n07xlzm';
const customerKey = 'test_customer_1234';
paymentWidget = PaymentWidget(clientKey, customerKey);
// 최초 선택된 체크박스 기준 금액 세팅
setPriceMake();
const initialAmount = parseInt($("#price").val(), 10);
// 결제수단 및 약관 위젯 렌더링
paymentMethodWidget = paymentWidget.renderPaymentMethods(
'#payment-method',
{ value: initialAmount }
);
paymentWidget.renderAgreement('#agreement');
$(".tType4 tbody tr td").click(function () {
$("input[name='price']").prop("checked", false);
$(this).closest("tr").find("input[name='price']").prop("checked", true);
// 금액 갱신
setPriceMake();
});
});
function setPriceMake() {
const checkedRow = $('input[name="price"]:checked').closest('tr');
const priceText = checkedRow.find('td').eq(1).text().replace(/,/g, '').trim();
const supplyPrice = parseInt(priceText, 10);
const vatPrice = Math.round(supplyPrice * 0.1);
const lastPrice = supplyPrice + vatPrice;
// hidden input 값
$("#price").val(lastPrice);
// 화면 표시
$('#supplyPriceStr').html(numberWithCommas(supplyPrice));
$('#vatPriceStr').html(numberWithCommas(vatPrice));
$('#lastPriceStr').html(numberWithCommas(lastPrice));
// 토스 위젯 금액 변경
if (typeof paymentMethodWidget !== 'undefined') {
paymentMethodWidget.updateAmount(lastPrice);
}
}
// 체크박스 단일 선택 처리
$(document).on('change', 'input[name="price"]', function () {
$('input[name="price"]').not(this).prop('checked', false);
$(this).prop('checked', true);
// 금액 갱신
setPriceMake();
});
// 후불제여부 체크
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(){
var lastPrice = parseInt($("#price").val(), 10);
if(lastPrice < 5500){
alert("최소 충전금액 5천원 이상 선택해주세요.");
return false;
}
// 토스페이먼츠 결제창 바로 호출
paymentWidget.requestPayment({
orderId: 'ORDER_' + new Date().getTime(), // 고유한 상점 주문번호 생성
orderName: '문자고 충전 ' + lastPrice + '원',
successUrl: window.location.origin + '/web/member/pay/tossSuccess.do', // 결제 성공 시 이동할 URL (백엔드 컨트롤러 생성 필요)
// paymentType=NORMAL
// &orderId=ORDER_1778047452906
// &paymentKey=tmunj2026050615041659Zv9
// &amount=55000
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 numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
</head>
<body>
<div data-include-path="/publish/layout/_header.html"></div>
<!-- content 영역 -->
<div id="container" class="cont sub">
<div class="inner">
<!-- send top -->
<div class="send_top">
<!-- tab button -->
<ul class="tabType4">
<li class="tab"><button type="button" onclick="location.href='/publish/payment1.html'">요금안내/견적내기</button></li>
<li class="tab active"><button type="button" onclick="TabType5(this,'2');">결제하기</button></li>
<li class="tab"><button type="button" onclick="location.href='/publish/payment3.html'">요금 결제내역</button></li>
<li class="tab"><button type="button" onclick="location.href='/publish/payment4.html'">요금 사용내역</button></li>
<li class="tab"><button type="button" onclick="location.href='/publish/payment5.html'">세금계산서 발행 등록</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="infoListPop('payment2','792','250');">사용안내</button>
</div>
<div>
<!-- 토스페이먼츠 결제수단 위젯 영역 -->
<div id="payment-method" class="toss_wrap"></div>
<!-- 토스페이먼츠 이용약관 영역 -->
<div id="agreement" class="toss_wrap"></div>
<b class="fs_18 fwMd">결제할 금액을 선택한 후 <span class="c_002c9a">[결제하기]</span> 버튼을 눌러주세요</b>
<div class="tb_wrap" style="margin:12px 0 0 0;">
<table class="tType4">
<colgroup>
<col style="width:60px;"/>
<col style="width:calc((100% - 60px)/4);"/>
<col style="width:calc((100% - 60px)/4);"/>
<col style="width:calc((100% - 60px)/4);"/>
<col style="width:calc((100% - 60px)/4);"/>
</colgroup>
<thead>
<tr>
<th>선택</th>
<th>결제금액</th>
<th>단문(15원)</th>
<th>장문(39원)</th>
<th>그림(70원)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>10,000</td>
<td><b class="c_002c9a fwBold">666</b>건</td>
<td><b class="c_002c9a fwBold">256</b>건</td>
<td><b class="c_002c9a fwBold">142</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>20,000</td>
<td><b class="c_002c9a fwBold">1,333</b>건</td>
<td><b class="c_002c9a fwBold">512</b>건</td>
<td><b class="c_002c9a fwBold">285</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>30,000</td>
<td><b class="c_002c9a fwBold">2,000</b>건</td>
<td><b class="c_002c9a fwBold">769</b>건</td>
<td><b class="c_002c9a fwBold">428</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>40,000</td>
<td><b class="c_002c9a fwBold">2,666</b>건</td>
<td><b class="c_002c9a fwBold">1,025</b>건</td>
<td><b class="c_002c9a fwBold">571</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price" checked/>
</td>
<td>50,000</td>
<td><b class="c_002c9a fwBold">3,333</b>건</td>
<td><b class="c_002c9a fwBold">1,282</b>건</td>
<td><b class="c_002c9a fwBold">714</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>100,000</td>
<td><b class="c_002c9a fwBold">6,666</b>건</td>
<td><b class="c_002c9a fwBold">2,564</b>건</td>
<td><b class="c_002c9a fwBold">1,428</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>150,000</td>
<td><b class="c_002c9a fwBold">10,000</b>건</td>
<td><b class="c_002c9a fwBold">3,846</b>건</td>
<td><b class="c_002c9a fwBold">2,142</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>200,000</td>
<td><b class="c_002c9a fwBold">13,333</b>건</td>
<td><b class="c_002c9a fwBold">5,128</b>건</td>
<td><b class="c_002c9a fwBold">2,857</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>300,000</td>
<td><b class="c_002c9a fwBold">20,000</b>건</td>
<td><b class="c_002c9a fwBold">7,692</b>건</td>
<td><b class="c_002c9a fwBold">4,285</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>400,000</td>
<td><b class="c_002c9a fwBold">26,666</b>건</td>
<td><b class="c_002c9a fwBold">10,256</b>건</td>
<td><b class="c_002c9a fwBold">5,714</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>500,000</td>
<td><b class="c_002c9a fwBold">33,333</b>건</td>
<td><b class="c_002c9a fwBold">12,820</b>건</td>
<td><b class="c_002c9a fwBold">7,142</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>1,000,000</td>
<td><b class="c_002c9a fwBold">66,666</b>건</td>
<td><b class="c_002c9a fwBold">25,641</b>건</td>
<td><b class="c_002c9a fwBold">14,285</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>1,500,000</td>
<td><b class="c_002c9a fwBold">100,000</b>건</td>
<td><b class="c_002c9a fwBold">38,461</b>건</td>
<td><b class="c_002c9a fwBold">21,428</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>2,000,000</td>
<td><b class="c_002c9a fwBold">133,333</b>건</td>
<td><b class="c_002c9a fwBold">51,282</b>건</td>
<td><b class="c_002c9a fwBold">28,571</b>건</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price"/>
</td>
<td>5,000,000</td>
<td><b class="c_002c9a fwBold">333,333</b>건</td>
<td><b class="c_002c9a fwBold">128,205</b>건</td>
<td><b class="c_002c9a fwBold">71,428</b>건</td>
</tr>
</tbody>
</table>
</div>
<div class="amount_wrap" style="margin:20px 0 0 0;padding:12px 30px 12px 35px;border:3px solid #ddd;border-radius:5px;">
<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" onclick="pgOpenerPopup(); return false;" style="width:210px;">결제하기</button>
</div>
</div>
</div><!-- 결제관리 - 결제하기 -->
</div>
<!--// send top -->
</div>
</div>
<!--// content 영역 -->
<!-- footer 영역 -->
<div data-include-path="/publish/layout/_footer.html"></div>
<!--// footer 영역 -->
</body>
</html>