react native webview 토스 결제 시, 무한로딩
react native webview에서 결제 시, intent://pay 로 시작하는 intent url을 받아 실행을 하면 toss앱이 정상적으로 뜨지만 "잠시만 기다려주세요." 라는 문구와 함께 progress bar가 계속 돌아갑니다. AOS에서만 오류가 발생합니다.
react native 버전은 0.72.3 버전이며
react는 18.2.0 입니다.
38 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
우선
저희 웹뷰 위에 웹서버 띄워서 사용하시는건가요?
빠른답변 감사합니다 🙂
웹뷰는 저희 홈페이지로 띄워서 사용하고있습니다.
저희가 제공해 드리는 React Native SDK으로 웹뷰 띄우신건가요?
https://discord.com/channels/864296203746803753/877547393938251848/1169876497553698846
web에서는 팝업을 띄우고 form submit으로 보냈습니다.
react native module 및 sdk는 사용하고 있지 않습니다!
그냥 일반적인 react-native-webview로 띄우신거죠?
네 그렇습니다
여기 참고해주세요
package name등록이 안되어 있어서 그럴거에요
이 문서는 일반 React-native-webview 라이브러리 사용 시에 설정해야하는 가이드입니다
이거 참고해서 개발해 주시면 돼요
현재 react native에 main webview ( 자사 홈페이지를 바라봄)가 있고 second webview( 팝업 및 새창처리용으로, url을 받아 처리 )가 있습니다.
Android Studio와 XCode에 추가해야할 스킴들은 등록이 되어있는 상태입니다.
그럼 주신 정보만으로 어떤 현상인지 확인이 불가합니다.
또한 react-native-send-intent 라이브러리를 사용하여
onShouldStartLoadWithRequest 핸들러에서 intent로 시작되는 url을 처리하도록 로직을 구현하였습니다.
if (event.url.includes('intent://')) {
SendIntentAndroid.openChromeIntent(event.url);
return false;
}
androidStudio에서
에러메세지가 어떻게 돌아오고 있는지 확인해주시기 바랍니다.
실제 웹뷰에서 열려고 시도한 url도 어떤 형식인지 확인이 필요해요
이동 후 android studio logcat에는 별다른 에러내용이 없습니다.
이동한 url 경로는 intent://pay?payToken=9q3ZhooZKQkHDMVq8X3G71&isBnplShop=true&deviceType=mobile&isTossApp=false&appPayVersion=1.0#Intent;scheme=supertoss;package=viva.republica.toss;end 입니다
저 형식으로 이동하면 안됩니다. 웹뷰에서 띄울수 있도록 변환된 내용이 아니에요
제가 알고있는바로는 intent형식의 url을 사용하기위해 react-native-send-intent 라이브러리 안에있는 openChromeIntent를 사용하여 여는것으로 알고있습니다.
혹시 다른 방법으로 구현을 해야하는것인가요?
SendIntentAndroid.openAppWithUri(event.url)
이걸로 열어보시겠어요
네 한번 시도해보겠습니다
openAppWithUri와 openChromeIntent 둘다 토스앱으로 이동 후 "잠시만 기다려주세요." 라는 문구만 출력됩니다
영상 찍어 보내주시겠어요
영상 전달드립니다.
토스페이 연동하실 때 참고한 문서 공유해주실 수 있을까요?
토스앱을 삭제하고 다시 설치해 보실수있을까요?
web쪽은 이전 개발자가 개발을 해놓고 나가서 참고했던 문서를 알 수 없습니다...
그저 단순히 Web에서 form submit을 한게 전부인걸로 들었습니다.
토스앱 삭제 후 재설치해보겠습니다.
계약을 토스페이먼츠와 하셨나요? 아니면 토스페이만 연동하셨나요?
토스페이먼츨와 계약을 했습니다.
히스토리는 기존앱은 native언어로 되어있었고, 현재 react native로 변경중인 시점입니다.
native 앱 및 웹 결제는 정상적으로 작동했었습니다.
토스 외 다른 앱은 이상이 없을까요?
다른 앱이라 하시면 딥링크로 호출하는것을 말씀하시는걸까요?
토스앱을 재설치 하여도 증상은 똑같습니다
카카오페이 / 다른 신용카드사 앱은 정상적으로 이동하는지 문의입니다
카카오페이 및 네이버 페이는 정상적으로 동작합니다
다른 카드사앱은 어떤가요
네이버페이는 원래 외부앱으로 이동안해서 동작이 다릅니다.
혹시 토스 설치 후, 로그인을 해야 진행이 되는건가요?
모든 간편결제는 결제를 사용하려면 로그인이 되어야할 것 같습니다.
비로그인 상태에서 결제 후, 토스앱으로 넘어와서 로딩이 관련이 있는지 궁금합니다!
네 아마 해당이유일 것으로 예상됩니다.
넵 로그인 후, 다시 테스트해보고 공유 드리겠습니다.
로그인상태에서 테스트 시, 성공적으로 결제가 되었습니다.
비로그인상태에서 무한로딩이 걸리는게 맞았네요!
감사합니다!!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.