테스트키 통한 결제위젯 Render 중 오류
안녕하세요.
결제위젯 연동 개발 중 오류에 대해 문의드리려 글 남깁니다.
우선, 현재 개발환경에 대해 나열해드리겠습니다.
nextjs (앱 라우터), typescript
npm
- "@tosspayments/tosspayments-sdk": "^2.2.0"
현재 클라이언트 컴포넌트 단에서 토스 SDK 통해
tossPayments.renderPaymentMethods() 함수 호출 하였는데
브라우저 콘솔 단에서 TossPaymentsError: customer token이 없습니다. 라는 문구와 함께 위젯 노출이 되지 않고 있어 대응방법에 대해 여쭤보려 합니다.
* customerKey: 5dd2103a-9ab8-4683-b5be-c041a73042c9 사용
감사합니다.39 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
브랜드페이도 같이 쓰시려는거죠?
맞습니다.
redirectUrl등록 후,
accessToken발급하는부분 구현하셨나요
넵 구현해놓았습니다.
redirectUrl에 구현 단에서 문제가 있는 지는 체크를 아직 해보지 못했는데 확인해보는 게 좋을까요?
네 token이 정상 발급이 안되어 pending상태인 것 같아요
code, customerKey를 redirectUrl에서 받아서 정상적으로 토큰발급되었는지 한번 확인해ㅜㅈ세요
감사합니다. 확인 후 그럼에도 이슈 있을 경우 추가 코멘트 해보겠습니다.
한가지 여쭤보고 싶은 부분이 있는데, 기존에도
tossPayments.renderPaymentMethods() 함수 호출 시 customerToken도 확인하는 절차가 있었나요? 브라우저 콘솔 단에서는 해당 redirectUrl로 진입하고 있다는 로그가 찍히지 않아 여쭤봤습니다.브랜드페이 사용시에는 항상 확인했었습니다.
아니요 그건 문제 없어요. 해당 redirectUrl 이 아예 호출이 안되었나요?
네트워크탭 한번 찍어주세요
어떤 이름으로 된 네트워크 이력 전달 드리면 편하실까요?
전체 list 캡처해주시면 우선 확인해보렉요
넵 전달드리겠습니다.
페이지 새로고침 이후 로깅된 전체 네트워크 이력 전달드립니다. 확인해주셔서 감사합니다.
이렇게 callback호출된 로그는 안보이시는거죠?
넵 맞습니다.
현재 redirectUrl은 /api/user/point/brand-pay/auth 으로 지정해두었습니다.
혹시 확인되신 부분 있으셨을까요?
밤늦게 확인했습니다. 그렇다면 어떻게 추가 확인을 해보는 방법이 좋을까요? 해당 페이지에서는 저희쪽 서버 api를 추가 호출해주는 부분 제외하고는 구현되어 있는 부분이 없는 상태입니다.
기존) redirectURL(/api/user/point/brand-pay/auth) → 저희측 서버 API 호출 → 서버에서 API 연동 키 사용하여 토큰 발급 API 호출
기존에 약간 번거로운 절차로 구동이 되고 있어 문서 다시 확인해보니 서버를 통한 것이 아닌 위젯 시크릿키 통해 발급 API 호출할 수 있도록 수정하였습니다.
금일 오전 수정) redirectURL → 결제위젯 키 AccessToken 발급 API 호출
정상 호출까지 확인하였지만 여전히 위젯 노출은 되고 있지 않고 있네요 ㅠㅠ
일부 변경해보았다는 점 우선 공유드렸습니다.
테스트 하셨던 customerkey 공유부탁드립니다.
5dd2103a-9ab8-4683-b5be-c041a73042c9-1723426497107 전달드립니다!authcode 를 저희가 보내드린게 아니라 다른걸 보내주시고 계신것으로 보입니다.
어제 redirecturl 로 보내드린 authcode 르ㄹ 오늘 9시 23분에 보내주셨어요.
redirecturl 에서 쿼리 파람으로 받은 code 값을 token 요청시에 그대로 보내주시기 바랍니다.
아 네네 해당 부분은 단순히 수정 진행하면서 정상 호출되는 지 확인 차 해본 것이라 인지하고 있습니다.
현재 이슈는 결제위젯 render시, 'customer token이 없습니다.' 라고 브라우저 콘솔에 로그가 찍히면서 render가 되지 않는다는 것이어서 이 점 다시 한번 공유드립니다.
redirectUrl 에서 accesstoken 발급 API 호출하는 소스 부분 공유 해주세요.
그러면지금 토큰요청하신건 전부 수동으로 테스트 하신것만 진행되는 것 같습니다.
정상적으로 저희가 redirectURL 로 보내드린건 저희쪽으로 토큰요청이 안오는 것 같아요.
넵. 해당 route 구현 부분 전체 코드 캡쳐하여 전달드립니다. 파라미터 검증 제외하고는 문서 예시 코드 삽입하였습니다.
지금 해당 사용자로 다시 위젯 한번 불러 보시겠어요?
로그를 확인해 보려고 합니다. 오늘 위젯 렌더링된 로그는 안보여서요
넵. 잠시만요!
지금 리프레시 해봤습니다
customerKey: 07df251d-7e27-4ab1-9ab1-7e6bf0cb40c8 입니다
그런데 결제위젯 렌더링하실때 redirectURL 을 보내고 계신가요?
넵! 해당부분도 공유드리겠습니다.
로그상으로는 redirectURL 이 들어오지 않는것 처럼 보이는데요.
지금 결제 위젯 어떻게 렌더링되고 있는지 캡쳐해 주시겠어요?
'결제 수단' 워딩 하단 박스 구역 안에 렌더링 되어야 하는데 현재 상태입니다.
이건 브랜드페이 문제는 둘째치고 위젯자체가 렌더링이 안되는 것 같은데요.
콘솔에는 에러가 없으신가요?
좀 더 자세히 증상 설명해드리자면,
브라우저 리프레시 후에, 위젯 로딩 스켈레톤 뷰 노출 후에 다시 사라지고 있어요
지금 제가 동일 키로 렌더링 해보면 이상없이 렌더링이 되고 있어서요.
확인 차,
tossPayments.widgets() 함수 호출 후, pw 변수를 log 출력해봤는데, 제가 확인할 수 있는 바로는 redirectUrl은 확인되고 있습니다.
엇 그렇군요....
이거는 저희가 접속할수 있는 사이트에 구현을 해주셔야 디버깅이 가능할것 같습니다.
브랜드페이 token 문제는 아니고 결제위젯이 렌더링되지 않는 문제로 보여요.
한번 전체적으로 살펴보고 다시 코멘트 드려보겠습니다 ㅠㅠ 살펴봐주셔서 감사해요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.