[Vue.JS]PaymentWidget is not defined 에러
안녕하세요. Vue.js 개발환경에서 개발중인데
76:26 error 'PaymentWidget' is not defined 의 에러가 발생하는데 어떻게 해결해야할까요?
1. yarn install 을 통해 toss SDK 설치 완료
"dependencies": {
"@tosspayments/payment-widget-sdk": "^0.10.2",
// 나머지
}
2. vue.js 의 샘플코드 거의 그대로 복사함.
<template>
//소스 그대로
</template>
<script>
import { loadPaymentWidget, ANONYMOUS } from "@tosspayments/payment-widget-sdk";
//import { PaymentWidget, ANONYMOUS } from "@tosspayments/payment-widget-sdk";
import { nanoid } from "nanoid";
export default {
//중략
async mounted() {
// ------ 결제위젯 초기화 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#sdk-설치-및-초기화
this.paymentWidget = PaymentWidget(this.clientKey, ANONYMOUS);
// ------ 결제 UI 렌더링 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션
this.paymentMethodWidget = this.paymentWidget.renderPaymentMethods("#payment-method", { value: this.amount }, { variantKey: "DEFAULT" });
// ------ 이용약관 UI 렌더링 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션
this.paymentWidget.renderAgreement("#agreement", { variantKey: "AGREEMENT" });
},
};
</script>
76번째 라인의 'PaymentWidget' is not defined 에러 발생
this.paymentWidget = PaymentWidget(this.clientKey, ANONYMOUS);
도움 부탁 드립니다~!
24 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
아래 샘플코드로 해보시겠어요?
https://github.com/tosspayments/payment-widget-sample/tree/main/vue
GitHub
payment-widget-sample/vue at main · tosspayments/payment-widget-sam...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
@박수습 안녕하세요, 우선 답변 감사합니다. 제가 참조한 git 의 소스와 동일해보입니다.
CheckoutView.vue 의 파일에 해당하는 내용만 가져오기는 했습니다.
(물론 제가 어딘가 놓친게 있겠지만 그걸 못찾고있네요 ^^;)
예시 샘플의 파일은 로컬에서 기동테스트해봤고, 이제 실제 저희 솔루션에서 사용할 환경으로 옮겨서 테스트하는과정에서 문제가 발생합니다
그렇다면 코드를 섞어서 사용하시는 것 같아요.
PaymentWidget는 javascript에서 사용하는 코드 입니다.
npm으로 설치한 패키지는 loadPaymentWidget 를 사용합니다.
아니면 혹시 typescript 사용하실 경우 loadPaymentWidget으로 load한 PaymentWidget 변수를 인식하지 못하는 것일 수 있습니다.
github 의 Checkout.vue 파일을 참조했습니다.
https://github.com/tosspayments/payment-widget-sample/blob/main/vue/src/views/CheckoutView.vue
샘플 소스의 77번째 라인의 소스를 보면
this.paymentWidget = PaymentWidget(this.clientKey, ANONYMOUS); 이렇게 되어있는데, 제가 잘못된 소스를 참조하고있는걸까요?
this.paymentWidget = PaymentWidget(this.clientKey, ANONYMOUS); 이렇게 되어있는데, 제가 잘못된 소스를 참조하고있는걸까요?
GitHub
payment-widget-sample/vue/src/views/CheckoutView.vue at main · toss...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
혹은 Checkout.vue 파일 이외의 파일들도 모두 가져와야하는지요
이 경우로 보이는데요.
Typescript 사용하고 계신가요? @silvester0143
@Ayaan_ 안녕하세요. 확인해보니 Typescript 는 사용중이지 않고 있습니다
혹시 해당문제일수도 있으니 가이드 주실수있으신지요?
해당 문제는 아닙니다. 타입스크립트의 경우 컴파일 시 undefined 값인 경우에 실행이 안되서 발생하는 오류인데, 타입스크립트 안쓰시면 무관합니다.
샘플 소스 그대로 git clone하여서는 작동하는지 확인부탁드릴게요. 이런 경우 보통 mounted()가 호출될때 아직 PaymentWidget SDK가 import 완료되지 않은 경우일 수 있어서 비교해서 확인이 필요해 보입니다.
샘플 소스를 로컬호스트로 기동은 정상작동 확인하였습니다
정리하면,
샘플 소스에서는 정상작동하지만
귀사 코드에서는 PaymentWidget 작동안함 맞을까요?
네 맞습니다
this.paymentWidget = PaymentWidget(...) 이걸 귀사 코드에서도 사용하고 있을텐데요.
mounted()에서 호출하고 계신게 맞는지 확인해 주시겠어요?
async mounted() {
// ------ 결제위젯 초기화 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#sdk-설치-및-초기화
this.paymentWidget = PaymentWidget(this.clientKey, ANONYMOUS);
// ------ 결제 UI 렌더링 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션
this.paymentMethodWidget = this.paymentWidget.renderPaymentMethods("#payment-method", { value: this.amount }, { variantKey: "DEFAULT" });
// ------ 이용약관 UI 렌더링 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션
this.paymentWidget.renderAgreement("#agreement", { variantKey: "AGREEMENT" });
},
mounted 샘플 그대로 호출 중이신가요?
그러면 이렇게 수정 후 다시 시도 부탁드립니다.
this.paymentWidget = PaymentWidget(this.clientKey, ANONYMOUS); -> this.paymentWidget = await loadPaymentWidget(this.clientKey, ANONYMOUS);오! 감사합니다
원인이 무엇일까요 해결 되었습니다
샘플 소스에 문제가 있었던거 같습니다. 박수습님께 지금 전달드려서 확인할 수 있도록 해볼게요
@박수습 샘플에서도 loadPaymentWidget 를 임포트만 하고 실제로는 PaymentWidget을 바로 호출하고 있는것 처럼 보이는데요,
loadPaymentWidget을 await으로 호출하도록 샘플이 업데이트 되어야 할것 같습니다. (tosspayments/payment-widget-sample#36)
네 감사합니다. 안되서 진땀빼고 있었는데 빠른 지원덕분에 신뢰도가 올라가네요~! 좋은하루 되십시요
넵 감사합니다~
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.