본문 바로가기
Spring

[Spring] I'mport;(아임포트) 결제모듈로 모의결제

by jane.dev 2021. 11. 4.
반응형

https://www.iamport.kr

 

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

결제의 시작부터 비즈니스의 성장까지 아임포트와 함께하세요

www.iamport.kr

1. 아임포트에 접속해서 로그인 클릭

 

2. 관리자 콘솔 체험하기 클릭

 

3. 회원가입 후 로그인

 

4. 시스템설정 > PG설정(일반결제 및 정기결제) > 결제수단 선택 > 전체 저장

KG이니시스(웹표준결제창)으로 설정하면 대부분의 결제 방식 사용가능

 

테스트모드를 ON으로 해야 결제가 정상적으로 취소됨

 

5. 내정보에서 가맹점 식별코드와 REST API 키, REST API secret 확인 가능

 

6. 결제 테스트용 프로젝트 생성 후 스프링 세팅

 

HomeController

주문 및 결제 페이지로 연결될 수 있도록 작성

@Controller
public class HomeContoroller{
    @GetMapping("/pay")
    public void pay{
    
    }
}

 

pay.jsp

주문 및 결제 페이지에 아임포트 라이브러리와 jQuery 추가

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- iamport.payment.js -->
<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.5.js"></script>

 

주문 페이지 내용

<body>
    <h1>상품 목록</h1>
    <div class="itemSection">
        <div class="itemCard">
            <div class="itemTitle">
                <h1>블루투스 노이즈캔슬링 헤드폰</h1>
            </div>
            <div class="itemContent">
                <h2>스튜디오 원음에 가까운 고품질 사운드</h2>
            </div>
            <div class="itemPrice">
                <!-- 금액은 dataset에 작성 -->
                <p data-price="100">$100</p>
            </div>
            <div class="itemButton">
                <button class="orderBtn">주문하기</button>
            </div>
        </div>
        <div class="itemCard">
            <div class="itemTitle">
                <h1>저소음 적축 키보드</h1>
            </div>
            <div class="itemContent">
                <h2>키보드 내부 흡음패드를 장착</h2>
            </div>
            <div class="itemPrice">
                <p data-price="200">$200</p>
            </div>
            <div class="itemButton">
                <button class="orderBtn">주문하기</button>
            </div>
        </div>
        <div class="itemCard">
            <div class="itemTitle">
                <h1>49인치 게이밍 모니터</h1>
            </div>
            <div class="itemContent">
                <h2>퀀텀 매트릭스 기술로 완성한 궁극의 화질</h2>
            </div>
            <div class="itemPrice">
                <p data-price="300">$300</p>
            </div>
            <div class="itemButton">
                <button class="orderBtn">주문하기</button>
            </div>
        </div>
    </div>
</body>

3개의 상품 목록

 

버튼을 클릭하면 결제가 진행되도록 클릭이벤트 생성

1. jQuery 로 작성

<script>
    var merchant_uid = "";
    var name = "";
    var amount = 0;
    
    // click 이벤트
    $(".itemSection").on("click", ".orderBtn", function(){
        // 서로 다른 결제건에 주문번호가 중복되지 않도록 주문번호에 현재시간 정보를 넣어줌
        d = new Date();
        merchant_uid = "order" + d.getTime();
        name = $(this).parent().siblings(".itemTitle").children().text();
        amount = $(this).parent().siblings(".itemPrice").children().attr("data-price");
        iamport();
    });

    IMP.init('가맹점 식별코드');
    function iamport(){
        // IMP.request_pay(param, callback) 결제창 호출
        IMP.request_pay({ // param
        // KG이니시스
        pg : 'html5_inicis',
        // 결제수단
        pay_method : 'card',
        // 상품에서 관리하는 주문번호를 전달 - 바뀌어야됨
        merchant_uid : merchant_uid,
        // 결제창에 삽입할 상품명 - 바뀌어야됨
        name : name,
        // 금액 - 바뀌어야됨
        amount : amount,
        // 구매자 이메일
        buyer_email : 'iamport@siot.do',
        // 구매자 번호
        buyer_tel : '010-1234-5678',
        // 구매자 주소
        buyer_addr : '서울특별시 강남구 삼성동',
        // 구매자 우편번호
        buyer_postcode : '12345',
    }, function(rsp){ // callback
            // 결제 성공시 처리할 내역
            if(rsp.success){
                var msg = '결제가 완료되었습니다.\n';
                msg += '고유 ID: ' + rsp.imp_uid + '\n';
                msg += '상점 거래 ID: ' + rsp.merchant_uid + '\n';
                msg += '결제 금액: ' + rsp.paid_amount + '\n';
                msg += '카드 승인번호: ' + rsp.apply_num;
                // 결제 실패시 처리할 내역
            }else{
                var msg = '결제에 실패했습니다.\n';
                msg += '에러내용: ' + rsp.error_msg;
            }
            alert(msg);
        });
    }
</script>

 

2. vanilla JS 로 작성

<script>
    let merchant_uid = "";
    let name = "";
    let amount = 0;
    
    const btns = document.querySelectorAll(".itemButton button");
    btns.forEach(function(button){
        button.addEventListener("click", function(event){
            date = new Date();
            merchant_uid = "order" + date.getTime;
            name = this.parentElement.parentElement.querySelector("h1").innerHTML;
            amount = this.parentElement.parentElement.querySelector("p").dataset.price;
            iamport();
        });
    });
    
    IMP.init('가맹점 식별코드');
    function iamport(){
        // IMP.request_pay(param, callback) 결제창 호출
        IMP.request_pay({ // param
            // KG이니시스
            pg : 'html5_inicis',
            // 결제수단
            pay_method : 'card',
            // 상품에서 관리하는 주문번호를 전달 - 바뀌어야됨
            merchant_uid : merchant_uid,
            // 결제창에 삽입할 상품명 - 바뀌어야됨
            name : name,
            // 금액 - 바뀌어야됨
            amount : amount,
            // 구매자 이메일
            buyer_email : 'iamport@siot.do',
            // 구매자 번호
            buyer_tel : '010-1234-5678',
            // 구매자 주소
            buyer_addr : '서울특별시 강남구 삼성동',
            // 구매자 우편번호
            buyer_postcode : '12345',
        }, function(rsp){ // callback
            // 결제 성공시 처리할 내역
            let msg;
            if(rsp.success){
                msg = '결제가 완료되었습니다.';
                msg += '고유 ID: ' + rsp.imp_uid;
                msg += '상점 거래 ID: ' + rsp.merchant_uid;
                msg += '결제 금액: ' + rsp.paid_amount;
                msg += '카드 승인번호: ' + rsp.apply_num;
                // 결제 실패시 처리할 내역
            }else{
                msg = '결제에 실패했습니다.';
                msg += '에러내용: ' + rsp.error_msg;
            }
            alert(msg);
        });
    }
</script>

'Spring' 카테고리의 다른 글

[Spring] 프로젝트 git clone / import 후 src/test/java가 보이지 않을 때  (0) 2021.11.06
[Spring] 아임포트로 결제모듈 DB 연동  (0) 2021.11.05
[Spring] Spring Security 접근제한 페이지 커스텀  (0) 2021.11.03
[Spring] ajax를 이용해 파일 업로드 시 문제점 보완  (0) 2021.10.13
[Spring] ajax를 이용한 파일 업로드  (0) 2021.10.12

관련글

티스토리툴바