세미 프로젝트 - 결제

우선 세미 프로젝트를 할 때 수업에서 결제 api를 배우지 않았다.

하지만 내 욕심으로 카카오 api를 해보고 싶어서, 이틀동안 결제 api를 찾아봤지만,, 해결하지 못해서 아래 코드는 야매?로 진행했다.. 

 

   <div class="sec">
                            <h2 class="tit type02">
                                <b>결제 수단</b>
                            </h2>
                            <div class="sec type03" >
                                <div class="inp-wrap type03" style="width: 100%;">
                                    <label>결제</label>

                                    <div class="chk-wrap" style="margin-top: 3px; margin-left: 10px; font-size: 13px;">
                                        <input type="radio" id="payment-kakao" name="order-payment" value="KAKAO" style="display:none;"  checked="checked">
                                        <label for="payment-kakao"  class="kakaoBtn">카카오페이</label>
                                        <img src="${pageContext.request.contextPath}/static/image/kakaopay.png" style="height: 13px; border-radius: 10px 10px 10px 10px;" >
                                    </div>

                                    
                                </div>
                            </div>
                        </div>

 

 

 

    //카카오페이 api    
               const IMP = window.IMP; // 생략 가능
             IMP.init("imp55345065");  // 예: imp00000000a
           
             var name = $("#productName").val(); //상품이름 변수로 선언
      
        
          //카카오 api (추후에 결제하기버튼을 누를때 호출하기위해 함수를 만들어줌)
          function kakao1() {
         

            
          // IMP.request_pay(param, callback) 결제창 호출
          IMP.request_pay({ // param
              pg: "kakaopay",
              pay_method: "card",
              merchant_uid : 'merchant_' + new Date().getTime(),
              name: name +" "+ count +"개 외",   //필수 파라미터 입니다.
              amount: parseInt(discountTotalPrice), //숫자타입
              buyer_email : 'iamport@siot.do1',
              buyer_name : '구매자이름',
              buyer_tel : '010-1234-5678',
              buyer_addr : '서울특별시 강남구 삼성동',
              buyer_postcode : '123-456'
          }, function (rsp) { // callback
              if (rsp.success) { 
                
               $("#jb-form").submit();   
                  // 결제 성공 시 로직,
              
              } else {
            	  unitAgree=false;
                 var msg = '결제에 실패하였습니다.';

                  // 결제 실패 시 로직,

              }

     
         }); 
      }

 

---

이 이후에 파이널 프로젝트를 들어가기 전 카카오 결제 api를 배워서 코드를 다시 한번 정리 해본다.

 

++ 너무 많아서,,, 추후에 날 잡고 정리해야 할 것 같다..ㅠ