sake/src/main/webapp/WEB-INF/views/sopmal/ordr/PayKcpModC.jsp

<%@ 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 : PayKcpModC.jsp
    Description : kcp결제 취소
    Modification Information

    수정일       수정자     수정내용
    -------    -------- ---------------------------
    2024-06-12 이경숙     최초 생성
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>kcp결제 취소 샘플페이지</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes, target-densitydpi=medium-dpi">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="-1">
  <link href="../static/css/style.css" rel="stylesheet" type="text/css" id="cssLink"/>

  <script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
  <script src="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.js'/>"></script>

  <script>

    /**************************************************************
     * kcp결제 취소
     ****************************************************************/
     $(document).ready(function() {

    	$('#content').hide();

    	$('#cancel-button').on('click', function(event) {
	    	const url = '<c:url value="/sopmal/pay/kcpPayCancel"/>';
	    	event.preventDefault(); // 기본 폼 제출 동작 취소

	    	$.ajax({
	            type: 'post',
	            url: url,
	            data:$('#cancelForm').serialize(),
	            success : function(data) {
	                if (data.resBody != null) {

	                	const result = JSON.parse(data.resBody.result);

		            	$('#rstTitle').text("결제 취소");
		            	$('#res_msg').text(result.response.res_msg);
		            	$('#tno').text(result.response.tno);
		            	$('#res_en_msg').text(result.response.res_en_msg);
		            	$('#res_cd').text(result.response.res_cd);
		            	$('#canc_time').text(result.response.canc_time);

		            	$('#content').show();
	                }
	                console.log('response.receiptKey:', result.response.cash_no);
	            },
	            error: function(error) {
	                console.error('Error fetching data:', error);
	            }
	        });
		});
	});

    </script>
</head>

<body>
<div class="wrap">

<form name="cancelForm" id="cancelForm">
<input type="hidden" name="shopMallCd" value="NC"/>

 <!-- header -->
   <div class="header">
       <h1 class="title">결제 취소 SAMPLE</h1>
   </div>
   <!-- //header -->

   <!-- 상단 테이블 Start -->
    <div class="sample">
    <!-- 상단 테이블 End -->

      <h2 class="title-type-3">결체 취소 요청 정보</h2>
      <ul class="list-type-1">
       <li>
       	<div class="left"><p class="title">요청 정보</p></div>
       	<div class="right">
               <div class="ipt-type-1 pc-wd-2">
       			<select name='modType' class="frmselect" style="width:100%;height:35px;">
				   <option value='STSC' selected>전체취소</option>
				   <option value='STPC'>부분취소</option>
      				</select>
         		</div>
          	</div>
       </li>
       <li>
       	<div class="left"><p class="title">거래번호</p></div>
        <div class="right">
        	<div class="ipt-type-1 pc-wd-2">
            	<input type="text" name="tno" value="" maxlength="14" />
                <a href="#none" class="btn-clear"></a>
            </div>
        </div>
       </li>
      </ul>

      <h2 class="title-type-3">부분 취소 시 요청 정보</h2>
      <ul class="list-type-1">
      <li>
        <div class="left"><p class="title">부분취소 요청 금액</p></div>
        <div class="right">
            <div class="ipt-type-1 pc-wd-2">
                <input type="text" name="modMny" value="" maxlength="40" placeholder="부분취소시 필수" />
                <a href="#none" class="btn-clear"></a>
            </div>
        </div>
       </li>
       <li>
        <div class="left"><p class="title">부분취소 가능 금액</p></div>
        <div class="right">
            <div class="ipt-type-1 pc-wd-2">
                <input type="text" name="remMny" value="" maxlength="40" placeholder="부분취소시 필수" />
                <a href="#none" class="btn-clear"></a>
            </div>
        </div>
       </li>
       <li>
        <div class="left"><p class="title">취소사유</p></div>
        <div class="right">
            <div class="ipt-type-1 pc-wd-2">
                <input type="text" name="modDesc" value="" maxlength="40" placeholder="부분취소시 필수" />
                <a href="#none" class="btn-clear"></a>
            </div>
        </div>
       </li>
       </ul>

       <!-- 결제 버튼 테이블 Start -->
	     <div Class="Line-Type-1"></div>
            <ul class="list-btn-2">
                <li><input name="cancel-button" id="cancel-button" type="button" value="취소요청" class="btn-type-2 pc-wd-3"/></li>
            </ul>
          </div>
            <!-- //contents -->

            <div class="grid-footer">
                <div class="inner">
                    <!-- footer -->
                    <div class="footer">
                        ⓒ NHN KCP Corp.
                    </div>
                    <!-- //footer -->
                </div>
            </div>
	<!-- 요청종류 취소 요청시 사용 -->
	<input type="hidden" name="req_tx"   value="mod"/>
</form>

	<br/><br/>===========================<br/><br/>
    <div id="content">
        <br/><span id="rstTitle"></span> 결과출력 <br/>
        <p>res_msg: <span id="res_msg"></span></p>
        <p>tno: <span id="tno"></span></p>
        <p>res_en_msg: <span id="res_en_msg"></span></p>
        <p>res_cd: <span id="res_cd"></span></p>
        <p>canc_time: <span id="canc_time"></span></p>
    </div>

    <!-- {"res_msg":"정상처리","tno":"24421437285178","res_en_msg":"processing completed","res_cd":"0000","canc_time":"20240619102823"} -->

</body>
</html>