Mingi Choe•3w 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번 정도 발생했습니다.

44 Replies

토스페이먼츠 BOT•3w ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

Mingi Choe•3w ago

엇 잘못 올렸네요.. 개발 문의로 다시 작성하겠습니다

이실장•3w ago

괜찮습니다. 여기서 팔로업할게요 개선요청도 마찬가지니까 요

Mingi Choe•3w ago

아 네넵 감사합니다!

이실장•3w ago

custoemrKey 및 재현 시간 한번 확인 가능할까요?

Mingi Choe•3w 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"
}

이실장•3w ago

크롬에서 어떻게 해서 재현하셨나요?

이실장•3w ago

재현 환경 확인해보려합니다.

Mingi Choe•3w ago

네 화면 전달해주신대로 느린 3G로 설정했구요. 저도 매번 발생하진 않았고, 계속해서 리프레쉬하면 간혈적으로 트리거 되지않는 경우가 있었습니다.

이실장•3w ago

실제 render는 느리게완료 되었는데 이벤트가 안왔다는 말씀이시죠?

Mingi Choe•3w ago

네네 맞습니다 결제모듈은 위에 스크린샷 드린대로 정상적으로 렌더링 됐는데 아래 이벤트가 실행되지 않았습니다.

paymentMethodsWidgetRef?.current?.on('ready', () => {
  console.log('test')
}

paymentMethodsWidgetRef?.current?.on('ready', () => {
  console.log('test')
}

그래서 전달드린 이미지에 버튼도 계속 로딩 상태로 돌고 있는 것으로 이해해주시면 될 것 같습니다. 혹시 재현이 되실까요??

이실장•3w ago

아직 확인 전입니다. 이부분은 내부적으로 한번 확인 후 공유해드리겠습니다.

Mingi Choe•3w ago

넵 감사합니다.

이실장•3w ago

@Mingi Choe 혹시 위현상에 대한 고객문의 빈도가 높나요? 재현은 잘 안되네요 ㅠ

Mingi Choe•3w ago

결제모듈 변경 후 배포한 지 하루 만에 발생한 이슈라서요..ㅠㅠ 파악하기로는 빈도수가 매우 높지는 않지만 그렇다고 적은 이슈는 아닌 것 같습니다…. 그리고 저희가 지원해드리고 있는 서비스의 경우, 고객사에 판매할 수 있는 스토어를 지원해주는 형식이다 보니, 위 이슈가 발생했을 경우, 정확한 원인 분석이 어려워 고객사 측에게 설명해 드리기가 난감한 상황입니다. 따라서 최대한 빠르게 확인되면 좋을 것 같습니다. 재현이 잘 안되신다고 말씀해주셨는데, 재현되신 적이 있으신 걸까요?

이실장•3w ago

우선 저희 환경에서는 어떻게든 렌더가 되면 이벤트가 내려오긴 한에ㅛ 혹시 귀사 페이지를 저희가 접근할수도 있을까요?

Mingi Choe•3w ago

넵 . 에서 테스트 해주시면 될 것 같습니다. 테스트는 아래와 같이 해주시면 되겠습니다. 1. 네트워크 상태 느림 3G로 설정 2. 상품 구매하기 선택 3. 구매할 옵션 선택(아무거나 해주셔도 됩니다.) 4. 바로구매 버튼 클릭 5. checkout 페이지에서 확인 가능 강력 새로고침으로 리프레쉬 할 경우, 재현 확률이 높아지는 것 같으니 참고 부탁드리겠습니다. 또한, checkout 페이지 접속 시 구매버튼 상태가 로딩일 경우, 위 이슈가 발생한 것으로 이해하시면 되겠습니다. (전달드린 페이지는 production 라서 테스트 콘솔은 노출되지 않습니다) URL은 2분 뒤에 제거하겠습니다!

이실장•3w ago

지금 제거하셔도 됩니다.

이실장•3w ago

test가 찍혀야 정상인거죠?

Mingi Choe•3w ago

아뇨아뇨 위에 전달드렸다시피 프로덕션 레벨이라서 테스트 콘솔은 찍히지 않습니다. 맨 하단에 fixed로 걸려있는 구매하기 버튼이 로딩 상태면 전달드린 문제가 발생한 거에요!

이실장•3w ago

결제하기로 바뀌면 제대로 된거고 로딩으로 남아있으면 이상이 있는거군요

Mingi Choe•3w ago

맞습니다 정상적일 경우 회원은 첫번째 사진, 비회원일 경우 두번째 사진의 버튼처럼 변경되어야합니다!

이실장•3w ago

checkout 페이지에서 확인 가능

한번 진입한 후에는 계속 새로고침하면서 재현해봐도 되죠?

Mingi Choe•3w ago

넵 한번 진입한 후 계속 새로고침 하시면 되고, 강력 새로고침으로 테스트해보시면 더 잘 발생하는 것 같습니다

이실장•3w ago

일단 재현은 되었습니다. 로딩버튼은 단순 저희 이벤트 받으면 풀리는 방식인거죠?

Mingi Choe•3w ago

네 맞습니다. 구현한 방식은 처음 isWidgetReady의 경우 true 상태였다가, 위젯이 렌더링되면, ready state가 false로 업데이트 되면서, 로딩이 풀리는 형식입니다.

Mingi Choe•3w ago

혹시 토스페이먼츠 측 example에서는 아에 발생하시지가 않나요? on 함수의 ready 문제가 확실하다면 example에서도 동일하게 발생할 것 같긴해서요..!

Mingi Choe•3w ago

혹시나 하고 useEffect 내부로 넣어보니까 해결된 것 같습니다..! 우선 프로덕션에 배포 후 모니터링 해보고 다시 한번 말씀드리겠습니다. @이실장

Mingi Choe•3w 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 이후 아무런 네트워크 요청이 없습니다.

이실장•3w 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•3w ago

아 넵 정리해드리면, 일단 처음에 전달드린 결제모듈은 렌더링 되었지만, on 함수가 호출되지 않는 이슈는 우선 모니터링은 조금 더 해봐야겠지만 useEffect 내부로 넣으면서 해결된 것 같습니다. 근데 추가로 테스트하던 중에 간혹 결제모듈 자체가 렌더링되지 않는 이슈가 발생하는 것 같습니다. 위에 전달드린 payload가 아니라 아래 이미지 payload로 봐주셔야할 것 같아요.

이실장•3w ago

네 그건 네트워크 환경에 따라 그럴 수 있습니다. 타임아웃 걸어두고 재 render하는 방법도 있을 것 같네요

Mingi Choe•3w ago

네트워크가 느려서 기다리면 패칭되는게 아니라, 도중에 다음 패칭 자체를 하지 않는 케이스인데, 요건 정상적인 이슈인 건가요?

이실장•3w ago

그런데 일반적으로 자주 발생하는 케이스는 아니어서요 사용자층이 외국에서 접속하는 분이 많나요?

Mingi Choe•3w ago

아뇨 국내에서도 발생하고있습니다. 말씀해주신대로 자주 발생하지는 않지만, 그렇다고 아에 발생하지 않는 케이스는 아닌 듯 해서요. 위 이슈 케이스는 그럼 토스페이먼츠 측에서는 인지는 하고 있지만 적극적으로 해결하실 생각은 없으신 걸로 이해하면 될까요?

이실장•3w ago

아니요. 제품 완성도는 꾸준히 높이고 있어서요. 이건 저희가 지속적으로 챙기도록 하겠습니다.

Mingi Choe•3w ago

넵 이해했습니다. 늦은 시간까지 답변해주셔서 감사합니다. 처음 전달드렸던 문제는 계속 모니터링해보고, 다시 발생하면 문의드리도록 하겠습니다. 감사합니다.

이실장•3w ago

네 감사합니다. 문의사항은 언제든 편하게 말씀주시면, 원인 함께 찾아보도록 하겠습니다.

토스페이먼츠 BOT•3w ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

Ayaan•3w ago

저도 같은 이슈를 CS 받아서, 확인해보았는데요. 일부 모바일 LTE상황에서 무제한데이터 속도제한(400kbps/1mbps)이 걸린상황같이 극단적인 속도제한 상황에서 30%정도 확률로 재현되고 있습니다. 국내에서도 충분히 발생가능한 케이스인거 같아서 말씀드립니다. 저희도 UseEffect 문제 해결해서 fix하였습니다.

이실장•3w ago

render가 아니라 ready event말씀이시죠?

Ayaan•3w ago

네 위랑 동일한 이슈입니다.

이실장•3w ago

네 해당 이슈는 useEffect로 해결되면 될 것 같습니다.