이전 예약 시스템은
결제 시스템이 없는 시스템이었다
예약하는데 꼭 결제 시스템을 넣어 보고 싶어서
이틀 동안 고생한 결과
아임 포트를 이용해서 성공했다
다만 순수 자바스크립트가 아닌
j쿼리의 힘을 어느 정도 빌려서
만들었다
시작해보자!
예약결제 자체는 아임 포트에서
자체적으로 제공해줘서
별로 어렵지 않다
하지만 검증/취소가
서버 쪽에서 이뤄져야 해서
아임 포트 api를 열심히 뒤져서 만들었다
html
그다음 좌석에 맞는 예약 가능 시간을 가져온다
j쿼리를 사용해서
서버에서 예약 가능 시간을 가져와서
개수만큼 체크 박스를 만들어준다
$('#requesthourdiv').append("<input type='checkbox' class='requesthour' name='requesthour' value='"+alreadytime[i]+"'>"+alreadytime[i]+"시~"+ii+"시");
정말 편리하다 j 쿼리
서버소스는 이전에 여기서 구현했다
https://cordingmonster.tistory.com/71
Springboot 당일 예약시스템 만들기!(1)
아 정말 혼자 공부했을 때 뿌듯했던 파트였다 근데... 지금 아버지가 격리 시설에 들어가시고... 나도 몸살이 좀 있어서 검사를 받았다 정말 열심히 쓰고 싶었던 파트인데 국비지원도 같이 들으
cordingmonster.tistory.com
결과
예약되어있는 시간+이전 시간을 제외한
시간을 가져온다
(원래 23시까지 해놨는데
밤에 테스트하느라 24로 올려 논거 같다)
그다음 여기서부터가 진짜다
좌석을 선택하고 결제를 진행한다
결제로 가기 전
정말 많은 검증을 해야 하지만
간단하게 몇 가지만 했다
1. 로그인 사용자와 주문자가 일치하는지
2. 이메일 인증이 완료된 사용자인지
url:"/cofrimemailcheck",로 가보자
restcontroller
이전에 만들어놓은 userservice.getEmailCheck(loginEmail)
사용하고 로그인한 세션의 이메일과
프런트에서 받은 이메일이
일치하는지 검사한다
사실 지금 할 필요 없고
어차피 결제 정보를 받아와서
거기서 진짜 비교해 줘야 한다
그다음 이상이 없다면
이제 예약한 좌석/시간들에 대한
가격을 계산해 던 저주자!
url:"/getprice",
요 부분이다
restcontroller
좌석 테이블을 하나 만들어놨다
인원 수도 있긴 한데 일단
돈 계산만 하려고 넣어 놨다
이제 좌석에 따른 시간 금액만 주고
체크박스 수에 따라 계산하자
$('input[name="requesthour"]:checkbox:checked').each(function(){
requesthour.push($(this).val());
});
var price=data*requesthour.length;
그다음
아 여기서 위조가 가능하다
하지만 우리는 결제가 끝난후
결제정보를 가지고
진짜 판별을 할 거기 때문에
큰 상관이 없다
그다음 이제
iamport(seat,price,email,name,requesthour);
로 던져 주자
iamport
아임 포트가 자체적으로 제공해주는 기능이다
저렇게 받은 것들을
프런트에서 결제를 던져준다
그리고 서버에서 검증한다
이제 결제가 됐다면 서버로 가보자
(url:"/insertreservation",)
이전 코드랑 비슷하다
restcontroller
reservationservice.insertReservation(reservationdto,email,principaldetail.getUservo().getName(),requestTime,imp_uid)
까지 도착하기 전에 검증을 해줘야 한다
service
이전 글 코드에서
if(price==(int)buyerInfor.getResponse().get("amount")&&email.equals(buyerInfor.getResponse().get("buyer_email"))){
return true;
}만 추가해주자
원래 더 많은 검증을 해야겠지만
나는 구매자 이메일/구매금액만 체크해주겠다
로그인을 하고
이메일 인증이 돼야
좌석을 예매할 수 있다
그렇다면 로그인하고 있는 중에만
예약이 가능하다
금액/이메일이 주문자와 로그인한 상태와 다르다면
변조가 되어서 들어왔다는 것이니까
그리고
통과라면 db에 저장을 하고
아니라면 환불을 하자
iamportservice.cancleBuy(imp_uid);
이제 db로가서 마지막
그사이에 자리가 찼는지 안 찾는지 검사를 하자
그리고 그사이에 찼다면 역시 환불을 해줘야 한다
service
db에 저장 도중 언제든 에러가 발생되면
환불을 해줘야 하기 때문에 중간중간에
환불 로직을 넣어주자!
결과
kg이니스로 테스트를 했고 성공적이었으나
테스트 모드를 켰는데도
진짜 돈이 빠져나가서 놀랐다
그래서 카카오로 테스트를 했다
(kg이니스를 등록하면 사실상 모든 결제가 가능하다)
1. 가격 변조 테스트 환불되었다
2. 구매자와 로그인 정보가 다르다 환불되었다
3. 이전 시간의 예약을 억지로 요청했다 환불되었다
4. 이미 예약이 있는 시간을 억지로 요청했다 환불되었다
너무 뿌듯하다!
근데 걱정이다 진짜 몇 달 뒤에 보면
이걸 내가 어떻게 했지..?
라는 생각이 들 거 같다
이제 다음번엔 예약 취소를 구현해보자!
+추가
이래도 조작이 가능하다
예를 들어
아예 처음부터 자리를
말도 안 되는 걸 넣거나 하면
조작이 일어난다 그래서
service
아예 자리를 검증해주는 로직을 만들고
restcontroller
검증을 마친 자리를
세션을 이용해서 아예 담아버려 주자
그다음
restcontroller
seatInforVo seatInforVo=(seatInforVo)httpSession.getAttribute("seat");
reservationdto.setSeat(seatInforVo.getSeat());
세션에서 꺼내 주자
이러면 세션 값이 조작되지 않는 이상
조작된 값을 받아도
조작이 불가능할 거라는 생각이 든다
그리고 결제가 취소되든/성공하든
마지막에 세션 값을 비워주자
service
세션값을 비워주는 함수를 만들어주고
호출해서 쓰자!
혼자서 모든 검증을 할 수없어서
여기까지만 하고 취소/변경을 만들고
소스를 정리해야겠다
결제시스템이 생기면서
많이 혼란스러워진 기분이다
하지만 정말 뿌듯 하다!