TIL-221130 - spring 카카오페이 단건결제 구현하기

프로젝트

혹등고래1호기 2022. 11. 30. 22:52

오늘은 어제 카카오페이를 구현하던 도중 만났던 에러를 해결하고 드디어 구현을 완료했다!!!!!!!!!!!!!!.

먼저 어제 있었던 첫번째 오류

결제 완료 페이지가 마운트되고 결제승인 API를 요청하는데 이미 결제가 완료됬다고 나오는 이 문제는

이런 걸로 시간을 날렸다는게 부끄러운 useEffect의 마지막 어떤 상태가 변경되었을 떄 함수를 실행시키냐는 곳에 빈 배열을 넣지 않아서 함수가 무한 호출이 되어서 그렇다.

오늘 아침 경건한 마음으로 다시 개발자 도구의 네트워크를 뚜러져라 쳐다보니 API요청이 2번이 되었는데 이미 첫번째에 결제 승인을 했는데 한번 더 요청을 하니까 이미 결제 승인이 났다고 나오는 것이였다.. ㅠㅠㅠㅠㅠ

그렇게 이 문제를 해결하니 또 다른 문제에 봉착했다. 2번째 문제는 카카오페이 결제 승인 API가 성공적으로 처리되면 해당 결제에 대한 정보를 리턴해주는데 모두 NULL값을 리턴을 해주는 것이였다.

???????.... 이 문제로 아침부터 오후까지 고통받다. 동료와 같이(맹훈햄 감사함다) 디버깅을 하다가 알게 되었는데

1. 프론트엔드에서 결제하기 버튼을 만들어 준다.

해당 버튼을 클릭할 시 API서비스와 통신을 해야 한다.

프론트엔드에서는 본인 같은 경우 상품 수량, 상품 총 금액, 상품명 과 함께 accessToken을 보내 userId까지 함께 보내줬다.

동그라미 표시가 된 정보들을 필수적으로 카카오페이 준비과정에서 넘겨줘야 하는 데이터들이다.

결제하기 버튼을 눌렀을 때의 URI에 대한 요청은 order메소드가 처리를 해준다.

createOrderService클래스안에서 Order객체를 생성하고 order객체의 아이디를 포함해 RequestBody로 전달받은 데이터들을

kakaoPayReady메소드에 파라미터로 주어진다.

카카오페이 서버에 요청을 해야 하기 때문에 스프링에서 다른 서버와 연결을 하기 위한 클래스인 RestTemplete을 사용했다.

전달받은 상품의 가격이나 이름, 등을 파라미터에 넣어주자

그러면 반환값으로 카카오페이 결제창의 url을 받을 수 있다.

window.location.href를 통해서 반환받은 url로 이동을 해주면 카카오 결제창으로 이동할 수 있다.

그런 뒤에 결제하기를 완료하면

kakaoPayReady에서 파라미터에 추가해줬던 approval_url로 리다이렉트를 시켜준다. 이제 사용자가 결제를 요청을 했고

카카오페이 서버에 해당 결제를 승인하는 API요청을 보내야 한다.

결제 성공페이지의 URL을 보면 pg_Token이라는게 쿼리스트링으로 붙여져 있는 것을 확인 할 수 있는데

이것을 통해 결제 승인을 할 수 있다.

useEffect를 통해 해당 페이지가 마운트 되었을 때 pgToken을 가지고 API요청을 보내야 한다.

pgToken은 서버에 쿼리스트링으로 붙여서 보내준다.

컨트롤러

카카오페이 메소드에서는 결제준비 과정에서 받은 고유 번호(tid) 결제 준비 단게에서의 orderId, userId, pgToken을 넘겨주면

해당 결제는 승인처리되고 결제정보를 얻을 수 있다.

이렇게 카카오서버에서 결제 정보를 전달을 받을 수 있다. 결제 성공페이지에서 이 정보들을 뿌려주면 끝~~