현대카드 결제 이슈 문의
안녕하세요 저번에 현대카드 결제관련 이슈 문의드린 후 가이드 주신대로 적용했지만 아직까지 해결이 되지않아 한번더 문의드립니다.
https://docs.tosspayments.com/guides/v2/webview
상단의 웹뷰 연동 가이드 대로 전부 진행했지만 이상하게 현대카드만 카드사 화면 진입후 버튼 클릭시 아무 반응이 없습니다.. onShouldStartLoadWithRequest 부분도 타지않아 urlConverter에 진입조차 하지 못하고있는 상황입니다 혹시몰라 webView whiteList도 체크했지만 모든 도메인을 허용 하는 중이라 크게 문제는 없어보이는 상황입니다 앱 스킴 제어는 현재 onShouldStartLoadWithRequest 부분에서 intent, http://, https:// 등을 분기처리하지만 애초에 해당 함수조차 타지않아 원인 찾기가 힘든 상황입니다..
logcat 정보에는 아래처럼 Error 문구가 발생하긴 하는데 저부분은 실제 현대카드쪽에 문의해야 하는 상황일까요?
[INFO:CONSOLE:230] "Uncaught TypeError: platform.parse is not a function", source: https://ansimclick.hyundaicard.com/pizza/mobile/js/hcc_pizza.js?202507062304023815675336251881 (230)
1. 앱스킴 적용완료.
2. AndroidManifest.xml 파일에 은행앱 패키지 적용 완료.
3. webview whitelist 문제 없음(와일드카드는 * 로 설정되어있어 현재 모든 도메인 허용)
4. @tosspayments/widget-sdk-react-native 설치후 ConvertUrl 로직 적용 완료(하지만 onShouldStartLoadWithRequest 조차 접근하지못해 ConvertUrl을 타지 않는 상황)
웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터
모바일 웹뷰 결제는 앱투앱(App to App) 이동이 필요한데요. 결제기관의 앱스킴 목록과 OS별 이동 방법을 알아보세요.
15 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
이때 가이드 드렸었는데요
https://discord.com/channels/864296203746803753/1387298428903624714/1387318182930288741
혹시 테스트는 여러개의 폰으로 확인중이실까요?
다른 카드는 이슈가 없는지도 확인해주시구요
결정적으로 PG와 관계없는 내용이라서 도움드리기가 어려운 면이 있습니다
네 여러대의 폰으로 테스트해도 동일증상이 발생하며 현대카드를 제외한 모든 카드에서는 정상동작하는것을 확인했습니다.
말씀하신대로 PG 는 완벽하게 동작하며 이슈없는 부분이지만 가이드 주신대로 모두 적용해도 같은 상황이라 도움을 구할곳이없어 혹시 저말고 이런케이스가 또 있었을까 해서 문의드렸습니다
답변 감사드립니다.
따로 보고된 케이스는 없습니다.
[INFO:CONSOLE:230] "Uncaught TypeError: platform.parse is not a function", source: https://ansimclick.hyundaicard.com/pizza/mobile/js/hcc_pizza.js?202507062304023815675336251881 (230)
우선 에러메세지 자체가 pg쪽이 아니라 플랫폼 쪽입니다.
외부앱여는 쪽으로 디버깅해보시길 추천드려요
네 차장님 실장님 답변 감사드립니다 자사 플랫폼쪽 관련 개발자가 없어 제가 임시로 해결하는중 너무 답답한 나머지 계속 문의드린점 다시한번 죄송하다는 말씀 드립니다 아무쪼록 빠른 해결후 혹시라도 저희와같은 이슈가발생한 다른 케이스에 대해서 조치할수있도록 해결방법도 꼭 공유 드리도록 하겠습니다 감사합니다.
네 저희 pg와 관련된 에러이면 도움드릴텐데, 이건 앱 쪽이 이슈라 아무래도 도움이 어려운 점 양해바랍니다.
웹뷰에 웹서버 띄우시는 방식인가요?
네네 PG쪽은 아무 문제 없습니다!
아 네 맞습니다
웹뷰에 웹서버를 띄우고있습니다
현대카드 결제관련한 이슈가 예전에도 이쪽에 문의사항으로 올라온적이 있더라구요 그래서 그거 참고해서도 해결해보려했으나 계속 동일현상이 발생하네요 ㅎㅎ..
예전 그분은 webview whitelist를 수정하셔서 해결하신거같은데 애초에 저희는 앱스킴 제어하는곳이나 RN 에서 외부 도메인모두 허용되어있는지라 해당문제는 아니라고 판명되고 아까 말씀주신 아래 문제로 현재 해결 중에 있습니다
[INFO:CONSOLE:230] "Uncaught TypeError: platform.parse is not a function", source: https://ansimclick.hyundaicard.com/pizza/mobile/js/hcc_pizza.js?202507062304023815675336251881 (230)
현대카드외에는 다되나요?
네 현대카드 이외 다른앱들은 전부 정상 결제 확인 했습니다.
느낌상 현대카드쪽은 바로 앱스킴으로 연결되는게아닌 js 로직을 한번 타고 앱스킴이 이동되는것 같은데 그와중에 저 함수가 모종의 이유로 발동하지않아 실제 현대카드 앱카드 결제 버튼을 눌러도 이동하지 않는것으로 추측하며 해결중에 있습니다
GitHub
GitHub - youjun-lee/rn_webview_sample_app
Contribute to youjun-lee/rn_webview_sample_app development by creating an account on GitHub.
한번 여기서는 이슈 없나 한번 확인해보셔도 좋을 것 같아요
이실장님 감사합니다 공유주신 프로젝트 클론해보고 자사 플랫폼 프로젝트와 비교하며 해결 후 결고 회신 드리도록 하겠습니다.
이실장님 전달해주신 샘플 프로젝트에서는 정상동작 하는것을 확인하였으며 드디어 문제를 찾았습니다.
자사 프로젝트 내부에 아래와 같은 코드가 기존에 존재했었는데요 해당 코드를 임시로 주석처리하니 드디어 현대카드 결제가 정상적으로 완료되는것을 확인 했습니다 정확한 사유는 좀더 자세한 트러블슈팅이 필요한 상황입니다만 아래 인젝션 하는 자바 스크립트 코드가 모종의 이유로 현대카드 쪽 앱실행 함수와 충돌하여 이슈가 발생한것으로 확인했습니다.
const INJECTED_JAVASCRIPT =
(function() {
window.platform = '${Platform.OS}';
true;
})();
;
자세한 트러블 슈팅결과를 추가로 전달 드립니다.
기존 현대카드의 앱실행 및 결제 버튼 클릭시 hcc_pizza.js에서 platform.parse() 함수를 사용하는것을 확인
자사 프로젝트 내부에 주입된 코드에서 window.platform = '${Platform.OS}'로 platform을 문자열로 덮어쓰는 현상 발생
결과적으로 로그캣 탐지결과 아래 이슈 발생함
[INFO:CONSOLE:230] "Uncaught TypeError: platform.parse is not a function", source: https://ansimclick.hyundaicard.com/pizza/mobile/js/hcc_pizza.js?202507062304023815675336251881 (230)
초반 WebView 로드 시 주입된 JavaScript가 먼저 실행되고 현대카드 JavaScript 라이브러리보다 먼저 platform 객체를 덮어씀 그래서 현대카드 코드 실행 시 필요한 함수들이 사라진 상태로 판단
결론: RN내부에서 현대카드 앱 스킴이 실행되지 않을경우 INJECTED_JAVASCRIPT 시 window.platform 객체관련 코드를 주입하지 않으면 해결가능 단 꼭 필요하다면 platform 객체에 의존하지 않는 독립적인 JavaScript 코드를 따로 테스트 후 사용 권장해결되셨다니 다행입니다.
정말 감사합니다 공유해주신 샘플 프로젝트처럼 최소한의 기능으로 주석처리하면서 테스트해보다 혹시나 주입된 js코드의 간섭이 문제가 아닐까싶어 동작을 확인한결과 정상적으로 해결되었습니다 정말 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.