[React] 장바구니 상품 결제하기(토스페이먼츠 / 프론트엔드)

이번 프로젝트의 마지막 기능 결제하기를 구현하기 위해 토스 페이먼츠를 선택했다.

일단 토스페이먼츠 페이지에서 나와있는대로 프론트엔드 측의 test 구현을 먼저 진행해보기로 했다.
토스페이먼츠를 선택한 이유는 공식 홈페이지에도 잘 나와있었고, 토스에만 연결해두면 다양한 결제수단을 이용해서 결제할 수 있다는 장점이 있기 때문이다.

먼저 실행 순서는 이렇게 된다

1. 장바구니에서 "결제하기" 버튼을 누르면 백엔드로 결제 요청 POST를 보낸다.
2. orderId를 전달 받고 결제 창을 띄우는 함수를 실행시킨다.
3. 토스페이먼츠에서 제공하는 화면으로 연결되어 결제를 진행한다.
4. 결제를 완료한 뒤에 확인할 수 있는 success URL에서 paymant key, order Id, amount 를 백엔드에 전달한다

그러기 위해서는 먼저 성공시 화면, 실패시 화면이 있어야 한다. 

    var clientKey = '' // 테스트용 클라이언트 공개 키
        // 2. 결제창 SDK 초기화
        var tossPayments = window.TossPayments(clientKey)

        const handleTossPay  = () => {
          tossPayments.requestPayment('카드', {
            amount: totalPrice+totalDeliverPrice,
            orderId: orderId,
            orderName: `${Items[0].itemName} 외 ${Items.length}건`,
            customerName: userName,
            successUrl: 'http://sayo.s3-website.ap-northeast-2.amazonaws.com/success',
            failUrl: 'http://sayo.s3-website.ap-northeast-2.amazonaws.com/fail'
          })
        }

버튼을 눌렀을 때 해당 handleTossPay 함수를 실행시키게 된다.
해당 함수에서 필요한 값은 결제 수단, amount, orderId, orderName, customerName, successUrl, failUrl값이다.
우선 결제수단은 카드로 고정해뒀다.
amout, orderName은 장바구니에 담아져 있는 값을 전달해줬고, orderId는 백엔드에서 response값으로 받아왔다.
나머지 필요한 값인 Url은 만들어 놓은 페이지를 입력했다.

그 밖에 clientKey는 toss 페이지에 적혀 있는 공개 키를 입력했다.

구현 영상은 아래와 같다

이렇게 성공한 뒤 success URL로 이동하게 되면 주소에서
http://sayo.s3-website.ap-northeast-2.amazonaws.com/success?orderId=000&paymentKey=000&amount=17490

위와 같이 orderId, paymentKey, amout값을 받아 올 수 있게 되고 이 값을 백엔드에 전달해주면 된다.

이제 결제가 완료되었을 때 마무리만 하면 될 것 같다 !

---

참고

https://docs.tosspayments.com/preview/1

체험하기 | 토스페이먼츠 개발자센터

https://ws-pace.tistory.com/226?category=1010992 

토스페이먼츠 시리즈 (1) _ 도입

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://docs.tosspayments.com/reference/using-api/api-keys