[spring] I`mport 웹 결제 시스템(카카오페이/토스/페이코)

● 아임포트란? 

-  무료로 서비스되는 결제 연동 API로 너무나 쉽게 결제 연동이 가능하다! 진심 깜놀할 만큼...

   다양한 개발언어 가이드도 제공된다.  https://guide.iamport.kr/

아임포트 가이드

 

 

1. 아임포트 회원가입 후 가맹점 식별코드 발급받기

https://admin.iamport.kr/

https://admin.iamport.kr/

 

 

2. 아임포트 -> 결제연동 -> 간편 결제 -> 테스트 pg 추가

 

3. 제이쿼리/아임포트 라이브러리 추가

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

 

4. 자바스크립트

- 3가지 결제 방식 (카카오페이/토스/페이코)

<table>
    <tr>
        <td class="payment">결제방법</td> 
        <td class="payment-1">카카오페이<input type="radio" name="pay" id="kakao" value="Kakaopay"><br></td>
        <td class="payment-2">토스<input type="radio" name="pay" id="toss" value="Toss"></td>
        <td class="payment-3">페이코<input type="radio" name="pay" id="payco" value="Payco"></td>
    </tr>
</table>  
<button type="button" id="paybtn" onclick="checkButton()"> 결제하기 </button>

 

function checkButton() {    
    if(document.getElementById('kakao').checked) {   
        payBy = 'kakaopay'
    } else if(document.getElementById('toss').checked) {   
        payBy = 'tosspay'     
    } else if(document.getElementById('payco').checked) {   
        payBy = 'payco'     
    }

    const btn2 = document.querySelector('#paybtn');        
    const radioButtons2 = document.querySelectorAll('input[name="pay"]');
    btn2.addEventListener("click", () => {
        let selectedPayment;
        for (const radioButton2 of radioButtons) {
            if (radioButton2.checked) {
               selectedPayment = radioButton2.value;
               break;
            }
        }
    }); 

    var IMP = window.IMP; 
    IMP.init('식별코드'); 

    IMP.request_pay({
        pg: payBy, //결제방법
        pay_method: 'card',
        merchant_uid: 'merchant_' + new Date().getTime(),
        name: '상품명',
        amount: 상품금액,
        buyer_name: '판매자이름',
        buyer_postcode: '판매자우편번호',
    }, function (rsp) {
        console.log(rsp);
        if (rsp.success) {
            var msg = '결제가 완료되었습니다.';
            msg += '결제 금액 : ' + rsp.paid_amount;

        } else {
            var msg = '결제에 실패하였습니다.';
            msg += '에러내용 : ' + rsp.error_msg;
        }
        alert(msg);
    });
}

 

이렇게만 해주면 끝이 난다. 참쉽죠잉

* 카카오페이 테스트 화면