PortOne(Iamport)포트원 이용한 결제 기능 구현 (2) - React , SpringBoot

🔹 React로 구현한 Tour 주문 결제 페이지와 , Product 주문 결제 페이지 UI .

Tour 주문 결제 페이지 (좌) / Product 주문 결제 페이지 (우)

---

 투어 및 상품 , 주문 결제 페이지 상세

Tour 주문 결제 페이지

Product 주문 결제 페이지

 

---

🔹 React 에서 각각 5개의 컴포넌트로 나눠서 구현

 

     🔸 Tour

• TourBookComponent : 투어 예약 및 결제를 처리하는 메인 페이지
• ReservationList  : 카트에 있는 투어 조회 및 표시
• BookingInformation : 기존 예약 정보 조회 및 변경
• PaymentMethodCoupons : 결제 방법 및 보유 쿠폰 선택
• TourPaymentDetails : 결제 금액 표시

---

     🔸 Product

• OrderComponent : 상품 주문 및 결제를 처리하는 메인 페이지
• CartList : 카트에 있는 상품 조회 및 표시
• ShippingInformation : 기존 배송 정보 조회 및 변경
• PaymentMethodAndCoupon : 결제 방법 및 보유 쿠폰 선택
• PaymentDetails : 결제 금액 표시

---

🔹 상품 주문 시 Backend와 연결되는 코드 흐름

① 카트에 있는 상품 조회 및 표시.

---

② 회원 정보, 보유 쿠폰 조회

---

③ 결제 버튼 클릭시 주문 정보 서버에 저장 & PortOne 결제 API와 연결

---

 

④ 선택된 결제 방법 ( 카드, 계좌이체 ) 에 따라 결제창 표시, 결제 성공시 서버에 결제 정보 저장하고 메인 페이지로 이동.

주문 성공시(좌), 주문 실패시(우)