토스페이먼츠 Vue샘플코드 TS문의
''안녕하세요.
토스페이먼츠 Vue 샘플 보고 결제 연동 시도 중에
에러가 나서 문의드립니다.
저는 Vue3, Nuxt3, Typescript를 사용하고 있고,
기타 정보는 아래와 같습니다.
npm 8.11.0
node 17.9.1
"@tosspayments/payment-widget-sdk": "^0.10.2"
샘플 코드를 script setup lang="ts" 방식으로만 바꿔서 실행했는데
paymentWidget = PaymentWidget(clientKey, ANONYMOUS); <- 이 부분에서 타입스크립트 에러가 납니다.
Error message : 'PaymentWidget' 이름을 찾을 수 없습니다. 'paymentWidget'을(를) 사용하시겠습니까? ts(2552)'
브라우저 콘솔에서는 'ReferenceError: PaymentWidget is not defined' 이 에러가 나고 있습니다.
어떤 부분을 수정해야 하나요??7 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
loadPaymentWidget으로 paymentWidget을 초기화 해야 합니디.
GitHub
payment-widget-sample/vue at main · tosspayments/payment-widget-sam...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
네 'https://github.com/tosspayments/payment-widget-sample/tree/main/vue' 그거 보고 했습니다
import { loadPaymentWidget, ANONYMOUS } from "@tosspayments/payment-widget-sdk";
import { nanoid } from "nanoid"; import하는 부분입니다❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
해당 에러는 타입스크립트 컴파일러가 엄격한 타입 체크를 하기 때문에 명시적으로 PaymentWidget이 정의되어있어야 하거든요. 해당 코드는 vue코드로 작성되어 있어 타입스크립트에서 그대로 사용하실 수는 없습니다.
지금 사용하시는게 vue3의 ts 설정으로 사용하시는거죠?
npm 모듈의 작동 구조를 알고 계셔야 어떤부분때문에 이렇게 오류가 나는지 이해가 쉬우실 것 같은데요.
loadPaymentWidget을 실행하면 SDK가 Browser JS SDK를 비동기적으로 불러옵니다. 그래서 Browser단에서 PaymentWidget이라는 값이 생기는 거구요.
여기서 PaymentWidget값이 지정되기 전에 mounted가 호출되는 경우가 있을 수 있습니다. (네트워크 지연 등으로) 이러면 해당 오류가 발생하기도 합니다.
또한 타입스크립트를 사용하시기 때문에 명시적인 함수정의가 없어 오류가 발생하는 부분으로 보입니다.
한번 window.PaymentWidget.---- 로 수정해서 실행해 보시겠어요?