[API] 토스 페이먼츠

 

sequence diagram

 

1) 사용자가 주문을 진행하는 페이지로 이동.

2) Toss Payments SDK를 이용해 HTML에 결제 UI를 그려줌

3) 사용자는 결제 UI를 이용해 결제 진행

4) 이후 설정에 따라

• JavaScript의 Promise 형태로 결제 승인 이후의 과정을 처리
• 결제 요청을 하면서 제공한 successUrl로 클라이언트가 Redirect됨
• 이 과정에서 백엔드 서버로 결제 정보가 전달되어야 함.

5) 백엔드 서버에서 전달받은 결제 정보를 바탕으로 > Toss Payments에 결제 승인 요청을 함

6) 결제 결과를 사용자에게 다시 알려줌.

- 백엔드에서 진행하는 내용보다 JavaScript로 결제 정보, 사용자 정보, 결제 대상 품목 등을 포함하여 함께 전달하여야 한다. 

 

코어 API | 토스페이먼츠 개발자센터 (tosspayments.com)

코어 API | 토스페이먼츠 개발자센터

 

 

🌟요구사항

- Skeleton 코드 : 순수HTML과 JavaScript, Promise 기반으로 동작.

• 사용자가 결제를 완료하면 서버의 /toss/confirm-payment로 결제 정보 전달.
• 주문하는 물품의 Id와 이름을 <ID>-<이름> 형식으로 연결해 orderName으로 지정되어 결제 요청이 진행됨. (결제 정보 조회시 사용)

- 전달받은 결제 정보를 바탕으로 결제 승인 요청을 Toss로 보냄

- 어떤 물품이 결제되었는지, 해당 물품의 Toss 결제 정보는 무엇인지가 포함된 주문 정보를 데이터베이스에 저장.

- 결제가 진행되었던 주문 정보들을 전체, 또는 단일 조회 가능

- 주문 정보들의  Toss 결제 정보에 대한 개별 조회 가능

- 주문 정보들의 결제에 대하여 개별 취소 가능

 

 

내가 구현한 방법을 정리해보았다.