아임포트 (iamport) 를 이용한 카카오페이 결제연동

 

아임포트를 이용하여 카카오페이 결제를 진행해보자 ! html 과 JS 에 대해 살펴 볼 예정이다.

html 과 js 는 결제 만 가능 하기 때문에 아직 데이터베이스 (DB) 와의 연동은 안된 상태이다.

 

✔️ 아임포트(iamport)

PG 결제 연동 서비스. 무료로 PG 결제를 연동해주는 서비스

 

 

✔️ PG

PG(Payment Gateway)란 전자지급결제대행으로 온라인에서 상품이나 서비스를 결제할 때 다양한 결제수단으로 안전하게 결제하도록 지원하는 서비스다.

 

✔️ PG 사

PG사는 PG를 서비스하는 회사로 카카오페이, 이니시스, 다날, 네이버페이 등 여러 회사가 존재한다.

 

IAMPORT를 사용하면 PG사 변경으로 인한 추가 개발이 필요하지 않다는 점이 큰 장점이지만

기존에 PG사를 사용하고 있다고 해도 PG사에 다시 심사를 받아야 해서 심사 기간이 소요된다는 것이

단점이다.

 

 

 

아임포트(IAMPORT) 연동순서

 

1. 아임포트 계정을 생성한다.
2. 아임포트 관리자 페이지에서 가맹점 KEY 가져오기
3. PG사 설정
4. 아임포트에서 제공하는 javascript SDK를 이용하여 테스트 결제 해보기

 

 

1. 아임포트 계정 생성

 

먼저 포트원 사이트로 이동해 회원가입을 진행한다.

 

 

https://portone.io/korea/ko?utm_source=google&utm_medium=google_sa&utm_campaign=pf_conversion_2403_kr&utm_content=homepage&gad_source=1&gclid=Cj0KCQjwztOwBhD7ARIsAPDKnkAa6BDS7ukrPOtY2ITt7RMevO0MgjT1L5VUN259dM26jkrsSA9apgAaArIZEALw_wcB

 

 

2. 아임포트 관리자 페이지에서 가맹점 KEY 가져오기

 

 

 

로그인을 하고 들어가게 되면 이렇게 창이 뜨는데 왼쪽에 "결제 연동" 을 누른다.

 

 

 

 

우리는 테스트 목적이기 때문에 "테스트" , 그리고 "카카오페이"를 이용할 거라서 클릭

그리고 "추가" 버튼 누르기 !

 

 

PG 상점 아이디 (CID) 를 입력하라고 나오는데 실 결제를 진행한다면 포트원 측에 문의 하여 CID를 받아야 한다.

그러나 우리는 테스트 이기 때문에 카카오 Developers 에서 제공한 테스트 코드인 "TC0ONETIME" 을 입력한다.

 

 

 

이렇게 생성 완료 !

 

 

그래서 위를 올라가 보면

 

" 내 식별코드 " 를 클릭 !!

 

 

 

 

이렇게 확인이 가능하다 !

 

 

3. HTML 과 JS 연동 해주기

 

연동기능을 사용하기 위해서는 포트원에서 제공하는 라이브러리를 추가해줘야 한다.

<!-- 포트원 결제 -->
    <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
    <!-- iamport.payment.js -->
    <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script>
<!-- 포트원 결제 -->

 

 

< HTML >
<h1> kakaoPay api 이용하기 </h1>
 
 <div>
    <p>카카오 페이 결제 모듈 테스트 해보기</p>
    <button id="check_module" type="button">카카오 페이 결제 모듈 테스트 해보기</button>
</div>

 

 

< JS > 

<script>
    $("#check_module").click(function () {
        var IMP = window.IMP; // 생략가능
        IMP.init('가맹점 식별코드'); 
        // 'iamport' 대신 부여받은 "가맹점 식별코드"를 사용
        // i'mport 관리자 페이지 -> 내정보 -> 가맹점식별코드
        IMP.request_pay({
            pg: 'kakaopay', // version 1.1.0부터 지원.
            /* 
                'kakaopay':카카오페이, 
                html5_inicis':이니시스(웹표준결제)
                    'nice':나이스페이
                    'jtnet':제이티넷
                    'uplus':LG유플러스
                    'danal':다날
                    'payco':페이코
                    'syrup':시럽페이
                    'paypal':페이팔
                */

            pay_method: 'card',
            /* 
                'samsung':삼성페이, 
                'card':신용카드, 
                'trans':실시간계좌이체,
                'vbank':가상계좌,
                'phone':휴대폰소액결제 
            */

            merchant_uid: 'merchant_' + new Date().getTime(),
            /* 
                merchant_uid에 경우 
                https://docs.iamport.kr/implementation/payment
                위에 url에 따라가시면 넣을 수 있는 방법이 있습니다.
                참고하세요. 
             */

            name: '주문명:결제테스트', //결제창에서 보여질 이름
            amount: 10,  //가격 
            buyer_email: 'iamport@siot.do',
            buyer_name: '구매자이름',
            buyer_tel: '010-1234-5678',
            buyer_addr: '서울특별시 강남구 삼성동',
            buyer_postcode: '123-456',
            m_redirect_url: 'https://www.yourdomain.com/payments/complete'
            /*  
                모바일 결제시,
                결제가 끝나고 랜딩되는 URL을 지정 
                (카카오페이, 페이코, 다날의 경우는 필요없음. PC와 마찬가지로 callback함수로 결과가 떨어짐) 
                */
        }, function (rsp) {
            console.log(rsp);
            if (rsp.success) {
                var msg = '결제가 완료되었습니다.';
                msg += '고유ID : ' + rsp.imp_uid;
                msg += '상점 거래ID : ' + rsp.merchant_uid;
                msg += '결제 금액 : ' + rsp.paid_amount;
                msg += '카드 승인번호 : ' + rsp.apply_num;
            } else {
                var msg = '결제에 실패하였습니다.';
                msg += '에러내용 : ' + rsp.error_msg;
            }
            alert(msg);
        });
    });
</script>

 

 

 

4. 확인