I'mport(아임포트) 결제 API 연동하기

1. 포트원 웹사이트 가입

먼저, [포트원 웹사이트] 가입 후, 전자결제를 위한 테스트 환경을 설정한다. (https://admin.portone.io/)

포트원 관리자콘솔

* 가입 > 전자결제 신청 > 개발연동 테스트 > 결제대행사 설정 및 추가(테스트, PG사 선택)

(실 연동을 하기 위해서는 사업자 정보를 등록해야 한다.)

 

2. 아임포트 CDN 추가

<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.5.js"></script>

 

 

3. 결제창 호출

<button onclick="requestPay()">결제하기</button>

위와 같이 버튼을 만들어 클릭 시 `requestPay()` 함수를 호출하도록 설정한다.

function requestPay() {
    // 필요한 정보 수집
    // form input 태그에 있는 정보를 결제창에 넘겨주기 위해 value 값 가져오기
    var result = '';
    $('input[name=address]').map(function(){
        result += $(this).val();
    });
    $('input[name=receiverAddr]').val(result);
    
    var price = $("input[name='price']").val();
    var receiverName = $("input[name='receiverName']").val();
    var receiverPhone = $("input[name='receiverPhone']").val();
    var prodName = $("input[name='prodName']").val();
    var receiverAddr = $("input[name='receiverAddr']").val();

    var IMP = window.IMP;
    IMP.init("가맹점식별코드입력");

    // IMP.request_pay(param, callback) 결제창 호출
    IMP.request_pay({  // param
        pg: 'html5_inicis',   // 이니시스 결제창 호출
        pay_method: 'card',
        merchant_uid: "merchant_" + new Date().getTime(), // 상점에서 관리하는 주문 번호를 전달(유일한 값)
        name: prodName,
        amount: price,
        buyer_name: receiverName,
        buyer_tel: receiverPhone,  //필수입력(미설정 시 이니시스 결제창에서 오류 발생 가능)
        buyer_addr: receiverAddr
    }, function (rsp) {  // callback
        if (rsp.success) {
            alert("결제성공");
            fncAddPurchase();   // 결제완료 페이지로 넘어가는 함수 호출
        } else {
            alert("결제실패");
        }
    });
}

위 코드에서는 결제를 요청하는 `requestPay()` 함수를 작성하여 사용자로부터 필요한 정보를 수집하고, 아임포트 API를 사용하여 결제창을 호출한다. 결제가 성공한 경우에는 "결제성공"을 알리고, 실패한 경우에는 "결제실패"를 알린다.

 

4. 테스트 결과

결제하기 버튼을 클릭하면 이니시스 결제창이 뜬다. 상품명과 가격, 구매자 이름 등이 정상적으로 전달된 것을 확인할 수 있다. 카드번호와 이메일을 입력하고 결제하면 입력한 이메일로 구매 내역이 정상 발송되는 것을 확인할 수 있다.

(테스트 모드인 경우 실제로 결제승인이 이루어지지만, PG사에서 일괄적으로 매일 자정이전 자동 취소됨)

 

5. 참고문서 및 자료

- 아임포트 공식 GitHub 페이지 (https://github.com/iamport/iamport-manual/blob/master/%EC%9D%B8%EC%A6%9D%EA%B2%B0%EC%A0%9C/sample/inicis.md)

 

- 포트원 개발 문서 (https://portone.gitbook.io/docs/undefined/readme)

관리자콘솔 릴리즈노트 - PortOne Docs

- 개발자 블로그 참고 자료 (https://velog.io/@poseassome/%EA%B0%9C%EC%9D%B8%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%84%EC%9E%84%ED%8F%AC%ED%8A%B8import-%EA%B2%B0%EC%A0%9C-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0)

[개인프로젝트] 아임포트(i'mport) 결제 기능 구현하기