결제 UI가 아직 렌더링되지 않았습니다. 라는 메시지가 발생합니다.
캡쳐화면에는 뒤에 결제화면이 그려진걸로 나오는데..
근래에 간헐적으로 발생하고있어서요.
어떤식으로 처리를 해야할까요.
@tosspayments/payment-widget-sdk 0.10.2 버전입니다.
56 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
저 에러 메시지는 어떤 조건에서 표시하시는 건가요?
저희쪽에서 표시하는 에러 메시지가 아닙니다.
특정조건에서 requestPayment를 하게되면 발생하는거같은데..
저 에러메시지를 표시하도록 구현을 하셨을것 같은데요
js catch 응답을 보여주도록 구현하신 부분의 조건을 알고 싶습니다.
이런식으로 되어있고.
해당 에러메시지는 저희쪽에선 작성한적 없는 메시지입니다.
말씀 드린것처럼, 에러 자체는 저희가 js 로 내렸을거고요
그 메시지를 어떻게 띄우시는 지가 궁금한겁니다
저 onClick 메소드가 결제하기 버튼이고, 저 버튼 눌렀을때 에러가 캐치되니 나온건데 어떤말씀이신지 잘 모르겠네요?
dispatch(openWarningModal(getErrorMessage(err)))
직접 구현한거 아니세요??
네 맞아요.
제가 이 내용을 설명 하는겁니다
어떻게 캐치해서 보여주시는지를 물어본겁니다
답변을 주신거고요
이렇게 되어있어요.
네 정말 감사합니다.
onClick 에 연결되어 있는 method 액션이 많은데요
저 모든 시도가 하나의 클릭에 연결 되어 있고,
그에 따른 js promise 에러를 다 캐치할것 같습니다.
의도하신거 맞나요?
네
저 메시지가 결제 UI가 그려진거같은데 발생하는데, 이게 발생하면 결제진행이 막혀서요.
완전히 렌더링이라는 조건을 어떻게 알 수있나요 ?
결제 렌더링하는 부분에서
paymentMethodsWidgetRef.current.on('ready', () => {
setIsRender(true);
});
이런식으로 ready되었을때도 체크를한것인데 저런 메시지가 떠서요.
저희가 재현해볼 수 있는 링크가 있을까요?
발생할때의 콘솔 로그를 봐야 trace 할 수 있을것 같습니다.
ios 웹뷰 내에서만 발생하고있어서요. 웹뷰 정보같은것은 제가 따로 요청해서 회신받는대로 전달드리겠습니다.
음
customerKey도 알려주시겟어요
게스트 결제일때는 ANONYMOUS이 값이고, 회원 결제일땐 회원의 uuid값을 사용하고있어요
네 에러 났을때 사용하셨던 customerkey 확인이 가능하실까요?
음 회원일때는 잘되고 비회원일때만 저 현상이 나타나네요. 위 캡쳐된 값 들어갔을때인거같아요.
웹뷰는 WKWebView 순정웹뷰 사용한다고 하네요.
혹시 결제 버튼을 눌렀을때 결제 UI 상황을 다시 확인한다거나해서 저 메시지를 안나오게 할수있는 방법은 없나요?
이 alert자체는 귀사에서 error캐치 후 띄워줄거에요
저희가 alert을 띄우지는 않습니다.
js sdk v1/v2중 어떤거 사용하셨나요
1 쓰셨군요
결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
ready event받은 후, 결제하기 버튼을 활성화시키는 방법이 있을 것 같아요
저 alert은 당연히 제가 보여주는게 맞는데. requestPayment 했을때 sdk에서 에러를 주는게 아닌건가요 ?
잠시 후 다시 시도해도 계속 저 에러가 발생하니까 결제진행이 안되는상황입니당
이런식으로 ready 체크하는것도 반영되어있는 상태입니당.
결제하기 버튼 렌더링을 ready이벤트 발생할때 state변경해서 그리도록 되어있어용.
회원일때와 비회원일때 위젯 렌더링을 다르게 하시나요?
아니면 위젯을 회원용과 비회원용 2개를 생성하신다거나요.
아뇨 똑같습니다.
customerKey부분만 다르고..
저희가 테스트해볼 사이트가 있을까요?
브라우저로 재현하려면
해당주소에서 구매하기 > 옵션 선택 > 비회원으로 구매하기
진행하게되면 결제화면이 나오는데요.
여기서 브라우저를 ios모델로 변경해서 새로고침을 한번해야합니다.
그 후에 가상계좌 선택 > 결제하기 누르면 은행 선택화면이 나오고 여기서 취소버튼을 누른다음 다시 결제하기를하면 해당 에러가 발생합니다.
브라우저로하게되면 여러번하다보면 간헐적으로 발생하고..
앱으로하면 은행 선택화면에서 닫기 누르고 결제하기할때 바로 발생합니다.
postMessageiOS Error메시지는 앱과 브릿지 통신 메소드 동작관련이라 무시하셔도됩니다.
최초에는 되는데, 취소 후 다시 진입할 때만 발생하는건가요?
진입할 때마다 render를 다시하나요?
닫기눌러서 주문서 다시 진입했을 때, 주소 입력할 때마다 렌더링 다시하는게 맞나요?
정확히 재현이 안되서 영상으로 한번 전달주시면 도움이 될 것 같아요
화면보시면 은행 선택화면이 나올때는 url이 변경되고 취소했을때 다시 돌아오는 식이어서
렌더링은 다시 할 수 밖에 없는거같은데 .. 혹시 다른방법이 있나요 ?
위 영상에서 에러받을 때 사용된 주문번호나, 확인가능할까요?
재현 후 제공해주셔도 됩니다!
cusotmerKey, mid도 함께 부탁드려요
로그 호 ㅏㄱ인해보고자 합니다.
영상의 주문서 ID는 T241111_47348050 이구요.
customerKey는 비회원이라 sdk에서 제공하는 ANONYMOUS 이걸 쓰고있습니다.
MID는 firstenter2 입니다.
근데 결제 상태가 진행이 된게 없어서 주문서 검색이 안되는거같습니다.
네 로그는 찾았습니다. 확인 후 안내드릴게요
@박경환 저는 X누르면
주문자 정보가 초기화되는데
(주소, 연락처등)
영상에서는 남아있는데, 혹시 다른게 있나요?
아~ 그건 아마 다음에도 사용하기 이거 체크 관련 버그인것같습니당.
재현이 안되네요 ..
결제 렌더링 메시지 말씀이시죠?
네
이게 ios앱으로 녹화한 화면인데..
앱 (WKWebView ) 일땐 높은확률로 에러가 발생하고..
브라우저로 재현하려면 좀 여러번 시도하다가 한번씩 발생하는거라..
일단 확인해봣을 때
위젯 초기화가 2번 되고 있어요
PaymentWidget(clientKey, customerKey) // 회원 결제
2번선언되는 걸로 보여요
결제페이지 접근시 renderPaymentMethods가 두번 호출된다는걸까요?
아니면
결제페이지 접근 ( renderPaymentMethods 1번 ) > 가상 계좌 은행 선택 화면 취소 후 다시 결제페이지 접근 ( renderPaymentMethods 2번 ) 인건가요 ?
더 확인해볼게요. 감사합니다!
renderPaymentMethod뿐 아니라, PaymentWidet 자체가 2번 초기화 되고 있습니다.
lifecycle에서 뭔가 2번 실행되는 부분이 있어보이네요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
가상은행 선택하는것처럼 url이 바뀌고 다시 돌아올때 이런일이 발생하네요;
수정해서 해결됐습니다. 감사합니다.
react쓰시나요?
어떤 lifecycle에 들어있었나요?
네. react + nextjs 에요.
최초 진입 시 useEffect를 사용한 유저 로그인 관련 로직이 있는데, router를 의존성에 넣어뒀더니 이런 현상이 발생하네요.
로그인 과정 이후에 렌더링하게 해둔건데 위 로직이 두번 발생하는 바람에 렌더링이 두번 일어났어요.
다른 상황에선 딱 한번만 돌아서 의심을 못했네요;
로그인이 2번 되면서 된거군요..?
네 그렇게되었네요;;
공유감사합니다.