0. 프로젝트 시작 전..

https://admin.portone.io/

프로젝트 설명

<aside> ❓

결제시스템은 가급적 HTTPS 환경에서 구현하는 것을 추천합니다. 또한 아임포트의 결제 서비스는 사업자를 등록해야 사용가능하므로 해당 프로젝트는 테스트 결제만 구현했습니다.

</aside>

본 프로젝트는 React및 Iamport를 사용하여 결제 시스템을 구현합니다

해당 내용은 토스 페이먼츠를 Callback으로 실행시키는 방법입니다.

Frontend vs Backend

결제 대행 시스템 ( PG시스템 ) 아임포트 ( Iamport )를 사용해 결제 시스템을 구축할 때 Frontend ( ex. React )와 Backend ( ex. Spring Boot )의 역할

Frontend

• 결제 요청
  • 결제창을 띄우기 위한 요청IMP.request_pay 은 Frontend에서 처리
  • 사용자 입력 ( 상품명, 금액, 구매자 정보 등 )을 받아 결제 요청
• UI/UX
  • 사용자 경험을 최적화하기 위해 결제 관련 UI를 구현하는 것이 좋다.
• 비동기 처리
  • 결제 요청 후 응답을 받아 사용자에게 피드백

Backend

• 결제 검증
  • 결제가 완료된 후, 아임포트 REST API를 호출하여 결제 정보를 확인하고 검증하는 로직 구현
  • imp_uid를 사용해 특정 결제의 상세 정보를 조회 → 만약 결제 정보가 일치하지 않다면 결제 실패 처리 진행 → 만약 결제가 이미 처리되었으나 정보가 틀린 경우 환불 처리
• 데이터 저장
  • 결제 정보를 데이터베이스에 저장하거나 관리하는 로직 구현
• 비즈니스 로직
  • 결제 성공 시 후속 작업 ( ex. 주문 처리, 재고 업데이트 등 ) 처리
  • 이때 동시성 제어 부분을 관리