사용자가 구매를 위해 돈을 지불하는 과정이 어떻게 진행되는지 알아봤다.
카드사에 결제를 요청해주는 PG사가 있고 각각의 PG사마다 개발자가 결제를 위해 연동해야할 과정이 매우 복잡한데, 이 과정을 대신 해주는 결제 솔루션회사가 중 아임포트라는 서비스를 통해 결제를 진행해봤다
아임포트에서 제공하는 API를 이용해서 결제를 하게되면, 결제ID(imp_uid)라는 데이터를 받아오고 이 imp_uid를 Backend에 전송하여 데이터베이스에서 결제에 대한 데이터를 관리한다.
결제를 위한 여러가지 상황을 고려해야하는데,
프론트엔드에서 데이터를 요청하지 못할 경우( =>브라우저를 종료할 경우)
Web-hook-notification 라이브러리로 아임포트 서비스 DB로 axios 요청 (imp_udi, status:paid), 아임포트에서 결제 상황에 따라(취소, 무통장입금 확인 등) 아임포트가 Backend-API로 결제내역을 보내준다.
imp_uid
결제를 진행할 경우 결제ID(imp_uid)를 받아오고, 이 ID를 벡엔드서버로 전달하면 백엔드에서 결제 관련 정보를 확인하고 데이터를 수정한다.
Advanced-date-Issue
사용자마다 기기 환경이 다 다르기 때문에 new Date()함수의 기준도 달라진다. 그래서 결제 시간 관련해서는 벡엔드에서 UTC 시간을 기준으로 시간을 보여준다.
setTimeOut?
이벤트(동작 실행)에 관한 여러 방식 중 특정 시간이 되면 자동으로 이벤트를 발생시킬 경우 JavaScript 동작 순서에 대해 이해할 필요가 있다.
JavaScript의 경우 싱글스레드 기반의 언어이기때문에 callStack(처음요청된 함수가 가장 나중에 실행되는 FILO) 이후 Task Queue
setTimeOut의 경우에도 미리 결과를 저장해두었다가 callStack에서 아직 함수처리가 남았다면 시간을 0으로 설정해도 실행되지 않는다.
본인 인증 과정
서비스를 진행할때 사용자 인증 단계에서 인증번호는 백엔드에서 인증번호를 만들어 브라우저에서 입력된 휴대폰 번호가 벡엔드 서버로 들어가면 6자리 번호를 나타내주고 -> 이 번호가 브라우저에서 입력되어 DB와 일치하면 본인 인증이 완료되는 과정으로 실제 실명을 확인해야할 경우 다른 인증 서비스를 진행하게 된다.
👩🏻💻 오늘의 TIL...
포트폴리오에 결제 관련해서 적용해보면서 결제 과정에 대해 한번 더 상기시키도록하자.
✔️ 포트폴리오 주말까지 보완
