Mingi Choe
Mingi Choe3mo ago

paymentWidget on ready 관련

결제모듈이 렌더링이 되지않을 경우, 결제 버튼을 loading 처리 해두고, 렌더링이 완료되면 결제가 활성화 되도록 조건을 걸고있는데요. 해당 방식으로 배포 후 간혹 유저 분에게 버튼이 활성화 되지않는다는 CS가 접수되어 확인해보니. 네트워크가 느린 경우, 간혈적으로 on 메소드가 실행되지 않는 것을 확인했습니다. 혹시 해당 부분 한번 확인해주실 수 있을까요?
const [isWidgetReady, setIsWidgetReady] = useState<boolean>(true);

paymentMethodsWidgetRef?.current?.on('ready', () => {
console.log('test');
setIsWidgetReady(false);
});
const [isWidgetReady, setIsWidgetReady] = useState<boolean>(true);

paymentMethodsWidgetRef?.current?.on('ready', () => {
console.log('test');
setIsWidgetReady(false);
});
이미지는 개발자도구에서 네트워크 지연을 걸고 위 코드를 실행한 케이스입니다. 결제 모듈은 렌더링 되었지만 콘솔에는 test가 찍히지 않습니다. 매번 발생하지는 않았고, 10번 리프레쉬하면 1~2번 정도 발생했습니다.
No description
44 Replies
토스페이먼츠 BOT
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) : - 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.
Mingi Choe
Mingi Choe3mo ago
엇 잘못 올렸네요.. 개발 문의로 다시 작성하겠습니다
이실장
이실장3mo ago
괜찮습니다. 여기서 팔로업할게요 개선요청도 마찬가지니까 요
Mingi Choe
Mingi Choe3mo ago
아 네넵 감사합니다!
이실장
이실장3mo ago
custoemrKey 및 재현 시간 한번 확인 가능할까요?
Mingi Choe
Mingi Choe3mo ago
/log/api/v2/logs payload 전달드립니다. api 요청 시간은 2024년 4월 30일 오후 1시 52분 48초(Tue, 30 Apr 2024 04:52:48 GMT )입니다. 위젯 자체는 200으로 응답이 들어오긴 했어요!
{
"act_type": "payments_payment-widget",
"browser_name": "Chrome",
"browser_version": "124.0.0.0",
"client-key": "test_gck_kYG57Eba3GYK5ZNBgABLrpWDOxmA",
"customer_key": "d5d4cd07616a542891b7ec2d0257b3a24b69856e",
"device": "MOBILE",
"device_type": "mobile",
"event_name": "impression__section",
"event_type": "impression",
"global_trace_id": "a240430qOeZwhiVrQui9sNzWqOSXJHfssAoMlJD",
"gtid": "a240430qOeZwhiVrQui9sNzWqOSXJHfssAoMlJD",
"host": "payment-widget.tosspayments.com",
"is_webview": "0",
"log_name": "payments_payment-widget__/payment-methods::impression__section",
"log_type": "event",
"os_name": "Android",
"os_version": "6.0",
"phase": "live",
"referrer": "http://localhost:3000/",
"screen_name": "payments_payment-widget__/payment-methods",
"title": "결제수단",
"url": "https://payment-widget.tosspayments.com/payment-methods?client-key=test_gck_kYG57Eba3GYK5ZNBgABLrpWDOxmA&variant-key=DEFAULT&device=MOBILE",
"variant-key": "DEFAULT"
}
{
"act_type": "payments_payment-widget",
"browser_name": "Chrome",
"browser_version": "124.0.0.0",
"client-key": "test_gck_kYG57Eba3GYK5ZNBgABLrpWDOxmA",
"customer_key": "d5d4cd07616a542891b7ec2d0257b3a24b69856e",
"device": "MOBILE",
"device_type": "mobile",
"event_name": "impression__section",
"event_type": "impression",
"global_trace_id": "a240430qOeZwhiVrQui9sNzWqOSXJHfssAoMlJD",
"gtid": "a240430qOeZwhiVrQui9sNzWqOSXJHfssAoMlJD",
"host": "payment-widget.tosspayments.com",
"is_webview": "0",
"log_name": "payments_payment-widget__/payment-methods::impression__section",
"log_type": "event",
"os_name": "Android",
"os_version": "6.0",
"phase": "live",
"referrer": "http://localhost:3000/",
"screen_name": "payments_payment-widget__/payment-methods",
"title": "결제수단",
"url": "https://payment-widget.tosspayments.com/payment-methods?client-key=test_gck_kYG57Eba3GYK5ZNBgABLrpWDOxmA&variant-key=DEFAULT&device=MOBILE",
"variant-key": "DEFAULT"
}
이실장
이실장3mo ago
크롬에서 어떻게 해서 재현하셨나요?
No description
이실장
이실장3mo ago
재현 환경 확인해보려합니다.
Mingi Choe
Mingi Choe3mo ago
네 화면 전달해주신대로 느린 3G로 설정했구요. 저도 매번 발생하진 않았고, 계속해서 리프레쉬하면 간혈적으로 트리거 되지않는 경우가 있었습니다.
이실장
이실장3mo ago
실제 render는 느리게완료 되었는데 이벤트가 안왔다는 말씀이시죠?
Mingi Choe
Mingi Choe3mo ago
네네 맞습니다 결제모듈은 위에 스크린샷 드린대로 정상적으로 렌더링 됐는데 아래 이벤트가 실행되지 않았습니다.
paymentMethodsWidgetRef?.current?.on('ready', () => {
console.log('test')
}
paymentMethodsWidgetRef?.current?.on('ready', () => {
console.log('test')
}
그래서 전달드린 이미지에 버튼도 계속 로딩 상태로 돌고 있는 것으로 이해해주시면 될 것 같습니다. 혹시 재현이 되실까요??
이실장
이실장3mo ago
아직 확인 전입니다. 이부분은 내부적으로 한번 확인 후 공유해드리겠습니다.
Mingi Choe
Mingi Choe3mo ago
넵 감사합니다.
이실장
이실장3mo ago
@Mingi Choe 혹시 위현상에 대한 고객문의 빈도가 높나요? 재현은 잘 안되네요 ㅠ
Mingi Choe
Mingi Choe3mo ago
결제모듈 변경 후 배포한 지 하루 만에 발생한 이슈라서요..ㅠㅠ 파악하기로는 빈도수가 매우 높지는 않지만 그렇다고 적은 이슈는 아닌 것 같습니다…. 그리고 저희가 지원해드리고 있는 서비스의 경우, 고객사에 판매할 수 있는 스토어를 지원해주는 형식이다 보니, 위 이슈가 발생했을 경우, 정확한 원인 분석이 어려워 고객사 측에게 설명해 드리기가 난감한 상황입니다. 따라서 최대한 빠르게 확인되면 좋을 것 같습니다. 재현이 잘 안되신다고 말씀해주셨는데, 재현되신 적이 있으신 걸까요?
이실장
이실장3mo ago
우선 저희 환경에서는 어떻게든 렌더가 되면 이벤트가 내려오긴 한에ㅛ 혹시 귀사 페이지를 저희가 접근할수도 있을까요?
Mingi Choe
Mingi Choe3mo ago
넵 . 에서 테스트 해주시면 될 것 같습니다. 테스트는 아래와 같이 해주시면 되겠습니다. 1. 네트워크 상태 느림 3G로 설정 2. 상품 구매하기 선택 3. 구매할 옵션 선택(아무거나 해주셔도 됩니다.) 4. 바로구매 버튼 클릭 5. checkout 페이지에서 확인 가능 강력 새로고침으로 리프레쉬 할 경우, 재현 확률이 높아지는 것 같으니 참고 부탁드리겠습니다. 또한, checkout 페이지 접속 시 구매버튼 상태가 로딩일 경우, 위 이슈가 발생한 것으로 이해하시면 되겠습니다. (전달드린 페이지는 production 라서 테스트 콘솔은 노출되지 않습니다) URL은 2분 뒤에 제거하겠습니다!
이실장
이실장3mo ago
지금 제거하셔도 됩니다.
이실장
이실장3mo ago
No description
이실장
이실장3mo ago
test가 찍혀야 정상인거죠?
Mingi Choe
Mingi Choe3mo ago
아뇨아뇨 위에 전달드렸다시피 프로덕션 레벨이라서 테스트 콘솔은 찍히지 않습니다. 맨 하단에 fixed로 걸려있는 구매하기 버튼이 로딩 상태면 전달드린 문제가 발생한 거에요!
No description
이실장
이실장3mo ago
결제하기로 바뀌면 제대로 된거고 로딩으로 남아있으면 이상이 있는거군요
Mingi Choe
Mingi Choe3mo ago
맞습니다 정상적일 경우 회원은 첫번째 사진, 비회원일 경우 두번째 사진의 버튼처럼 변경되어야합니다!
No description
No description
이실장
이실장3mo ago
checkout 페이지에서 확인 가능
한번 진입한 후에는 계속 새로고침하면서 재현해봐도 되죠?
Mingi Choe
Mingi Choe3mo ago
넵 한번 진입한 후 계속 새로고침 하시면 되고, 강력 새로고침으로 테스트해보시면 더 잘 발생하는 것 같습니다
이실장
이실장3mo ago
일단 재현은 되었습니다. 로딩버튼은 단순 저희 이벤트 받으면 풀리는 방식인거죠?
Mingi Choe
Mingi Choe3mo ago
네 맞습니다. 구현한 방식은 처음 isWidgetReady의 경우 true 상태였다가, 위젯이 렌더링되면, ready state가 false로 업데이트 되면서, 로딩이 풀리는 형식입니다.
No description
No description
Mingi Choe
Mingi Choe3mo ago
혹시 토스페이먼츠 측 example에서는 아에 발생하시지가 않나요? on 함수의 ready 문제가 확실하다면 example에서도 동일하게 발생할 것 같긴해서요..!
Mingi Choe
Mingi Choe3mo ago
혹시나 하고 useEffect 내부로 넣어보니까 해결된 것 같습니다..! 우선 프로덕션에 배포 후 모니터링 해보고 다시 한번 말씀드리겠습니다. @이실장
No description
Mingi Choe
Mingi Choe3mo ago
참고로 추가로 테스트 도중 발생한 문제 한가지 더 공유 드립니다. 네트워크 패칭은 모두 끝났는데, 결제모듈 자체가 아에 안뜨는 경우도 간혹 있는 것 같습니다. 위 이미지는 네트워크 속도 제한을 걸지 않고 일반적인 패칭했을 경우 발생했습니다. 정상적일 경우,
CREATE_WIDGET_INSTANCE
RENDER_PAYMENT_METHODS_PROXY
CREATE_WIDGET_INSTANCE
RENDER_PAYMENT_METHODS_PROXY
두 메소드 요청이 들어오는데 비정상적일 경우에는
RENDER_PAYMENT_METHODS_PROXY
RENDER_PAYMENT_METHODS_PROXY
는 들어오지 않고 CREATE_WIDGET_INSTANCE 이후 아무런 네트워크 요청이 없습니다.
No description
No description
이실장
이실장3mo ago
위 상황은 useEffect내부로 넣기 전이죠?
"act_type": "payments_payment-widget",
"browser_name": "Chrome",
"browser_version": "124.0.0.0",
"client-key": "test_gck_kYG57Eba3GYK5ZNBgABLrpWDOxmA",
"customer_key": "d5d4cd07616a542891b7ec2d0257b3a24b69856e",
"device": "MOBILE",
"device_type": "mobile",
"event_name": "impression__section",
"event_type": "impression",
"global_trace_id": "a240430qOeZwhiVrQui9sNzWqOSXJHfssAoMlJD",
"gtid": "a240430qOeZwhiVrQui9sNzWqOSXJHfssAoMlJD",
"host": "payment-widget.tosspayments.com",
"is_webview": "0",
"log_name": "payments_payment-widget__/payment-methods::impression__section",
"log_type": "event",
"os_name": "Android",
"os_version": "6.0",
"phase": "live",
"referrer": "http://localhost:3000/",
"screen_name": "payments_payment-widget__/payment-methods",
"title": "결제수단",
"url": "https://payment-widget.tosspayments.com/payment-methods?client-key=test_gck_kYG57Eba3GYK5ZNBgABLrpWDOxmA&variant-key=DEFAULT&device=MOBILE",
"variant-key": "DEFAULT"
"act_type": "payments_payment-widget",
"browser_name": "Chrome",
"browser_version": "124.0.0.0",
"client-key": "test_gck_kYG57Eba3GYK5ZNBgABLrpWDOxmA",
"customer_key": "d5d4cd07616a542891b7ec2d0257b3a24b69856e",
"device": "MOBILE",
"device_type": "mobile",
"event_name": "impression__section",
"event_type": "impression",
"global_trace_id": "a240430qOeZwhiVrQui9sNzWqOSXJHfssAoMlJD",
"gtid": "a240430qOeZwhiVrQui9sNzWqOSXJHfssAoMlJD",
"host": "payment-widget.tosspayments.com",
"is_webview": "0",
"log_name": "payments_payment-widget__/payment-methods::impression__section",
"log_type": "event",
"os_name": "Android",
"os_version": "6.0",
"phase": "live",
"referrer": "http://localhost:3000/",
"screen_name": "payments_payment-widget__/payment-methods",
"title": "결제수단",
"url": "https://payment-widget.tosspayments.com/payment-methods?client-key=test_gck_kYG57Eba3GYK5ZNBgABLrpWDOxmA&variant-key=DEFAULT&device=MOBILE",
"variant-key": "DEFAULT"
이정보로 로그 봤을 때 CREATE_WIDGET_INSTANCE RENDER_PAYMENT_METHODS_PROXY 모두 내려드렸어요 useEffect 문제일 것 같기는 하네요
Mingi Choe
Mingi Choe3mo ago
아 넵 정리해드리면, 일단 처음에 전달드린 결제모듈은 렌더링 되었지만, on 함수가 호출되지 않는 이슈는 우선 모니터링은 조금 더 해봐야겠지만 useEffect 내부로 넣으면서 해결된 것 같습니다. 근데 추가로 테스트하던 중에 간혹 결제모듈 자체가 렌더링되지 않는 이슈가 발생하는 것 같습니다. 위에 전달드린 payload가 아니라 아래 이미지 payload로 봐주셔야할 것 같아요.
No description
이실장
이실장3mo ago
네 그건 네트워크 환경에 따라 그럴 수 있습니다. 타임아웃 걸어두고 재 render하는 방법도 있을 것 같네요
Mingi Choe
Mingi Choe3mo ago
네트워크가 느려서 기다리면 패칭되는게 아니라, 도중에 다음 패칭 자체를 하지 않는 케이스인데, 요건 정상적인 이슈인 건가요?
이실장
이실장3mo ago
그런데 일반적으로 자주 발생하는 케이스는 아니어서요 사용자층이 외국에서 접속하는 분이 많나요?
Mingi Choe
Mingi Choe3mo ago
아뇨 국내에서도 발생하고있습니다. 말씀해주신대로 자주 발생하지는 않지만, 그렇다고 아에 발생하지 않는 케이스는 아닌 듯 해서요. 위 이슈 케이스는 그럼 토스페이먼츠 측에서는 인지는 하고 있지만 적극적으로 해결하실 생각은 없으신 걸로 이해하면 될까요?
이실장
이실장3mo ago
아니요. 제품 완성도는 꾸준히 높이고 있어서요. 이건 저희가 지속적으로 챙기도록 하겠습니다.
Mingi Choe
Mingi Choe3mo ago
넵 이해했습니다. 늦은 시간까지 답변해주셔서 감사합니다. 처음 전달드렸던 문제는 계속 모니터링해보고, 다시 발생하면 문의드리도록 하겠습니다. 감사합니다.
이실장
이실장3mo ago
네 감사합니다. 문의사항은 언제든 편하게 말씀주시면, 원인 함께 찾아보도록 하겠습니다.
토스페이먼츠 BOT
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
Ayaan
Ayaan3mo ago
저도 같은 이슈를 CS 받아서, 확인해보았는데요. 일부 모바일 LTE상황에서 무제한데이터 속도제한(400kbps/1mbps)이 걸린상황같이 극단적인 속도제한 상황에서 30%정도 확률로 재현되고 있습니다. 국내에서도 충분히 발생가능한 케이스인거 같아서 말씀드립니다. 저희도 UseEffect 문제 해결해서 fix하였습니다.
이실장
이실장3mo ago
render가 아니라 ready event말씀이시죠?
Ayaan
Ayaan3mo ago
네 위랑 동일한 이슈입니다.
이실장
이실장3mo ago
네 해당 이슈는 useEffect로 해결되면 될 것 같습니다.
More Posts
페이팔 결제 승인결제 위젯으로 테스트 결제까지는 성공을한것 같은데 결제 승인 을 하려고 하면 ERR_NON_2XX_3XX_RESPONSE 에러 코드를 반환합니다. 참고한 가이드 문서입니다.http결제위젯이 사라졌습니다.따로 건드린건 없는데 갑자기 결제위젯이 안보이네요. 카드사 심사중인데 의도된 것인지 어떤부분이 잘못된 것인지 궁금합니다. 최근 결제 payment_key = tviva20240현재 솔루션 개발중에 있는데 테스트 결제 위젯 연동 키가 사라졌네요결제 위젯 테스트 연동 키 받아서 사용 잘하다가 오늘 상점관리자 페이지 들어가니까 전자결제신청을 하라고 뜨네요 테스트인데도 전자결제신청을 해야되나요? 신청해볼려고햇는데 완전히 가상계좌 입금 2분지연 통보가상계좌 입금 2분 지연통보 사용하기 위해선 어떤 신청요청을 어디서 해야하나요?링크페이링크페이에서 최소 구매 건수를 지정할수 있을까요? 3개 이상부터 구매 가능하게 해야 합니다.결제위젯 표시 오류어제까지만 해도 결제 위젯이 정상적으로 작동했는데, 오늘 실행해보니 기존에 휴대폰결제, 토스페이, 가상계좌 등의 결제 수단을 선택하는 버튼들이 있었는데 그게 아예 표시되지 않습니다지급대행 지급일자 관련 문의안녕하세요. 지급대행 신청 시 지급일자를 2024.05.01로 지정하면 지급일자가 올바르지 않다고 나오는데 근로자의 날도 공휴일로 상정해서 지정이 불가능한 상황인가요?가상계좌 계좌 정보 문의토스 가상계좌 발급 관련하여 문의 드립니다. 테스트 화면에서 우리은행 가상계좌 발급을 하면 계좌 발급을 받고 개발자 모드 관리자에서 승인요청 버튼을 클릭하면 정상적으로 승인이 되지결제 위젯이 렌더링이 안됩니다.안녕하세요. 테스트 api 로 결제 위젯 테스트를 하고 있는데 어제까지만 해도 잘 되다가 오늘 확인해보니 하단에 결제하기 버튼만 보이고, 상단의 결제 방식 선택하는 부분이 렌더링이Subscription-based APIHi team, is there an API endpoint/configuration for recurring payments? On FAQ I see payment install