아임포트 이용해서 카카오페이 연동하기(jsp, 웹(web))

https://www.iamport.kr/

개발자를 위한 무료 결제연동 API, 아임포트

웹을 만들다가 카카오페이api를 사용해야 하는 경우가 생겼다.

그런데 연결이 까다로워서 다른 방법을 찾다가 보통 간단하게 작업물을 만드는 경우 아임포트라는 무료 결제 연동 api를 이용하는 사람들이 많이 있다는 것을 알게 되었다.

 

먼저 아임포트에서 회원가입을 하면 아래와 같은 페이지가 나온다.  

아임포트에 로그인 하면 들어가지는 페이지

 

공지사항, FAQ, 시스템 설정 등이 있는 tab바에서 시스템 설정을 들어가게 되면

내가 쓸 수 있는 가맹점 식별코드, REST API키, REST API secret이 나오게 되는데 이는 코딩을 할 때 써야 하므로 일단 잘 복사해둔다.

 

아임포트는 관련 매뉴얼을 github에 올려두어 사용자가 보기 편하게 만들어 두었으나,

필자는 그것도 어려워 사용하는데 애를 먹었다...

 

https://github.com/iamport/iamport-manual

iamport/iamport-manual

흠 위의 메뉴얼을 보면 form tag방식으로 submit 해서 보내는 것이 아닌

Ajax를 이용해서 보낸다는 이야기인데 일단....잘 몰라도 할 수 있도록 적는 것이 목적이니 이 부분은 넘어가겠다.

 

 

var IMP = window.IMP;
      //본인의 가맹점 식별코드를 넣는다.
      IMP.init('imp~~~~');
      
      //pay라는 id를 가진 그림을 클릭 했을 때 결제api가 연동되도록 설정했다.
      $("#pay").click(function() {
               IMP.request_pay({
                     //여기에서 가져오는 정보 중 하나라도 없으면 실행되지 않는다.
                     pg : 'kakaopay',                            
                     pay_method : 'card',                        
                     merchant_uid : new Date().getTime(),
                     name : '장바구니',
                     amount : amount,
                     buyer_email : email,
                     buyer_name : name,
                     buyer_tel : phone,
                     buyer_addr : addr,
                     buyer_postcode : zonecode
                     /*m_redirect_url : 'https://www.yourdomain.com/payments/complete'*/
                  }, function(rsp) {
                     if ( rsp.success ) {
                          //[1] 서버단에서 결제정보 조회를 위해 jQuery ajax로 imp_uid 전달하기
                          jQuery.ajax({
                              url: "paycontroller.do?command=payment", //cross-domain error가 발생하지 않도록 주의해주세요
                              type: 'POST',
                              dataType: 'text',
                              data: {
                                  "merchant_uid" : rsp.merchant_uid,   //date값
                                  "id" : id,
                                  "place" : addr,
                                  "amount" : amount
                            
                                  //기타 필요한 데이터가 있으면 추가 전달
                              }
                          }).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] 결제된 금액이 요청한 금액과 달라 결제를 자동취소처리하였습니다.
                              }
                          });
                          //성공시 이동할 페이지
                          alert("결제에 성공하였습니다!");
                          location.href='http://localhost:8787/yolijoli/RecipeController.do?command=allrecipe&pagenum=1&contentnum=9';
                      } else {
                          msg = '결제에 실패하였습니다.';
                          msg += '에러내용 : ' + rsp.error_msg;
                          //실패시 이동할 페이지
                          location.href="javascript:history.back();";
                                       alert(msg);
                                    }
                                 });
 
                  });

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

위의 코드에 이 스크립트를 위에 import 해주어야 잘 작동한다!

 

먼저 저 코드를 무작정 복붙...하는것도 좋지만

[1]이라고 쓰인 부분 밑의 url을 자신이 보내서 데이터를 바꿔줄 곳으로 보낸 후

type은 post방식으로 할지 get방식으로 할지 정해준다.

dataType은 json방식도 있겠지만 어려워서 text방식으로 하나씩 넘겨주는 방법을 택했다.

참고로 data의 값들은 hidden방식으로 받아와 var에 변수로 하나씩 넣어주어 그 값을 가져왔다.

 

<input type = "hidden" id="id" name="id" value="가져올 값"/>

var id = document.getElementById("id").value;

 

 

[2]번 부분은 iamport로 값을 넘겨주는 부분 같은데 일단 내 eclipse에서 실행되는 것이 중요한 나는 저 부분에 대해서는 건드리지 않았다.

 

그리고 성공 시 이동할 페이지도 자신에게 맞는 location.href로 설정해주면 된다.

 

아임포트를 연동하려는 초보자들에게 이 글이 도움이 되었으면 좋겠다...

왜냐하면 내가 너무 초보자인데 관련 정보를 얻기 위해서 검색해보았지만 나오지 않았기 때문이다ㅠㅠ