i'mport(아임포트) 결제 모듈 간편하게 사용해보기


이 글은 아임포트에 후원 받은 적 없으며, 


광고에 목적은 없음을 미리 알려드립니다.


단순히 호기심과 공부를 위해 기록합니다.


준비물


어이, 학생 시작하기 전에 준비물이 있어요!


아임포트에 가서 회원가입하고 와요~~


http://www.iamport.kr/


가입하고 오셔야 필요한 가맹점 식별코드를 발급이 가능합니다.


테스트 버전에서는 아직까지는 저는 돈이 든적이 없습니다.

그렇기 때문에 이점 참고하세요!





결제 모듈를 간단하게 연동할 수 있는 방법이 있습니다.

아임포트 생각보다 다루기 쉬운데요!

뭐... 깊이 들어가면 조금 힘들어요 ㅋㅋ 


자, 코드 설명드릴게요!

(맨 아래에 전체코드가 있습니다.)


헤더 부분


<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://service.iamport.kr/js/iamport.payment-1.1.5.js"></script>


맨 처음 첫째줄에 jquery가 선언되어있습니다.

아임포트를 사용하기위해서는 jquery가 먼저 선언되어있어야 합니다.


두번째줄은 아임포트를 쓰기 위해 js 코드를 가져옵니다. 




바디부분

<p>

<p>아임 서포트 결제 모듈 테스트 해보기</p>
<button id="check_module" type="button">아임 서포트 결제 모듈 테스트 해보기</button>
</p>


간단하게 <p> 태그랑 버튼으로 button 이벤트면 이렇게 준비하시면 됩니다. 



스크립트 부분(이 부분이 중요해요)



설명이 필요한 부분과 내가 만약 카카오페이를 써야하는 경우 

바꿔야하는 부분을 주석으로 써놨습니다.

물론, 아임포트 문서에 가시면 많은 내용이 있으니 이점 참고하시고요.



<script>
$("#check_module").click(function () {
var IMP = window.IMP; // 생략가능
IMP.init('가맹점식별코드를 넣어주세요');
// 'iamport' 대신 부여받은 "가맹점 식별코드"를 사용
// i'mport 관리자 페이지 -> 내정보 -> 가맹점식별코드
IMP.request_pay({
pg: 'inicis', // version 1.1.0부터 지원.
/*
'kakao':카카오페이,
html5_inicis':이니시스(웹표준결제)
'nice':나이스페이
'jtnet':제이티넷
'uplus':LG유플러스
'danal':다날
'payco':페이코
'syrup':시럽페이
'paypal':페이팔
*/
pay_method: 'card',
/*
'samsung':삼성페이,
'card':신용카드,
'trans':실시간계좌이체,
'vbank':가상계좌,
'phone':휴대폰소액결제
*/
merchant_uid: 'merchant_' + new Date().getTime(),
/*
merchant_uid에 경우
https://docs.iamport.kr/implementation/payment
위에 url에 따라가시면 넣을 수 있는 방법이 있습니다.
참고하세요.
나중에 포스팅 해볼게요.
*/
name: '주문명:결제테스트',
//결제창에서 보여질 이름
amount: 1000,
//가격
buyer_email: 'iamport@siot.do',
buyer_name: '구매자이름',
buyer_tel: '010-1234-5678',
buyer_addr: '서울특별시 강남구 삼성동',
buyer_postcode: '123-456',
m_redirect_url: 'https://www.yourdomain.com/payments/complete'
/*
모바일 결제시,
결제가 끝나고 랜딩되는 URL을 지정
(카카오페이, 페이코, 다날의 경우는 필요없음. PC와 마찬가지로 callback함수로 결과가 떨어짐)
*/
}, function (rsp) {
console.log(rsp);
if (rsp.success) {
var msg = '결제가 완료되었습니다.';
msg += '고유ID : ' + rsp.imp_uid;
msg += '상점 거래ID : ' + rsp.merchant_uid;
msg += '결제 금액 : ' + rsp.paid_amount;
msg += '카드 승인번호 : ' + rsp.apply_num;
} else {
var msg = '결제에 실패하였습니다.';
msg += '에러내용 : ' + rsp.error_msg;
}
alert(msg);
});
});
</script>





결과 화면 및 테스트 화면


실제로 제가 쓰는 카드로 결제를 진행했습니다.

즉, 테스트에서 실제로 사용하는 테스트를 진행할 수 있습니다.


그러나, 결제후에 환불이 가능함으로 돈이 들지 않습니다.

이점 꼭 참고하세요!


단, 테스트 도중 개발자모드가 켜져있으면, 

결제가 진행이 안되니 이점 참고하세요!


버튼 클릭시 결제창





실제로 제가 사용하는 카드로 테스트하기 위해서 

농협 카드를 사용하였습니다.


카카오페이 및 다른것도 가능합니다.


script 부분에서 확인하세요!




결제 관련 부분을 alert창으로 확인 가능합니다.






환불 페이지 


환불 페이지는 아임서포트 관리자 페이지

-> 결제승인내역에서 취소가 가능합니다.

 


https://admin.iamport.kr/payments








블로그 이미지

미나미나미

,