리액트 네이티브 웹뷰 결제창 오류
안녕하세요. 현재 리액트 네이티브 웹뷰 방식으로 앱을 구동하고 있는 개발자입니다.
결제 위젯이 아닌 api로 결제창을 직접 구동하는 방식(redirect 방식)으로 구현하고 있습니다.
웹과 모바일 브라우저로 결제 테스트 시에는 성공적으로 결제창이 열리는데, 실제 기기나 시뮬레이터로 테스트 할 때는 영상처럼 결제 시 오류 화면이 뜹니다.(안드로이드, iOS 모두 동일)
추가로 결제창 에러 화면에서 닫기 버튼을 눌러도 결제창이 종료되지 않고 뒤로 가기 해야 이전 결제 화면으로 돌아갑니다.
안드로이드 스튜디오에서 에러 로그를 확인해봐도 아래와 같이만 떠서 어떤 에러인지 파악이 힘들어서 예상되는 원인이 있으신지 여쭙고자 문의 남깁니다.
[INFO:CONSOLE(37)] "TossPaymentsError: 잘못된 접근입니다.", source: https://payment-gateway-sandbox.tosspayments.com/payment-gateway/de6607efbd2f880a46f29242f85ef7cc1c3d6ebf/_next/static/chunks/pages/_app-76b1453add8f2b32.js (37)
10 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
웹뷰를 직접 생성하시는 것으로 보이는데, 웹뷰 생성하실때 쿠키나 세션을 사용할수 있도록 설정하셨는지 확인부탁드립니다.
'react-native-webview' 라이브러리의 WebView 컴포넌트에 저희 웹 서비스 uri 전달하는 식으로 띄우고 있고,
자동 로그인 위해 웹 코드에는 쿠키나 세션 사용하는 코드가 있는데, 리액트 네이티브 웹뷰 코드 자체에는 별도로 설정하는 코드는 없습니다.
[INFO:CONSOLE(37)] "TossPaymentsError: 잘못된 접근입니다.", source: https://payment-gateway-sandbox.tosspayments.com/payment-gateway/de6607efbd2f880a46f29242f85ef7cc1c3d6ebf/_next/static/chunks/pages/_app-76b1453add8f2b32.js (37)
에러 재현 후, 사용한 orderId 전달주세요
방금 재현했을 때, requestPayment 메서드에 전달한 orderId는 "UGF5bWVudDo3ODA4MA=="입니다.
네 확인해 보겠습니다.
혹시
GitHub
GitHub - youjun-lee/rn_webview_sample_app
Contribute to youjun-lee/rn_webview_sample_app development by creating an account on GitHub.
이 샘플앱에 만드신 URL 띄워서 재현되는지 확인가능하실까요?
그리고 혹시 실제 device 에서도 동일 현상이 발생하시나요? 저희 로그상으로는 에뮬레이터에서 실행하시는 것으로 보여서요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
샘플 앱은 에러 없고, 실제 device에서도 같은 에러가 발생했는데,
저희 코드에서 비교하며 확인해보니 WebView 컴포넌트의 injectedJavaScriptBeforeContentLoaded에 뒤로 가기 액션 처리 위해 전달되는 코드 때문에 해당 에러가 발생한 것으로 확인되네요.
답변 감사합니다!