땅콩포인트 결제 API 완료....
1. html부분 : 구매할 구독권과 포인트를 나눠서 진행
<main>
<section>
<input type="hidden" value="${sessionScope.loginMember}">
<div id="ssTicket">
<table>
<tr>
<td colspan="3" class="payName">구독권</td>
</tr>
<tr>
<td class="payOne"><label for="seasonticket"><input
type="radio" id="seasonticket" name="payName" value="10000"></label></td>
<td class="payTwo" name="seasonticket"><label
for="seasonticket">한달이용권</label></td>
<td class="payTwo" value="10000"><label
for="seasonticket">10,000원</label></td>
</tr>
</table>
</div>
<div id="peanetCharge">
<table>
<tr>
<td colspan="3" class="payName">땅콩충전</td>
</tr>
<tr>
<td class="payOne"><label for="peanutpoint100"><input
type="radio" id="peanutpoint100" name="payName" value="10000"></label></td>
<td class="payTwo" name="peanetpoint"><label
for="peanutpoint100">100 땅콩</label></td>
<td class="payTwo"><label for="peanutpoint100">10,000원</label></td>
</tr>
<tr>
<td class="payOne"><label for="peanutpoint200"><input
type="radio" id="peanutpoint200" name="payName" value="20000"></label></td>
<td class="payTwo" name="peanetpoint"><label
for="peanutpoint200">200 땅콩</label></td>
<td class="payTwo"><label for="peanutpoint200">20,000원</label></td>
</tr>
<tr>
<td class="payOne"><label for="peanutpoint300"><input
type="radio" id="peanutpoint300" name="payName" value="30000"></label></td>
<td class="payTwo" name="peanetpoint"><label
for="peanutpoint300">300 땅콩</label></td>
<td class="payTwo"><label for="peanutpoint300">30,000원</label></td>
</tr>
</table>
</div>
<div id="Confirmation"><button id="ordercheck">주문확정</button></div>
<div id="history">
<table>
<tr>
<td colspan="2" class="payName">주문내역</td>
</tr>
<tr>
<td class="history1"> 주문번호 :</td>
<td class="history2" id="oderno"></td>
</tr>
<tr>
<td class="history1">구매내역 : </td>
<td class="history2" id="contents"></td>
</tr>
<tr>
<td class="history1">구매금액 : </td>
<td class="history2" id="paymoney" value=""></td>
</tr>
</table>
<div id="listCheck">
<p>주문내용을 확인하셨습니까? </p>
<p>구독권은 구매후 취소불가합니다.</p>
<p>땅콩은 구매후 15일 안에 사용하지 않을 경우만 </p>
<p>취소가능하며 잔여땅콩은 환불되지 않습니다.</p>
<p>위의 내용에 동의하십니까?<input type="checkbox" value="" id="payCheck"></p>
</div>
</div>
<div id="pay"><button onclick="requestPay()">결제진행</button></div>
</section>
</main>
실수 1: label은 id와 for가 연결되는 것인데 각각 다 걸어야 한다....div 통으로 걸었더니 안먹힌다.
실수2 : radio는 name명이 같이것끼리만 가능하다....name이 다르니깐 둘다 선택된다.
여기서 부터 스트립트 단!!!!!
var orderName=''; //결제 분류명
var payMoney=''; // 결제할 값
var d=new Date();
var dm=''; // 년월일 합칠 변수
var orderNo=''; //주문번호 분류명과 날짜 합친것
var orderContents='' // 주문내용
var merchant_uid=''; //결제 주문번호 넣을 곳
var memberId= '${sessionScope.loginMember.memberId}';
var mEmail= '${sessionScope.loginMember.mEmail}';
$('#seasonticket').on('click', function(){
if(!${empty sessionScope.lastDate}){
alert("구독권 만료후 구매 부탁드립니다. 이용해 주셔서 감사합니다.");
$('#seasonticket').prop("checked",false);
};
})
로그인한 정보 가져 오기....session은 정말 편리한것이네.~~~~~~~ controller에서 안보내져도 읽혀진다....그러라고 만든거니깐...ㅋㅋㅋ
구독권만료기간이 남았는데 또 클릭할것을 대비해서 분류!!!!!
prop으로 체크 값을 해제하기..........사용자입장에서 생각하면 이것저것 자꾸 떠오르게 된다.
$('#ordercheck').on('click', function(){
if ($('#history').css('display')=='none'){
$('#ordercheck').css('background-color','red');
$('#ordercheck').css('color','#fff');
$('#ordercheck').html('주문취소');
$('#history').css('display','block');
$('#pay').css('display','block');
orderList();
} else{
location.href='/pay/start.kh';
}
})
주문확정을 하게 되면 주문정보를 불러와야하니깐 숨겨놨던 div를 활성화시키는것...
toggle로도 해봤는데 부자연스럽고 의도처럼 먹히지 않고 되다 말다 하는 느낌이다....
확실히....block으로 각각 모두 부여하니깐 의도되로 됨....더 정확한 방법이 있겠지만....오늘은 이만큼만...
선택한 정보를 결제테이블에 db에 저장하여 그값을 가져오기....
function orderList(){
orderName=$('input[type="radio"]:checked').parent().parent().next().attr('name'); //결제 분류명
payMoney=$('input[type="radio"]:checked').val(); // 결제할 값
dm=String(d.getFullYear());
dm+=String(d.getMonth()+1);
dm+=String(d.getDate());
orderNo=orderName+"-"+dm; //주문번호 분류명과 날짜 합친것
orderContents=$('input[type="radio"]:checked').parent().parent().next().text()+"구매"; // 주문내용
$.ajax({
url:'/pay/orderIN.kh',
type:'post',
dataType:'json',
data:{
'orderNo':orderNo,
'memberId':memberId,
'orderContents':orderContents,
'payMoney':payMoney
},
success:function(pay){ //주문번호 받아오기
$('#oderno').html(pay.orderNo);
$('#contents').html(pay.orderContents);
$('#paymoney').html(pay.pay+'원');
$('#paymoney').val(pay.pay);
},
error : function(data){
console.log(data);
alert('주문실패: 잠시후 다시 부탁드립니다!'+data.statusText);
}
})
}
// 주문 번호 만들어서 보내기
@ResponseBody
@RequestMapping(value = "/pay/orderIN.kh", produces = "application/json;charset=utf-8", method=RequestMethod.POST)
public String orderIn(String orderNo,String payMoney,String memberId, String orderContents) {
Pay pay=new Pay();
pay.setOrderNo(orderNo);
pay.setPay(Integer.valueOf(payMoney));
pay.setMemberId(memberId);
pay.setOrderContents(orderContents);
int result=pService.orderin(pay);
if(result>0) {
pay=pService.orderNoOne(pay);
return new Gson().toJson(pay);
}else {
JSONObject json=new JSONObject();
json.put("error","error");
return json.toJSONString();
}
}
controller 까지 다녀왔다..... 드뎌 결제 준비 된것이다...
다시보니 새록하다...앞서 올린 headers: { "Content-Type": "application/json" }, 오류.......나의 2시간.!!!!!!
var IMP = window.IMP;
IMP.init('------------');
function requestPay() {
if ($('#payCheck').is(':checked')) {
IMP.request_pay({
pg : 'html5_inicis',
pay_method : 'card',
merchant_uid : merchant_uid, //주문번호
name : orderContents, //주문내용
amount : 1000, //주문금액
buyer_email : mEmail, // 고객이메일
buyer_name : memberId, // 고객id
buyer_tel : '01011112222', //고객연락처
buyer_addr : '서울특별시 강남구 삼성동', //고객주소
buyer_postcode : '123-456'
}, function(rsp) { // callback
if (rsp.success) { // 결제 성공 시: 결제 승인 또는 가상계좌 발급에 성공한 경우
// jQuery로 HTTP 요청
$.ajax({
url : '/pay/success.kh', // 예: https://www.myservice.com/payments/complete
type : 'POST',
// headers: { 'Content-Type': 'application/json' },
data : {
'imp_uid' : rsp.imp_uid,//결제번호
'orderNo' : $('#oderno').html(),
'memberId' : memberId,
'pay' : $('#paymoney').val()
},
success : function(result) {
alert('결제 성공');
location.href = '/';
},
error : function(e) {
console.log(e)
alert('에러: 관리자에게 문의하세요');
}
}).done(function(data) {
//가맹점 서버 결제 aip성공시 로직
switch (data.status) {
case 'vbankIssued':
// 가상계좌 발급 시 로직
break;
case 'success':
// 결제 성공 시 로직
break;
}
});
} else {
alert('결제에 실패하였습니다. 에러 내용: ' + rsp.error_msg);
location.href = '/pay/start.kh';
}
});
} else {
alert("동의 체크 후 결제 가능합니다.");
}
ajax으로 db보내는건 내가 하는거고 done까지는 아직 필요 없을것 같아 멈췄다.
마지막 controller에서 결제내용을 db로 보내기 해본다.
// API결제 성공시 데이터 DB전달
@ResponseBody
@RequestMapping(value="/pay/success.kh", method=RequestMethod.POST)
public String paySussess(String orderNo, String memberId, Integer pay, String imp_uid, Pay payApi) {
String[] arr = orderNo.split("-");
String table = arr[0];
payApi.setImp_uid(imp_uid);
payApi.setMemberId(memberId);
payApi.setOrderNo(orderNo);
int result = pService.orderSuccess(payApi);
int p_t_input;
int m_st_YN=1;
if (result > 0) {
if (table.equals("seasonticket")) {
SeasonTicket st = new SeasonTicket();
st.setOrderNo(orderNo);
st.setMemberId(memberId);
p_t_input = pService.seasonticketInput(st);
m_st_YN = pService.memberStChange(memberId);
} else {
PeanutPoint pp = new PeanutPoint();
pp.setMemberId(memberId);
pp.setOrderNo(orderNo);
pp.setPeanutPoint(pay / 100);
p_t_input = pService.peanutTableInput(pp);
}
} else {
return "failure";
}
if ((p_t_input > 0) && (m_st_YN > 0) ) {
return "success";
} else {
return "failure";
}
}
땅콩포인트는 땅콩으로
구독권은 구독권으로 나눠서 보내는거.............
매핑 잘 쳐야 한다......오타와의 전쟁.........!!
이걸 또 잘 걸러서 member클래스랑 연결하기......
결제api가 쉬운거지.....결제 자체가 쉬운것은 아니다.....
역시나 돈이 연결되었는데 간단할리가 없다......이건 인생진리!!!!