결제창 커스텀 문의
토스페이먼츠 연동 과정 중 결제창 커스텀화 관련하여 문의드립니다.
현재 저희 서비스는 다음과 같이 동작하고 있습니다. (Next.js)
1. 메인 화면에서 결제하기 버튼을 DialogTrigger로 만들어놓고, 클릭하면 위젯창이 DialogContent로 뜸
2. 위젯창에서 결제하기를 누르면 requestPayment 동작
문제는 requestPayment를 눌렀을 때 나오는 결제창이 클릭되지 않고, 위젯창의 버튼만 활성화된다는 점입니다.
혹시 결제창의 css 속성 등을 바꿀 수 있는 방법이 있을까요?
감사합니다.
21 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
증상을 영상으로 보여주시겠어요
1) 토스 결제창이 뜨고 휴대폰 번호를 눌러도 안눌림
2) 뒤에 위젯창 버튼들은 눌림
3) 위젯창을 끈 다음에는 결제창 휴대폰 번호가 눌림
혹시 저희가 생성하는 iframe 에 속성을 변경하고 계신가요?
https://discord.com/channels/864296203746803753/1359430118086541434/1359457232483520562
비슷한 케이스 인것 같아서요.
아니요 속성 변경하는 것 전혀 없습니다 ㅜㅜ
혹시 속성을 추가해야 의도한대로 동작하려나 싶어서 여쭤본거라서요
그게 아니라면 팝업으로 띄우시는 창의 z-index 를 조정해 보시면 어떨까요?
인프런이 비슷하게 되어 있는데 인프런 사이트는 이슈 없는지 확인부탁드립니다.
팝업으로 띄우는 창이 위젯창을 말씀하시는걸까요 아니면 그 후의 결제창을 말씀하시는걸까요?
인프런에서는 해결을 하셨나보네요
개발자모드에서 저희꺼는 iframe id가 tosspayments_payment-gateway_iframe라고 뜨고, 인프런에서는 _tosspaymentsiframe이라고 뜨는데 혹시 중요한 차이가 있는걸까요?
버전 차이때문에 그런거 같은데 큰 차이는 아니에요
@yoi! 님 이거 저희가 재현해 볼수 있을까요?
@Kimoon Lee 실제 프로덕트 도메인은 proofy.kr이고, 여기서 폼 입력하셔서 결제화면까지 가시면 확인하실 수 있습니다. (첫 화면 분기점에서 "그 외"를 고르시면 빠릅니다.)
이걸로 충분하신지, 아니면 코드를 일부 드리면 좋을지 말씀해주세요!
혹시 몰라 위 창과 직접적으로 관련된 파일만 전달드립니다. page.tsx가 폼 입력하는 과정 전체 코드이며, 결제화면이 구현되어있는 PaymentWidgetModal.tsx를 임포트해서 씁니다.
결제위젯 렌더링하는 다이얼로그에 pointer-events: auto; 스타일이 적용되어 있는데 이걸 빼주세요.
@Kimoon Lee 님,
일단 저희가 코드에서 따로 설정한 게 아니라는 점을 전달드리며
개발자모드에서 스타일을 지워보니 위젯창 버튼에 마우스를 올려도 버튼으로 인식을 안하고, 아무대나 클릭 하면 뒷 배경을 클릭한 것으로 치는지 위젯창이 꺼집니다.
흠.. 그렇군요. 내부적으로 확인해 보도록 하겠습니다.
오픈준비중이실텐데 혹시 계획하시는 오픈날짜가 있으신가요?
저희도 radix ui를 써서 테스트해보니 동일 문제가 발생합니다
radix ui 모달하고 충돌이 있는 듯 하네요 ㅠ
네 그런것 같아서 저희 쪽 모달에 style 추가가 가능할지 확인중입니다.
감사합니다!
사실 이미 오픈은 했습니다! 뒤에 눌러서 얼떨결에 끄고 나면 결제가 진행되어서, 이렇게 하고는 있습니다...!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
@Kimoon Lee 확인되신 후에 알려주시면 감사하겠습니다..!!
네 확인중입니다. 결정되는대로 공유 드릴께요.