쪼이쪼이•2w ago

브랜드페이 결제관리 창 오류

브랜드페이 결제관리 창을 띄여려고 하는데, Uncaught Error: this.activationLogger 가 존재하지 않습니다. 위 오류가 발생합니다. "@tosspayments/tosspayments-sdk" 라이브러리를 사용하고, const tossPayments = await loadTossPayments(clientKey) brandpay.value = tossPayments.brandpay({ customerKey, redirectUrl, }) 위와같이 브랜드페이 객체를 생성합니다. 원인이 무엇일까요?

35 Replies

토스페이먼츠 BOT•2w ago

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

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

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

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

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

Kimoon Lee•2w ago

혹시 브라우저 콘솔쪽에는 별도의 에러가 없으신가요?

쪼이쪼이OP•2w ago

브라우저 콘솔쪽 에러로그는 이렇게 나옵니다.

Kimoon Lee•2w ago

저희쪽 에러가 아닌것처럼 보이는데요. onclick 에 어떤걸 실행하시도록 해두신건가요? activationlogger 라고 정의한 부분이 있는지도 확인부탁드립니다.

쪼이쪼이OP•2w ago

확인해보니 그렇네요,, 친절히 답변해주셔서 감사합니다..! 정상동작 확인하였습니다.

Kimoon Lee•2w ago

네 감사합니다.

토스페이먼츠 BOT•2w ago

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

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

까네•4d ago

저도 같은 에러로그가 나오는데 혹시 어떻게 해결하셨는지 ㅠ

이실장•3d ago

말씀드린것처럼 저희쪽에러는 아니여서 activelogger관련해서 서칭해보시면 좋을 것 같아요

까네•2d ago

에러표시되는 라인 클릭해서 코드 보면 v2 라이브러리 내부에서 발생하는 것 같은데.. @쪼이쪼이 님과 같은 라인이라고 표시되기도 하고 저 라인 윗부분 보면 토스 페이 관련 에러 캐치 부분인 것 같아서 다시 여쭤봅니다 ㅠ 뭔가 쪼이님이 해결하셨던 부분이 저도 적용될까 싶어서 쪼이님이 해결하신 방법을 알고 싶은데.. 아 제 코드는

    const { widgets } = await loadTossPayments(apiKey);

    const widget = widgets({ customerKey });

    const { renderPaymentMethods, renderAgreement, setAmount } = widget;

    await setAmount({
      value: price,
      currency: 'KRW',
    });

    await Promise.all([
      // ------  결제 UI 렌더링 ------
      renderPaymentMethods({
        selector: '#payment-method',
      }),
      // ------  이용약관 UI 렌더링 ------
      renderAgreement({ selector: '#agreement' }),
    ]);

    const { widgets } = await loadTossPayments(apiKey);

    const widget = widgets({ customerKey });

    const { renderPaymentMethods, renderAgreement, setAmount } = widget;

    await setAmount({
      value: price,
      currency: 'KRW',
    });

    await Promise.all([
      // ------  결제 UI 렌더링 ------
      renderPaymentMethods({
        selector: '#payment-method',
      }),
      // ------  이용약관 UI 렌더링 ------
      renderAgreement({ selector: '#agreement' }),
    ]);

이렇게 연동하기 가이드 참고해서 만들었고, 에러나는 위치는 const { renderPaymentMethods, renderAgreement, setAmount } = widget; 여기 아래 부분 부터입니다. setAmount 를 지우면 renderPaymentMethods 에서 에러가 표시됩니다. 에러 증상은 결제 UI 가 표시되지 않는 것입니다.

연동하기 | 토스페이먼츠 개발자센터

토스페이먼츠의 간편한 결제 연동 과정을 한눈에 볼 수 있습니다. 각 단계별 설명과 함께 달라지는 UI와 코드를 확인해보세요.

이실장•22h ago

저희 접근가능한 페이지가 있을까요? setAmount를 안지우면 이상없는거죠?

까네•12h ago

@이실장 아 setAmount 를 지워도 동일하게 나타납니다. 현재 @tosspayments/payment-widget-sdk 에서 @tosspayments/tosspayments-sdk 로 마이그레이션 중인데, 개발 서버가 따로 없어서 수정한 코드를 배포하면 실서버에 바로 적용되기 때문에 따로 확인시켜 드릴 수 있는 url 이 없습니다..

이실장•12h ago

마이그레이션은 왜하시나요?

까네•12h ago

구독 시스템 추가 하기 위해 자동 결제 지원이 v2 부터 되는 것 같아서 하려고 합니다

이실장•12h ago

아 그러진 않아요 v1 > v2를 굳이 마이그레이션 하실 필요는 없어서요

까네•12h ago

여기 log 전송시에 payload 부분에 setAmount 가 실패하는 것 처럼 보이는데, 첫 이미지에서는 setAmount:start 인데 두번째 log 이미지에서는 setAmount:fail 하며 이후 메세지에는 쪼이님과 동일하게 activationLogger 관련 에러 메세지가 뜨고 있습니다. api key 는 가이드에 있는 테스트 키를 사용하고 있었습니다.

까네•12h ago

아..? v1 에서는 자동결제가 cdn 으로 임포트를 해야만 가능한 것 같아보였는데 아닌가요? 현재는 @tosspayments/payment-widget-sdk 모듈 설치해서 사용중입니다.

이실장•12h ago

자동결제가 구독결제하시려는거죠 ?

까네•12h ago

넵 맞ㅅ습니다

이실장•12h ago

이거요

이실장•12h ago

https://docs.tosspayments.com/guides/billing/integration

자동결제(빌링) 결제창 연동하기 | 토스페이먼츠 ...

자동결제는 다른 이름으로 빌링, 또는 정기결제로 불리는 결제 방식입니다. 카드 등록창에서 구매자의 카드를 한 번만 등록하고 나면, 별도의 인증 없이 간편하게 결제를 요청할 수 있습니다.

이실장•12h ago

여기 사용하시면되요 기존 위젯 그대로 두시고, 위에 만 해주시면 됩니다.

까네•12h ago

아 cdn 이랑 모듈 동시에 사용해도 상관 없을까요?

이실장•12h ago

여기도 cdn있어요 <script src="https://js.tosspayments.com/v1/payment"></script>

까네•12h ago

근데 v2 보다는 v1 추천해주시는게 아직 안정적이지 않아서 그런 걸까요?

이실장•12h ago

v1 <>V2는 혼용이 안되요 그런데 기존 v1위젯 쓰고 계셨으면, v1 빌링결제창만 연동하실 수 있는데요. 굳이 v2빌링결제창을 쓰려고, v1위젯 >v2위젯으로 바꿀필요가 없어서요 지금 바꾸시다보니 뭔가 충돌이 나고 있는것 같은데.

까네•12h ago

아 제가 지금 npm 으로 @tosspayments/payment-widget-sdk 이 모듈을 설치해서 사용 중인데 이것과 https://js.tosspayments.com/v1/payment 이 cdn 을 동시에 사용해도 문제 없는지를 여쭤봤습니다.

이실장•12h ago

네 문제 없을거에요 v1끼리는 간섭없습니다.

까네•12h ago

네 그래서 v1 은 모두 제거하고 v2 만 넣는 중에 이런 에러가 발생했습니다 ㅠ

이실장•12h ago

네 그래서 v1그대로 두시고 v1빌링결제창 추가하시는게 어떠실까요

까네•12h ago

일단 안내해주신 대로 v1 그대로 사용하면서 cdn 붙이고 빌링 결제창 연동하겠습니다~

이실장•12h ago

넵!

까네•12h ago

넵 그렇게 하겠습니다 감사합니다~!

까네•8h ago

안녕하세요. 문제가 해결 되어서 남기려고 합니다. 기존에는 handleInitTossPayments 라는 함수에서 위젯 초기화와 값 세팅 및 위젯 렌더링을 동시에 실행했었습니다.

    const { widgets } = await loadTossPayments(apiKey);

    const widget = widgets({ customerKey });

    const { renderPaymentMethods, renderAgreement, setAmount } = widget;

    await setAmount({
      value: price,
      currency: 'KRW',
    });

    await Promise.all([
      // ------  결제 UI 렌더링 ------
      renderPaymentMethods({
        selector: '#payment-method',
      }),
      // ------  이용약관 UI 렌더링 ------
      renderAgreement({ selector: '#agreement' }),
    ]);

    const { widgets } = await loadTossPayments(apiKey);

    const widget = widgets({ customerKey });

    const { renderPaymentMethods, renderAgreement, setAmount } = widget;

    await setAmount({
      value: price,
      currency: 'KRW',
    });

    await Promise.all([
      // ------  결제 UI 렌더링 ------
      renderPaymentMethods({
        selector: '#payment-method',
      }),
      // ------  이용약관 UI 렌더링 ------
      renderAgreement({ selector: '#agreement' }),
    ]);

예전에 v1 을 이용해 구현했을 때 토스페이 공홈에 안내된 react 연동 가이드 코드 를 참고 했던 기억이 나서 위젯 초기화 하는 부분과 위젯 렌더링하는 부분을 나눠서 구현해봤습니다.

  // 결제 위젯 초기화
  const handleInitTossPayments = useCallback(async () => {
    const tossPayments = await loadTossPayments(apiKey);
    const widget = tossPayments.widgets({ customerKey });

    setPaymentWidget(widget);
  }, []);

  // 결제 위젯 렌더링
  const handleRenderPaymentsWidget = useCallback(async () => {
    if (!paymentWidget) {
      return;
    }

    await paymentWidget.setAmount({
      value: price,
      currency: 'KRW',
    });

    await Promise.all([
      // 결제 UI 렌더링
      paymentWidget.renderPaymentMethods({
        selector: '#payment-method',
      }),
      // 이용약관 UI 렌더링
      paymentWidget.renderAgreement({ selector: '#agreement' }),
    ]);
  }, [paymentWidget, price]);

  useEffect(() => {
    (async () => {
      if (!price || !!paymentWidget) {
        return;
      }

      await handleInitTossPayments();
    })();
  }, [handleInitTossPayments, paymentWidget, price]);

  useEffect(() => {
    (async () => {
      if (!paymentWidget) {
        return;
      }

      await handleRenderPaymentsWidget();
    })();
  }, [paymentWidget, handleRenderPaymentsWidget]);

  // 결제 위젯 초기화
  const handleInitTossPayments = useCallback(async () => {
    const tossPayments = await loadTossPayments(apiKey);
    const widget = tossPayments.widgets({ customerKey });

    setPaymentWidget(widget);
  }, []);

  // 결제 위젯 렌더링
  const handleRenderPaymentsWidget = useCallback(async () => {
    if (!paymentWidget) {
      return;
    }

    await paymentWidget.setAmount({
      value: price,
      currency: 'KRW',
    });

    await Promise.all([
      // 결제 UI 렌더링
      paymentWidget.renderPaymentMethods({
        selector: '#payment-method',
      }),
      // 이용약관 UI 렌더링
      paymentWidget.renderAgreement({ selector: '#agreement' }),
    ]);
  }, [paymentWidget, price]);

  useEffect(() => {
    (async () => {
      if (!price || !!paymentWidget) {
        return;
      }

      await handleInitTossPayments();
    })();
  }, [handleInitTossPayments, paymentWidget, price]);

  useEffect(() => {
    (async () => {
      if (!paymentWidget) {
        return;
      }

      await handleRenderPaymentsWidget();
    })();
  }, [paymentWidget, handleRenderPaymentsWidget]);

위와 같이 작성한 후에 v2 이용한 코드 정상 작동 확인했습니다.

GitHub

tosspayments-sample/express-react/src/pages/widget/WidgetCheckout.j...

토스페이먼츠 결제연동 샘플 프로젝트입니다. Contribute to tosspayments/tosspayments-sample development by creating an account on GitHub.

브랜드페이 결제관리 창 오류

Did you find this page helpful?