결제위젯 렌더링 에러핸들링 문의
안녕하세요. 결제위젯 렌더링 에러핸들링에 대해 문의드립니다. payment-widget-sample 레포지트리의 react 코드를 보면 usePaymentWidget이라는 커스텀 훅을 통해 paymentWidget을 가져오도록 되어 있는데요. usePaymentWidget에는 clientKey와 customerKey를 넣게 되어 있습니다. clientKey와 customerKey를 잘못 넣었을 때를 대비하여 에러핸들링을 진행하고자 하는데, customerKey를 잘못 넣어서 발생한 에러에 대해서는 핸들링을 하였으나, clientKey를 잘못 넣어서 발생한 에러를 캐치하지 못하고 있습니다. GET https://api.tosspayments.com/v1/payment-widget/widget-groups/keys?variantKey=DEFAULT api에 대해 500 에러가 발생하는 것은 개발자 도구로 확인했는데, usePaymentWidget에서 사용하는 useQuery의 onError를 이용하여(payment-widget-sample 레포지트리에서는 v5 버전대의 react-query를 사용하기 때문에 onError를 이용할 수 없으나, 저희 서비스는 하위 버전을 사용하고 있어서 onError를 사용할 수 있습니다.) 에러를 캐치해보려 했으나 실패했습니다. clientKey를 잘못 넣어서 발생한 에러를 캐치하는 방법이 있을까요?
8 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
기본적으로 clientkey 를 잘못넣는경우를 왜 고려하시는 걸까요?>
일반적으로는 상점이 변경되지 않기때문에 clientkey 는 고정되는 경우가 대부분입니다.
개발에서는 테스트키를 넣고 프로덕트에서는 라이브키를 넣는데 가끔 휴먼 에러로 잘못 들어가는 경우가 있어서요. 개발에서는 괜찮지만 혹시나 프로덕트에서 키를 잘못 넣어 배포되었을 때를 고려하여 재배포 전까지 임시로 에러 처리를 하고자 합니다.
제가 알기로는 현재 별도로 해당 에러를 처리하실수 있는 방법은 없는것으로 알고 있습니다.
Uncaught (in promise) TossPaymentsError: 인증되지 않은 위젯 키 혹은 클라이언트 키 입니다. 토스페이먼츠 개발자센터에서 API 키를 다시 확인하세요.
clientkey를 잘못 넣어서 발생한 에러에 대해 개발자 도구 보면 이런 식의 에러 메시지가 출력되는데 loadPaymentWidget(clientKey, customerKey)에 대해 catch문을 걸어서 에러를 잡긴 잡았습니다. 제가 어제 저녁에 간단히 시도해봤을 때 잘 안되었던 기억이 있어서 디스코드에 문의를 남겼는데, 지금 다시 시도해보니까 에러가 잡히네요. 해결 되었습니다.네 해결 하셨다니 다행입니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.