네이버 페이 결제 창에서 뒤로가기가 되지 않는 오류
안녕하세요. 하이브리드 웹 (앱내 웹뷰) 에서 토스페이먼츠를 사용하고 있습니다.
1. (자사 앱) 네이버페이 결제 요청
2. 네이버 앱으로 이동하여 앱 로그인
3. (자사 앱) 계좌 등록 화면이 다시 돌아옴.
4. (자사 앱) 오른쪽 상단 X 버튼 클릭해도 뒤로 돌아가지 않음.
위와 같은 문제가 발생하는데, 혹시 저희쪽 웹에서 별도의 조치를 취해야하는걸까요?
+ 영상 첨부하여 공유드립니다.
39 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
테스트 키로 확인하신 내용인가요?
네이버페이는 테스트 환경에서 좀 이상하게 동작하는 경우가 있습니다.
라이브키로 확인부탁드립니다.
네 실제 라이브는 아니고, 테스트 환경입니다!
라이브로 다시 테스트 진행해보도록 하겠습니다. 감사합니다.
@냥과장
한 가지 더 여쭤보고 싶은게 있는데, 테스트환경에서 네이버/카카오페이/가상계좌 등 기타 결제를 시도하면 그냥 일반 카드 결제창이 뜨는 경우가 있는데 (10번에 1번꼴로) 이런 케이스는 테스트 환경에서만 발생하는걸까요?
이거는 위젯이 렌더링 되기 전에 requestpayments 를 호출해서 발생하시는 문제일겁니다.
감사합니다!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
@냥과장
안녕하세요! 지난번 답변주신 내용을 기반으로 테스트중인데, 지속적으로 동일 문제가 발생하는것 같아 다시 질문 드립니다.
requestPayment 함수를 호출하기 전,
paymentMethodsWidget.getSelectedPaymentMethod() 을 호출해봤더니 위와 동일하게 간헐적으로 '카드' 가 선택되어있습니다.
여기서 결제 수단을 변경하고 다시 요청해봐도 동일하게 '카드' 값만 나오게 됩니다.
(토스페이먼츠 github에 올라와있는 react 예제로 테스트중입니다.)
requestPayment 호출 시점의 문제라기 보다 애초에 위젯 렌더링 관련 이슈로 보이는데, 혹시 해결방법이 있을까요?
정확한 현상을 다시한번 확인해보렉요
지금 간편결제가 선택되어있는데(위젯에서) 카드로나온다는 말씀이신가요?
네 맞습니다! 위젯 화면에서 간편결제를 선택한 뒤, 결제 하기 버튼을 클릭할때 paymentMethodsWidget.getSelectedPaymentMethod() 함수를 호출하여 로그를 찍어보면 '카드'로 출력되고 있습니다.
제가 확인해볼 수 잇는 사이트가 있나요?
http://beta.commerce.oilnow.co.kr/test
위 URL에 임시로 배포해놨습니다. 새로고침하면서 결제하기 눌러보시면 해당 상황 재현할 수 있으십니다. (콘솔 로그 참조)
코드는 아래 링크에서 그대로 가져왔습니다.
https://github.com/tosspayments/payment-widget-sample/blob/main/react/src/pages/Checkout.tsx
우선 개발 환경에 대해 말씀드리자면 아래와 같으며,
- NextJS : 13.5.6
- node : 16.20.2
현재 테스트 페이지는 next의 dev script를 통해 배포되어있습니다. prod 빌드로 했을때는 위 현상이 재현되지 않고 있습니다. (하지만 실제 내부 QA 진행시에는 prod로 빌드하며, QA 팀에서 해당 이슈가 보고된것으로 보아 동일한 문제가 발생했던것으로 보입니다)
GitHub
payment-widget-sample/react/src/pages/Checkout.tsx at main · tosspa...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
간편결제 누르고 결제하기 누르면 정상적으로 해당 수단의 로그가 내려갑니다.
환경마다 다르게 내려간다는게 조금 이해가 안되긴 하네요
유추하기로는 빌드환경에따라 렌더링 성능차이가 있을듯한데, 저도 정확하게 원인을 파악하진 못하고 있습니다 ㅜㅜ
양쪽다 사용하는 키값이나 이런것은 같죠?
네 동일합니다!
redering할 때 customerKey보내시나요?
저도 해보는데 재현이 되지는 않네요.
customerKey값이랑 재현하는 시간대 특정해서 보내주시면 로그 확인해볼게요
네 위 github 코드 그대로 사용하고 있습니다.
저희 내부 개발팀에서 지속적으로 테스트중인데 새로고침하면서 반복하다보면 10번에 한번꼴로 발생하고 있습니다.
그대로 사용하시면 저희가 로그 특정이 어렵습니다. customerKey난수값에, 공용 키여서요
customerKey를 임의로 설정해서 재현 후 공유 바랍니다~
아 그럼 저희 key로 수정해서 다시 배포하고 공유드리도록 하겠습니다
네
customerKey : oilnowwebtest
수정 후 다시 재배포 진행했습니다.
11:39am 에 동일 현상 재현 했습니다.
혹시 뭐 캐시 관리하시거나 그런게 있을까요?
로그상으론 가상계좌 > 휴대폰 > 토스페이 > 페이코 정상적으로 선택하신걸로 나옵니다.
웹 코드 내에서 별도의 커스텀 캐시 정책은 사용하지 않고 있습니다.
잠시만요
죄송한대. 한번만 더 재현해서 영상이랑 같이 공유해주실 수 있을까요? (제가 들어가서 확인한거랑 로그가 꼬였네요)
11:47 ~ 11:48 am 에서 재현완료했습니다!
특정 기기나 브러우저에서만 발생하는 것도 아니죠?
네 다른 기기 혹은 다른 브라우저에서도 동일하게 재현되고 있습니다!
확인 후 안내드리겠습니다.
네 바쁘실텐데 확인해주셔서 감사합니다.
추가로 사용중인 sdk 버전 정보도 같이 공유드립니다.
- "@tosspayments/payment-widget-sdk": "^0.9.1"
위에 보내주신 링크랑, 재현하신 환경이 동일한 환경이죠?
혹시 시크릿탭은 아니죠?
dev환경은 로컬인가요? 혹시 react strict mode 영향일 수 있어서요
재현되었습니다 확인 후 전달드릴게요
네 동일한 환경이고, 시크릿탭 아닙니다! 플러그인 문제일까 싶어서 다끄고 했는데 동일한 현상이 발생했습니다!
우선 저희도 dev배포일때만 react strict모드 때문에 발생하는 걸로 확인됬어요
beta 환경에 next start 스크립트를 사용하거나 strict mode를 끈 채로 확인해보길 추천드려요
네 우선 제품 개발에는 크게 지장없을듯합니다. 시간내서 확인해주셔서 감사합니다!
GitHub
payment-widget-sample/nextjs at main · tosspayments/payment-widget-...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
이방식으로 하시면 문제 안발생할 것 같아요~ strinctMode관련 발생하지 않도록 처리했습니다.
감사합니다!