[Spring Legacy]카카오페이 api 구현(+iamport)

개요

OTT 모집 파티를 신청할 때 결제 기능을 사용하기 때문에 카카오페이 API를 이용하기로 결정했다.

카카오페이 API 구현

https://www.youtube.com/watch?v=44ig2NoppbA&t=61s
이 영상을 보고 따라했다.

내가 개발하는 환경은 Spring Legacy인데 참고자료는 대부분 SpringBoot 환경이여서 조금 애먹었다.

SampleController

@Controller
@Slf4j
public class SampleController {
	
	@RequestMapping("jq.cls")
    public ModelAndView main(ModelAndView mv) {
    	mv.setViewName("kakaoPay");
    	return mv;
    }
    @RequestMapping("pay.cls")
    public ModelAndView serve(ModelAndView mv) {
    	mv.setViewName("serve");
    	return mv;
    }
	
    @RequestMapping("/kakaopay.cls")
    @ResponseBody
    public String kakaoPay() {
    	try {
			URL url = new URL("https://kapi.kakao.com/v1/payment/ready");
			HttpURLConnection httpURLConnection = (HttpURLConnection) url.openConnection();
			httpURLConnection.setRequestMethod("POST");
			httpURLConnection.setRequestProperty("Authorization","카카오 인증키");
			httpURLConnection.setRequestProperty("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
			httpURLConnection.setDoOutput(true);
			
			String parameter = 
					"cid=TC0ONETIME&"
					+ "partner_order_id=partner_order_id&"
					+ "partner_user_id=partner_user_id&"
					+ "item_name=초코파이&"
					+ "quantity=1&"
					+ "total_amount=2200&"
					+ "vat_amount=200&"
					+ "tax_free_amount=0&"
					+ "approval_url=http://localhost:8181/kakaopayTest/success.cls&"
					+ "fail_url=http://localhost:8181/kakaopayTest/fail.cls&"
					+ "cancel_url=http://localhost:8181/kakaopayTest/cancel.cls";
			OutputStream outputStream = httpURLConnection.getOutputStream();
			DataOutputStream dataOutputStream = new DataOutputStream(outputStream);
			dataOutputStream.writeBytes(parameter);
			dataOutputStream.flush();
			dataOutputStream.close();
			
			int resultCode = httpURLConnection.getResponseCode();
			
			InputStream inputStream;
			if(resultCode == 200) {
				inputStream = httpURLConnection.getInputStream();
			}else {
				inputStream = httpURLConnection.getErrorStream();
			}
			
			InputStreamReader inputStreamReader = new InputStreamReader(inputStream);
			BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
			return bufferedReader.readLine();
		} catch (MalformedURLException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
    	return "[\result\":\" NO\"]";
    }
    
    @GetMapping("/success.cls")
    public String kakaoPaySuccess() {
        return "home";
    }
    
}

그러나..

파라미터를 넘겨 주소값을 바꿔보려 했으나 가능하지 않았다.
결제창의 상품명과 가격이 미리 설정해둔 것만 보였다.
3일 이상을 여기에 소요했다..
찾아보니 보안 문제로 직접 파라미터에 넘기는게 불가능하다는 것 같았다..
아니면 방법이 있는데 내가 못찾고 있거나...

iamport 카카오페이

참고 블로그:
[https://mag1c.tistory.com/219]

그래서 iamport를 사용하는 것으로 변경했다.
jsp 단에서 input form을 통해 데이터를 받아와 파라미터로 전달해준다.

<table>
		<form id="pay_form" method="post" action="application_process">
			<input type="hidden" name="p_id" value="${party.p_id}"> 
			<input type="hidden" name="a_price" value="${party.p_price}"> 
			<input type="hidden" name="u_id" value=<%=session.getAttribute("u_id")%>>
			<input type="hidden" name="p_title" value="${party.p_title}">
			<h2>파티 번호</h2>
			<table class="moveReview_list">
				<tr>
					<td>${party.p_id}</td>
				</tr>
			</table>
			<h2>파티 제목</h2>
			<table>
				<tr>
					<td>${party.p_title}</td>
				</tr>
			</table>
			<h2>결제 금액</h2>
			<table>
				<tr>
					<td>${party.p_price}</td>
				</tr>
			</table>
			<h2>결제 방법 선택</h2>
			<table>	
				<tr>
					<td><label><input type="radio" name="a_payment" value="카카오페이">카카오페이
						</label> <label><input type="radio" name="a_payment" value="무통장입금">무통장입금</label></td>
				</tr>
			</table>
			<br>
			<div class="a">
				<button id="pay" class="test_btn1">신청하기</button>
			</div>
		</form>
	</table>

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
	$('#pay').on('click', function(e) {
		e.preventDefault();
		var a_payment = $("input[type=radio][name=a_payment]:checked").val();
		if($("input[type=radio][name=a_payment]:checked").is(':checked')){
			if(a_payment == '카카오페이'){
				//가맹점 식별코드
				IMP.init('가맹점식별코드');
				IMP.request_pay({
					pg : 'kakaopay',
					pay_method : 'card',
					merchant_uid : 'merchant_' + new Date().getTime(),
					name : '물품명', //결제창에서 보여질 이름
					amount : 물품가격(숫자), //실제 결제되는 가격
					buyer_email : 'iamport@siot.do',
					buyer_name : '구매자이름',
					buyer_tel : '010-1234-5678',
					buyer_addr : '서울 강남구 도곡동',
					buyer_postcode : '123-456'
				}, function(rsp) {
					console.log(rsp);
					if (rsp.success) {
						var msg = '결제가 완료되었습니다.';
						msg += '고유ID : ' + rsp.imp_uid;
						msg += '상점 거래ID : ' + rsp.merchant_uid;
						msg += '결제 금액 : ' + rsp.paid_amount;
						msg += '카드 승인번호 : ' + rsp.apply_num;
						var actionForm =$("#pay_form");
						const a_completed = $("<input type='hidden' value='T' name='a_completed'>");
						actionForm.append(a_completed);
						console.log(actionForm);
						actionForm.find("input[name='p_id']").val($(this).attr("href"));
						actionForm.submit();
					} else {
						var msg = '결제에 실패하였습니다.';
						msg += '에러내용 : ' + rsp.error_msg;
					}
					alert(msg);
				});

			}else{
				var actionForm =$("#pay_form");
				const a_completed = $("<input type='hidden' value='F' name='a_completed'>");
				actionForm.append(a_completed);
				console.log(actionForm);
				actionForm.find("input[name='p_id']").val($(this).attr("href"));
				actionForm.submit();
			}
		}else{
			alert('결제 수단을 선택해주세요.');
		}
		
	});
</script>

자바 Controller 단을 건드리지 않아도 돼서 신기할 정도로 쉬웠다.. 복사 붙여넣기를 하니 30분 만에 구현이 완료되었다.