Payment Gateway, Redux-toolkit

1. Payment Gateway

Payment Gateway는 결제를 위한 관문이란 뜻으로, 전자결제 지급대행사라고도 한다. PG는 온라인 플랫폼에서 다양한 결제 방식을 사용할 수 있게 연결해주는 역할을 한다. PG사는 카드 결제, 간편 결제, 계좌이체, 가상계좌(무통장입금), 상품권 결제, 휴대폰 결제 등 다양한 결제 방식을 사용할 수 있게 연결해준다. 

 

고객이 온라인 환경에서 결제를 하면 상점에서 PG사로 결제 요청을 보낸다. PG사는 받은 결제 요청을 카드사 또는 은행과 같은 결제 기관으로 보내 승인받고 그 결과를 상점에 전달한다. 상점에서 금액이 지불되었음을 확인하면 고객에게 물건을 전달한다. 고객은 구매 금액을 결제기관에 지불하고, 결제기관은 PG사에게 정산해주고 PG사가 상점에게 정산해주는 형태로 정산이 이루어진다. PG사를 이용할 경우 일관된 요청과 응답을 받을 수 있어 결제 관리가 더 용이해진다.
 

 

결제 플로우는 다음과 같다. 

 

1. 결제 준비

유저가 결제 버튼을 클릭하면 다음과 같은 작업이 처리된다.

클라이언트가 서버에 결제 요청을 보내면, 서버가 해당 결제 요청에 대한 응답으로 api를 호출해 결제 준비를 요청한다. 해당 요청이 PG사로 전달되면, PG사가 클라이언트에게 결제창 URL을 응답으로 반환한다. 해당 URL을 받은 클라이언트는 결제창을 띄우게 된다.

다음의 순서로 각 주체들이 반응하게 된다.

구매자 → Client → Server → PG사 → Client → 구매자가 결제창 확인

 

2. 결제 요청

유저가 결제창에서 결제 수단을 선택하면 다음의 작업이 이루어진다.

PG사는 고객 정보를 카드사로 전달하고, 카드사는 해당 고객이 실제 카드사의 고객이 맞는지 확인한다.

다음의 순서로 각 주체들이 반응하게 된다.

구매자 → PG사 → 카드사

 

3. 결제 승인

카드사가 성공적으로 고객 인증을 하면, PG사가 클라이언트에게 pg token을 발급한다. pg token은 구매자 인증에 대한 증표로 이해하면 된다. 클라이언트는 이 pg token을 서버에게 보내고 서버가 해당 구매자가 인증된 고객이라는 사실을 알 수 있다. 이렇게 고객을 인증하는 절차는 마무리되었다. 이제 결제를 승인받기 위해 서버가 PG사로 결제 승인 요청을 보낸다. PG사는 카드사와 통신하여 결제를 처리하고, 서버가 보낸 결제 승인 요청에 대한 응답으로 서버에게 결제 완료 데이터를 전달한다.

 

다음의 순서로 각 주체들이 반응하게 된다.

PG사→ Client → Server → PG사 → Server

2. Redux-toolkit

Redux는 가장 널리 사용되는 상태 관리 라이브러리이다. React에서 state를 props 형태로 다른 컴포넌트로 전달할 때 props drilling이 발생하는데 이는 유지보수 그리고 props 추적을 어렵게 한다. 상태 관리 라이브러리는 규모가 크고 복잡한 프로젝트에서 상태 관리와 관련된 문제들을 해결하고자 고안되었다.

 

Redux toolkit이 생겨난 이유는 간단히 말하면 Redux를 더 용이하게 사용하기 위해서이다. Redux는 다음과 같은 문제점을 가지고 있었다.

• Redux 스토어 환경 설정이 매우 복잡하다.
• Redux를 유용하게 사용하려면 많은 패키지를 추가해야 한다.
• Redux는 보일러플레이트, 즉 어떤 일을 하기 위해 꼭 작성해야 하는 상용구 코드를 너무 많이 요구한다.

이러한 문제들을 해결하고자 Redux toolkit이 고안되었다.

공식 문서에 의하면 Redux toolkit는 효율적인 Redux 개발을 위한 공식 toolset으로, Redux 로직을 작성하기 위한 표준 방식으로 만들어졌으며 사용을 강력히 권장한다고 되어 있다.

 

Redux toolkit에는 slice라는 개념이 존재하는데, slice는 redux 구성 요소들의 조각을 의미한다. 즉 action type, action creator, reducer 등을 의미한다.
Redux toolkit에는 Redux에서 가장 흔하게 사용하는 기능들이 함수로 포함되어 있다. store 셋업, reducer 정의, 불변 update 로직, 그리고 수동으로 action creator나 action type을 작성하지 않고 state의 slice 전체를 생성하는 등의 기능이 포함된다. Redux toolkit에는 비동기 로직 처리에 사용되는 Redux Thunk나 selector function을 작성하는 데 사용되는 Reselect 같은 익스텐션들도 포함되어 있어 바로 사용할 수 있다.

 

Redux toolkit의 주요 API는 다음과 같다.

• configureStore(): Redux Store 생성
• createAction(): Action Type과 Action Creator 생성
• createReducer(): Reducer 생성
• createSlice(): slice 생성
• current(): Reducer 내에서 state를 변환하는 과정 중 draftState의 현재 state 값을 가져옴

---

참고자료
https://docs.tosspayments.com/resources/glossary/pg

https://www.ifourtechnolab.com/blog/a-step-by-step-guide-on-using-redux-toolkit-with-react