[프로젝트] 카카오 페이 API (ft. iamport)

이번엔 차량 매물을 계약금 개념으로 결제를 하는 기능을 넣기 위해 카카오 페이 API를 사용해보았다.

추가하는건 매우 간단했고, iamport에서 식별코드가 필요하였다.

​

iamport

https://admin.iamport.kr/payments

https://admin.iamport.kr/payments

식별코드 확인하기

식별코드를 확인하기 위해서는 iamport 사이트에 가입 후 왼쪽 메뉴의 '결제 연동' 카테고리로 이동한다.

​

결제 연동 카테고리로 이동하게 되면 왼쪽 상단에 '내 식별코드' 가 있다. 해당 부분을 클릭하면

화면과 같이 각종 key 값이 있는데, 현재 사용할 코드는 가맹점 식별코드이다.

​

다음으로는 본인이 사용할 결제대행사를 설정해야 한다. 위에서 '결제 연동' 카테고리 하단에 보면

테스트 연동이 있다. 여기 결제대행사 설정에서 본인이 사용할 곳을 설정 후 추가만 해주면 된다.

---

카카오 페이 API

​

코드

<span id="contractSpan">계약하기</span>
<button id="kakaoPayBtn" type="button" onclick="requestPay('${c.ctitle}')">
   <img src="images/payment_icon_yellow_small.png">
</button>

먼저 jsp 파일에서 카카오 페이로 연결할 버튼을 생성하였고, 결제화면에서 해당 차량명이 나오도록 해야하기 때문에 호출할 함수의 인자값으로

Controller로부터 받아온 차량명 데이터를 넣어주었다.

​

구현 코드(주석 설명)

<!-- jQuery CDN == 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-1.2.0.js"></script>
<script>
        var IMP = window.IMP;  // 팝업창
        /* IMP.init("imp67011510"); */
        IMP.init("본인 식별 코드");// 아임포트 가맹점 식별코드
      
        var today = new Date(); //일 
        var hours = today.getHours(); // 시
        var minutes = today.getMinutes();  // 분
        var seconds = today.getSeconds();  // 초
        var milliseconds = today.getMilliseconds(); //밀리초
        var makeMerchantUid = hours +  minutes + seconds + milliseconds;

        function requestPay(itemName) { //인자 값으로 컨트롤러로부터 받아온 차량명 데이터를 삽입하였다.
         console.log(itemName);
            IMP.request_pay({ //요청하는 것들
                pg : 'kakaopay', //카카오페이 API래핑
                /*                 'kakao':카카오페이,           
            html5_inicis':이니시스(웹표준결제)                 
            'nice':나이스페이                  
            'jtnet':제이티넷   
            'uplus':LG유플러스             
            'danal':다날             
            'payco':페이코             
            'syrup':시럽페이              
            'paypal':페이팔              
             */
             /* pay_method : 'card', */
               /*               
               'samsung':삼성페이,  
               'card':신용카드,          
               'trans':실시간계좌이체,            
               'vbank':가상계좌,            
               'phone':휴대폰소액결제          
                */
                merchant_uid: "IMP"+makeMerchantUid,  // 상점에서관리하는 상품번호
                name : itemName, //상품명
                amount : 500000, //가격
                buyer_email : 'Iamport@chai.finance', //구매자 이메일
                buyer_name : '아임포트 기술지원팀', //구매자 이름
                buyer_tel : '010-1234-5678', //구매자 번호
                buyer_addr : '서울특별시 강남구 삼성동', //구매자 주소 
                buyer_postcode : '123-456'
                /* m_redirect_url : 'https://www.yourdomain.com/payments/complete' */
            }, function (rsp) { // callback
                if (rsp.success) {
                    console.log(rsp);
                    var msg = '결제가 완료되었습니다.\n';
               msg += '고유ID : ' + rsp.imp_uid+"\n";
               msg += '상점 거래ID : ' + rsp.merchant_uid+"\n";
               msg += '결제 금액 : ' + rsp.paid_amount+'원\n';
               msg += '카드 승인번호 : ' + rsp.apply_num;
                } else {
                    console.log(rsp);
                    var msg = '결제에 실패하였습니다.\n';
               msg += '에러내용 : ' + rsp.error_msg;
                }
                alert(msg);
            });
        }
    </script>

​

결과 값

카카오페이 버튼 클릭 시 출력되는 창, QR코드나 카톡결제를 통해 결제를 할 수 있다.

​

카카오톡으로 날라온 메세지이며, 차량명 데이터가 잘 들어왔고, 계약금 50만원인 부분도 확인하였다.

​

결제하기 창

​

결제 완료 후 메세지 확인