석영•2y ago

안녕하세요 결제위젯 연동 문의드립니다.

며칠전까지만 해도 결제 완료까지 잘되던 결제 위젯이 렌더는 되지만, 주문 생성이 되지는 않습니다. ㅜ post 요청을 보내도 logs라는 name의 request만 남고 별도로 보이진 않습니다. 이전에는 결제 위젯에서 토스페이먼츠를 선택하고 테스트 결제까지 잘 됐습니다! - 현재 정식 계약은 하지 않은 상태입니다. 테스트 결제시에도 무반응이 일어나는건 처음이라 이렇게 문의드립니다

30 Replies

토스페이먼츠 BOT•2y ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

이실장•2y ago

결제하기 CTA는 반응이있나요? requestPayments method는 정상 연결되어있나요?

석영OP•2y ago

네 해당 버튼은 콘솔로그를 임의로 넣어 눌러보니 정상 작동하는 것을 확인했습니다. method는 아래와 같이 연결되어 있습니다! vue 코드로 작성됐습니다!

 async reqeustWidgetPayment() {
      
      if (!!this.userAnswers.orderId) {
        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");
      }
    },

 async reqeustWidgetPayment() {
      
      if (!!this.userAnswers.orderId) {
        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");
      }
    },

이실장•2y ago

paymentResource data 실제로 사용한 것 공유가능할까요

석영OP•2y ago

넵 다음과 같습니다!

     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,
      },

     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,
      },

석영OP•2y ago

Kimoon Lee•2y ago

reqeustWidgetPayment 혹시 버튼 눌렀을때 이 method 호출하도록 되어 있으신가요?

석영OP•2y ago

네 아래처럼 연결시켜두었습니다!

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

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

Kimoon Lee•2y ago

해당 버튼이 눌렸을때 reqeustWidgetPayment 가 잘 호출되는지 도 확인부탁드립니다.

석영OP•2y ago

if 문안에 console.log를 작성해봤는데 버튼 클릭시 콘솔은 출력되고 있습니다

이실장•2y ago

일단 보내주신 정보만으론 확인이 어려운데.. 저희가 접근가능한 사이트가 있어야 확인가능할 것 같습니다. 우선 저희쪽 변경사항은 없습니다.

Kimoon Lee•2y ago

우선은 버튼클릭시 콘솔 출력되는 상태로 테스트 하시는 영상 찍어서 올려주실수 있을까요?

석영OP•2y ago

네! 잠시만요 영상캡쳐해서 올려드릴게요!

석영OP•2y ago

영상 전달드려요!

석영OP•2y ago

아래는 해당 페이지 전체 코드입니다

<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>]

<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>