웹사이트 토스 위젯 설치 문의
안녕하세요, 버블로 토스 위젯 설치&결제 완료까지 되는데
완료 후 success 페이지로 이동이 안되고
기존 제품 구매 페이지에서 cms 데이터 정보가 안보이는 (페이지 뼈대만 보이는)형태로 뜹니다.
<희망>
ㅇ 결제 완료가 되면 success 페이지로 이동하게 만들고 싶습니다. 어떻게 해야 될까요?
182 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
workflow에 [confirm payment] 다음에 [success 페이지로 이동하라]고 인위적으로 적용하면 토스 위젯이 안뜨고 바로 success 페이지로 가버립니다.

widget success는 인증 완료시에 자동으로 가는 페이지입니다.
근데 workflow 구현을 잘못하셨네요.
저희 가이드 보고 따라해주세요.
네~

노션에 있는대로 결제페이지, widget-success 페이지에 workflow도 다시 지우고 했는데
테스트해보면 위에 에러가 뜹니다.
원래 에러가 없었는데 왜 이렇게 뜨는 걸까요?
이거는 페이지에 저희가 제공하는 위젯을 추가하지 않으신것 같은데요.
page 위에 저희가 제공하는 위젯을 올려놓으셔야 합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
안녕하세요, 문의드렸던 페이지에 이렇게 위젯이 적용 되어있는데 해당 에러가 뜹니다ㅜ

그리고 이건 다른 페이지인데 결제 창의 카드사만 보입니다.

(결제 버튼 안보임)
결제버튼은 직접 구현하셔야 해요~
결제버튼은 가맹점에서 버튼을 만들어서 누를 경우 requestPayment가 호출되도록 플로우를 짜주세요
Ayaan 님 말씀대로 결제버튼은 직접 만들어 주셔야 합니다.
가이드보면 결제버튼 넣는것도 있어요.
첫번째 에러가 발생한다는 페이지는 해당 페이지 URL 알려주시면 한번 확인해 보겠습니다.
내부에 사용하시는 다른것과 충돌나는게 아닐까 싶네요.
결제 버튼 만들어서
결제 버튼을 누르면 저렇게 뜹니다.
유튜브에 버블-토스 연동 영상 보면서 만들었을 땐 저 에러가 안났는데 노션에 있는 내용대로 만들고나니 갑자기 저렇게 에러가 뜹니다.
냥과장님 개인 다이렉트 메세지로 링크 보내드렸습니다.
저희 DM받지 않습니다.
💡 정보 제출
아래 버튼을 눌러 외부로 노출되기 민감한 정보를 제출해주세요
여기로 제출해주세요
프리#3265
정상적으로 제출되었습니다.
발송했습니다
프리#3265
정상적으로 제출되었습니다.
네 받았습니다. @냥과장 님이 이따 확인해주실거에요
네 감사합니다.
우선 해당 페이지에 토스페이먼츠 위젯이랑 일반 결제창 2개가 모두 들어가 있는것 같습니다.
일반 결제창용 플러그인은 삭제해주세요.

(에러 문구 뜨는 페이지) 에는 paymentwidgetA 한개만 설치되어 있습니다
"결제하기" 버튼이 상단에 1개, 하단에 1개 있습니다.
하단 버튼 workflow는

상단 버튼 workflow는

이렇게 만들었는데 둘 다 클릭하면 보내드린대로 에러창이 뜹니다.

네 그런데 지금 돌아가는 페이지를 보면 일반 결제창 플러그인도 있는것으로 보입니다.
플러그인설치 페이지에 해서 해당 플러그인을 아예 언인스톨 해보실수 있을까요?
아 네네
토스 일반 플러그인을 삭제하고 결제하기를 눌렀는데 같은 메세지가 뜹니다ㅜ

아니면 담당자님, 해당 페이지를 결제창까지 뜨는 페이지랑 WORKFLOW를 똑같이 만들건데
처음 보내드린 링크 페이지에 어떤 문제가 있는지 확인해주실 수 있으신가요??

원래는 창에 '결제가 안되는 테스트용입니다' 라고 옆에 뜨고, 카드사 선택하면 바로 카드사 결제 창이 떴었습니다.
이전에 테스트용입니다 라고 뜨는건 일반 결제창이고 지금 띄우신건 결제위젯입니다.
지금 보면 아래 값들이 안넘어와서 화면이 안뜨는 것처럼 동작하네요.

그렇군요..
어떻게 해야 작동이 될까요?
호출 하는 시점에 이 값들이 정상적으로 들어오는지 확인이 필요해 보입니다.
지금 새 페이지에서 연동하시면 잘 동작하시는 건가요?

똑같이 카드 선택해도 따로 카드사 창이 안뜹니다



Preview 모드에서는 뜨는데
실제 웹사이트에서는 카드사를 선택해도 카드사 창이 뜨지 않습니다
여기 주소 알려주실수 있나요?
pay_test 페이지 입니다
지금 다시 preview 모드로 들어갔는데 preview 모드에서도 창이 안뜹니다ㅜ
일단 위젯의 width 를 늘려주세요.
아 네
위젯 사이즈를 바꾸니
창이 뜨네요!
에러난 페이지도 다시 사이즈 바꿔보겠습니다
그리고 페이지의 layout도 column 으로 바꿔주세요.

이것때문에 결제하기 버튼이 안보입니다.
이제 잘되시는것 같아요.
네 맞는 것 같습니다. 결제창 안뜬 페이지는 사이즈를 늘려보겠습니다. 감사합니다.

같은 에러가 뜨네요ㅜ
네 이건 사이즈 이슈는 아닙니다.
네 그런 것 같습니다.

플러그인에 전달되는 clientkey customerkey amount 값이 정상적으로 전달되는지 확인부탁드립니다.

고객 데이터를 만든다고 workflow 앞에 두개 단계를 만들었는데 이게 문제였을까요?
여기에서 paymentkey 를 왜 받으시는 건가요?
paymentkey는 결제 데이터에 있어서 만들어 놨는데
순서가 잘못된거죠?
paymentkey 는 widgetsuccess 에서 받으실수 있는 정보입니다.
네네 방금 지우고 다시 deploy to live 했는데
여기 값은 어떻게 넣고 계신가요?

clientkey - 토스 클라이언트키, customerkey - 토스 시크릿키

amount는 장바구니 페이지에 있는 총가격이랑 똑같이 넣었습니다.
customerkey 는 토스 시크릿키가 아닙니다.
사용자를 지칭하는 값으로 넣어주세요.

그렇군요
바꿨습니다! 그래도 같은 에러가 납니다ㅜ
버전을 1,6,1로 올렸는데, 이걸로 플러그인 버전 바꿔보실수 있을까요?
올리신 값이 정상인지확인해 봐야 할것 같습니다.
Hello there. Do you know English?
아 네네
저는 1.6.0이 가장 최신으로 나옵니다.

1.6.1이 보이면 그걸로 업데이트 하고 알려주세요 버블쪽에 딜레이가 있는것 같네요.


방금 떠서 적용하고 live 해봤는데 같은 에러가 뜹니다.
위젯 삭제하고 다시 add 해주실수 있을까요?
초기화 자체가 안되는 것으로 보입니다.
그리고 가능하시면 지금 결제창 정상적으로 보이는 페이지에 다른 기능을 붙이기시를 권장드립니다.
이 페이지에만 이슈가 있는데 버블 특성상 어떤 걸 추가 하셨는지 제가 다 알수가 없어서 뭐가문제인지 확인해 드리는게
거의 불가하네요.
네 알겠습니다 제가 다른 WORKFLOW를 추가하면서 문제가 생긴것 같습니다ㅜ 확인 감사합니다.
혹시 paymentwidget 을 페이지의 최상단이 아닌 다른곳에 추가하셨는지하고,
paymentwidget 의 visible이 true 로 설정되어 있는지 확인부탁드립니다.
지금 증상은 저희 plugin 이 초기화 되지 못하고 있어요.
workflow 이슈는 아니고 페이지 구성 관련 이슈 같아요.
If you're not employee with @프리 please go global-support and create new ticket in there
네 그렇게 해보겠습니다 답변 감사합니다~
안녕하세요, 오늘 다 삭제하고 다시 결제 위젯을 적용했는데 처음에는 live 사이트에서 카드사 팝업까지 떴습니다. 그런데 'X(취소)'버튼을 누르고 나서는 그 뒤로 카드사 팝업이 안뜹니다.
그리고 카드사 선택하는 부분 옆에 할부개월수도 안뜹니다.
창을 껐다가 다시 켜보기도 하고 로그아웃도 해봤는데 똑같이 문제가 생겨서 문의드립니다.
할부는
5만원 이상 만 적용됩니다.
그렇군요~
그러면 카드사 팝업 안뜨는 부분만 확인요청드립니다.
보내주신 정보로는 확인이 어렵습니다.
console창 캡처해서 보내주세요
어제 링크 보내드렸는데
빠른 확인을 위해 콘솔창 먼저 보내주시기 바랍니다~
동작안되는 상황일 때 콘솔창에 에러메세지가 뜨는지 확인해주세요
영상으로 제공해주셔도 됩니다.
/cart 인가요?
여기는 어제랑 같은 상황으로 보이는데요.
/product_page
입니다.
/cart는 product page 해결되면 똑같이 적용하려고 하고있습니다
해당 페이지 뒤에 뭐 더 없어도 되나요?
금액이 0원인데요.


회색에 + 버튼 누르시면 금액이 뜹니다
혹시 결제버튼 누르면 widget 이 표시 되게 해놓으셨나요?
네네
그렇게 하시면 안되고 처음부터 보이게해주세요.
처음부터 보이게 하면 화면이 너무 지저분해서
결제버튼 누르면 보이도록 했는데
음..
아니면 팝업안에 넣고
시도해보면 될까요?
그리고 처음에는 분명 카드 선택하면 팝업이 떴는데 결제 취소한 이후 부터 계속 카드사팝업이 안뜹니다.
그런데 말씀하신 부분 재현이 안되는데요.
저는 정상적으로 결제 취소 후에도 카드가 팝업이 뜹니다.
무슨 카드로 하신건가요?
어떤 카드를 선택해도
카드사 팝업이 안뜹니다
처음부터 위젯 보이게 하라고 하셨는데 이부분을 제거하면

제품구매페이지 처음 뜰때 위젯이 같이 떠서요
방금 위에 conditional은 삭제했습니다.
혹시 amount를 이렇게 입력해서 안되는 건가요?
아뇨 저는 동일페이지에서 잘 되고 있습니다.
저는 계속 똑같이 카드 팝업이 안뜨는데
저희 홈페이지가 토스쪽에서는 제대로 결제되고 있는게 확인된건가요?
preview 모드 말고 해보시고, 그래도 안되면 다른 PC 에서 해보세요.
방금제가 테스트 한겁니다.
확인 영상 감사합니다.
제 pc 문제였군요..;;
담당자님, 죄송한데 혹시 모바일로도 되시는가요? 저는 제 모바일로 들어가도 제 pc 처럼 카드사 팝업이 안떠서요
모바일은 카드사 팝업이 뜨는 구조가 아닙니다.
카드사 선택하고 '결제버튼' 클릭해도 pc랑 똑같이 창이 그대로 입니다;
뭔가 지금 사용하시는 네트웍이나 브라우저가 좀 문제가 있어 보입니다.
크롬 브라우저로 모바일모드로 띄운상황 영상으로 드릴께요.
아하 그렇군요 영상까지 확인 감사드립니다!
팝업,리다이렉션 허용까지 했는데
공용 pc로도 안되고, 제 pc, 모바일 다 안됩니다;
설정을 추가로 허용해야되는 게 있는건가요??
아니면 토스 기술 담당자님이랑 직접 만나서 물어봐도 될까요? 지금 결제 문제로 가맹점 신청은 완료되었는데 오픈을 계속 못하고 있어서요;
저희 PC 에서는 문제 없이 되는 상황이라 저희가 도움을 드릴수 있는 부분이 없습니다.
문제상황을 크롬 개발자 도구 연상태로 재현해서 영상으로 올려주세요.
지금 영상 녹화가 어려워서
캡쳐 전달드려요
그리고 방금 '결제버튼'을 눌렀는데 결제창이 아예 안뜹니다.
아까 이후로 아무것도 수정안했는데 이러네요
'금액은 0보다 커야합니다'
에러가 계속 납니다
'Failed to load resource: the server responded with a status of 400 '
일단 이 에러는 amount 가 0 으로 들어와서 생기는 문제입니다.
창을 닫고 나서 amount가 0으로 변경되는지를 확인해 보세요.
네 창 다시 닫고 amount가 '0'으로 나왔고, 개수 입력했을 때 캡쳐입니다
그리고 결제 누르면 똑같이 '에러 400', '금액은 0보다 커야합니다'
지금도 담당자님 pc에서 결제가 정상적으로 진행되시는가요? 저는 말씀드린대로 아까 영상 받고 나서 다른 pc, 모바일에서 시도해봤는데 이제는 아예 결제창이 안뜹니다.
위젯을 안보이게 하시는 것때문에 안뜨는 것처럼 보입니다.
아마도 "바로결제" 버튼을 눌렀을때 결제 위젯이 보이는 상태인지 아닌지를 잘 판단하지 못하는 것 같아요
담당자님, 제 링크는 안보이게 올려주실수있나요?
아마 안보이는 상태인 위젯에서 에러를 표시하고 있을겁니다.
지워주셔서 감사합니다.
지금 정상동작합니다.

하 저는 왜 창이 안뜰까요ㅜㅜ
지금 도 금액은 0보다 커야 한다고 콘솔에 보이시나요?
창이 떠야 success 페이지도 구동이 되는지 확인이 가능한데 넘 답답하네요..ㅜㅜ
지금 콘솔에 에러가 뭐라고 나는지 확인해보세요.
지금은 conditional 삭제하고 나니 개발자 도구에 amount 0에러가 안뜹니다.
그럼 콘솔에 어떤 에러가 뜨시나요?
잠시만요
아 죄송합니다. 제가 위에만 확인했네요. 아직도 amount 0 에러납니다ㅜ
캡쳐보내드릴게요
해당 에러가 나면 위젯에 금액이 0원으로 들어가는겁니다.
그부분을 확인해 주세요.
저는 금액이 정상적으로 들어가서 문제 없이 보이는거구요.
지금 그러면 제pc 설정 때문에 카드사창이 안뜨는 거고 설정만 고치면 제 pc에서도 정상작동 되는거죠?
<개발자도구> amount에 분명 입력한 값이 뜨는데 왜 '금액'은 0보다 커야한다고 뜰까요?;
거기서 network 탭 열어서 캡쳐해주실수 있을까요?
넵
network condition으로 캡쳐하면 될까요?
혹시 특정상황에서 updateAmount 를 사용중이신가요?
updateAmount는 따로 설정을 건드린 적 없습니다~
저희 로그상으로도 amount 가 0 으로 들어온것으로 확인됩니다.
일단 저는 로그인안한채로 하고 있는데요.
참고로 amount는 +,- 사이에 입력한 '입력 개수' 곱하기 current page 제품's 제품가격 입니다.
동일하게 로그인 안하신채로 하고계신가요?

네 로그인 안했습니다.
그러면 원인을 알수가 없네요. 저는 문제없이 결제창이 뜨는 상황이라 어떤 특정 상황에서 amount 가 0 이 되는 것 같은데.
지금 amount 값은 잘 입력이 되는데 (3만원, 6만원,...)
그걸 바꾸고 결제 눌러도 0원 오류가 뜨시나요?
토스 위젯 쪽에서 "금액"이 '0'으로 입력되는 건가요?
네 최종적으로 결제 요청하기 전에 0으로 설정이 되고 있어요.
토스위젯 amount는 아까 개발자도구 캡쳐대로 금액이 3만원, 6만원 이런식으로 잘 입력되고 있습니다.
그런데 개발자도구에서 말하는 "금액"이 잘못 설정된 거 같습니다.
그러면 제 PC 에서도 안되야 합니다.
혹시 크롬 사용중이면 설정에 개인정보 보안에 서드파티 쿠키 설정이 어떻게 되어 있는지 알수 있을까요?
그 "금액"이 제품 가격을 의미하는 건지 모르겠네요... 제 홈페이지에서 위젯 설정(amount 포함)은 빠진 것 없이 잘 된 것 같은데
"금액"이 '0'으로 계속 인식되서
저는 pc 카드 결제창이 안뜨는 걸까요?
지금 담당자님 pc에서도 결제가 0원으로 되는가요?
아뇨 저는 정상적으로 3000원 60000원으로 잘됩니다.
그렇군요.. 뭐가 문제일까요?
지금 사무실이라면 사무실 외부에 있는 PC 를 이용해보세요.
아까 사무실 외부에 있는 공용 pc로 해봤습니다.
혹시 맥이나 아이폰만 되는 건지 모르겠네요ㅜ
아니면 엣지에서 해보실수 있나요?
엣지에서도 시도했는데
카드창이 안떴습니다ㅜ
제가 재현이 되면 해보겠는데 제가 재현이 안되다보니 도와드릴수가 없네요.
오늘 이전 workflow 모두 삭제하고 노션에 있는대로 하니
까
처음엔 분명히 팝업이 떴는데
팝업을 결제 안하고 '취소X 버튼'을 눌렀고
같은 live 사이트에서 homepage 들어가서 같은 제품 결제하기 누르니 그때부터 카드창이 안떴습니다.
뭔가 워크플로우 추가하시면서 지금 저는 적용이 안되는 워크플로우가 문제인것 같아요.
결제 관련 워크플로우만 남기고 나머지는 다 삭제하신후 다시 해보시는게 좋을것 같습니다.
결제관련 워크플로우를 다 삭제하고
오늘 시도했더니 처음엔 팝업이 떴었습니다.
그런데 취소 클릭하고 homepage 들어갔다가 결제하기 누르니깐
homepage 라는게 어딘가요?
카드 창이 더이상 안뜨기시작했습니다.
index 페이지입니다.
저도 동일하게 했는데 잘됩니다.
지금 공용 pc도 안되고, 제 개인pc, 모바일 다 안되는데
따로 지원을 받을 수 있는 방법이 있을까요?
지금 오픈해야하는데 토스페이먼츠 결제가 계속 걸려서
가입비 다내고 가맹점 신청도 되었는데 오픈을 할 수가 없어서 답답합니다ㅜ
완전히 외부에 있는 분에게 테스트를 해보라고 요청하실수 있을까요?
외부 pc가 도서관 pc 였습니다.
해당 버블에 초대 가능하실까요?
버블프로젝트를 보는 수밖에는 없어 보이네요.
네 가능합니다.
kaistoma@naver.com
로 초대부탁드립니다.
넵 초대드리겠습니다~
토스 가맹점 시크릿키를 테스트용 키로 적용하고
요 잠시만요
초대하려면 $100달러를 추가로 내야한다는데
share link만 해도 보실 수 있으신가요?
아뇨 그렇게는 못보는 것으로 알고 있습니다.
가능하시면 버블 계정을 공유해 주실수 있을까요?
/정보
💡 정보 제출
아래 버튼을 눌러 외부로 노출되기 민감한 정보를 제출해주세요
여기에 계정 공유부탁드립니다.
@프리 님 지금 확인해 보니 이부분 처음이 0으로 되어 있네요

이걸 최초에 1이 되도록 해주시구요.
+ - 버튼이 클릭될때 widget Element action 에서 updateamount 에서 amount 를 변경하도록 해주세요.
실제로 amount 가 update 가 안되서 최초에 0으로 뜬 상태가 유지되는 것으로 보입니다.
아하 네넵 변경해보겠습니다. 확인 감사합니다!
안녕하세요, 지난번에 설명해주셔서 결제창까지 뜹니다. 감사합니다.
그런데 /cart 페이지에서 결제하면 /widget_success로 가는데
/product_page 에서 결제하면 /product_page/widget_success로 갑니다.
다른 해결방법을 보니 type of contents를 삭제하라고 나오던데
/product_page에서 page의 type of contents를 삭제해버리면 홈페이지에서 제품 클릭 > 제품 상세 설명을 볼 수가 없습니다.
당연히 결제 후 'go to page - widget success'로 하면 결제가 진행이 안됩니다.
해결방법 문의드립니다.
최신 위젯에 보면 위젯 설정에 type of contents 사용 여부가 있습니다. 이거 체크해 주시면 됩니다.

가이드에도 내용있을거에요.
아하
설명 감사합니다~
적용해보겠습니다