[Spring Boot 쇼핑몰] User - 금액 충전기능

서론

쇼핑몰에서 가장 기본적이면서 필수적인 부분이 상품을 주문하는 부분이다.
하지만 주문을 처리하기 위해서는 결제 하는 부분이 필수적이다!!

결제를 처리하기 위해서는 먼저 무통장/카드/카카오페이/네이버페이등 다양한 결제수단을 이용하도록 구현 할 수 있다.

하지만 우리 쇼핑몰에서는 간단하게 구현해보도록 하겠다.

먼저 User Entity에는 잔액이라는 변수를 가지고있다. 그렇기에 그 잔액을 충전하여 금액만큼 결제를 할 수 있도록 구현 할 예정이다.

아임포트

잔액 충전을 어떻게 구현할까 생각하던중 아임포트(i'm port)라는 API를 발견하게 되었다.

이곳은 정말 간편하고 쉽게 결제시스템을 구현해주도록 하는 api이다.

https://www.iamport.kr/

먼저 다음 아임포트 사이트에 회원가입을 한다.
오른쪽 상단 관리자 콘솔 -> 시스템 설정에 들어가면 다음과 같이 나온다.

PG설정 -> 원하는 PG선택 (테스트모드 ON) 을하고 전체 저장을 하게되면 가맹점 코드가 나타나게 된다.

나는 카카오페이를 사용하여 구현하려한다.

아임포트 라이브러리를 추가한다.

<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>

결제 페이지를 구현한다.

<div class="second" align="center">
                    <img class="card-img-top" width="20" height="300" src="/files/kakao.jpg" alt="..." />
                    <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><br/>
                    <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><br/>
                    <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-outline-dark" id="charge_kakao">충 전 하 기</button>
                </div>

저 같은 경우에는 다음과 같이 구현해 보았습니당.

Script 추가

<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: 'MJU 쇼핑몰 머니충전',
            amount: money,
            buyer_email: '[email protected]',
            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/charge/point", //충전 금액값을 보낼 url 설정
                    data: {
                        "amount" : money
                    },
                });
            } else {
                var msg = '결제에 실패하였습니다.';
                msg += '에러내용 : ' + rsp.error_msg;
            }
            alert(msg);
            document.location.href="/main"; //alert창 확인 후 이동할 url 설정
        });
    });
</script>

IMP.init('가맹점식별코드');
'가맹점식별코드' -> 'IMP123456789' 같이
내정보-> 가맹점 식별코드에 있는 번호를 작성하면 된다.

UserPageService.java

잔액충전

public void chargePoint(int id,int amount){
        User user = userRepository.findById(id).get();
        user.setMoney(amount);
        userRepository.save(user);
    }

UserPageController.java

잔액충전

@Transactional
    @GetMapping("/user/{id}/cash")
    public String myCash(@PathVariable("id") Integer id,Model model,@AuthenticationPrincipal PrincipalDetails principalDetails){
        // 로그인 User == 접속 User
        if(principalDetails.getUser().getId() == id){
            // User의 주문내역을 가져온다.
            User user = userPageService.findUser(id);
            model.addAttribute("user",user);

            return "/user/cash";
        }else{
            return "redirect:/main";
        }
    }

잔액충전처리

@GetMapping("/user/charge/point")
    public String myCashPro(int amount,@AuthenticationPrincipal PrincipalDetails principalDetails){
        User user = userPageService.findUser(principalDetails.getUser().getId());
        userPageService.chargePoint(user.getId(),amount);
        return "redirect:/main";
    }

다음과 같은 코드를 사용하여 충전을 원한 금액만큼 처리하도록 하였다.