본문으로 바로가기

학교에서 작은 프로젝트를 하고있는데 포인트충전(결제시스템)을 구현할 방법을 찾아가 아임포트(i'm port)라는 API를 발견하게 되었다. 정말 간편하고 쉽게 결제시스템을 구현할 수 있게 해주는 API다.

 

아임포트 공식 홈페이지

 

개발자를 위한 무료 결제연동 API, 아임포트

아임포트를 import하세요. 아임포트의 풍부한 REST API 기능을 이용하면 결제연동이 훨씬 쉬워집니다. 지금 시작하세요.

www.iamport.kr

1. 먼저 아임포트 사이트에 가입을 합니다.

 

 

2. 회원가입후 시스템설정으로 이동합니다.

시스템설정 초기페이지

 

3. PG설정(일반결제 및 정기결제) 를 클릭합니다.

시스템 설정 페이지2

4. PG사 카카오페이 선택 후 테스트모드 ON  합니다.

 

5.전체저장을 누르면 가맹점식별코드(CID)가 발급됩니다. 

 

 

6. 아임포트 라이브러리를 추가합니다.

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

여기까지 완료하면 아임포트 사용 준비 완료.

 

 


결제페이지(view)

view

★현재 PG사를 카카오페이로 선택하여 진행하고있으므로 카카오페이 기준으로 포스팅

 

1. view단

 <div class="card-body bg-white mt-0 shadow">
                <p style="font-weight: bold">카카오페이 현재 사용가능</p>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="5000"><span>5,000원</span></label>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="10000"><span>10,000원</span></label>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="15000"><span>15,000원</span></label>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="20000"><span>20,000원</span></label>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="25000"><span>25,000원</span></label>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="30000"><span>30,000원</span></label>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="35000"><span>35,000원</span></label>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="40000"><span>40,000원</span></label>
                <label class="box-radio-input"><input type="radio" name="cp_item" value="50000"><span>50,000원</span></label>
                <p  style="color: #ac2925; margin-top: 30px">카카오페이의 최소 충전금액은 5,000원이며 <br/>최대 충전금액은 50,000원 입니다.</p>
                <button type="button" class="btn btn-lg btn-block  btn-custom" id="charge_kakao">충 전 하 기</button>
 </div>

충전하기 button의 id는 charge_kakao 임을 기억합시다.

 

 

 

<script>
    $('#charge_kakao').click(function () {
        // getter
        var IMP = window.IMP;
        IMP.init('자신의 가맹점 식별코드');
        var money = $('input[name="cp_item"]:checked').val();
        console.log(money);

        IMP.request_pay({
            pg: 'kakao',
            merchant_uid: 'merchant_' + new Date().getTime(),

            name: '주문명 : 주문명 설정',
            amount: money,
            buyer_email: 'iamport@siot.do',
            buyer_name: '구매자이름',
            buyer_tel: '010-1234-5678',
            buyer_addr: '인천광역시 부평구',
            buyer_postcode: '123-456'
        }, 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;
                $.ajax({
                    type: "GET", 
                    url: "/user/mypage/charge/point", //충전 금액값을 보낼 url 설정
                    data: {
                        "amount" : money
                    },
                });
            } else {
                var msg = '결제에 실패하였습니다.';
                msg += '에러내용 : ' + rsp.error_msg;
            }
            alert(msg);
            document.location.href="/user/mypage/home"; //alert창 확인 후 이동할 url 설정
        });
    });
</script>

좀전에 부여받은 자신의 가맹점 식별코드를 사용합니다. 

var IMP = window.IMP; // 생략가능
IMP.init('iamport'); // 'iamport' 대신 부여받은 "가맹점 식별코드"를 사용

 

충전이 정상적으로 완료되면 ajax를 통해 지정된 url로 충전금액을 전달함.

 


2. controller & service

PointController

-ajax에 설정한 url로 amount(충전금액)의 값이 전달됩니다.

 

 

PointService

-충전금액을 DB에 저장합니다  (ex) point_idx , point_dateTime , point_amount, point_user )

 

 

결과

ID 2개(idx: 58 / idx : 68) 로 포인트 충전 결과

select * from point 결과


충전내역 / 총 충전금액  쿼리문
public interface PointRepository extends JpaRepository<Point, Long> {
  
    List<Point> findAllByUser(User user);

    @Transactional
    @Query("select sum(p.amount) from Point p where p.user = ?1")
    Long amountSum(User user);
}