아이엠포트로 결제해보기!

김영한쌤 실전 스프링부트와 JPA 수업을 듣던 중에
상품을 구매할 때 결제창을 껴넣으면 어떨까 하는 생각으로 시작된 토이 프로젝트.

연동 메뉴얼은 아이엠포트에서 친절하게 설명해두었고, 이분 블로그에서도 많은 도움을 받았다.
나는 복잡한 결제창을 만들 생각은 아니고, 간단한 카카오페이 QR 결제가 열린 다음에 결제 완료까지 넘어가는 화면을 구성한 것이기 때문에 코드가 매우 간단하다.

실전 스프링부트 수업을 들어본 분들은 누구나 구현했을 주문화면이다.
여기서 submit을 누르면 카카오페이 QR 결제창이 열리도록 구현하고 싶었다.

따라서 form 에 id 값을 추가하고 아이엠포트와 블로그에서 설명한 대로 연결을 했다.

<form role="form" action="/order" method="post">
....
....
  <button type="submit" class="btn btn-primary" onclick="request_pay()">Submit</button>
</form>

....
</html>

<script th:inline="javascript">
    /*<![CDATA[*/
    var IMP = window.IMP;
  	IMP.init('//가맹점식별코드//');
    IMP.request_pay({
          pg: 'kakaopay',
          pay_method: 'card',
          merchant_uid: 'merchant_' + new Date().getTime(),
          name: '결제',
          amount: 1,
          buyer_email: '구매자 이메일',
          buyer_name: '구매자 이름',
          buyer_tel: '구매자 번호',
          buyer_addr: '구매자 주소',
          buyer_postcode: '구매자 우편번호',
          m_redirect_url: '리다이렉트 URL'
        }, function(rsp) {
          if (rsp.success) {
            var msg = '결제가 완료되었습니다.';
            orderForm.submit(); // form submit
          } else {
            var msg = '결제에 실패하였습니다.';
            rsp.error_msg;
          }
        });
      }
  /*]]>*/
</script>

원래는 이렇게 고쳤었는데 자꾸 자바스크립트 호출 전에 form이 먼저 보내지는거다.
생각해보니 submit 버튼이라 버튼이 눌릴때 당연히 form이 전달되는게 맞았음 🙄

그래서 form에 id 값을 id="orderForm" 로 추가한 다음 script를 약간 수정했다.

<script th:inline="javascript">
  /*<![CDATA[*/
  var IMP = window.IMP;
  IMP.init('//가맹점식별코드//');

  function request_pay() {
    var orderForm = document.getElementById('orderForm');
    var formData = new FormData(orderForm);

    IMP.request_pay({
      pg: 'kakaopay',
      pay_method: 'card',
      merchant_uid: 'merchant_' + new Date().getTime(),
      name: '결제',
      amount: 1,
      buyer_email: '구매자 이메일',
      buyer_name: '구매자 이름',
      buyer_tel: '구매자 번호',
      buyer_addr: '구매자 주소',
      buyer_postcode: '구매자 우편번호',
      m_redirect_url: '리다이렉트 URL'
    }, function(rsp) {
      if (rsp.success) {
        var msg = '결제가 완료되었습니다.';
        orderForm.submit(); // form submit
      } else {
        var msg = '결제에 실패하였습니다.';
        rsp.error_msg;
      }
    });

    event.preventDefault();
  }
  /*]]>*/
</script>

이렇게 하면 form 이 전달되기 전에 자바스크립트 함수가 먼저 호출되어 카카오페이 QR 결제창이 켜지고, 결제에 성공하면 orderForm이 전달되는 동작이 된다.

그 다음에는 "amount: 1," 이라고 되어있는 부분의 결제금액을 추가하고 싶었다.
처음에는 readOnly인 input 박스를 넣어서 아이템과 결제수량이 설정되면 바로 금액이 계산되게 해서 가져오고 싶었는데, option에서 설정된 각 item 별 price 값을 가져오려면 javascript에서 find 하는 함수를 만들어야하고.. 어찌저찌 만들었는데 돌아가지 않아서 fail..

function calculateOrderAmount() {
    var itemSelect = document.getElementById('item');
    var countInput = document.getElementById('count');
    var amountInput = document.getElementById('amount');
    
    var selectedItemId = itemSelect.value;
    var selectedItem = /*[[${items.?[id == #ids.selectedItemId(#itemSelect)]}]]*/ [];
    var itemPrice = selectedItem.length > 0 ? selectedItem[0].price : 0;
    
    var orderCount = parseInt(countInput.value) || 0;
    
    var orderAmount = itemPrice * orderCount;
    amountInput.value = orderAmount;
  }

fail된 함수이다... 저기서 selectedItem을 어떻게 들고와야할지 몰라서 결국 다른 방법을 찾음.

그러다가 어차피 items 모델에 price 가격이 다 담겨있는데, 여기서 가져오면 되지 굳이 다시 find 할 필요가 없다는 것을 깨닫고
th:data-price="${item.price}" 라는 데이터 속성을 추가한 다음에 자바스크립트 안에서 찾아오는 형식으로 수정했다.

<script th:inline="javascript">
  /*<![CDATA[*/
  var IMP = window.IMP;
  IMP.init('//가맹점식별코드//');

  function request_pay() {
    var selectedItem = document.getElementById("item");
    var selectedItemId = selectedItem.value;
    var selectedOption = selectedItem.options[selectedItem.selectedIndex];
    var itemPrice = selectedOption.getAttribute("data-price");
    var itemCount = document.getElementById("count").value;

    var orderForm = document.getElementById('orderForm');
    var formData = new FormData(orderForm);

    IMP.request_pay({
      pg: 'kakaopay',
      pay_method: 'card',
      merchant_uid: 'merchant_' + new Date().getTime(),
      name: '결제',
      amount: itemPrice * itemCount,
      buyer_email: '구매자 이메일',
      buyer_name: '구매자 이름',
      buyer_tel: '구매자 번호',
      buyer_addr: '구매자 주소',
      buyer_postcode: '구매자 우편번호',
      m_redirect_url: '리다이렉트 URL'
    }, function(rsp) {
      if (rsp.success) {
        var msg = '결제가 완료되었습니다.';
        orderForm.submit(); // form submit
      } else {
        var msg = '결제에 실패하였습니다.';
        rsp.error_msg;
      }
    });

    event.preventDefault();
  }
  /*]]>*/
</script>

이렇게 하면 카카오페이 결제창에 주문아이템*수량 만큼의 값이 노출된다.

이 다음에는 로그인 기능 추가해서
구매자 정보도 추가해보도록 하겠다.