결제위젯 태블릿 네이버페이/애플페이 blank 페이지 이동 문제
안녕하세요. 아래 내용으로 문제를 겪고 있는데 도움 부탁드립니다.
- React Native앱에서 웹뷰로 토스 결제위젯을 사용 중
- 모바일 앱에서는 동작이 정상적임 (모든 결제 수단에서 결제까지 잘 됨)
- 태블릿 앱에서 결제수단 선택 후 직후 화면에서 blank 페이지로 이동함.
- 네이버페이/애플페이가 위와 같이 동작하고, 그 외 토스페이, 카카오페이 등은 QR 결제 화면이 노출됩니다.
- 네이버페이/애플페이는 데스크탑 웹 브라우저에서는 새 윈도우가 열리게 동작하던데, 관련 동작이 태블릿 앱 내에서도 동작해서 문제가 되지 않나 싶습니다.
어떻게 처리할 수 있나요?
18 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(문제가 발생한 이미지나 전체 결제흐름 동영상을 첨부해주시면 빠른 분석을 받으실 수 있습니다.)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
저희 결제 모듈이 태블릿 (특히 아이패드) 에서는 PC 로 처리를 하고 있습니다. 아마도 만드신 앱내에서 새창을 막아둔게 아닌가 싶은데 이부분 확인부탁드립니다.
아이패드에서는 PC 로 인지하고 결제모듈이 동작하기 때문에 일부 정상적으로 진행이 불가한 경우가 있습니다. 이때는 해당 결제수단을 빼주셔야 할것 같아요.
데스크탑에서는 새 창이 잘 열리는데요, 웹뷰 내에서 새 탭을 처리할 수 있나요?
잠깐 조사해보았을 때는 안드로이드는 가능해보이는데, ios에서는 직접 멀티탭 기능을 만들어야 하는 것 같습니다.
네 이부분은 앱의 구현 부분이라 저희가 뭐라고 가이드를 드리기는 어렵습니다. 실제로 아이패드에서 새창이 열리는 구조도 고객입장에서는 조금 애매한 부분이 있어서요.
현 시점에서 tosspayments tablet에서 네이버페이로 결제가 불가능한 점은 인지했습니다.
근데 tosspayments 계약해서 쓰는 sdk를 쓰는 앱 입장에서 해당 결제수단이 아이패드 환경에서는 활용이 아예 불가능한 현 상태는 결과적으로는 해결이 되어야만 한다고 봅니다.
현재 sdk로는 태블릿에서 네이버페이 결제가 아예 불가능하다면 tosspayments에서 sdk를 업데이트를 통해 수정해주시는게 맞다고 생각하는데 혹시 이에 대한 답변을 주시는게 가능할까요? (현재 sdk에서 만약에 설정같은걸 바꿔서 가능한 시나리오가 있다면 알려주셔도 좋을 것 같습니다.)
이게 저희보다는 네이버페이의 동작방식 때문에 그렇습니다.
네이버페이 정책이 무조건 새창으로 띄워야하거든요.
토스페이먼츠 sdk에서 태블릿 앱 내에서의 네이버페이 동작방식을 모바일 앱에서의 동작방식과 같도록 조건문을 짜셔서 해결하시는건 불가능할까요?
말씀하신 "네이버페이 정책이 새창으로 띄워야함"을 고려하더라도 모바일앱에서 잘 동작하기 때문에 태블릿 앱에서도 불가능하진 않을 것 같아서 질문드립니다!
모바일 처럼 동작하게 하는게 네이버페이 정책 상 어려운거로 알고있긴합니다.
저희가 조치를 해드리더라도 네이버페이에서 user-agent를 바탕으로 모바일일때는 redirect, pc일 때는 새창으로 정책을 삼고 있어요
토스페이먼츠 수정으로만은 개선이 어려운 영역입니다.
웹뷰에서 새탭을 구현하시거나, user -agent를 조작하셔서 모바일처럼 인식시켜주셔야합니다.
안녕하세요. @hanunglee 님의 동료입니다.
idlookmall/교보문고 태블릿 앱에서 "네이버페이"를 했을 경우에는 네이버페이 창(또는 로그인 화면)이 정상적으로 나옵니다.
그러면 이 앱들은 전부 태블릿 앱에서 새창이나 user-agent를 조작했다고 보는게 맞을까요?
네이버페이의 정책에도 불구하고 여러 태블릿 앱들에서 되는 것을 보았을때 저는 토스페이먼츠에서 작업을 하시면 해결이 가능한 범위에 있다는 생각이 드는데 제가 잘못 이해하고 있다면 말씀해주셔도 좋을 것 같습니다.
만약에 토스에서 작업해서는 불가능 하다면 "태블릿 앱에서 토스페이먼츠 sdk에서 네이버페이를 활용하려고 할 경우 정확히 어떻게 연동해야하는가?"에 대한 정확한 방법을 documentation을 통해서 공유해주시는게 좋을 것 같은데 가능할까요?
방법을 말씀주시긴 했는데 정확히 어떻게 해야될지 아직 감이 잘 안오는 상태라서 도움 요청드립니다. 🙇
2번째 앱에서 '퀵계좌이체"를 실행하면 어떤 화면이 뜨나요?
어떻게 구현했는지 확인해보고자 함입니다.
교보문고 앱에서 퀵계좌이체를 실행한 화면을 캡처해주셔도 좋고요
이렇게 뜹니다. (UI를 보니 토스페이먼츠 인것 같다는 생각이 듭니다.)
교보는 자체 UI 구현한거로 압니다.
제가 답변할게요
@kma 2번째 이미지는 어느 앱인지 알 수 있을까요?
양쪽 다 어느 상황인지는 예상이 되나, 정확한 답변을 위해 로그 확이 ㄴ후 다변드릴게요
2번째가 첫번째 메시지의 2번째 영상을 말씀하시는 거라면 idlookmall 입니다.
2번째 메시지의 영상을 말씀하시는 거라면 교보문고입니다.
결론부터 말씀드리면, 두 경우 모두 PG에서는 모바일 앱 환경으로 인식되었습니다.
개별 가맹점이 user-agent를 변경했는지, 혹은 iPhone용 앱만 빌드된 상태에서 iPad에서 해당 앱을 실행한 것인지는 확인이 어렵습니다.
다만 PC로 인식되었을 경우에는, 기존에 귀사 페이지에서 네이버페이 모달이 먼저 표시되며 ‘카드/머니’를 선택하는 화면이 노출되었던 것처럼, 퀵계좌이체 역시 아래 첨부 이미지와 같은 PC용 화면이 노출되었어야 합니다.
PC로 인식되었다면 여기서도 가상키보드가 아니라, 디바이스 키보드가 올라왔어야 하고요
저희가 회피성으로 개선이 어렵다고 말씀드리는 부분이 아닌 점 양해바랍니다.