정재욱•12mo ago

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

여러개의 결제수단을 사용할 때 사용자가 선택한 결제 수단의 결제UI를 호출하기 위해서 getSelectedPaymentMethod 호출 후 requestPayment를 호출하는 방식이 맞을까요?

14 Replies

토스페이먼츠 BOT•12mo ago

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

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

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

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

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

이실장•12mo ago

여러개의 결제수단을 사용한다는게 무슨뜻일까요 일반적으로 그냥 RequestPayemnt호출하면 위젯에서 고객이 선택한 결제수단으로 자동진행됩니다. getSelectedPaymentMethod 결제와 무관하게 고객이 현재 선택한 결제수단을 확인하는 용도로 사용할 수 있습니다.

정재욱OP•12mo ago

간편결제, 계좌이체의 결제수단이 있는 경우 RequestPayemnt 호출했을 때 두 결제수단 모두 해당 위젯이 노출되어서 문의드렸습니다

이실장•12mo ago

일단 이건 위젯이 아닙니다. 이거 띄우기 전화면 한번 보여주시겠어요?

정재욱OP•12mo ago

이 화면 입니다

이실장•12mo ago

일단 뭔가 이상한대 영상으로 한번 보여주시겠어요? 첫번쨰 화면부터 넘어가는 것 까지요

정재욱OP•12mo ago

영상입니다

유부장•12mo ago

이 상황은 100% 재현이 되시나요? 어떻게 연동 하셨는지 / 어떻게 재현 하셨는지 조금 더 자세히 설명 가능 하실까요?

이실장•12mo ago

저희가 접근가능한 사이트가 있나요? 없다면 결제하기 버튼 눌렀을 때 실행되는 이벤트 소스코드 공유해주세요

정재욱OP•12mo ago

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>

GitHub

payment-widget-sample/nextjs/src/pages/checkout.tsx at main · tossp...

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

정재욱OP•12mo ago

로컬에서 실행되고 있는 상황도 관련이 있을까요? 위젯 렌더링 코드는 해당 버튼이 있는 컴포넌트의 상위에서 정의하고 있습니다

  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]);

getSelectedPaymentMethod() 값을 콘솔로 찍어봤을 때 90%정도는 CARD로 나오고 10%는 선택한 결제수단으로 정상 출력되는데, requestPayment 호출하는 시점에 ready 상태가 아니여서 생기는 문제일 수 도 있나요?

유부장•12mo ago

네, 결제위젯이 렌더되지 않은 상태에서 결제요청이 있으면 저 결제창이 뜨게 됩니다. 그래서 위젯 렌더완료 이벤트를 제공 해드리고 있습니다. (인지하고 계시는 ready)

토스페이먼츠 BOT•12mo ago

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

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

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

Did you find this page helpful?