Mingi Choe•4mo ago

인스타그램 인앱 브라우저에서 몇 유저에게 결제 수단 선택 에러 발생

간혹가다 첨부해드린 영상처럼 결제수단 선택해달라는 에러가 발생하고 있습니다. 환경은 현재 인스타그램 인앱브라우저에서 확인되고 있으며, PC에서는 아직 재현된 건은 없습니다. 현재 구현되어있는 토스페이먼츠 위젯 로직은 아래와 같습니다

  const [isWidgetReady, setIsWidgetReady] = useState<boolean>(true);

  /** 토스페이먼츠 위젯 추가 */
  useEffect(() => {
    if (paymentWidget == null) return;

    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      '#payment-widget',
      { value: orderPriceSummary.totalCost },
      { variantKey: 'DEFAULT' },
    );

    paymentMethodsWidget?.on('ready', () => {
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
      setIsWidgetReady(false);
    });
  }, [paymentWidget]);

  /** 토스페이먼츠 결제 금액 반영(orderPriceSummary 변경 시 자동으로 값 적용) */
  useEffect(() => {
    const paymentMethodsWidget = paymentMethodsWidgetRef.current;
    if (paymentMethodsWidget == null) return;

    paymentMethodsWidget.updateAmount(orderPriceSummary.totalCost);
  }, [orderPriceSummary.totalCost, paymentMethodsWidgetRef.current]);

...

<Button
  className="mb-12"
  type="primary"
  fullWidth
  size="large"
  loading={submitting || isWidgetReady}
  onClick={결제하기}
  disabled={!결제가능상태()}
>

...

  const [isWidgetReady, setIsWidgetReady] = useState<boolean>(true);

  /** 토스페이먼츠 위젯 추가 */
  useEffect(() => {
    if (paymentWidget == null) return;

    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      '#payment-widget',
      { value: orderPriceSummary.totalCost },
      { variantKey: 'DEFAULT' },
    );

    paymentMethodsWidget?.on('ready', () => {
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
      setIsWidgetReady(false);
    });
  }, [paymentWidget]);

  /** 토스페이먼츠 결제 금액 반영(orderPriceSummary 변경 시 자동으로 값 적용) */
  useEffect(() => {
    const paymentMethodsWidget = paymentMethodsWidgetRef.current;
    if (paymentMethodsWidget == null) return;

    paymentMethodsWidget.updateAmount(orderPriceSummary.totalCost);
  }, [orderPriceSummary.totalCost, paymentMethodsWidgetRef.current]);

...

<Button
  className="mb-12"
  type="primary"
  fullWidth
  size="large"
  loading={submitting || isWidgetReady}
  onClick={결제하기}
  disabled={!결제가능상태()}
>

...

저희 측에서는 토스페이먼츠 측으로 들어가는 에러 확인이 어려워 이 부분 체크한번 부탁드리겠습니다. 상점 MID : eibijeaz5f 위 이슈 재현되고 있는 customer_key : d5d4cd07616a542891b7ec2d0257b3a24b69856e

10 Replies

토스페이먼츠 BOT•4mo ago

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

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

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

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

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

Mingi Choe•4mo ago

참고로 영상 화면에 노출되고 있는 toast message는 토스페이먼츠 측에서 리턴해주는 메세지를 사용하고있습니다

이실장•4mo ago

인스타 인앱에서 항상 발생하나요?

Mingi Choe•4mo ago

항상은 아닙니다 저희도 엄청 간혈적으로 일어나고 있어서요... 우선 내부 로직을 토스페이먼츠 example과 아에 똑같이 변경 후 배포해보려고하는데, 테스트 해볼 부분이 조금 있을 것 같아 차주 월요일날 배포 후 모니터링 해볼 예정입니다. 토스 측과 다르게 구현 되었었던 부분은 이미지에 포함된 정도입니다.

Mingi Choe•4mo ago

혹시 위 전달드린 customer_key에서 실패한 부분을 토스페이먼츠 측 로그에서 확인 가능한 부분은 없을까요?

이실장•4mo ago

이건 프론트에서 나가는 거라 실제 저희가 로그로 정확한 원인 확인이 어렵습니다. 인스타 인앱브라우저의 경우 예외도 워낙 많기도 하구요 엄청 간헐적이면 재현환경도 확인이 어려우시겠네요?

Mingi Choe•4mo ago

네 맞습니다. 현재 CS 들어온 건과 저희 내부에서 재현된 환경이 모두 인스타 인앱이였고, 갤럭시, 아이폰 둘다 발생한 것으로 보아 기기 및 OS 문제는 아닌 것으로 파악 중입니다.

이실장•4mo ago

우선 차주에 한번 수정 후 확인해주시고 재현환경도혹시 확인 가능하면 전달해주시면 같이 확인해보겠습ㄴ디ㅏ.

Mingi Choe•4mo ago

넵 감사합니다.

토스페이먼츠 BOT•4mo ago

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

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