[Rest Api] 아임포트를 이용한 KG이니시스 결제 구현하기 (feat. vue.js) - (1)

파이널 프로젝트에 결제 기능이 필요하여 알아보던 중 카카오에서 제공하는 카카오페이와 아임포트에서 제공하는 api기능을 제일 많이 사용하는 것을 확인할 수 있었다. 카카오로그인을 진행하면서 나름? 카카오 api 사용에 익숙해져 있던 터라 카카오페이를 구현했지만 우리 엄마는 카카오페이를 안 쓰는데.... 생각하니 너무 한 가지에 국한되어 있다는 생각을 하게 되었다. 그래서 이왕 한 거 정말 다양한 카드사들도 연동가능하게 구현을 해 보고 싶어서 아임포트를 이용한 결제 기능을 구현해 보았다. 

 

[아임포트란]

국내 PG결제 연동을 쉽게해주는 결제 API이다. 여기서 PG란 Payment gateway의 약자인데, 신용카드사와 직접 계약하기 어려운 온라인 쇼핑몰을 대신해 결제와 정산 업무를 대행해 주는 업체이다. 

 

 

[가입하기] 

아래의 관리자 페이지에서 회원가입을 진행해준다. 

포트원 관리자콘솔

 

 

[테스트 계정 등록하기] 

회원 가입 후 꽤나 그럴싸 해보이는 페이지를 만나게 된다. 그대로 왼쪽 사이드 바에 있는 결제 연동을 클릭한다. 

 

클릭 후 아래로 조금 내려보면 테스트/실 연동을 찾을 수 있다. 여기서 본인이 원하는 결제 대행사 설정을 해주면 된다.

나는 테스트로 KG이니시스 일반결제를 진행 할 것이기 때문에 아래와 같이 설정해주었다. 

 

추가를 누르면 아래와 같이 잘 추가 된 것을 알 수 있다. 여기까지 하면 사실 50% 한 것과 다름없다. 왜냐하면 우리가 매일 보는 결제 팝업창 등을 모두 아임포트에서 제공해 줄 것이기 때문에 키 받는 게 제일 어려운 과정과 다름없음... API 개꿀.. 

 

 

[내 식별코드, API Keys] 

추가까지 마쳤다면 결제 연동 상단에 대표상점을 찾을 수 있다.  여기서 우측에 있는 내 식별코드, API Keys 를 클릭한다. 

클릭하면 이렇게 식별코드와 API keys를 발견하게 되는데 여기서 필요한 것은 가맹점 식별코드! 해당 코드를 복사 해 두자 

 

[문서로 확인 하기]

 

아임포트에서 제공하는 문서이다. 깃허브에 아주 상세하게 올려 놓아줘서 너무 편리하다. 

GitHub - iamport/iamport-manual: 아임포트(iamport) 결제연동을 위한 매뉴얼입니다.

 

결제연동 문서를 확인해 보면 아래와 같이 결제 요청하는 방법을 적어둔 것이 보인다. 여기서 우리는 아임포트에서 제공해 준 저 코드를 복사해서 조금 바꿔주기만 하면 된다. 아래의 코드를 복사하여 vue로 돌아가보자

 

 

[CDN 추가] 

아래의 script를 추가해준다.  나는 vue를 이용하기 때문에 index.html에 설정해주었다. CND을 꼭 추가해야 우리가 알고 있는 결제 페이지가 나오니까 까먹지 말자! 

<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.5.js"></script>

 

[vue.js 적용]

우선 내가 기획 한 결제 프로세스를 보면 포인트 충전 -> 금액 입력 -> 이용약관 동의 -> 충전을 클릭하면 그때 API를 불러오는 방식이다.

 

충전 버튼을 눌렀을 때 KGpay 메서드를 실행시켜준다. 

 <button @click="KGpay">충전</button>

 

KGpay 메서드는 아까 문서로 확인한 내용과 일치한다. 여기에 자신의 식별코드와 나처럼 추가로 설정할 내용이 있다면 설정해주면 된다. 

 KGpay() {
            const self = this;
            if (self.price == null || self.price == '') {
                alert('금액을 입력하세요')
            } else if (self.contractformcheck == false) {
                alert('이용약관에 동의 해주세요')
            } else {
                IMP.init("내식별코드");
                IMP.request_pay({
                    pg: 'html5_inicis',
                    pay_method: 'card',
                    merchant_uid: this.email + '_' + new Date().getTime(),
                    name: 'Plantiful Point',
                    amount: this.price,
                    buyer_email: this.email,
                    buyer_name: this.email,
                    buyer_tel: this.phone,
                    buyer_addr: '주소',
                    buyer_postcode: '우편번호'
                }, function (rsp) {

 

이렇게 하면 결제 연동 끝! 진짜 너어어무 쉽다..