결제 위젯 스크립트오류.
종종 결제위젯을 이용해서 paymentWidget.requestPayment 함수호출시 스크립트오류가 발생하고 아무일도 일어나지 않는데 ..
새로고침하면 잘 됩니다.
이 경우 어느쪽을 확인해봐야할까요?
Vue3 , npm으로 연동중입니다
12 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
어떤 스크립트 오류가 나는지, 캡쳐해주실수 있을까요?
앗 넵 잠시만요
결제수단이 아직 선택되지 않았어요 입니다ㅠ
이전에 썼던게 남아있는것같이 보여서 그냥 진행눌렀습니다
이 경우 보통 같은 인스턴스에서 requestPayment를 하고계신게 아닌거 같습니다.
어떻게 구성하셨는지 코드를 조금 보내주시거나 샘플 참고해서 다시 해보시는게 좋을거 같아요
import { loadPaymentWidget, ANONYMOUS } from "@tosspayments/payment-widget-sdk";
import { nanoid } from "nanoid";
import AlertDialog from "@/dialogs/AlertDialog.vue";
export default {
props: {amount: Number, product: Object, widgetWidth: Number,},
components:{AlertDialog},
data() {
return {
paymentWidget: null,
paymentMethodWidget: null,
clientKey: "xxx",
customerKey: nanoid(),
};
},
watch:{
amount(v) {
this.updateAmount(v);
}
},
methods: {
async requestPayment() {
try {
if (this.paymentWidget) {
const { product } = this;
this.paymentWidget.requestPayment({
orderId: nanoid(),
orderName: product.title,
successUrl:
${window.location.origin}/store,
failUrl: ${window.location.origin}/store,
});
}
} catch (error) {
console.error(error);
}
},
async updateAmount() {
if(this.paymentMethodWidget) this.paymentMethodWidget.updateAmount(this.amount);
},
},
async mounted() {
this.paymentWidget = await loadPaymentWidget(this.clientKey, ANONYMOUS);
this.paymentMethodWidget = this.paymentWidget.renderPaymentMethods("#payment-method", {value: this.amount}, {variantKey: "DEFAULT"});
this.paymentWidget.renderAgreement("#agreement", {variantKey: "AGREEMENT"});
},
};
이렇게 구성했습니다, vue3 입니다async requestPayment() {
를 부르는 시점이 언제이신가요?
버튼을 누르는 시점인데요.
위젯상에는 결제수단이 이전에 사용했던게 선택이 되 있는 상태여서 다음을 눌렀습니다.
그런데 선택된 수단이 화면상으로만 표시된걸까요? 재 렌더링을 마운트시점에 하는게 문제가 될까요?
버튼을 누르는 시점에 다시 렌더링을 하시나요?
아니요. Vue 컴퍼넌트가 마운트 되는 시점에 합니다
해당 에러는 requestpayment 를 호출하는 instance 에 선택한 결제수단이 없는 겁니다. 2개이상의 위젯 instance 가 있는게 아닌지 확인을 해주셔야 할것 같아요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.