카카오 페이 api 이용하기

학원에서 파이널 프로젝트를 진행하면서 

구매하기를 구현하면서 카카오 페이 api를 적용시켰습니다.

프로젝트기에 실연동은 어렵구 아임포트를 이용해서 테스트 버전을 이용했습니다. 

 

우선 아임포트에 가입하구 로그인을 해줍니다.

 

그 후

시스템 설정에 들어가셔서 [간편결제] 카카오페이를 선택해주시고

일반 결제용 사이트 코드를 밑에 가맹점 코드에 입력해줍니다.

이제 셋팅을 끝났구 프로젝트에 js 코드를 입력해 주면 됩니다

 

코드에 대한 설명은

https://github.com/iamport/iamport-manual/blob/master/%EC%9D%B8%EC%A6%9D%EA%B2%B0%EC%A0%9C/sample/kakao.md

iamport/iamport-manual

위 깃허브로 들어가시면 아임포트에서 제공하는 샘플 코드가 있습니다.

IMP.request_pay({
    pg : 'kakaopay',
    pay_method : 'card',
    merchant_uid : 'merchant_' + new Date().getTime(),
    name : '주문명:결제테스트',
    amount : 14000,
    buyer_email : 'iamport@siot.do',
    buyer_name : '구매자이름',
    buyer_tel : '010-1234-5678',
    buyer_addr : '서울특별시 강남구 삼성동',
    buyer_postcode : '123-456'
}, function(rsp) {
    if ( rsp.success ) {
    	//[1] 서버단에서 결제정보 조회를 위해 jQuery ajax로 imp_uid 전달하기
    	jQuery.ajax({
    		url: "/payments/complete", //cross-domain error가 발생하지 않도록 주의해주세요
    		type: 'POST',
    		dataType: 'json',
    		data: {
	    		imp_uid : rsp.imp_uid
	    		//기타 필요한 데이터가 있으면 추가 전달
    		}
    	}).done(function(data) {
    		//[2] 서버에서 REST API로 결제정보확인 및 서비스루틴이 정상적인 경우
    		if ( everythings_fine ) {
    			var msg = '결제가 완료되었습니다.';
    			msg += '\n고유ID : ' + rsp.imp_uid;
    			msg += '\n상점 거래ID : ' + rsp.merchant_uid;
    			msg += '\결제 금액 : ' + rsp.paid_amount;
    			msg += '카드 승인번호 : ' + rsp.apply_num;
    			
    			alert(msg);
    		} else {
    			//[3] 아직 제대로 결제가 되지 않았습니다.
    			//[4] 결제된 금액이 요청한 금액과 달라 결제를 자동취소처리하였습니다.
    		}
    	});
    } else {
        var msg = '결제에 실패하였습니다.';
        msg += '에러내용 : ' + rsp.error_msg;
        
        alert(msg);
    }
});

저는 여기에 맞게 고쳐주고 카카오페이를 선택했을 때 이 함수가 동작하도록 코드를 짜줍니다

 

밑 로직은 결제버튼을 눌렀을 때 결제 수단이 '카카오페이'이면  카카오페이 api가 동작하도록 하였습니다.

	function kakaoPay() {
	   IMP.init('imp74058866'); // 'iamport' 대신 부여받은 "가맹점 식별코드"를 사용
       IMP.request_pay({
           pg : 'kakaopay',
           pay_method : 'card',
           merchant_uid : 'merchant_' + new Date().getTime(),
           name : '세모마켓 -'+$('#goods').val(),
           amount : $('#total_price').val(),
           buyer_email : 'sangmi517@naver.com',
           buyer_name : $('#user_name').val(),
           buyer_tel : '010-7736-8592',
           buyer_addr : '구매자 배송지',
           buyer_postcode : '112-343',
       }, function(rsp) {
           if ( rsp.success ) {
              var msg = '결제가 완료되었습니다. 결제정보는 카카오톡으로 전송됩니다.';
              alert(msg);
			  $('#buy_form').submit();
               document.getElementById("payment_submit").click();
               //document.$('#payment_submit').click(); 
               //document.$('#payment_form').submit();
           } else {
               msg = '결제에 실패하였습니다.';
               msg += '에러내용 : ' + rsp.error_msg;
               alert(msg);
           }
          
               
       });
	}

   function pay() {
	var pay_method = $("input[name='pay_mtd']:checked").val();
	console.log(pay_method);
	
	if(pay_method =="카카오 페이") {
		kakaoPay();
	}
	else {
		$('#buy_form').submit();
	}

   }

 

 

이렇게 설정 해주고 프로젝트에서 실행시켜보면 

다음과 같이 QR 코드 및 카톡 메세지로 구매를 하실 수 있습니다!

결제 Api를 처음 이용하는거라 아임포트에 API 사용설명이 자세히 되어있어서 쉽게 구현할 수 있었습니다.