결제 - 키움결제 모바일 적용

This commit is contained in:
이경숙
2026-04-01 17:04:45 +09:00
parent 33bb861300
commit 6c55f53647
3 changed files with 178 additions and 100 deletions

View File

@@ -590,7 +590,7 @@
//$('#setleSetupTyCd').val() === '01' ? $('#pg04').click() : $('#pg03').click(); //$('#setleSetupTyCd').val() === '01' ? $('#pg04').click() : $('#pg03').click();
if($('#setleSetupTyCd').val() === '01'){$('#pg04').click();} if($('#setleSetupTyCd').val() === '01'){$('#pg04').click();}
else if($('#setleSetupTyCd').val() === '02'){$('#pg03').click();} else if($('#setleSetupTyCd').val() === '02'){$('#pg03').click();}
else if($('#setleSetupTyCd').val() === '03'){$('#pg05').click();} else if($('#setleSetupTyCd').val() === '03'){$('#pg06').click();}
$('.order-method-normal__btn').removeClass('active'); $('.order-method-normal__btn').removeClass('active');
$(this).addClass('active'); $(this).addClass('active');
@@ -3542,94 +3542,9 @@
</script> </script>
<script> <script>
var pf;
function kiwoomPay() {
console.log("kiwoomPay script start :::::");
pf = document.payForm;
// 입력값 가져오기
var CPID = pf.CPID.value;
var PAYMETHOD = pf.PAYMETHOD.value;
var ORDERNO = pf.ORDERNO.value;
var TYPE = pf.TYPE.value;
var AMOUNT = pf.AMOUNT.value;
const url = '<c:url value="/sopmal/pay/kiwoomPayGetEnc"/>';
// AJAX로 kiwoom_ENC 값 요청
$.ajax({
url : url,
type : "POST",
dataType : "json",
data : {
CPID : CPID,
PAYMETHOD : PAYMETHOD,
ORDERNO : ORDERNO,
TYPE : TYPE,
AMOUNT : AMOUNT
},
success : function(res) {
console.log("response :::::",res);
console.log("response KIWOOM_ENC :::::",JSON.parse(res.response).KIWOOM_ENC);
var enc = JSON.parse(res.response).KIWOOM_ENC;
if (enc) {
// kiwoom_ENC 값 입력
pf.KIWOOM_ENC.value = enc;
console.log("response enc :::::",enc);
// 결제창 URL 설정
var PayServer = pf.SERVER.value;
var PayType = pf.TYPE.value;
var fileName = "";
console.log("response PayServer :::::", PayServer);
console.log("response PayType :::::", PayType);
if (PayServer === "DEV") {
fileName = "https://apitest.kiwoompay.co.kr/pay/linkEnc";
} else if (PayServer === "LIVE") {
fileName = "https://api.kiwoompay.co.kr/pay/linkEnc";
}
console.log("response fileName :::::", fileName);
if (PayType === "P") {
var KIWOOMPAY = window.open("", "KIWOOMPAY", "width=468,height=750");
pf.target = "KIWOOMPAY";
} else if (PayType === "M" || PayType === "W") {
pf.target = "_self";
}
pf.action = fileName;
pf.method = "post";
pf.submit();
} else {
alert("결제 정보를 가져오지 못했습니다.");
}
},
error : function(xhr, status, error) {
console.log("AJAX Error:", error);
alert("파일을 연동바랍니다.");
}
});
}
function kiwoom_Completepayment() { function kiwoom_Completepayment() {
console.log("::: parent window 호출 됨 ::::");
var frm = document.order_info; var frm = document.order_info;
frm.submit(); frm.submit();
/*if (frm.res_cd.value == "0000"){
/!* 결제인증 완료 후 결제승인 요청을 위한 비즈니스 로직 구현 *!/
frm.submit();
} else {
/!* 결제인증 실패에 대한 처리 *!/
alert( "[" + frm.res_cd.value + "] " + frm.res_msg.value );
location.reload();
}*/
} }
</script> </script>
</head> </head>

View File

@@ -29,14 +29,16 @@
<script type="text/javascript" language="javascript"> <script type="text/javascript" language="javascript">
$(document).ready(function() { $(document).ready(function() {
document.payForm.HOMEURL.value=window.location.origin + '<c:url value="/sopmal/ordr/kiwoomPayPreSuccss"/>';
document.payForm.FAILURL.value=document.payForm.HOMEURL.value;
kiwoomPay(); var pf;
});
function pay() {
pf = document.payForm; pf = document.payForm;
pf.HOMEURL.value=window.location.origin + '<c:url value="/sopmal/ordr/kiwoomPayPreSuccss"/>';
pf.FAILURL.value=document.payForm.HOMEURL.value;
//kiwoomPay();
//});
// function kiwoomPay() {
// 입력값 가져오기 // 입력값 가져오기
var CPID = pf.CPID.value; var CPID = pf.CPID.value;
@@ -103,7 +105,8 @@
alert("파일을 연동바랍니다."); alert("파일을 연동바랍니다.");
} }
}); });
} //}
});
</script> </script>
</head> </head>
@@ -137,7 +140,7 @@
</c:otherwise> </c:otherwise>
</c:choose> </c:choose>
<input type="hidden" name="CPID" value="${data.setle.siteCdMid}"/> <%-- 상점아이디 개발:CTS18056 / 운영:CFO20585,CFO20586--%> <input type="hidden" name="CPID" value="${data.setle.siteCdMid}"/> <%-- 상점아이디 개발:CTS18056 / 운영:CFO20585,CFO20586--%>
<input type="hidden" name="TYPE" value="P"/> <%-- 결제방식(P:PC/M:모바일/W:웹뷰) --%> <input type="hidden" name="TYPE" value="${data.ordr.sknEnvrnCd}" /> <%-- 결제방식(P:PC/M:모바일/W:웹뷰) 스킨환경코드(P:PC, M:mobile, TM:TM주문)--%>
<input type="hidden" name="PAYMETHOD" value="CARD"/> <%-- 결제수단 (CARD:카드/NAVERPAY:네이버페이)--%> <input type="hidden" name="PAYMETHOD" value="CARD"/> <%-- 결제수단 (CARD:카드/NAVERPAY:네이버페이)--%>
<input type="hidden" name="TAXFREECD" value="01"/> <%-- 과세 비과세 여부(00: 과세, 01: 비과세, 02: 복합과세) --%> <input type="hidden" name="TAXFREECD" value="01"/> <%-- 과세 비과세 여부(00: 과세, 01: 비과세, 02: 복합과세) --%>
<input type="hidden" name="BILLTYPE" value="1"/> <%-- 과금 유형(1: 일반) --%> <input type="hidden" name="BILLTYPE" value="1"/> <%-- 과금 유형(1: 일반) --%>

View File

@@ -39,8 +39,14 @@
// gcpay 사용안할 경우 기본 세팅 // gcpay 사용안할 경우 기본 세팅
const gcpayCardUseAt = $('#gcpayCardUseAt').val(); const gcpayCardUseAt = $('#gcpayCardUseAt').val();
let gcpayAt = ( gcpayCardUseAt === 'Y')? 'Y' : 'N'; let gcpayAt = ( gcpayCardUseAt === 'Y')? 'Y' : 'N';
const setleTy = $('#setleSetupTyCd').val(); //01:kcp, 02:toss const setleTy = $('#setleSetupTyCd').val();
const setleTyCd = (setleTy==='01')?'#pg04':'#pg03'; //const setleTyCd = (setleTy==='01')?'#pg04':'#pg03';
let setleTyCd = '#pg04';
if(setleTy==='01')setleTyCd = '#pg04'; //kcp
else if(setleTy==='02')setleTyCd = '#pg03'; //toss
else if(setleTy==='03')setleTyCd = '#pg06'; //kiwoom
if (gcpayAt === 'N') { if (gcpayAt === 'N') {
$(setleTyCd).click(); $(setleTyCd).click();
} }
@@ -566,7 +572,13 @@
$(form).find('.pgContent').hide(); $(form).find('.pgContent').hide();
$(form).find('#' + id + 'Content').show(); $(form).find('#' + id + 'Content').show();
$(form).find('#setleSetupTyCd').val() === '01' ? $(form).find('#pg04Content').show() : $(form).find('#pg03Content').show();
//$(form).find('#setleSetupTyCd').val() === '01' ? $(form).find('#pg04Content').show() : $(form).find('#pg03Content').show();
if($(form).find('#setleSetupTyCd').val() === '01'){$(form).find('#pg04Content').show();}
else if($(form).find('#setleSetupTyCd').val() === '02'){$(form).find('#pg03Content').show();}
else if($(form).find('#setleSetupTyCd').val() === '03'){$(form).find('#pg06Content').show();}
$('.order-method-normal__btn').removeClass('active'); $('.order-method-normal__btn').removeClass('active');
$(form).find('#pgCmpnyNm').val(pgCmpnyNm); $(form).find('#pgCmpnyNm').val(pgCmpnyNm);
@@ -621,7 +633,10 @@
const content = $('.order-method-normal__content'); const content = $('.order-method-normal__content');
const useCashMlgAmt = $('#useCashMlgAmt').val(); const useCashMlgAmt = $('#useCashMlgAmt').val();
$('#setleSetupTyCd').val() === '01' ? $('#pg04').click() : $('#pg03').click(); //$('#setleSetupTyCd').val() === '01' ? $('#pg04').click() : $('#pg03').click();
if($('#setleSetupTyCd').val() === '01'){$('#pg04').click();}
else if($('#setleSetupTyCd').val() === '02'){$('#pg03').click();}
else if($('#setleSetupTyCd').val() === '03'){$('#pg06').click();}
$('.order-method-normal__btn').removeClass('active'); $('.order-method-normal__btn').removeClass('active');
$(this).addClass('active'); $(this).addClass('active');
@@ -3084,7 +3099,7 @@
return false; return false;
} }
if ('kcp' === pgCmpnyNm || 'toss' === pgCmpnyNm) { if ('kcp' === pgCmpnyNm || 'toss' === pgCmpnyNm || 'kiwoom' === pgCmpnyNm) {
const div = $('#setleForm').find('.order-method-normal'); const div = $('#setleForm').find('.order-method-normal');
if (!$(div).find('.order-method-normal__btn-container button').hasClass('active')) { if (!$(div).find('.order-method-normal__btn-container button').hasClass('active')) {
@@ -3125,7 +3140,13 @@
const id = '01' === issuTrgetDvCd ? 'issuTrgetMbtlnb' : 'issuTrgetBsnmNb'; const id = '01' === issuTrgetDvCd ? 'issuTrgetMbtlnb' : 'issuTrgetBsnmNb';
let rlPgCmpnyNm = $('#pgCmpnyNm').val(); let rlPgCmpnyNm = $('#pgCmpnyNm').val();
let setleTyId = $('kcp' === pgCmpnyNm ? '#pg04Content' : '#pg03Content').find('button[name="' + setleTyCd + '"]').attr('id'); //let setleTyId = $('kcp' === pgCmpnyNm ? '#pg04Content' : '#pg03Content').find('button[name="' + setleTyCd + '"]').attr('id');
let pgCont = "";
if('kiwoom' === pgCmpnyNm) pgCont='pg06Content';
else if('kcp' === pgCmpnyNm) pgCont='pg04Content';
else pgCont='pg03Content';
let setleTyId = $('#'+pgCont).find('button[name="' + setleTyCd + '"]').attr('id');
if ('tosspay' === rlPgCmpnyNm) { if ('tosspay' === rlPgCmpnyNm) {
setleTyId = 'acount' setleTyId = 'acount'
@@ -3594,6 +3615,13 @@
}); });
} }
</script> </script>
<script>
function kiwoom_Completepayment() {
var frm = document.order_info;
frm.submit();
}
</script>
</head> </head>
<style> <style>
@media (max-width: 720px) { @media (max-width: 720px) {
@@ -4523,6 +4551,138 @@
</div> </div>
</c:if> </c:if>
<%-- kcp 결제 종료 --%> <%-- kcp 결제 종료 --%>
<%-- 키움 결제 시작 --%>
<c:if test="${'03' eq payInfo.setleSetupTyCd}">
<div class="custom-radio is-medium">
<input type="radio" name="pg" id="pg06" value="kiwoom">
<label for="pg06">일반결제</label>
</div>
<div id="pg06Content" class="pgContent order-method-normal" >
<div class="order-method-normal__btn-container">
<c:if test="${'Y' eq payInfo.cardUseAt}">
<button type="button" name="01" id="card" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--card"></div>신용카드
</button>
</c:if>
<%--
<c:if test="${'Y' eq payInfo.rltmAcntUseAt}">
<button type="button" name="03" id="acount" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--transfer"></div>실시간 계좌이체
</button>
</c:if>
--%>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt}">
<button type="button" name="04" id="virtual" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--account"></div>가상계좌
</button>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt}">
<button type="button" name="05" id="escrow-virtual" class="order-method-normal__btn not_multi_pay">
<div class="order-method-normal__icon order-method-normal__icon--account"></div>가상계좌(에스크로)
</button>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt}">
<button type="button" name="02" id="bank" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--deposit"></div>무통장
</button>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt}">
<button type="button" name="10" id="payco" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--payco"></div>PAYCO
</button>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt}">
<button type="button" name="tosspay" id="tosspay" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--toss"></div>토스페이
</button>
</c:if>
<c:if test="${'Y' eq payInfo.npayUseAt}">
<button type="button" name="naverpay" id="naverpay" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--naver"></div>네이버페이
</button>
</c:if>
<c:if test="${'Y' eq payInfo.kpayUseAt}">
<button type="button" name="kakaopay" id="kakaopay" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--kakao"></div>카카오페이
</button>
</c:if>
</div>
<div class="order-method-normal__content-wrapper">
<c:if test="${'Y' eq payInfo.cardUseAt}">
<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 noempty">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<%--
<c:if test="${'Y' eq payInfo.rltmAcntUseAt}">
<div id="acount-content" class="order-method-normal__content" style="display: none">
<div id="acount-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
--%>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt}">
<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}">
<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.nbkkUseAt}">
<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.paycoUseAt}">
<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 noempty">
<h6 class="infoBox__title">PAYCO 간편결제 안내</h6>
<ol class="infoBox__list">
<li>PAYCO는 온/오프라인 쇼핑은 물론 송금, 멤버십 적립까지 가능한 통합 서비스입니다.</li>
<li>휴대폰과 카드 명의자가 동일해야 결제 가능하며, 결제금액 제한은 없습니다.
<br>- 지원카드: 모든 국내 신용/체크카드
</li>
</ol>
</div>
<p class="textInfo noempty"><i class="icon icon_textInfo--sm"></i>발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt}">
<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 noempty">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.npayUseAt}">
<div id="naverpay-content" class="order-method-normal__content" style="display: none">
<div id="naverpay-content-inner" class="order-method-normal__content-inner">
<div class="noempty">
</div>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.kpayUseAt}">
<div id="kakaopay-content" class="order-method-normal__content" style="display: none">
<div id="kakaopay-content-inner" class="order-method-normal__content-inner">
<div class="noempty">
</div>
</div>
</div>
</c:if>
</div>
</div>
</c:if>
<%-- 키움 결제 종료 --%>
</div> </div>
</form> </form>
</div> </div>