토스페이먼츠 결제 연동하기

 

안녕하세요..!!

여러분 잘 지내고 계신지 궁금하네요^^

 

짧은 휴가에서 복귀하고 회사에서 토스페이먼츠 결제 연동 업무를 할당받았어요! ☺️☺️

 

사내 서비스 중에서 티켓을 구매할 수 있는 기능이 생겨서 이를 토스페이먼츠 SDK를 활용해서 구현하기로 결정했었어요.

 

결제 위젯과 결제창이 있는데요! 저희는 결제창을 선택했어요..!

---

결제창으로 토스페이먼츠 결제 연동하기

카드/간편결제 통합결제창 연동하기 | 토스페이먼츠 개발자센터

---

토스에서 아주 친절하게 가이드라인을 제공해줘서 정말 쉽게 구현할 수 있었어요!! 😎😎

 

하지만, 중간에 발생한 에러가 있었는데, 레퍼런스가 없어서 헤매던 와중...

토스에서 디스코드에 실시간으로 답변을 해주시면서 문제를 쉽게 해결할 수 있었어요!!!! (대박)

 

 

결제 프로세스(결제창)

 

더욱 매끄러운 결제 경험을 편리하게 연동하고 싶다면 결제위젯을 추천드려요. - 토스페이먼츠 -

 

 

위와 같은 프로세스로 구현을 했어요..!!

저는 우선 yarn으로 SDK를 설치했어요.

 

1. 결제창 띄우기

구매하기 버튼 클릭 시, 실행되는 로직에서 requestPayment가 실행되면서 결제창이 띄워져요.

 

 

 

2. 리다이렉트 URL로 이동하기

 

결제 인증 과정이 성공하면 successUrl로 리다이렉트가 되고, 실패하면 failUrl로 리다이렉트가 되어요!

각각의 페이지로 이동했을 때, UI를 구현해줍니다.

 

 

성공했을 때, URL과 쿼리 파라미터들

/success?orderId={ORDER_ID}&paymentKey={PAYMENT_KEY}&amount={AMOUNT}

 

실패했을 때, URL과 쿼리 파라미터들

/fail?code={ERROR_CODE}&message={ERROR_MESSAGE}&orderId={ORDER_ID}

 

 

이렇게 쿼리 파라미터들을 바탕으로 각 페이지에서 보여주도록 했어요..!!

 

결제 성공(승인) 페이지

 

 

3. 결제 승인하기

사실 위의 화면을 띄우기 전에 결제 승인에 대한 처리가 필요해요.

저는 승인 단계를 아래와 같이 추가하고 승인하기 버튼을 클릭하면 API를 요청하도록 구현했어요..!!

 

결제 승인 요청(5초 후에 진행돼요..!!ㅠㅠ)

 

 

결제 승인하기에 성공하면 2번 단계의 사진이 보이게 되어요!!

 

 

4. 응답 확인하기

응답에 따라서 실패 화면이나 성공화면을 띄우면 끝!!!

 

---

 

토스페이먼츠에서 문서를 잘 작성해주셔서 쉽게 구현할 수 있었던 것 같아요!