웹 뷰에서 위젯 결제 수단 창이 안나옵니다.
결제 수단 창을 렌더링할 div태그에 id="#payment-method"를 설정했습니다. 모바일 웹 및 데스크탑에서는 잘 렌더링 되는데 웹 뷰 안에서는 렌더되지 않습니다. 혹시 어떤 이유일지 알 수 있을까요?!
45 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
콘솔창에 에러가 보이나요?
따로 보이는건 없습니다.
자바 스크립트를 웹뷰 설정에서 막으신건 아닌지 확인부탁드립니다.
react-native-webview인데 따로 막는 옵션을 준건 없습니다.
javaScriptEnabled 를 해주셨나요? 막는 옵션이 아니라 사용하는 옵션을 설정해 주셔야 합니다.
아.... 따로 설정을 해야하는군요... 이런것까지 알려주시고 너무 감사합니다!
음... javaScriptEnabled 를 해주었는데도 안나오긴하네요... 설정들을 좀 더 알아보겠습니다.
설정해 보시고 결과 공유 부탁드립니다.
javaScriptEnabled 했는데 안나오고 있습니다.
보통 이런옵션들도 같이 쓰긴 하는것 같습니다.
javaScriptEnabled
domStorageEnabled
startInLoadingState
mixedContentMode="always"
저희가 RN 개발자가 아니어서 정확하게 가이드 못 드리는점 양해 부탁드립니다.
네 감사합니다. 우선 저 위에 옵션들을 모두 주었는데도 렌더가 안되네요... 옵션들은 조금더 조정해보겠습니다.
웹뷰를 디버깅 해보셔야 할것 같아요..
결제 수단창이 iframe이면 어떤 url을 load하나요? webview내 iframe 이슈인것 같은데 http:// 인가요?
질문 주시는 사항을 조금더 자세하게 이해해 보고 싶은데요.
지금 RN Webview 에서 결제연동한 웹 띄우고 있으시지요?
혹시 위젯 렌더하는 div 가, iframe 상에 위치하고 있나요?
GitHub
GitHub - react-native-webview/react-native-webview: React Native Cr...
React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.
결제 연동한 웹이라는 말이 어떤 말씀이신가요?
WebView source 를 URL 로 명시하고 있지 않으신가요?
위젯을 렌더하는 div는 iframe상에 위치하지 않습니다.
WebView source uri 를, 결제를 연동한 웹의 URL 을 명시하는 방식으로 띄우고 계신지 질문 드렸어요
webview source는 저희 웹 사이트입니다.
webview source는 저희 웹 사이트이고 nextjs, react로 배포된 페이지입니다.
웹 뷰내 페이지에서 구매를 누르면 결제 수단 창을 띄우고 있습니다.
네, 그러면 source 는 결제를 연동한 웹을 불러오는 방식으로 구현 하신거고,
현재 문제가 발생하는 것은 AOS 인가요? iOS 인가요?
OS Native 쪽 문제는 혹시 아닐까 확인 해보려고 해요
AOS에서는 나오고 있습니다.
IOS에서 뭔가 허락해줘야 하는거 같은데
우선 캡쳐한 이미지대로 info.plist를 수정해서 빌드했을떄도 나오지 않고 있습니다.
render 가 안된다고 하셨으니, 아직 plist 까지 보는 이슈는 아닌것 같아요
그래도 이슈에 조금 더 다가간것 같습니다
디버깅은 혹시 해보셨나요?
디버깅은 아니지만 react-native-webview error 핸들러로 확인했을떄 나오는 에러는 없었습니다.
동일 사이트로,
PC, AOS RN webview 에서는 문제 없었고,
iOS RN webview 에서는 동일 페이지에서 위젯 렌더가 안되는데,
에러 핸들러에서는 아무런 에러가 보이지 않는다
이것이 제가 이해한 것인데, 맞을까요?
네 맞습니다. 추가로 모바일 웹에서도 잘 나옵니다.
IOS 앱에서만 나오지 않고 있습니다.
이게 웹뷰내 iframe에서 로드하는 source를 os단에서 막고있는게 아닌가 하는 생각이 듭니다.
음 이상하네요
iOS native webview 에서 js widget 을 제한 한다는 게 있는지 모르겠네요
저도 구글링 해볼게요
네 감사합니다!
혹시 모르니까
AOS, iOS webview에 명시된 source link 가 다른것은 아닌지 가볍게 확인 해보실 수 있을까요?
위젯 렌더가 안되는거면, 혹시라도 API client key 가 잘못 설정된것은 아닌가도 같이 의심이 되어서 확인 요청 드려요
저희 웹 페이지 링크를 말씀하시는건가요?
네네 맞습니다
여러 가능성 있는 모든 것을 보려고 해요
웹 페이지 링크는 맞습니다. 웹에서 수정하면 바로 반영이 되고 있습니다.
같은 API client key로 IOS 앱에서만 렌더가 되지 않는 상황이라서 Client key도 맞습니다.
이상한건
결제 창도 iframe일텐데
결제 창은 나오고 결제 수단창은 안나오는게 이상합니다.
결제창이 나온다는 것은, widget 방식이 아닌 javascript SDK 호출 방식으로는 호출이 된다 라는 말씀 일까요?
위젯 인스턴스 초기화 코드입니다.
같은 인스턴스에서 renderPaymentMethods, requestPayment 메서드를 스텝에 나눠서 호출하고 있습니다.
widget방식과 sdk 방식이 다른거군요.
div 태그에 id="payment-method"를 부여하고
tossPaymentsWidget.renderPaymentMethods('#payment-method', paymentInfo.amount)
이렇게 호출하고 있습니다.
div 태그는 react-modal 내부에 있습니다.
iframe에 로드하는 결제 수단 창은 혹시 http://을 로드하나요?
프로토콜 트래픽 허용은 AOS 쪽 인것으로 알고 있는데요.
저희뿐 아니라 카드사 창도 같이 고려해야 하기때문에 HTTPS, HTTP 다 허용 해야 합니다
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md
이 방식으로 디버그 해보시고 에러 확인해보신것 맞으실까요?
GitHub
react-native-webview/Debugging.md at master · react-native-webview/...
React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.
inspector 에 렌더가 안되면 어떤 방식으로든 에러가 있을것 같아서요
https://happyer16.tistory.com/entry/React-Native-Webview-%EB%94%94%EB%B2%84%EA%B9%85-%EA%B0%80%EC%9D%B4%EB%93%9C?category=683030?category=683030
스크립트 - 위젯 렌더가 안되므로 이 방식으로 에러 캐치 해보실 수도 있을것 같고요
IT 메모장
React Native Webview 디버깅 가이드
해당 글은 https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md 를 보고 번역하였습니다. ( 리액트 네이티브 웹뷰에서 다양한 스크립트를 실행하여 다양한 상황이 발생했는데 이를 추적하기가 쉽지 않았습니다.) Script Errors 웹뷰에서 발생한 syntax error, script error를 디버깅하기는 쉽지 않다. 왜냐하면 기본적으로 error를 console 창에 보여주지 않기 때문이다. ( 만약 HTML을 외부사이트에서 로딩하는거라면 ) content가 load 되기전에 error handler를 ...
https://dev.to/hrishikeshps/how-to-debug-react-native-webview-18cp
Github 에 명시된 방법을 조금 더 풀어서 설명하고 있는 사이트 입니다
사파리에서 inspector 통해서 에러 한번 확인 부탁 드려요
DEV Community
How to debug React Native WebView
Assuming that you have already started working with React Native and possibly began to check how to...
답장이 늦었습니다...
혹시 어떤 변화가 있었나요? 민망하게도 어떤 이유인지 모르겠으나... 렌더가 되고있습니다....
계속 ios 디바이스에서 테스트를 진행했었고, 답장이 늦었던 몇 시간동안 제 변화는 xcode를 14.3(최신)으로 업그레이드하고 현재 m1 프로세서에서 rn simutlator 빌드는 rosetta를 사용해야해서 디버그를 위해 rosetta빌드로 바꿨을 뿐인데 렌더가 되고있습니다...
조금 찝찝하긴 하지만 서비스 런칭을 앞두고 있어서 이유를 명확히 하지는 못할듯합니다.
늦은 시간까지 신경써주셔서 정말 감사드립니다!
이유를 알았습니다.
react-native-webview의 props 중 onShouldStartLoadWithRequest에서 url요청에 대한 제어를 하고 있었는데, 저희 웹 페이지 이외에 요청에 대해서도 제어하고 있었습니다. 최상위 프레임만 제어하하고 토스 iframe에서 요청하는 url에 대해서는 제어하지 않는 로직을 추가했습니다.
덕분에 얻어가는게 많습니다. 그럼 내일 하루도 좋은 하루 보내세요!
아 AOS 및 다른 플랫폼에서 동작했던 이유는 target="_blank" 으로 새 페이지에서 로드하기 떄문입니다. 그런데, react-native-webview에서 IOS는 target="_blank", 새 페이지로 열기를 지원하지 않습니다. 관련 PR이 있고 추가 예정에 있는걸로 보입니다. onShouldStartLoadWithRequest 핸들러에서 새 페이지에 대한 제어는 하고 있어서 다른 플랫폼에서는 정상 렌더가 되었습니다.
그럼 수고하세요!
이 쓰레드에서 많은것을 배웠습니다
네 고생많으셨겠네요.. 고민하신 지점을 공유해 주셔서 이후에 RN 사용하시는 분들께 많은 도움이 될것 같습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.