정재욱 Comments - Toss payments 개발자 커뮤니티

  useEffect(() => {
    if (paymentWidget == null) {
      return;
    }

    // ------  결제위젯 렌더링 ------
    // @docs https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      '#payment-widget',
      { value: price },
      { variantKey: 'DEFAULT' },
    );

    paymentMethodsWidgetRef.current = paymentMethodsWidget;

    // ------  이용약관 렌더링 ------
    // @docs https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션
    paymentWidget.renderAgreement('#agreement', {
      variantKey: 'AGREEMENT',
    });
  }, [paymentWidget]);

  useEffect(() => {
    if (paymentWidget == null) {
      return;
    }

    // ------  결제위젯 렌더링 ------
    // @docs https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      '#payment-widget',
      { value: price },
      { variantKey: 'DEFAULT' },
    );

    paymentMethodsWidgetRef.current = paymentMethodsWidget;

    // ------  이용약관 렌더링 ------
    // @docs https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션
    paymentWidget.renderAgreement('#agreement', {
      variantKey: 'AGREEMENT',
    });
  }, [paymentWidget]);

22 replies

TPToss payments 개발자 커뮤니티

•Created by 정재욱 on 3/5/2024 in #❓┃연동개발-문의

사용자가 선택한 결제수단 문의

로컬에서 실행되고 있는 상황도 관련이 있을까요?

22 replies

TPToss payments 개발자 커뮤니티

•Created by 정재욱 on 3/5/2024 in #❓┃연동개발-문의

사용자가 선택한 결제수단 문의

100% 재현이 되고 있습니다. 연동과정은 해당 레포지토리 과정에서 updateAmount를 제외한 다른 부분은 동일 합니다. https://github.com/tosspayments/payment-widget-sample/blob/main/nextjs/src/pages/checkout.tsx

 <button
          type="button"
          onClick={async () => {
            await paymentWidget?.requestPayment({
              orderId: nanoid(),
              orderName: '토스 티셔츠 외 2건',
              customerName: '테스트',
              successUrl: 'http://localhost:3000/success',
              failUrl: 'http://localhost:3000/fail',
            });
          }}
        >
          50000만원 결제
        </button>

 <button
          type="button"
          onClick={async () => {
            await paymentWidget?.requestPayment({
              orderId: nanoid(),
              orderName: '토스 티셔츠 외 2건',
              customerName: '테스트',
              successUrl: 'http://localhost:3000/success',
              failUrl: 'http://localhost:3000/fail',
            });
          }}
        >
          50000만원 결제
        </button>