토스 페이먼츠 연동

토스페이먼츠 API 연동 관련 공식 사이트 ➡️ https://www.tosspayments.com/

스타트업에서만 근무하다보니, 실사용자들의 트래픽 관련된 부분이나 결제 시스템을 도입할 일이 크게 없었다.
그래서 많이 아쉬웠는데, 드디어 기회가 왔다.

나도 토스 헤비유저이기도 하고, 요즘 토스가 편하게 연동할 수 있게끔 해놨다고 해서 팀에서 사용하기로 했다.

결제 시스템을 연동하는 것은 처음이라, 처음엔 조금 헤맸지만, success url까지 성공적으로 구현했고 바텀시트까지 예쁘게 만들어서 띄웠다 ㅎㅎ

1. npm으로 기본 패치지를 설치한다.

- npm i @tosspayments/payment-sdk

2. 백엔드에서 만든 API에서 200을 받아온 response에 있는 내용을 참고하여 전달한다.

const clientKey = '클라이언트 키';

loadTossPayments(clientKey).then((tossPayments) => {
        tossPayments.requestPayment('카드', {
          amount: api_result?.amount as number,
          orderId: api_result?.orderId as string,
          orderName: api_result?.orderName as string,
          customerName: api_result?.name,
          successUrl: `${window.location.origin}/my/subscriptions/payment`,
          failUrl: `${window.location.origin}/my/subscriptions/payment`,
        });
      });

3. 토스에서 결제 심사를 받기 전엔 클라이언트 key를 테스트용으로 사용해야하는데, 그러면 결제할 때 이렇게 뜬다.