학교에서 작은 프로젝트를 하고있는데 포인트충전(결제시스템)을 구현할 방법을 찾아가 아임포트(i'm port)라는 API를 발견하게 되었다. 정말 간편하고 쉽게 결제시스템을 구현할 수 있게 해주는 API다.
아임포트 공식 홈페이지
1. 먼저 아임포트 사이트에 가입을 합니다.
2. 회원가입후 시스템설정으로 이동합니다.
3. PG설정(일반결제 및 정기결제) 를 클릭합니다.
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)
★현재 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
-ajax에 설정한 url로 amount(충전금액)의 값이 전달됩니다.
-충전금액을 DB에 저장합니다 (ex) point_idx , point_dateTime , point_amount, point_user )
결과
ID 2개(idx: 58 / idx : 68) 로 포인트 충전 결과
충전내역 / 총 충전금액 쿼리문
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);
}
'Spring & JPA' 카테고리의 다른 글
스프링 잡학사전 (0) | 2020.05.25 |
---|---|
[Spring Boot] 문자인증 구현 coolSMS (5) | 2020.05.13 |
[Spring] 비밀번호 암호화 SHA-256 / MD5 (0) | 2020.05.05 |
컨트롤러 클래스 없이 특정 view대한 컨트롤러 추가 addViewControllers (0) | 2020.05.05 |
[Spring Boot+JPA] 회원가입 구현시 아이디 중복체크, 유효성 검사 처리하기 (0) | 2020.04.20 |