티스토리 뷰
세미 프로젝트서 사용했던 API인데 아직 회사에 가기전인 나같은 학생들은 실제 결제 시스템을 붙이기가 여간 어려운 일이 아니다. 왜냐하면 보통의 경우 사업자번호와 돈이 들어가는 PG사 가입이 있기 때문이다. 그래서 나중에 홈페이지를 팔아먹을 때 중요하지만 연습하기가 까다롭다. 그런데 이러한 고충을 해결해준 사이트가 있는데 바로 I'mport이다. 약간 느낌이 테스트 버전을 제공해 줄테니 나중에 실제로 서비스 붙일때 우리 사이트를 이용해달라~ 라는 느낌이다.
자 이제 본격적으로 시작해보자~
I'mport 개발가이드 접속하기
https://www.iamport.kr/getstarted
사실 가이드 대로만 따라해도 충분하긴 하지만 막상 해보면 생각보다 조금 헤맬수 있다. (내가 그랬다..)
그래서 하나씩 같이 따라해볼 예정!
제일먼저 아임포트 회원가입을 해야한다. 여기 찾는게 좀 어려웠다. 구석탱이에 있어서 발견이 늦어졌다ㅜ
아래 사이트로 이동!!
순서
1. 회원가입 후 로그인
2. 시스템 설정 - PG설정(일반결제 및 정기결제)
3. 테스트모드 on -> PG사 선택 (카카오페이)
4. 일반결제용 사이트 코드를 가맹점 코드(CID)로 복사 후 저장
5. 시스템 설정 - 내정보 - 가맹점 식별코드 복사
코드로 직접 실행
이제 준비가 되었다. 가맹점 식별코드를 IMP.init(' '); 여기 사이에 넣고 request로 결제하려는 사용자의 정보와 가격을 넘겨받고 해당하는 위치에 알맞게 넣어준다. 필요한대로 커스텀을 해주면됩니다. 그러면 알아서 결제가 진행이 되고 이제 결제성공 했을때 url주소값과 실패했을 때의 url를 넣어주고 location으로 이동시켜주면된다. 64번째 줄이 response가 성공 했을때의 끝 부분이라 거기에 결제가 성공적으로 완료 되었을때 이동할 url를 써주고 69번째 줄이 else문이기 때문에 실패했을 때다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <%@ 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"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</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('iamport'); // '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> | cs |
결과창
위처럼 코드를 작성하고 해당 jsp로 접근하면 제일 처음 나오는 화면
유저의 번호와 생년월일을 기입하면 카카오톡으로 결제 문자가 날라옴
결제가 완료가 되면 아래 페이지로 이동하게 설정
API 사용 후기
api로 간단하게 아주 강력한 기능을 구현했다. 확실히 다른 팀과는 구별되는 좋은 기능이였다. 아쉬운점은 50번째 줄 아래에 있는 msg에 담기는 메시지를 사용 못했다. 저거까지 사용했으면 더 좋았을텐데... 프로젝트 기간상 더이상 연구할 시간이 모자라 기능이 잘되는것만 확인하고 종료하였다. 혹시 이 글을 보고 저 기능까지 활용하신 분이 있다면 댓글에 알려주시면 좋을것 같다.
해당 게시글이 도움이 되셨다면 광고 클릭한번 부탁드립니다 ㅎㅎ
'프로젝트' 카테고리의 다른 글
| 카카오 간편로그인!! (0) | 2019.02.01 |
|---|