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 $input = $('.money_input');
const $message = $('.input_message');
// 금액 추가 버튼 클릭
$('.add_money .btn').on('click', function () {
const addAmount = Number($(this).data('price'));
// 현재 입력값 숫자만 추출
let currentValue = $input.val().replace(/[^0-9]/g, '');
currentValue = currentValue ? Number(currentValue) : 0;
// 금액 합산
const total = currentValue + addAmount;
// input 표시
$input.val(numberWithCommas(total));
// 금액 갱신
updatePrice(total);
});
// 직접 입력
$input.on('input', function () {
let value = $(this).val().replace(/[^0-9]/g, '');
value = value ? Number(value) : 0;
$(this).val(numberWithCommas(value));
updatePrice(value);
});
// 토스페이먼츠 위젯 초기화
const clientKey = 'test_gck_KNbdOvk5rk15kdKpqQGo3n07xlzm';
const customerKey = 'test_customer_1234';
paymentWidget = PaymentWidget(clientKey, customerKey);
// 최초 금액
const initialAmount = 0;
// 결제수단 렌더링
paymentMethodWidget = paymentWidget.renderPaymentMethods(
'#payment-method',
{ value: initialAmount }
);
// 약관 렌더링
paymentWidget.renderAgreement('#agreement');
});
// 금액 업데이트
function updatePrice(price) {
const $message = $('.input_message');
const supplyPrice = price;
const vatPrice = Math.round(supplyPrice * 0.1);
const 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 pgOpenerPopup() {
const chargePrice = parseInt($('#price').val().replace(/[^0-9]/g, ''),10);
const lastPrice = chargePrice + Math.round(chargePrice * 0.1);
if (chargePrice < 5000) {
alert("최소 충전금액 5천원 이상 입력해주세요.");
return false;
}
paymentWidget.requestPayment({
orderId: 'ORDER_' + new Date().getTime(),
orderName: '문자온 충전 ' + lastPrice + '원',
successUrl: window.location.origin + '/web/member/pay/tossSuccess.do',
failUrl: window.location.origin + '/web/member/pay/tossFail.do',
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">충전할 금액을 선택한 후 <spa n class="c_002c9a">[충전하기]</span> 버튼을 눌러주세요</b> -->
<div class="area_tabcont on " id="tab2_1">
<p class="tType1_title"><img src="/publish/images/credit_small.png" alt="신용카드"> 신용카드</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">
<!-- <select name="tempPrice" id="tempPrice" class="list_seType1">
<option value="5000">5,000</option>
<option value="10000">10,000</option>
<option value="20000">20,000</option>
<option value="30000">30,000</option>
<option value="50000" selected="">50,000</option>
<option value="100000">100,000</option>
<option value="200000">200,000</option>
<option value="300000">300,000</option>
<option value="500000">500,000</option>
<option value="700000">700,000</option>
<option value="900000">900,000</option>
<option value="1000000">1,000,000</option>
<option value="1200000">1,200,000</option>
<option value="1500000">1,500,000</option>
<option value="2000000">2,000,000</option>
<option value="2500000">2,500,000</option>
<option value="3000000">3,000,000</option>
</select> -->
<div class="money_form_wrap form_wrap">
<input type="text" name="price" id="price" class="input money_input" placeholder="1,000원 이상 입력해주세요." value="50,000" min="5,000" max="150,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>
<!-- <span class="reqTxt6">※ 최소 3천원 이상부터 결제 가능합니다.</span> -->
</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><!-- 결제관리 - 결제하기 -->
</div>
<!--// send top -->
</div>
</div>
<!--// content 영역 -->
<!-- footer 영역 -->
<div data-include-path="/publish/layout/_footer.html"></div>
<!--// footer 영역 -->
</body>
</html>