결제위젯, 브라우저 뒤로가기 문의
안녕하세요
nextjs 15.2.4 버전에 @tosspayments/tosspayments-sdk 2.3.4 버전을 사용중입니다.
데스크톱 환경에서
위젯 로드 후, widgets.requestPayment를 하면
id: tosspayments_payment-gateway_iframe인 iframe이 화면에 랜더링 되잖아요
이 때, 브라우저 뒤로가기를 하면 토스 페이먼츠 위젯은 닫혀야 된다고 생각을 하는데, iframe이 안닫힙니다. 그대로 화면에 동동 떠있습니다. 왜일까요...?
이게 정상적인 상황이 맞을까요? 브라우저 뒤로가기시 위젯 닫기를 제가 처리를 해줘야하는 부분인가요???
예시_페이지B에서 위젯 띄우고, 네이버 페이 선택 후 widgets.requestPayment 실행 -> 화면에 iframe 뜸
브라우저 뒤로가기해서 이전페이지인 페이지A로 이동했을 경우
10 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
React나 Next.js, Vue나 Nuxt.js는 동작방식이 조금 다릅니다.
CSR로 라우팅이 되기때문에 (화면이 깜빡거리지않음) - 토스페이먼츠 결제창 일러먼트가 사라지지 않습니다.
이에 언마운트 될 때 명시적으로 agreementWidget.destroy();, paymentMethodWidget.destroy();를 하시면 해결될 것으로 보입니다.
paymentMethodWidget.destroy()는 이 좌측 이미지 UI 를 삭제하는 명령어이고, 우측 이미지 iframe은 그대로입니다....제가 문의한 내용은 브라우저 뒤로가기를 해도 iframe이 계속 떠있어서 문제입니다....
iframe을 수동제거 하면 안될거같은데 해결책이 있을까요?
모바일이신가요? PC 이신가요?
데스크탑 PC 환경입니다.
PC 환경의 경우 iframe 내에서 결제창이 뜨는데 back 동작이 브라우저 별로 다릅니다.
그래서 back 이 아니라 X 버튼을 눌러서 창을 닫도록 가이드가 되어야 합니다.
유저들이 가이드대로 행동하면 좋겠지만, 현실적으로 그렇지 않기 때문에 최대한 이를 핸들링하려고 합니다. 그렇다면 X 버튼을 눌렀을 때 동작하는 로직을 브라우저의 뒤로 가기 기능에 결합하거나 하는 등.... 문의드렸던 문제에 대한 해결책은 없는거죠? 없다면 브라우저 reload라도 걸어두려구요
X 버튼 누르면 requestpayments 에서 catch로 잡힙니다.
여기서 잡아서 필요한 로직 실행하시면 될것 같아요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.