iframe 포커스 역전 현상
안녕하세요
결제 위젯을 사용해 연동하는 중입니다
결제 방법을 선택해서 결제 진행을 하면
선택한 방법의 결제를 위한 iframe이 하나 더 노출되는데
마우스를 통한 상호작용은 여전히 뒷편의 결제 방법 쪽에 머무르는 것 같습니다
어떤 것을 더 확인해보면 해결할 수 있을까요?
7 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
PC 에서 하시는건가요?
iframe 안에서 다른 페이지를 로딩해서 결제위젯을 렌더링 하시는것 같은데요. 이방식으로는 정상적으로 결제가 안될겁니다.
메인페이지에서 div 로 직접 결제위젯 렌더링 까지 해주세요.
저희 서비스에서는 iframe을 사용하고 있지 않습니다
dialog가 열리면 renderPaymentMethods, renderAgreement로 결제 방법을 렌더링하고
결제 방법 선택 후 결제하기 버튼을 클릭하면 requestPayment를 통해 해당 방법의 결제 모듈이 렌더링 되는데
보이는 것과 다르게 포커스는 결제 방법이 렌더링 된 dialog에 머물러 있습니다
qr로 결제하는 토스페이로 시도하면 결제 등은 정상적으로 잘 됩니다
dom 같은거 잡아서 그 위에 위젯 띄우시는것처럼 보이는데요.
아니면 frame 태그를 사용하시거나요
뭔가 위젯을 띄우는 div 같은 부분을, 별도 띄우고 있으신것 같습니다.
저희 위젯은 저렇게 제공하고 있지 않아서요.
div#tosspayments_payment-gateway_dimmer 엘리먼트에 명시적으로 pointer-events: auto; 스타일을 주입해주면 마우스 이벤트를 먼저 캡쳐하게 되네요
해당 엘리먼트는 저희가 생성하는 것이라서 별도로 스타일이나 핸들러를 추가하시면 오류가 발생할수 있습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.