[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);
도움 부탁 드립니다~!
12 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 를 사용합니다.
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 파일 이외의 파일들도 모두 가져와야하는지요
@Ayaan_ 안녕하세요. 확인해보니 Typescript 는 사용중이지 않고 있습니다
혹시 해당문제일수도 있으니 가이드 주실수있으신지요?
샘플 소스를 로컬호스트로 기동은 정상작동 확인하였습니다
네 맞습니다
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" });
},
오! 감사합니다
원인이 무엇일까요 해결 되었습니다
네 감사합니다. 안되서 진땀빼고 있었는데 빠른 지원덕분에 신뢰도가 올라가네요~! 좋은하루 되십시요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.