노코드툴 버블/토스페이먼츠 결제위젯 - 에러
버블과 토스페이먼츠 결제위젯을 잘 연동하였고, 결제가 잘 이루어지고 있습니다.
다만 이따금씩 결제 버튼을 눌렀음에도 결제 위젯 페이지로 넘어가지 않고 그대로 있는 현상이 나타난다고 고객분들께서 말씀해주십니다.
(그냥 아무것도 안바뀌고 가만~히 있다고 하셨음)
지금까지 2분의 고객으로부터 해당 에러를 보고받았습니다.
첫번째분은 아이폰 XR을 사용하시고 사파리로 들어갔을때 에러가 났으며, 네이버앱으로 들어가니 결제위젯이 다시 잘 떴다고 하였고,
두번째분은 홍미노트10프로를 사용하시고 크롬브라우저로 들어갈때 에러가 났으며, 몇시간뒤 똑같은 방법으로 했더니 다시 잘 됐다고 합니다. (심지어 이분은 며칠전에 잘 결제를 하셨던 분입니다. 오늘 이런 에러가 갑자기 생겼다고 하네요)
이 두 경우를 보았을때는 os나 브라우저의 문제가 아닌것 같긴한데.. 문제의 원인이 무엇인지 잘 모르겠습니다.
위 같은 문제로 문의 주신 분은 2분밖에 안계시지만 자세히 뜯어보니 매일 2~3명이 결제에 실패하고 계신것으로 확인되고 있습니다.
얼른 문제를 해결해주신다면 대단히 감사하겠습니다 😢
30 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
참고로 상점아이디는 emssie1bca 입니당
"결제 버튼을 눌러서 결제 위젯페이지로 넘어간다" 는 의미가 어떤 의미 이실까요?
혹시 사이트를 알려주실수 있을까요?
참고로 오늘 오전에는 결제 위젯에 이슈가 좀 있었습니다. 두번째 분의 경우는 이케이스 이신것 같아요.
첫번째 분은 XR 을 사용하신거라면 ios 버전(사파리 버전) 의 이슈일수 있어서요 혹시 최신버전으로 업데이트 해보실수있을까요?
이렇게 결제 화면으로 넘어가는 거요 🙂


ios업데이트하라고 고객분께 말씀을 전달하겠습니다.
혹시 ios 버전 업데이트가 안된것 말고는 다른 가능성은 없을까요? 아이폰 사파리가 꼭 원인이 아닐수도 있을것 같다는 생각이 들어서...
캡쳐 해주신 방식은 결제위젯의 varientkey 를 넘기지 않으셨거나 없는 varientkey 를 넘기셨을때 발생하는 현상인데요.
이때 사용하신 varientkey 를 확인해 주실수 있을까요?
버블 위젯을 사용하셨다면 자동으로 들어갈텐데 이상하군요.
아.. 지금 emssie1bca 상점을 보니까 위젯 신청이 안되어 있으신것 같습니다.
https://dashboard.tosspayments.com/payment-widget-service/tm/625098/product-profile
여기에서 결제위젯을 신청해 주셔야 할것 같아요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
결제위젯 신청 링크로 가면 이러한 상태입니다.
원래는 이 화면이 아니라 이용 신청하기 버튼이 있었는데... 제가 결제 ui를 하나 더 만들고, 다시 삭제하고 나니까 이용하기 버튼이 사라지고 아래의 사진처럼만 뜨네요..!
원래의 이용하기 버튼도 누르면 에러메세지가 뜨긴 했습니다.

결제 ui 설정 창은 이러한 화면이고, 모바일이나 pc를 누르면 우측과 같은 화면이 뜹니다.


네 이부분 확인해 보도록 하겠습니다.
@김종수/SUS 님 이부분 처리해 드렸습니다. 아마도 이제는 결제수단이 주문서 쪽에서 보이실거에요.
지금 저희가 주문서쪽에 결제수단을 렌더링 했더니 결제위젯 이 렌더링 되는 영역의 width 가 너무 작은것 같습니다.

이부분혹시 늘려주실수 있을까요? 현재 저희가 결제위젯 UI 를 보이도록 했더니 저렇게 표시 되어서
다시 안보이도록 원복시켜 두었습니다. width 늘리는 작업하신후에 알려주시면 다시 UI 보이도록 설정해 드리겠습니다.
width를 늘리는 작업을 했는데, 체크박스가 보이게 되네요.. 저부분을 안보이게 하고 싶은데 어떻게 해야할까요?

버튼을 눌러도 결제화면이 뜨지 않는 에러가 완전히 해결되었다는 말씀이실가요~??
아 잠시만요.
저희가 설정해 드리면 저 체크 박스 위쪽으로 결제관련 UI 가 보이실겁니다.
원래 이것처럼 버튼을 누르고 난 뒤 카드선택 화면이 뜨는게 더 좋은것 같은데
지금은 이렇게 보이네요


어쩔 수 없는 건가용?
지금 신용 체크카드 선택하시면 아래에 드랍박스로 카드사 리스트가 보이실거에요.
네네 보입니다!
그리고 https://dashboard.tosspayments.com/payment-widget-service/tm/625098/ui-setting-list
여기 접속하셔서 라이브 PC 기본UI 를 원하시는대로 편집하시면.
편집하신대로 주문서 페이지에 표시 될겁니다.
질문이 있는데..
1.
지금 처럼 주문서 페이지에 결제 ui가 뜨면, 처음에 언급했던 결제가 안되는 오류는 완전히 사라지게 되는 건가요?
(당연히 그렇겠죠? 주문서에서 부터 결제 ui가 보이니깐..?)
2.
에러가 해결된 것은 좋으나...
지금처럼 주문서 페이지에 결제 ui가 뜨게 하지 않고,
원래처럼 버튼을 누른 후 결제 화면이 뜨게 하고 싶은데 이건 불가한 건가요?
(주문서에서 보이는게 조금 지저분해보여서요)
1. 네 맞습니다.
2. 이전방식으로 연동하실려면 원래 다른 버블 플러그인을 쓰셔야 하는데요.
기존처럼 결제화면이 뜨고 저희 결제창으로 이동하기를 원하시는건가요??
보통은 그렇게 되면 "카드사 선택" 이라는 추가 퍼널이 들어가게 되는 방식이라 결제시에 이탈율이 높아지는 단점이 있어서
보통 가맹점에서는 선호하지 않으시는 방식이긴합니다.
몇가지 질문이 있는데
1. 제가 지금 사용하고 있는 것은 결제 위젯 플러그인이고, 결제 위젯 플러그인은 지금처럼 주문서에 카드선택화면이 뜨는게 올바른 상태 맞나요?
2. 원래처럼 결제창이 뜨게 하고 싶다면, 다른 버블 플러그인 (아마도 결제위젯이 아닌 결제창? 플러그인)을 써야하는 것 맞나요?
3. 원래 상태처럼 하는 (아마 결제창 플러그인?)은 퍼널이 늘어나서 결제 이탈률이 늘어나는 것 맞나용?
4. 저는 지금까지 결제 위젯 플러그인을 썼는데 어떠한 오류로 결제창 플러그인을 사용하는것 처럼 결제창이 뜨고 있었던건가요?
5. 처음에 말씀하셨던 varient key?는 제가 별도로 설정할 것 없이 해결된 것 맞을까요?
1. 네 맞습니다. 결제위젯은 주문서 안에 결제관련 화면이 뜨는 제품이에요.
2. 네 결제창 플러그인을 쓰셔야 원래 결제창이 뜹니다.
3. 일반적으로 저희가 가지고 있는 정보나 대형 가맹점의 경우 주문서 안에서 카드사를 선택하는 방식을 쓰고 있습니다.
지마켓이나 롯데온 등 대부분의 커머스가 이렇게 사용하고 있습니다.
4. 결제위젯 사용 설정이 안되신 경우에 위젯을 연동하시면 에러를 내지 않고 결제창으로 처리되도록 방어로직이 있습니다..
5. 이 방어로직에 문제가 생겨서 문의주신 이슈가 발생한것 이고 지금은 해결이 되었습니다.
결론적으로 말씀드리면 결제창 방식을 쓰시려면,
- 결제창 플러그인을 연동을 다시 하시는게 기본적인 방법입니다.
하지만 만약 이전상태(위젯을 연동했지만 결제창이뜨도록 방어로직이 적용되는) 로 사용을 원하시면 그렇게 처리를 해드릴수도 있을것 같아요.
어떤식으로 사용하실지 생각해 보신후에 말씀해주시면 선택하신 방식으로 처리 되도록 해드리겠습니다.
결제창 플러그인을 다시 설치하는 귀찮음 없이, 지금 상태에서 방어로직으로 결제창이 열리게끔 처리해주시면 감사하겠습니다.
다만 이렇게 되면 처음에 발생했던 문제 = 버튼을 눌러도 결제창이 열리지 않는
다시 발생하게 될까봐 우려됩니다.
네 해당 처리가 예외적으로 처리 되는 방식이다 보니, 이후에 동일 이슈가 발생하지 않는다고 보장해 드릴수 없습니다.
만약 그부분이 걱정되신다면,
현재상태로 사용하시거나 결제창 플러그인으로 재연동 해주셔야 할것 같습니다.
아하..! 그냥 결제 위젯으로 이용하겠습니다 🙂 혹시라도 추후에 문제가 생기면 여기에다가 다시 여쭤보겠습니다.
정확하고 빠르게 대응해주셔서 정말 감사합니다~!!
네 감사합니다. 언제든 이슈 있으면 디스코드로 문의 주세요.