결제위젯 클라이언트 쪽 예제코드를 실행하면 에러가 납니다.

현재 심사를 위해 새로 street4zss MID 를 발급받고 개발 중입니다. 해당 위젯 키로 실행을 하면 콘솔에 아래와 같은 에러가 발생합니다.

TypeError: Cannot read properties of undefined (reading 'id')
    at r.selectedPaymentMethod.isNormalMethodFirst (11-fe79a70f88345b5f.js:53:49477)
    at ed.ofPaymentMethodMap (11-fe79a70f88345b5f.js:53:49534)
   ...
toss-test:30 Uncaught (in promise) r: 알 수 없는 에러가 발생했습니다.
    at https://js.tosspayments.com/v2/standard:7:546228
    at Object.otherwise (https://js.tosspayments.com/v2/standard:7:429238)
   ...

TypeError: Cannot read properties of undefined (reading 'id')
    at r.selectedPaymentMethod.isNormalMethodFirst (11-fe79a70f88345b5f.js:53:49477)
    at ed.ofPaymentMethodMap (11-fe79a70f88345b5f.js:53:49534)
   ...
toss-test:30 Uncaught (in promise) r: 알 수 없는 에러가 발생했습니다.
    at https://js.tosspayments.com/v2/standard:7:546228
    at Object.otherwise (https://js.tosspayments.com/v2/standard:7:429238)
   ...

아래는 문서를 보며 작성한 위젯 호출 코드 입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <head>
      <!-- 스크립트 추가 -->
      <script src="https://js.tosspayments.com/v2/standard"></script>
    </head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>결제위젯 샘플</title>
  </head>
  <body>
    <script>
        // 스크립트 태그 연동방식
        function generateRandomString() {
           return window.btoa(Math.random().toString()).slice(0, 20);
        }
        async function main () {
            const tossPayments = TossPayments("test_gck_QbgMGZzorzzKQwgdaNLLrl5E1em4"); // 결제위젯 연동 키
            const widgets = tossPayments.widgets({ customerKey: generateRandomString() });
            widgets.setAmount({
              currency: 'KRW',
              value: 1000,
            });
            const paymentMethodWidget = await widgets.renderPaymentMethods({
              selector: "#payment-method",
              variantKey: "DEFAULT",
            });
        }
        main();  

      </script>
    <div class="wrapper w-100">
      <div class="max-w-540 w-100">
        <div id="payment-method" class="w-100"></div>
        <div id="agreement" class="w-100"></div>
        <div class="btn-wrapper w-100">
          <button id="payment-request-button" class="btn primary w-100">결제하기</button>
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <head>
      <!-- 스크립트 추가 -->
      <script src="https://js.tosspayments.com/v2/standard"></script>
    </head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>결제위젯 샘플</title>
  </head>
  <body>
    <script>
        // 스크립트 태그 연동방식
        function generateRandomString() {
           return window.btoa(Math.random().toString()).slice(0, 20);
        }
        async function main () {
            const tossPayments = TossPayments("test_gck_QbgMGZzorzzKQwgdaNLLrl5E1em4"); // 결제위젯 연동 키
            const widgets = tossPayments.widgets({ customerKey: generateRandomString() });
            widgets.setAmount({
              currency: 'KRW',
              value: 1000,
            });
            const paymentMethodWidget = await widgets.renderPaymentMethods({
              selector: "#payment-method",
              variantKey: "DEFAULT",
            });
        }
        main();  

      </script>
    <div class="wrapper w-100">
      <div class="max-w-540 w-100">
        <div id="payment-method" class="w-100"></div>
        <div id="agreement" class="w-100"></div>
        <div class="btn-wrapper w-100">
          <button id="payment-request-button" class="btn primary w-100">결제하기</button>
        </div>
      </div>
    </div>
  </body>
</html>

저번에 문의한 bill_wsneapvjb mid로 했을 때 와 같은 에러입니다. 감사합니다.

7 Replies

토스페이먼츠 BOT•4d ago

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

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

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

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

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

살라만카OP•4d ago

자답입니다 variantKey: 'DEFAULT' 로 하면 에러가 나네요 새로 생성하여 적용하니 잘 뜨네요

Kimoon Lee•4d ago

DEFAULT 는 기본위젯이라 사용하지 않으시더라도 DEFAULT 라는 이름으로 위젯 하나 만들어 주시기 바랍니다.

살라만카OP•4d ago

@냥과장 처음 UI 설정 에서 DEFAULT를 변경하려고 누르면 일시적인 오류가 발생했습니다. Cannot read properties of undefined (reading 'id') 라고 뜹니다. 이미 있는 것 말고 새로 DEFAULT 라고 이름을 만들어야 할까요?

살라만카OP•4d ago

Kimoon Lee•4d ago

이부분은 확인해 보도록 하겠습니다. 지금 외화 결제에 연결된 MID 가 등록된 결제수단이 없는것 같습니다. 외화결제 누르신후에 MID 를 다른것으로 바꿔보시기 바랍니다.

토스페이먼츠 BOT•3d ago

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

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

결제위젯 클라이언트 쪽 예제코드를 실행하면 에러가 납니다.

Did you find this page helpful?