2. 결제 api - iamport(카카오페이)

2022.12.16 - [JavaScript] - 1. 결제 api - 토스(tosspayments) 가상계좌, 일반결제 등

1. 결제 api - 토스(tosspayments) 가상계좌, 일반결제 등

 

이번 게시글에서는 아임포트를 이용해 카카오페이를 구현해보겠다!

1. 먼저 아임포트에 회원가입을 해야한다.

https://www.iamport.kr/

온라인 비즈니스의 모든 결제를 한곳에서, 아임포트

2. 로그인 후 왼쪽 메뉴에서 상점 계정 관리 클릭

3. 오른쪽 이메일 옆에 있는 내 식별코드 API Keys  클릭

 

가맹점 식별코드 복사 해둘 것!

4. 왼쪽 결제 연동 메뉴에 들어가기

테스트로 진행할거기 때문에 사진과 같이 설정하고 추가 클릭!

5. 추가 클릭

결제 채널 이름 입력 후 추가한다.

6. 코드 입력(내가 사용한 코드)

<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.1.5.js"></script>

function kakaoPay() {
	var val = $('input[name="coin"]:checked').val();
	if(val == undefined) {
		alert("충전할 코인 금액을 선택해주세요!");
	}
	else {
	
	$(function(){
    var IMP = window.IMP; // 생략가능
    IMP.init('iamport'); // 'iamport' 대신 부여받은 "가맹점 식별코드"를 사용
    var msg;
    
    IMP.request_pay({
        pg : 'kakaopay',
        pay_method : 'card',
        merchant_uid : 'merchant_' + new Date().getTime(),
        name : '코인충전',
        amount : money,
        buyer_name : '<%=m_name%>',
<%--    buyer_email : '<%=email%>',
        buyer_tel : '<%=phone%>',
        buyer_addr : '<%=address%>',
        buyer_postcode : '123-456',
        //m_redirect_url : 'http://www.naver.com'  --%>
    }, 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 ) {
                    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] 결제된 금액이 요청한 금액과 달라 결제를 자동취소처리하였습니다.
                }
            });
            //성공시 이동할 페이지
            location.href="<%=wonViewDir%>/paymentSuccess.jsp?money="+money+"&&total="+total;
        } else {
            msg = '결제에 실패하였습니다.';
            msg += '\n에러내용 : ' + rsp.error_msg;
            //실패시 이동할 페이지
			history.back();
            alert(msg);
        }
    });
	});
	}
};

 

나는 다른 jsp 페이지에 money값과 코인갯수를 넘겨주어 거기서 처리를 했다!

실행 화면

휴대폰 번호, 생년월일 입력할 수도 있다.

테스트라서 실제로 결제되는 것은 아니니 걱정 안해도 된다!

병아리 개발자인 나의 첫 결제 api 사용이였는데 생각보다 간단해서 놀랐다🤭 너무 신기한 것🤭

계속 꾸준히 기록해봐야겠다!