제발요•8mo ago

renderPaymentMethods 에서 에러가 나는 원인을 모르겠습니다ㅠ

현재 toss 위젯 version2 로 연동작업중입니다! 어제 테스트할때까지는 잘 되었는데 오늘 오전 갑자기 renderPaymentMethods에서 에러가 나는데 에러메세지를 검색해도 자료가 안나와서 혹시 원인을 알 수 있을까요?? selector와 variantKey도 잘 보내고 있습니다. sdk 버전 : @tosspayments/tosspayments-sdk@2.2.1 아래 api 호출도 200으로 정상적으로 호출되었는데 에러가 나서 확인 부탁드려요ㅠ https://api.tosspayments.com/v1/payment-widget/widget-groups/keys?variantKey=DEFAULT payment widget error : Error: 잘못된 알파값 입니다(0~1): NaN standard error : Uncaught (in promise) Error: 알 수 없는 에러가 발생했습니다. 에러 메세지 이미지 첨부합니다!

11 Replies

토스페이먼츠 BOT•8mo ago

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

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

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

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

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

이실장•8mo ago

저희가 접근 가능한 사이트가 있을까요? 확인한상태라 지웠습니다. 확인해보고 말씀드릴게요 페이지에서는 코드 직접 확인이 불가능한대 js script 초기화한부분이랑, renderpaymentMethod사용한 부분만 코드 볼 수 있을까요?

  const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm";
        const tossPayments = TossPayments(clientKey);
        // 회원 결제
        const customerKey = "1jeuZ7SGeeLpZUCwSpPH4";
        const widgets = tossPayments.widgets({
          customerKey,
        });
        // 비회원 결제
        // const widgets = tossPayments.widgets({ customerKey: TossPayments.ANONYMOUS });

        // ------ 주문의 결제 금액 설정 ------
        await widgets.setAmount({
          currency: "KRW",
          value: 50000,
        });

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

  const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm";
        const tossPayments = TossPayments(clientKey);
        // 회원 결제
        const customerKey = "1jeuZ7SGeeLpZUCwSpPH4";
        const widgets = tossPayments.widgets({
          customerKey,
        });
        // 비회원 결제
        // const widgets = tossPayments.widgets({ customerKey: TossPayments.ANONYMOUS });

        // ------ 주문의 결제 금액 설정 ------
        await widgets.setAmount({
          currency: "KRW",
          value: 50000,
        });

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

이부분 입니다.

제발요OP•8mo ago

넵 저희는 vue와 nuxt3 를 사용중입니다! 초기화 코드는 아래와 같습니다. 이용약관은 저희 자체적인 약관이어서 위젯 이용약관은 사용하고 있지않습니다!

nextTick(async () => {
    // ------  결제위젯 초기화 ------
    tossPayments.value = await loadTossPayments(config.public.tossClientKey)
    widgets.value = tossPayments.value.widgets({
      customerKey: props.customerKey
    })
    // ------ 주문의 결제 금액 설정 ------
    await widgets.value.setAmount({
      currency: 'KRW',
      value: props.paiedAmount
    })
    // ------  결제 UI 렌더링 ------
    paymentMethodWidget.value = await widgets.value.renderPaymentMethods({
      selector: '#payment-method',
      variantKey: 'DEFAULT'
    })
  })

nextTick(async () => {
    // ------  결제위젯 초기화 ------
    tossPayments.value = await loadTossPayments(config.public.tossClientKey)
    widgets.value = tossPayments.value.widgets({
      customerKey: props.customerKey
    })
    // ------ 주문의 결제 금액 설정 ------
    await widgets.value.setAmount({
      currency: 'KRW',
      value: props.paiedAmount
    })
    // ------  결제 UI 렌더링 ------
    paymentMethodWidget.value = await widgets.value.renderPaymentMethods({
      selector: '#payment-method',
      variantKey: 'DEFAULT'
    })
  })

이실장•8mo ago

실제 customerKey에 들어간 값 확인이 가능할까요?

제발요OP•8mo ago

넵 nanoid 라이브러리로 만들고 있으며 aeD0AcLU 로 보냈습니다.

이실장•8mo ago

마지막으로 mid만 한번 확인요청드립니다.

제발요OP•8mo ago

mardlr3815 입니다!

이실장•8mo ago

배경색불투명도 값이 누락되어있었습니다. 우선 제가 임의로 넣어놨습니다. 이건 빈값이 들어가있으면 안되는데, 빈값으로 저장된상태라 저희쪽에서 이부분은 방어로직 들어갈 예정입니다.

제발요OP•8mo ago

아하 넵! 확인 감사합니다!

토스페이먼츠 BOT•8mo ago

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

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

renderPaymentMethods 에서 에러가 나는 원인을 모르겠습니다ㅠ

Did you find this page helpful?