아임 포트 카카오페이 - aim poteu kakaopei

Question

form 파트

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bbswrite.jsp</title>
<style>
span {
	width: 60px;
	display: inline-block;
}

textarea {
	width: 40%;
	height: 280px;
}
</style>
</head>
<body>
<h2>kakao</h2>

	<form action="kakao.jsp">

		<p>
			<span>name:</span> <input name="name">


			<!-- 값 가져오기 -->
		</p>
		<p>
			<span>이메일:</span> <input name="email">
		</p>
		<span>폰넘버:</span>
		<p>
			<input type="text" name="phone">
		</p>
		<span>주소:</span>
		<p>
			<input name="address">
		</p>
		<span>총가격:</span>
		<p>
			<input name="totalPrice">
		</p>
		<input type="submit" value="결제하기"> <input type="reset"
			value="취소하기">
	</form>


</body>
</html>

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    
<%
 //   String name = (String)request.getAttribute("name");
 //   String email = (String)request.getAttribute("email");
 //  String phone = (String)request.getAttribute("phone");
 //  String address = (String)request.getAttribute("address");
  //  int totalPrice = (int)request.getAttribute("totalPrice");
     String name = (String)request.getParameter("name");
     String email = (String)request.getParameter("email");
     String phone = (String)request.getParameter("phone");
     String address = (String)request.getParameter("address");
     String stotalPrice = (String)request.getParameter("totalPrice");
     int totalPrice = Integer.parseInt(stotalPrice);
    
     System.out.println("name: "+name);
    System.out.println("email: "+email);
     System.out.println("phone: "+phone);
     System.out.println("address: "+address);
     System.out.println("stotalPrice: "+stotalPrice);
     System.out.println("totalPrice: "+totalPrice);
 
%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kakao</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.5.js"></script>
</head>
<body>
    <script>
    $(function(){
        var IMP = window.IMP; // 생략가능
        IMP.init('imp23418340'); // 'iamport' 대신 부여받은 "가맹점 식별코드"를 사용
        var msg;
        
        IMP.request_pay({
            pg : 'kakaopay',
            pay_method : 'card',
            merchant_uid : 'merchant_' + new Date().getTime(),
            name : 'KH Books 도서 결제',
            amount : <%=totalPrice%>,
            buyer_email : '<%=email%>',
            buyer_name : '<%=name%>',
            buyer_tel : '<%=phone%>',
            buyer_addr : '<%=address%>',
            buyer_postcode : '123-456',
            //m_redirect_url : 'http://www.naver.com'
        }, function(rsp) {
            if ( rsp.success ) {
                //[1] 서버단에서 결제정보 조회를 위해 jQuery ajax로 imp_uid 전달하기
                jQuery.ajax({
                    url: "/payments/complete", //cross-domain error가 발생하지 않도록 주의해주세요
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        imp_uid : rsp.imp_uid
                        //기타 필요한 데이터가 있으면 추가 전달
                    }
                }).done(function(data) {
                    //[2] 서버에서 REST API로 결제정보확인 및 서비스루틴이 정상적인 경우
                    if ( everythings_fine ) {
                        msg = '결제가 완료되었습니다.';
                        msg += '\n고유ID : ' + rsp.imp_uid;
                        msg += '\n상점 거래ID : ' + rsp.merchant_uid;
                        msg += '\결제 금액 : ' + rsp.paid_amount;
                        msg += '카드 승인번호 : ' + rsp.apply_num;
                        
                        alert(msg);
                    } else {
                        //[3] 아직 제대로 결제가 되지 않았습니다.
                        //[4] 결제된 금액이 요청한 금액과 달라 결제를 자동취소처리하였습니다.
                    }
                });
                //성공시 이동할 페이지
               <%--  location.href='<%=request.getContextPath()%>/order/paySuccess?msg='+msg; --%>
            } else {
                msg = '결제에 실패하였습니다.';
                msg += '에러내용 : ' + rsp.error_msg;
                //실패시 이동할 페이지
                location.href="<%=request.getContextPath()%>/order/payFail";
                alert(msg);
            }
        });
        
    });
    </script> 
 
</body>
</html>

개발환경

자바, 스프링부트, 메이븐

이번 Final Project를 진행하면서 나도 드디어 API를 사용해 볼 일이 생겼다.

바로 결제 API 두둥.

먼저, 내가 필요한 API는 결제를 누르는 순간 바로 결제가 되는 일반 결제가 아닌 정기결제 시스템이었다.

그래서 열심히 구글링을 해 본 결과.... '아임포트' 라는 사이트에서 개발자를 위한 결제 API를 제공해주고 있었다.

사실 내가 쓴 게 정기결제 API를 잘 끌어온건지는 모르겠다. 뭔가 일반결제같기도 하고....

정기결제는 빌링키 라는 것을 발급받아야 하는데, 나는 이것저것 해보다가 빌링키를 발급받은 것 같진 않은데, 테스트 결제가 잘 되길래 된건가?? 하고 사용했다.

(사실 빌링키라는 개념을 완벽하게 이해하지 못했다ㅜㅜ)

그래도 결제를 진행해보면 카카오톡 메세지로 정기결제 등록이 완료되었습니다 라는 메세지가 왔으니 정기결제 등록에 성공한 것이라고 생각한다!!!!!!!!!

일단 사용하긴 했지만, 잊어버리기 전에 기록을 먼저 해두고, 추후 더 공부를 해서 완벽한 정기결제 시스템을 구축하고 나면 그 때 다시 내용을 수정해야겠다.

아임포트 결제API 사용법!

먼저 기본 설정이다.

1. 아임포트 사이트에 가입 후 관리자 모드로 들어간다.

-> 아임포트 회원가입은 필수다!!! 로그인을 해야 가맹점 식별코드를 발급받을 수 있는데, 이 코드가 있어야 테스트 결제가 가능하다.

2. 관리자페이지의 시스템 설정 - 내 정보 탭에서 관리자 식별코드를 확인한다.

-> 발급 버튼이 따로 있었는지, 로그인을 하면 바로 발급된 코드가 뜨는지는 기억나지 않는다. 아무튼 'imp숫자8자리' 의 형식으로 된 식별코드를 확인해보자!

(REST API 와 REST API secret 은 나도 뭔지 잘 모르겠다..나는 사용하지 않았던 것 같다. 중요한건지 아닌지 모르겠어서 일단 가려놓는다.)

3. 시스템 설정 - PG설정 탭에서 내가 사용하고 싶은 PG사를 선택한다.

-> 나는 카카오를 선택했다. 추가로 더 사용하고 싶은 PG사가 있다면 'PG사 추가' 버튼을 통해 추가가 가능하다.

이 때 테스트 모드는 꼭 on으로 해주어야 테스트가 가능하다. (테스트모드를 on으로 해야만 PG사와 계약 없이 연동 개발이 가능하다고 합니다.)

그리고 꼭!!! 저장하기!! 버튼을 눌러주어야 선택사항이 저장이 된다!!!

아임포트에서의 설정은 이게 끝이다.(참 쉬운데, 나는 한참 헤멧다!!!!!!ㅜㅜㅜㅜㅜㅜㅜ) 이제 코드에 적용을 시키면 된다.

4. 제이쿼리 1.0 이상 버전을 준비해준다.

아임포트의 API를 쓰려면 '제이쿼리 1.0 이상의 버전이 설치 되어있어야 한다' 라고 아임포트에 명시되어있다.

나는 학원 수업에서 쓰던 3.5.0버전을 메인에 심어주었다.

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

5. 주문페이지에 아임포트 라이브러리를 추가해준다.

<script type="text/javascript" src="https://service.iamport.kr/js/iamport.payment-1.1.5.js"></script>

[참고]↓↓↓↓↓↓↓↓↓↓↓↓↓위 두 단계를 아임포트에서는 이렇게 알려준다.↓↓↓↓↓↓↓↓↓↓↓↓

<!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
  <!-- iamport.payment.js -->
  <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-{SDK-최신버전}.js"></script>

SDK 최신 버전은 아임포트 홈페이지에서 확인할 수 있다. 2021년 12월 19일 기준 1.2.0까지 나왔다.

내가 사용한 1.1.5버전은 2016년에 나온 것 같다. 근데 왜 최신 버전을 안쓰고 구버전을 썼느냐? 한다면...

나의 불찰이다. 프로젝트 당시엔 빨리 기능을 구현해야 한다는 생각에 구글링으로 나온 코드 + 안전함을 위해 구버전을 썼다. 많은 업데이트가 있었던 것 같으니 얼릉 기록을 마치고 최신 버전 써봐야지!!!!!!

이제 진짜 준비는 다 끝났다. 실제 결제창을 불러오는 코드만 작성해주면 된다.

6. jsp파일(주문 페이지)의 스크립트 부분에 해당 코드를 심어준다.

-> 각 코드가 의미하는 바는 내 나름 써놓긴 했는데, 이것 또한 완벽하게 이해한 것은 아니다. 그래도 이것저것 해보고 성공하고 난 후의 코드를 기록해 놓는다.

//카카오 결제 API
var IMP = window.IMP; // 생략가능
IMP.init('impxxxxxxxx');  // 가맹점 식별코드
// IMP.request_pay(param, callback) 결제창 호출
IMP.request_pay({
    pg : 'kakaopay', //pg사 선택 (kakao, kakaopay 둘다 가능)
    pay_method: 'card',
    merchant_uid : 'merchant_' + new Date().getTime(), //주문번호
    name : 'Bunddeuk', // 상품명
    amount : amount,
    //customer_uid 파라메터가 있어야 빌링키 발급을 시도함
    customer_uid : buyer_name + new Date().getTime(),
    buyer_email : email,
    buyer_name : buyer_name,
    buyer_tel : hp,
    buyer_addr : addr,
}, function(rsp) { //callback
    if ( rsp.success ) {
      console.log('빌링키 발급 성공', rsp)
      //빌링키 발급이 완료되었으므로, 서버에 결제 요청
      alert('예약 결제가 완료되었습니다!');
    } else {
      var msg = '결제에 실패하였습니다.\n';
      msg += rsp.error_msg;
      alert(msg);
      return false;
    }
    $("#final-support-submit").submit();
});

해당 코드를 실행시키면 카카오 결제를 할 수 있는 카카오 결제창이 실행된다.

큐알코드와 핸드폰 번호로 진행 할 수 있는데, 두개 다 결제가 가능한 것을 확인했다!

또한, 카카오의 경우

'카카오페이 테스트 모드의 경우 임의의 계정으로 결제가 이루어집니다. (실제 카카오 계정이 아닌, 임시 카카오페이 머니/카드로 테스트됨)'

라고 아임포트에 명시되어 있으므로, 실제 결제가 될 걱정은 하지 않아도 된다.

그리고 나는 결제 버튼을 클릭한 후 데이터를 submit으로 보내야 했기 때문에 코드의 마지막에

$("#버튼아이디").submit(); 코드를 추가해주었다.

7. 실제 결제하기 버튼을 누르면 나오는 카카오결제창이다.

QR코드와 카톡 메세지 둘 다 실행 가능하다!

8. 해당 QR코드를 찍으면 내 핸드폰에는 이런 화면이 나온다.

내가 코드에 입력했던 상품명인 Bunddeuk과, 상품 금액인 1원이 잘 나오는 것을 확인 할 수 있다.

테스트 모드인 만큼 버튼도 테스트 결제하기로 나온다. '테스트 결제하기' 버튼을 누르면

이렇게 카카오톡 메세지가 오게된다!!

가상 계정으로 테스트 결제가 된 것이기 때문에 실제 내 돈이 빠져나간 것은 아니다!!!!!

이렇게 결제를 진행하고 나면 아임포트의 관리자 모드에서 테스트 결제가 성공적으로 실행 된 것을 확인 할 수 있다.

9. 결제승인내역 - 검색기간 선택 - 검색을 클릭한다.

이렇게 그동안 테스트 결제했던 내역이 모두 출력이 된다.

우측에 있는 결제 상태는 결제 중간에 사용자(나)가 결제 취소를 눌렀거나, 결제가 완료됐는데 관리자(나)가 결제 취소를 했거나 등등 정말 상태에 따라 다 출력이 된다.

이렇게 카카오 정기결제 API사용하기 끝!

더 자세한 사항은 아임포트 홈페이지에서 확인할 수 있다.(엄청 자세히 나와있음)

그리고 밑의 링크는 카카오 정기결제 시스템에 대해 아임포트에서 쉽고 간단하게 정리해 주신 링크.

카카오페이 정기결제 (iamport.kr)

글로 적으니 참 쉽다.

결제 API하나를 사용하려고 프로젝트 기간 한달 중 일주일동안을 구글링해보고, 이것도 해보고, 저것도 해봤다. API를 끌어오는 것도 능력이라고 하더라. 아직도 이 API를 이렇게 사용하는 것이 잘한건지 의문이 든다. 어쨋든 정답은 없다. 이렇게 고생한 경험을 발판 삼아 더 성장하면 되겠지.

프로젝트는 끝났지만...... 그동안 밀린 일들을 하고 이제 취업준비 한다고 또 바쁘겠지....

프로젝트 하면서 깨달은 것들, 얻는 것들 모두 기록으로 남기려고 한다. 미루지 않고 제때 제때 기록할 수 있길!

(네이버 블로그에서 옮겨온 글이며, 21.12.19에 쓰여진 글입니다.)

아임포트 카카오페이 테스트 아임 포트 신청 카카오페이 종료된 요청입니다 아임포트 네이버페이 아임포트 수수료 아임포트 나이스페이 아임포트 단점

아임 포트 카카오페이 - aim poteu kakaopei

개발환경

아임포트 결제API 사용법!

관련 게시물

시놀로지 smb 속도 - sinolloji smb sogdo

안드로이드 테스트 폰 - andeuloideu teseuteu pon

카카오페이 주민등록증 인증 - kakaopei jumindeunglogjeung injeung

광고하는

최근 소식

혼다어코드 보험료 - honda-eokodeu boheomlyo

인퀴 지션 도안 모드 - inkwi jisyeon doan modeu

잘 살아라 그게 최고의 복수다 ebook - jal sal-ala geuge choegoui bogsuda ebook

포토샵 레이어 클릭 안됨 - potosyab leieo keullig andoem

갤럭시 탭 S6 공장 초기화 - gaelleogsi taeb S6 gongjang chogihwa

불성 애드온 모음 - bulseong aedeuon mo-eum

자이스토리 1-2 답지 해설 - jaiseutoli 1-2 dabji haeseol

디즈니 플러스 정지 - dijeuni peulleoseu jeongji

로아 레일리 커마 - loa leilli keoma

국내 이륜차 시장 규모 - gugnae ilyuncha sijang gyumo

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의