S

Toss payments 개발자 커뮤니티•2y ago•

19 replies

silvester0143

[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);


도움 부탁 드립니다~!

토스페이먼츠 개발자센터