쇼핑몰 프로젝트를 진행하던 중에 결제 기능을 구현하게 되어 공부했던 내용을 정리하기 위한 글입니다.

결제는 어떻게 이루어 지는걸까?

결제 기능을 구현하려면 우선 결제가 어떻게 이루어 지는지 부터 알아야 한다. 우리가 쇼핑몰에서 어떤 물품을 살때를 생각해 보자. 우리가 고른 상품을 결제하기를 누르면 다음과 같은 창이 나타나서 결제를 진행할 수 있게 도와주었을 것이다.

이 창에서 결제하고 싶은 항목을 선택해서 결제 했던 경험 누구나 한번쯤 있을 것이다. 그렇다면, 왜 항상 위의 창으로 결제를 하는걸까?

우리가 직접 결제를 구현하고 카드사 연동을 하려고 하면, 각 카드사마다 코드를 직접 짜줘야하고 연동도 해줘야한다. 그럴려면 크나큰 부담으로 작용하는게 사실이다. 이거 말고도 할게 산더미인데...

그래서 개발자가 직접 결제방식마다 연동하는 방식이 아니고 중간에서 연동을 도와주는 회사들이 존재한다. 이를 PG(Payment GateWay) 라고 하는 서비스를 해주는 회사들이 있다. 많이 사용하는 회사들로 아임포트나 토스페이먼츠가 그 예시이다.

그래서 결제는 어떻게 진행되는데?

이미지 출처 아임포트 깃허브

이미지 출처 토스 페이먼츠 개발 가이드 문서

위의 그림 두개를 보면 같은 구조를 통해 결제가 이루어진다는 것을 알 수 있다. 위 두 그림의 차이는 토스가 제시한 그림은 카드사를 그림에 표현하지않고 단순화 했다는 점이지 똑같다는 것을 알 수 있다.

그럼 결제가 어떻게 이루어지는지 한번 알아보자.

1. 카드 정보 인증

실제 결제를 진행할 때, 이 과정에서 어떤 방식으로 결제를 할 것인지 선택하는 탭이 나오게 되며
어떤 특정 신용카드사를 선택하게 되면 신용카드 정보를 인증하는 화면이 나온다.
이 인증한 정보를 카드사에 보내고 맞는 정보라면 카드사에서 어떤 정보를 전달 받게 된다.

• 첫 번째 그림의 1,2의 과정 그리고 두번째 그림의 위에서 세번째 줄까지의 과정

2. 인증된 카드 정보를 결제사 서버로 보낸다.

여기서 혼동이 있을 수 있는데, 결제사는 토스나 아임포드가 아니라 사용자가 상품을 주문하는 서비스의 서버이다.
만약 우리가 결제 모듈을 개발한 벡엔드 개발자라면 우리가 개발한 벡엔드 서버를 지칭하는 것이 바로 "결제사 서버"이다.
(내가 만든 서버에 결제 정보가 오다니...!!)

3. 결제사 서버에서 PG사 서버로 보낸다.

이 과정에 나오는 pg사 서버가 바로 아임포트나 토스 같은 회사의 서버를 말한다.
위에서 전달받은 정보를 결제사 서버에서 적절하게 다듬은 뒤 PG사 서버로 보내게 된다.

4. 전달받은 정보를 PG사에서 카드회사로 결제 정보를 보낸다.

5. 결제 정보가 맞다면 카드 회사에서 응답

이렇게 받은 응답은 PG사 -> 결제사 서버를 지나(이때, 결제사 서버 디비에 결제 정보를 저장하게 된다.)
드디어 구매자 브라우저로 돌아오게 된다.

• 첫번째 그림의 7번, 두번째 그림의 마지막 줄의 토스페이먼츠 -> Server 과정

6. 결제 성공

구매자 브라우저로 결제 성공 요청이 돌아오면 결제 성공 페이지로 리다이렉트 된다.

마치며

다음 글에서는 실제로 결제 모듈을 어떻게 구현하는지(벡엔드만) 한번 토스페이먼츠 api를 통해 간단하게 구현해 보도록 하자.