[Vue js] 아임포트 결제모듈 연동(KG 이니시스)

- 로그인후 우측 상단의 관리자 콘솔 접근

1. 아임포트 설정

- 내 정보 탭에서 가맹점 식별코드 복사

- PG 설정에서 기본 PG 사 KG 이니시스 설정 후 저장

2. FrontEnd

- public/index.html head에 추가

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script>

- Component

<template>
  <section class="test">
    <input type="number" placeholder="금액 입력" v-model="price" >
    <div @click="PaymentBtn">결제</div>
  </section>
</template>

<script>

const { IMP } = window;

export default {
  name: "test",
  data(){
    return{
      price: 0
    }
  },
  created(){
    document.cookie = "safeCookie1=foo; SameSite=Lax";
    document.cookie = "safeCookie2=foo";
    document.cookie = "crossCookie=bar; SameSite=None; Secure";
  },
  methods: {
    PaymentBtn:function(){

      IMP.init("관리자 콘솔 - 내 정보 - 가맹점 식별코드");

      IMP.request_pay({ // param
        pg: "html5_inicis",
        pay_method: "card",
        merchant_uid: "ORD20180131-0000011",
        name: "YOYOSTUDY",
        amount: this.price,
        buyer_email: "funidea_woo@naver.com",
        buyer_name: "테스터",
        buyer_tel: "010-8832-4280",
        buyer_addr: "서울특별시 영등포구 당산동",
        buyer_postcode: "07222"
      }, rsp => { // callback
        console.log(rsp);
        if (rsp.success) {
          console.log("결제 성공");
        } else {
          console.log("결제 실패");
        }
      });

    }
  }
}
</script>


<style scoped>
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input{ width:300px; border:0; border-bottom:1px #a8a8a8 solid; margin:0 10px 0; padding:0; height:40px; line-height:40px; outline: none; }
  .test{ display:flex; justify-content: center; align-items: center; height:100vh; }
  div{ width: 200px; height:40px; background-color:#ffffff; border:1px #a8a8a8 solid; color:black; display:flex; align-items: center; justify-content: center; cursor:pointer; }
</style>

2. TEST

- 결제 금액 입력 후 결제 버튼 클릭

- 결제 진행

- 결제 성공 확인(console.log)

- 아임포트 관리자 콘솔에서 결제 내역 확인 가능