h4NHtcVzyifGkrHeOP6vD

h4NHtcVzyifGkrHeOP6vD

<script>
import { loadPaymentWidget, ANONYMOUS } from "@tosspayments/payment-widget-sdk";

// 오픈된 무료 키
const CLIENT_KEY = "test_ck_YZ1aOwX7K8mONRZKg19VyQxzvNPG";


export default {
  name: "paymentVue",
  setup() {
    useMeta({
      description: "결제",
    });

    const userAnswers = useUserStore();

    return {
      userAnswers,
    };
  },
  data() {
    return {
      isLoading: true,
      amount: useQuantityStore().quantity.price * useQuantityStore().quantity,
      paymentResource: {
        orderId: this.userAnswers.orderId,
        orderName: "아레테 정식 검사코드",
        successUrl: `${window.location.origin}/paid/check`,
        failUrl: `${window.location.origin}/paid/fail`,
        customerEmail: this.userAnswers.email,
        customerName: this.userAnswers.userName,
      },
      paymentWidget: null,
    };
  },

  async mounted() {
    this.paymentWidget = await loadPaymentWidget(CLIENT_KEY, ANONYMOUS);
    await this.InitPaymentWidget();
  },

  methods: {
    async InitPaymentWidget() {
      await this.paymentWidget.renderPaymentMethods(
        "#payment-method",
        this.amount
      );
      await this.paymentWidget.renderAgreement("#agreement");
      this.settimeout(1500);
    },

    async reqeustWidgetPayment() {
      
      if (!!this.userAnswers.orderId) {
        console.log("버튼 클릭");
        this.paymentWidget
          .requestPayment(this.paymentResource)
          .then((data) => console.log(data))
          .catch(function (error) {
            if (error.code === "USER_CANCEL") {
              // 결제 고객이 결제창을 닫았을 때 에러 처리
              console.log(error);
            }
            if (error.code === "INVALID_CARD_COMPANY") {
              // 유효하지 않은 카드 코드에 대한 에러 처리g
              console.log(error);
            }
          });
      } else {
        alert(
          "주문 아이디가 정상적으로 생성되지 않았어요. 다시 주문서를 작성해주세요."
        );
        this.$router.push("/paid/entry/payment");
      }
    },
  },
};
</script>

<script>
import { loadPaymentWidget, ANONYMOUS } from "@tosspayments/payment-widget-sdk";

// 오픈된 무료 키
const CLIENT_KEY = "test_ck_YZ1aOwX7K8mONRZKg19VyQxzvNPG";


export default {
  name: "paymentVue",
  setup() {
    useMeta({
      description: "결제",
    });

    const userAnswers = useUserStore();

    return {
      userAnswers,
    };
  },
  data() {
    return {
      isLoading: true,
      amount: useQuantityStore().quantity.price * useQuantityStore().quantity,
      paymentResource: {
        orderId: this.userAnswers.orderId,
        orderName: "아레테 정식 검사코드",
        successUrl: `${window.location.origin}/paid/check`,
        failUrl: `${window.location.origin}/paid/fail`,
        customerEmail: this.userAnswers.email,
        customerName: this.userAnswers.userName,
      },
      paymentWidget: null,
    };
  },

  async mounted() {
    this.paymentWidget = await loadPaymentWidget(CLIENT_KEY, ANONYMOUS);
    await this.InitPaymentWidget();
  },

  methods: {
    async InitPaymentWidget() {
      await this.paymentWidget.renderPaymentMethods(
        "#payment-method",
        this.amount
      );
      await this.paymentWidget.renderAgreement("#agreement");
      this.settimeout(1500);
    },

    async reqeustWidgetPayment() {
      
      if (!!this.userAnswers.orderId) {
        console.log("버튼 클릭");
        this.paymentWidget
          .requestPayment(this.paymentResource)
          .then((data) => console.log(data))
          .catch(function (error) {
            if (error.code === "USER_CANCEL") {
              // 결제 고객이 결제창을 닫았을 때 에러 처리
              console.log(error);
            }
            if (error.code === "INVALID_CARD_COMPANY") {
              // 유효하지 않은 카드 코드에 대한 에러 처리g
              console.log(error);
            }
          });
      } else {
        alert(
          "주문 아이디가 정상적으로 생성되지 않았어요. 다시 주문서를 작성해주세요."
        );
        this.$router.push("/paid/entry/payment");
      }
    },
  },
};
</script>

<template>
  <div>
    <Order class="mt-12 mb-12" />
    <div id="payment-method"></div>
    <div id="agreement"></div>
  </div>

    <ButtonVue class="ma-12" id="request" @click="reqeustWidgetPayment">
      결제하기
    </ButtonVue>

</template>]

<template>
  <div>
    <Order class="mt-12 mb-12" />
    <div id="payment-method"></div>
    <div id="agreement"></div>
  </div>

    <ButtonVue class="ma-12" id="request" @click="reqeustWidgetPayment">
      결제하기
    </ButtonVue>

</template>]