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

1편에서는 kg이니시스 결제 창을 띄우는 것 까지 해봤다. 사실 api 가 문서를 읽고 분석하는데 제일 오랜 시간이 걸리지 한번 해 놓기만 하면 그렇게 화려한 기능이 아닐 수 가 없다. 약간 뭔가 되게 많이 한 기분.. 많이 한 척 할 수 있음... 핫 

 

 

그렇다면 이제 결제가 성공 했는지 안했는지 확인을 어떻게 해야 하는지 알려면 문서를 또 봐야한다. 

 

 

 

[문서확인] 

아래의 아임포트 github에서 README.md를 클릭하여 조금 내리면 아래와 같은 메세지를 만날 수 있다. 

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

 

그리고 바로 아래에 callback 방식으로 어떻게 처리 하라고까지 나오니 얼마나 친절해... 미친 친절... 해당 코드를 복사해서 결과에 붙이기만 하면 된다. 

 

 

[vue.js] 

최종코드는 아래와 같다. 나는 result 값을 추가 해주어서 결제 성공과 결제 실패를 확인 하는데 사용하였다. 또한 결과가 성공적이라면 받아온 코드는 서버사이드로 돌아가 데이터베이스에 추가해 주는 axios 도 추가 해 주었다. 

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) {
                    var result = '';
                    if (rsp.success) {
                        var msg = '결제가 완료되었습니다.';
                        msg += '고유ID : ' + rsp.imp_uid;
                        msg += '상점 거래ID : ' + rsp.merchant_uid;
                        msg += '결제 금액 : ' + rsp.paid_amount;
                        msg += '카드 승인번호 : ' + rsp.apply_num;
                        
                        result = '0';
                        
                        const form = new FormData();
                        form.append('impuid', rsp.imp_uid)
                        form.append('merchantuid', rsp.merchant_uid)
                        form.append('paidamount', rsp.paid_amount)
                        form.append('applynum', rsp.apply_num)
                        form.append('email', self.email)
                        
                        console.log(form)
                        
                        self.$axios.post('http://localhost:8181/payment/' + self.email, form)
                            .then(function (res) {
                                if (res.status == 200) {
                                    console.log(res)
                                    self.close();
                                    window.location.reload(true);
                                }
                            });
                    } else {
                        var msg = '결제에 실패하였습니다.';
                        result = '1';
                        self.contractformcheck = false;
                        self.formattedPrice = '';
                        self.price = 0;
                        self.isPlaceholderVisible = true;
                    }
                    if (result == '0') {
                        alert('성공')
                    }
                    self.contractformcheck = false
                });
            }
        },

 

이렇게 하면 진짜로 결제 끝! 

카카오페이로 시도 했을 때 오는 상세내역을 보면 이렇게 보인다. 테스트용이라 결제 후 돈은 매일 밤 12시 이전에 환불이 되어 결제 취소 영수증도 확인 할 수 있다.