REACT TOSS PAYMENT를 활용해서 결제 기능 구현하기(테스트)

https://velog.io/@tosspayments/React%EB%A1%9C-%EA%B2%B0%EC%A0%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0-ft.-%EA%B2%B0%EC%A0%9C%EC%9C%84%EC%A0%AF

React로 결제 페이지 개발하기 (ft. 결제위젯)

위 글을 바탕으로 구현해보았습니다. 개인적으로 코드 자체만 보는거는  깃헙을 통해 보는게 더 좋다고 생각해요!(제가 봤을때는 오타가 있었어요)
https://github.com/tosspayments/payment-widget-sample/blob/main/react/src/pages/Checkout.tsx

위 게시글은 테스트용이기 떄문에 이를 활용해서 실제 결제까지 진행해보려고 합니다.!
사업자 번호가 필요하네요,,?

프로젝트는 vite를 통해서 생성하였고, ts-swc로 하였습니다.
 우선 결제에 필요한 결제위젯 sdk와 router를 설치합니다.

npm i @tosspayments/payment-widget-sdk react-router-dom

일단,, 추후 보완해보겠습니다.
테스트 버전에서는 카카오페이는 지원하지 않는데 네이버 페이는 지원되네요,,

결제까지는 예시코드가 너무 잘 작성되어서 어렵지 않고, 추후에 응답관련해서는 아래 링크를 통해서 확인할 수 있따고 하네요.

결제방법 마다 결제금액을 얻는 방법이 다르지만, 조건문 통해서 얻으면 되겠고,,,

test버전이라도 1원 전송 이런거 가능할 줄 알고 설렜었는데, 아쉽네요. 혹시  추가단계를 진행하면 게시글 업데이트 하겠습니다..


https://docs.tosspayments.com/guides/payment-widget/integration#4-%EA%B2%B0%EC%A0%9C-%EC%99%84%EB%A3%8C-%ED%9B%84-%EC%9D%91%EB%8B%B5-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0