Vue.js (Vue3) 결제 API 포트원 (아임포트) 구현하면서 리팩토링

Spring Boot에서 아임포트 관련 기능 구현하고, 이제 프론트 앞단에 적용하기

https://steadi1y.tistory.com/277

Spring Boot 결제 API 포트원 (아임포트) 구현하기

 

기술 스택

Vue.js 

---

리팩토링

기존 코드

구매권 여부 확인해서 없으면, 결제 버튼 클릭하고 끝

function submitPaymentData() {
  if (productPrice.value == 0 || product.value == "") {
    const modal = new Modal(document.getElementById("productModal"));
    modalMessage.value = "상품을 선택해주세요.";
    modal.show();
  } else {
    // 결제 처리 로직
    //등록권 소유 유무 체크
    checkPropertyListing();
    if (!hasPropertyListing.value) {
      //등록권 없다면 계속 진행
      purchasePropertyListing();
      router.push("/Payment/PaymentResult/"+product.value);
    } else {
      const modal = new Modal(document.getElementById("productModal"));
      modalMessage.value = "등록권을 이미 소유 하고 있습니다.";
      modal.show();
    }
  }
}
//등록권 구매
async function purchasePropertyListing() {
  try {
    await propertyAPI.purchasePropertyListing(product.value);
  } catch (error) {
    console.error(error.message);
  }
}
//등록권 유무 확인
async function checkPropertyListing() {
  try {
    const response = await propertyAPI.checkPropertyListing();
    if (response.data > 0) {
      hasPropertyListing.value = true;
    } else {
      hasPropertyListing.value = false;
    }
  } catch (error) {
    console.error(error.message);
  }
}

 

수정 코드

1. 코드 간결하게 수정

    if (response.data > 0) {
      hasPropertyListing.value = true;
    } else {
      hasPropertyListing.value = false;
    }

 

수정 후

hasPropertyListing.value = response.data > 0;

 

2. early return

  if (productPrice.value == 0 || product.value == "") {
    const modal = new Modal(document.getElementById("productModal"));
    modalMessage.value = "상품을 선택해주세요.";
    modal.show();
  } else {
}

 

수정 후

  if (productPrice.value == 0 || product.value == "") {
    const modal = new Modal(document.getElementById("productModal"));
    modalMessage.value = "상품을 선택해주세요.";
    modal.show();
    return;
  }

 

3. 비동기 함수 await 추가

등록권 소유 여부를 확인하는 비동기 작업이 완료된 후에 결제 관련 로직이 실행되도록 보장

  // 결제 처리 로직
  //등록권 소유 유무 체크
  await checkPropertyListing();

---

구현 과정 

공식 문서

 

index.html에 라이브러리 추가 

<script src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script>

 

가맹점 식별 코드 추가

  const IMP  = window;
  IMP.init(process.env.VUE_APP_IAMPORT_KEY);

 

결제 데이터 정의

  const data = {
  	pg: 'html5_inicis',
    merchant_uid: `mid_${new Date().getTime()}`,
    name: '등록권 구매',
    amount: productPrice.value,
    buyer_email: store.getters.getUemail,
  };

 

결제 창 호출 및 콜백 함수 정의 

  IMP.request_pay(data, async function(response) {
    if (response.success) {
      try {
        await axios.post(`/api/payment/validate/${response.imp_uid}`);
        await purchasePropertyListing();
        router.push("/Payment/PaymentResult/" + product.value);
      } catch (error) {
        alert(`결제에 실패하였습니다. 에러 내용: ${response.error_msg}`);
      }
    } else {
      alert(`결제에 실패하였습니다. 에러 내용: ${response.error_msg}`);
    }  
  });