[아임포트 결제 API] 자바스크립트 / 카카오페이, 카드 결제 / 테스트 결제

아임포트는 번호 인증과 결제등을 연동할 수 있도록 하는 서비스 입니다.

PG사와 직접 연결 할 수도 있고 아임포트를 통해 연동할 수도 있습니다.

 

 

 

1. 아임포트 사이트 ( https://www.iamport.kr ) 에 접속하셔서 시작하기를 클릭하고 회원가입, 로그인

 

 

 

2. 상점,계정 관리 탭을 클릭하고 관리자 계정 추가 

 

 

 

3. 결제 연동 탭을 클릭하고 테스트 연동 관리 - 결제 대행사 설정 테스트 결제를 사용하면 결제가 되지만 자정에 자동으로 환불됩니다. 저는 KG이니시스와 카카오페이를 사용했습니다.KG이니시스 - KG이니시스 추가카카오페이 - 카카오페이 추가 

 

KG이니시스를 추가하면 신용카드, 실시간 계좌이체, 가상 계좌, 휴대폰 결제를 사용할 수 있고카카오페이를 추가하면 간편 결제를 사용할 수 있습니다.

 

 

 

 

4. 결제 버튼 생성

<input type="button" id="pay">

 

 

 

5. 자바스크립트 코드 추가 

<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>

$("#pay").click(function(){
	pay(); // pay 함수 호출
}

function pay(data){
	IMP.init('가맹점 식별코드'); // 관리자 콘솔 -> 가맹점 식별코드, IMP 객체를 초기화
    
    // IMP.request_pay(param, callback) 결제창 호출
	IMP.request_pay({
		pg: "html5_inicis",
		pay_method:"card",
        	merchant_uid: "결제 일련번호",		   
		name: "상품명",						 
		amount: "상품 가격",   					  
		buyer_email : "판매자 이메일", 		
		buyer_name : "판매자 명",				 
		buyer_tel : "판매자 전화번호"		   		
       		buyer_addr : "판매자 주소",  
        	buyer_postcode : "판매자 우편번호"			
	},  
	function (rsp) {
		if (rsp.success) {	// 결제 성공시 
        		// 결제 성공시 알림창   
			alert('결제가 완료되었습니다.');	
            
			// 결제 성공 시 이동
			$("#reserv_form").attr({
				"method" : "post",
				"action" : "/reserv/reservInsert"
			});
                        
			$("#reserv_form").submit();
		} else {	// 결제 실패시
			let msg = '결제에 실패하였습니다.' + rsp.error_msg;
			alert(msg); // 결제 실패시 알림창
		}
	});
}

 

고유 ID : resp.imp_uid

상점 거래 ID : rsp.merchant_uid

결제 금액 : rsp.paid_amount

카드 승인번호 : rsp.apply_num

결제 에러내용 : rsp.error_msg

식별코드, REST API 키, REST API secret은 외부에 노출되지 않도록 해야합니다.

 

https://docs.iamport.kr/ 

아임포트 docs

아임포트 사용법은 위 링크를 클릭하여 확인 할 수 있습니다.

 

저는 기존 관리자 콘솔이 조금 더 편하다고 느껴졌습니다.

어렵다고 생각하시는 분들

기존 관리자 콘솔 버튼 (왼쪽 아래)을 클릭하여 이용해보세용.