토스페이먼츠 위젯 관련 문의
안녕하세요 알뜰폰닷컴 FE 개발 김승현입니다.
다름이 아니라 현재 저희 알뜰폰닷컴에서 토스페이먼츠 결제 위젯을 사용하고 있습니다.
사용 환경은 Vue3와 Nuxt3 입니다.
저희가 app.vue에서 토스에서 제공되는
https://js.tosspayments.com/v1/payment-widget
js 파일을 읽어서 위젯을 띄우는데 몇시간 전부터 정상 노출되던 토스페이먼츠 위젯이 노출되지 않고 있습니다.
브라우저 개발자도구에서 확인을 해보니
'payment-widget:23 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'highlightColor')
at e.<anonymous> (payment-widget:23:550642)
at d (payment-widget:1:4264)
at Generator.<anonymous> (payment-widget:1:5591)
at Generator.next (payment-widget:1:4674)
at o (payment-widget:17:187967)
저희 알뜰폰닷컴 소스는 관련 부분 수정하지 않았습니다.
가이드 있으시면 부탁드리겠습니다. 감사합니다.21 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
vue시면 Npm으로 설치해서 이용 해보시겠어요?
뭔가 저희도 react native를 사용하는데 위젯이 갑작스럽게 1일 전부터 렌더링 오류가 나는데 비슷한 현상인 것 같습니다,,
결제 위젯 cdn 버전이 v2로 바뀌었는데 언제 업데이트가 된건가요? 공지사항을 따로 보지 못했는데;;; 빠른답변 부탁드립니다. 장애보고서 올려야합니다.
결제 위젯 cdn 버전이 v2로 바뀌었다는게 무슨 의미 이실까요?
알뜰폰닷컴 사이트 어디를 가야 위젯상황을 볼수 있나요?
@김승현
1. 결제 위젯 cdn 버전이 v2로 바뀌었다는게 무슨 의미 이실까요?
-> 저희가 2023년 5월경 사이트 구축할 당시에는, 위젯 연동 가이드에서 제공된 대로
'https://js.tosspayments.com/v1/payment-widget' 내용을 cdn 방식으로 import 해서 사용하고 있었는데 현재는 'https://js.tosspayments.com/v2/standard'로 가이드가 바뀌어서 혹시 영향이 있을까 싶어서 질문드린 부분입니다.
2. 알뜰폰닷컴 사이트 어디를 가야 위젯상황을 볼수 있나요? -> https://www.uplusmvno.com/ 사이트에 들어가셔서 상단 GNB
3. 관련하여 이미지 파일 첨부하겠습니다.
2. 알뜰폰닷컴 사이트 어디를 가야 위젯상황을 볼수 있나요? -> https://www.uplusmvno.com/ 사이트에 들어가셔서 상단 GNB
유심구매 -> 편의점 구매 -> 이마트24 바로픽업 선택 후 -> 다음으로 버튼 클릭
해당 경로로 들어가면 토스페이먼츠 위젯이 로딩되지 않습니다.
++허나 해당 서비스는 로그인이 필요하여 회원가입을 해야 합니다.
현상은 간헐적으로 발상되나, 대부분의 경우 되지 않는것으로 보입니다.
3. 관련하여 이미지 파일 첨부하겠습니다.
영향 없습니다. v1 그대로 사용 할 수 있어요.
대부분의 경우라는 것이,
특정 사람이 테스트 했을때 인가요?
아니면,
동일 사무실에 있는 분들이 테스트 했을때 일까요?
4월 23일 18시 이후부터 해당 상황이 발생했고, 사용자들의 문의글을 남기기 시작했습니다.
관련해서 개발자들이 테스트 했을때도 동일 현상이 나왔습니다.
음 MID 가 어떻게 되시나요?
해당 시점에, 위젯 UI 설정에서 하이라이트 색상 변경 같은걸 하셨나요?
1. MID 가 어떻게 되시나요?
-> mid 가 https://homepage-api-gateway.tosspayments.com/log/api/v2/logs 호출시 페이로드의 m_id 가 맞다면 값은 tlgmvno 입니다.
2. 해당 시점에, 위젯 UI 설정에서 하이라이트 색상 변경 같은걸 하셨나요?
-> 개발자들은 변경하지 않았으나, 확인이 필요할 것 같습니다.
3. 추가로 저희 서비스 개발기/검수기에서는 발생하지 않으나 운영기에서만 해당 현상이 나옵니다.
운영기라는 말씀은,
개발기 / 검수기와
운영기에서 사용하는
위젯 렌더링시에 사용하는 키가 혹시 달라지시나요?
네 다릅니다.
개발기/검수기에서는 test_gck,test_gsk 로 시작하는 키 값을 사용중이고
운영기에서는 live_gck, live_gsk로 시작하는 키 값을 사용중입니다.
운영기에서 띄운 위젯의 variantKey 알려주시겠어요?
uplusmvno_01 입니다
다시 확인 해보시겠어요?
@김승현
정상적으로 되는 확인했습니다. 원인이 뭔지 문의드립니다.
제품 개발팀에 질의해둔 상태 입니다.
네 확인 되시면 말씀부탁드리겠습니다! 감사합니다!
@김승현 @김기두
답변받으실 메일을 techsupport@tosspayments.com 으로 전달을 부탁 드리겠습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.