까네 Comments - Toss payments 개발자 커뮤니티

까네

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

안녕하세요. 문제가 해결 되어서 남기려고 합니다. 기존에는 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 이용한 코드 정상 작동 확인했습니다.

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

넵 맞ㅅ습니다

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

42 replies

TPToss payments 개발자 커뮤니티

•Created by 쪼이쪼이 on 3/25/2025 in #❓┃연동개발-문의

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

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

42 replies