RN에서 토스연동을 하고 있는중 웹뷰 관련 문의드립니다.
현재 상황은 V1 결제 위젯을 연동해놓은 상태입니다.
안드로이드에서 다른 웹뷰에 들어가야할 이벤트가 토스 웹뷰쪽으로 들어가고 있는데
관련해서 해결책이 있을까요?
35 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
처음 보는 이슈인데요, 저희 웹뷰가 열린상태에서 발생한 이벤트를 다른 웹뷰에서 처리하셔야 하는 상황인가요?
결제창에서 Daum 웹뷰로 이동하여 주소를 설정하는 부분이 있는데, 이 웹뷰에서 onMessage를 통해 데이터를 받아야 하는 부분에서 해당 이벤트가 토스 위젯쪽으로 잡히면서 생기는 이슈같습니다
다음 우편번호 api 말씀이시죠?
네 맞습니다
결제위젯 React Native SDK(Version 1) | 토스페이먼츠 개발자센터
결제위젯 React Native SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
만약, 웹뷰를 직접 그리고 계시다면, event data에 type값이든 어떤 값이든, 그게 토스페이먼츠 외에서 온 이벤트라는걸 확인할 수 있는 파라미터를 넘기고
그 파라미터 값이 아닌 경우에는 onMessage를 실행하지 않고 바로 return 하는 방법으로 쓰실 수 있습니다.
제가 연동할 때는 type: "VERIFY_COMPLETE_FROM_POPUP" 이라는 값을 넘겨
type이 VERIFY_COMPLETE_FROM_POPUP이 아닌 경우 그냥 함수 실행을 안하게 했습니다.
sdk를 써서 로드중에 있습니다
SDK를 쓰고 계시군요.
그러면 혹시, DAUM도 웹뷰를 직접 만드신게 아닌거죠?
다음은 웹뷰를 이용하고 있습니다
그러면 다음에서 귀사 앱으로 메시지를 날릴 떄에 이런방법으로 처리가 가능하실지 확인 부탁드립니다.
문제되는것이 토스 위젯이 로드된 이후에 다음쪽 웹뷰가 실행되는데 이때 다음쪽 웹뷰 onMessage는 무시되고 토스쪽으로 이벤트가 잡혀서 에러가 나고있습니다.
아 그러시군요...
처음 보고된 내용이라 따로 해결책은 모르겠네요
저도 작성자랑 같은 이슈로 확인중인데.
안드로이드의 경우에만
토스 위젯을 로드한 이후에 다른 웹뷰에 onMessage을 받을때 토스위젯에 onMessage가 호출이 되네요
그래서 기존 웹뷰에서 원래하려던 동작이 되고 있지 않습니다.
<PaymentMethodWidget />
<AgreementWidget />
을 제거하고 일반 <WebView 를 먼저 띄운 이후에 다른 <WebView에 onMessage를 기다리게 되면 정상적으로 호출한 <WebView로 콜백이 오고있습니다.
그리고 해당 화면이 내려간 이후에도 계속 콜백이 계속 토스위젯쪽으로 가네요.
우선 개발팀에 관련 내용 전달해서 해결 방법이 있을지 확인해 보도록 하겠습니다.
영상으로도 한번 전달해주시겠어요?
DM같은걸로 따로 드려도될까요? 아니면 메일같은거 알려주시면 거기로 보내도될가요?
여기 올려주셔도 되고 메일로 주셔도됩니다.
토스페이먼츠 결제연동팀
techsupport@tosspayments.com
V2에는 destory함수가 있던데 v1에는 해당기능을 하는 함수는 따로 없을까요?
네 없습니다.
영상 메일로 보내드렸습니다~
영상 수신했습니다.
혹시 2번째 영상은 어드 부분을 확인해보면 좋을까요?
1번째 영상은 에러나는 상황이고
2번째는 에러 창은 뜨지는 않는데 주소 검색이후에 제가 선택을했는데 이후에 이벤트가 동작하지않아서 화면이 하얗게 됩니다~
앞부분 보시면 토스위젯을 만나지않았으면 이상없이 실행되는데
이후에 토스위젯을 만나면 문제가 발생하는걸 녹화했습니다~
마지막 3번째 시도 말씀이시죠?
12초까지 첫번째 시도는 위젯을 안 만나서 성공한 케이스로 보이고
20초부터는 만난 케이스이죠?
넵 처음만 성공되고 두번째 이후로는 실패케이스입니다
네 20초이후로 만난 케이스입니다
3번째는 실제 화면에 위젯은 없지만
한번 만나고 돌아온 이후라 안되는건가요?
넵~
일단 재현이 안되서 좀 더 확인 중에 있습니다.
저희쪽에서 처리한 내용 공유드리면~
저희가 일반적으로 react-native-webview를 사용하고있는데,
tosspayment-react-native-webview내부를 보면 react-native-webview 를 fork해서 만드신걸로 보이긴하더라구요
일단은 주소입력 웹뷰를 tosspayment-react-native-webview의 webview를 사용하게 변경하니 해당 문제는 해결되었습니다.
react-native-webview와 tosspayment-react-native-webview를 동시에 사용하면 문제가 발생하는게 아닌가 싶은데 react-native-webview 를 RN에서는 많이 쓰다보니 문제가 확인되어서 tosspayment-react-native-webview이 패치되면 좋을꺼같습니다~
공유 감사합니다.
네~ 혹시 내부적으로 관련 내용 검토하셔서 피드백 주시면 감사드리겠습니다~
현재는 tosspayment-react-native-webview 에 의존적으로 사용할수밖에 추후에 영향이 있을꺼같아서 개선되면 좋을꺼같습니다~
네 이해했습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.