아임포트는 번호 인증과 결제등을 연동할 수 있도록 하는 서비스 입니다.
PG사와 직접 연결 할 수도 있고 아임포트를 통해 연동할 수도 있습니다.
1. 아임포트 사이트 ( https://www.iamport.kr ) 에 접속하셔서 시작하기를 클릭하고 회원가입, 로그인
2. 상점,계정 관리 탭을 클릭하고 관리자 계정 추가
3. 결제 연동 탭을 클릭하고 테스트 연동 관리 - 결제 대행사 설정 테스트 결제를 사용하면 결제가 되지만 자정에 자동으로 환불됩니다. 저는 KG이니시스와 카카오페이를 사용했습니다.KG이니시스 - KG이니시스 추가카카오페이 - 카카오페이 추가
KG이니시스를 추가하면 신용카드, 실시간 계좌이체, 가상 계좌, 휴대폰 결제를 사용할 수 있고카카오페이를 추가하면 간편 결제를 사용할 수 있습니다.
4. 결제 버튼 생성
<input type="button" id="pay">
5. 자바스크립트 코드 추가
<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.2.0.js"></script>
$("#pay").click(function(){
pay(); // pay 함수 호출
}
function pay(data){
IMP.init('가맹점 식별코드'); // 관리자 콘솔 -> 가맹점 식별코드, IMP 객체를 초기화
// IMP.request_pay(param, callback) 결제창 호출
IMP.request_pay({
pg: "html5_inicis",
pay_method:"card",
merchant_uid: "결제 일련번호",
name: "상품명",
amount: "상품 가격",
buyer_email : "판매자 이메일",
buyer_name : "판매자 명",
buyer_tel : "판매자 전화번호"
buyer_addr : "판매자 주소",
buyer_postcode : "판매자 우편번호"
},
function (rsp) {
if (rsp.success) { // 결제 성공시
// 결제 성공시 알림창
alert('결제가 완료되었습니다.');
// 결제 성공 시 이동
$("#reserv_form").attr({
"method" : "post",
"action" : "/reserv/reservInsert"
});
$("#reserv_form").submit();
} else { // 결제 실패시
let msg = '결제에 실패하였습니다.' + rsp.error_msg;
alert(msg); // 결제 실패시 알림창
}
});
}
고유 ID : resp.imp_uid
상점 거래 ID : rsp.merchant_uid
결제 금액 : rsp.paid_amount
카드 승인번호 : rsp.apply_num
결제 에러내용 : rsp.error_msg
식별코드, REST API 키, REST API secret은 외부에 노출되지 않도록 해야합니다.
아임포트 docs
PG별 연동 가이드 및 추가 정보는아임포트 결제 연동 매뉴얼(GitHub)를 참고하세요.
docs.iamport.kr
아임포트 사용법은 위 링크를 클릭하여 확인 할 수 있습니다.
저는 기존 관리자 콘솔이 조금 더 편하다고 느껴졌습니다.
어렵다고 생각하시는 분들
기존 관리자 콘솔 버튼 (왼쪽 아래)을 클릭하여 이용해보세용.
'코딩 > 개발' 카테고리의 다른 글
[API] lightpick 달력 라이브러리(2) (0) | 2023.11.29 |
---|---|
[API] lightpick 달력 라이브러리(1) (1) | 2023.11.28 |
[웹에디터 API] 썸머노트 사용법 / Summernote (0) | 2023.08.13 |
[CSS] media query 반응형 웹 만들기 (0) | 2022.11.10 |