- 아임포트 결제 시스템과 연동해서 각각의 수량과 금액에 맞게 결제되게 설계 했다
pom.xml
<repositories>
<repository>
<id>jitpack.io</id>
<url>https://jitpack.io</url>
</repository>
<dependency>
<groupId>com.github.iamport</groupId>
<artifactId>iamport-rest-client-java</artifactId>
<version>0.2.23</version>
</dependency>repositories를 먼저 추가해주고 dependency를 추가해준다
dogGumPay.js
<div>
<table class="table table-borderless">
<tbody>
<tr>
<th scope="row"><img width="30" height="30" src="https://img.icons8.com/ios-glyphs/30/dog-bone.png" alt="dog-bone"/> 1개</th>
<td>1000원</td>
<td><button type="button" class="btn btn-outline-primary" onclick="requestPay('1', '1','${email}')">결제</button></td>
</tr>
<tr>
<th scope="row"><img width="30" height="30" src="https://img.icons8.com/ios-glyphs/30/dog-bone.png" alt="dog-bone"/> 11개</th>
<td>10000원</td>
<td><button type="button" class="btn btn-outline-primary" onclick="requestPay('11', '1','${email}')">결제</button></td>
</tr>
<tr>
<th scope="row"><img width="30" height="30" src="https://img.icons8.com/ios-glyphs/30/dog-bone.png" alt="dog-bone"/> 35개</th>
<td>30000원</td>
<td><button type="button" class="btn btn-outline-primary" onclick="requestPay('35', '1','${email}')">결제</button></td>
</tr>
</tbody>
</table>
</div>
</div>- 버튼이 클릭되면 매개변수가 전달되고 requestPay() 가 실행된다. email은 세션을 보내줬다
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
<script src="https://cdn.iamport.kr/js/iamport.payment-1.1.5.js"></script>- 아임포트 API 을 임포트 해준다
Script(주문서번호 생성)
function generateOrderNumber() {
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
const hours = String(currentDate.getHours()).padStart(2, '0');
const minutes = String(currentDate.getMinutes()).padStart(2, '0');
const seconds = String(currentDate.getSeconds()).padStart(2, '0');
const randomDigits = Math.floor(Math.random() * 100); // 임의의 세 자리 숫자 생성 (0부터 999까지)
const orderNumber = year + month + day + hours + minutes + seconds + '-' +randomDigits;
//alert(year);
//alert(month);
//alert(day);
//alert(orderNumber);
return orderNumber;
}
const orderNumber = generateOrderNumber();주문서번호: 년월일시분초랜덤숫자 조합
<!--아임포트-->
var IMP = window.IMP;
IMP.init('imp04014474') // 예: 'imp00000000a'
function requestPay(productName, price, email){
const params = {
"email" : email
}
IMP.request_pay({
pg : 'html5_inicis',
pay_method: "card",
merchant_uid: 'P_' + orderNumber ,
name: productName,
amount: price,
buyer_email: email,
buyer_name: "포트원 기술지원팀",
buyer_tel: "010-1234-5678",
buyer_addr: "서울특별시 강남구 삼성동",
buyer_postcode: "123-456",
}, - 아임포트 고유번호를 입력해주고 백엔드로 전달 할 내용들 적어준다
function(rsp) {
if ( rsp.success ) {
//[1] 서버단에서 결제정보 조회를 위해 jQuery ajax로 imp_uid 전달하기
alert("결제성공");
$.ajax({
url: "/confirmPay/" + rsp.imp_uid, //cross-domain error가 발생하지 않도록 주의해주세요
type: 'post',
//dataType: 'json',
data: params,
success: data => {
console.log(data);
if(data == 1){
//결제실패(웹서버측 실패)
console.log(data);
alert('성공');
}else{
alert('실패');
}
},
//javascript error
error: function(jqXHR, textStatus, errorThrown) {
console.log("Ajax 요청 실패:", textStatus, errorThrown);
console.log("상세 정보:", jqXHR.responseText);
// jqXHR.responseText에는 서버로부터 받은 응답의 상세 내용이 들어있습니다.
}
}).done(function(data) {
//[2] 서버에서 REST API로 결제정보확인 및 서비스루틴이 정상적인 경우
if ( data == 1) {
var msg = '결제가 완료되었습니다.';
msg += '\n고유ID : ' + rsp.imp_uid;
msg += '\n상점 거래ID : ' + rsp.merchant_uid;
msg += '\결제 금액 : ' + rsp.paid_amount;
msg += '카드 승인번호 : ' + rsp.apply_num;
Swal.fire({
title:"결제 완료",
text:"결제 금액 : "+rsp.paid_amount,
icon:"success",
confirmButtonText:"확인"
});
} else {
//[3] 아직 제대로 결제가 되지 않았습니다.
//[4] 결제된 금액이 요청한 금액과 달라 결제를 자동취소처리하였습니다.
}
});
} else {
var msg = '결제에 실패하였습니다.';
msg += '에러내용 : ' + rsp.error_msg;
Swal.fire({
title:"결제 실패",
text:"에러 내용 : "+rsp.error_msg,
icon:"error",
confirmButtonText:"확인"
});
}
});
}//function end
controller
@ResponseBody
@RequestMapping(value="/confirmPay/{imp_uid}", method=RequestMethod.POST)
public int paymentByImpUid(@PathVariable(value= "imp_uid") String imp_uid, HttpSession session) throws IamportResponseException, IOException{
ModelAndView mav = new ModelAndView();
String email = (String)session.getAttribute("s_email");
payDTO payDTO = new payDTO();
System.out.println(imp_uid);
Payment payment = this.api.paymentByImpUid(imp_uid).getResponse(); // 검증처리
try {
if(payment.getStatus().equals("paid")) {
System.out.println("paid");
payDTO.setEmail(email);
payDTO.setOrderno(payment.getMerchantUid());
payDTO.setGumqty(Integer.parseInt(payment.getName()));//개껌갯수
payDTO.setPrice(payment.getAmount().toString());
System.out.println(payDTO.toString());
payDAO.payInsert(payDTO);
//mav.setViewName("layout/mypage/paySuccess");
String s_nickanem = (String)session.getAttribute("s_nickname");
int gumQty = chatRoomDao.checkGum(s_nickanem);
session.removeAttribute("s_gumqty");
session.setAttribute("s_gumqty", gumQty);
return 1;
}else {
System.out.println("failed");
mav.setViewName("layout/mypage/payFail");
return 0;
} // switch
//res.add("result", result);
//res.add("orderNum", payment.getMerchantUid());
} catch (ServiceException e) {
throw (e);
} // try-catch
}//class end
- post 방식으로 imp_uid를 전달 받고 검증이 완료되며 payment에서 값들을 전달받는다
SQL
#트리거 생성 (gpay가 결제 된 만큼 멤버테이블에서 수량이 올라간다)
CREATE TRIGGER update_gumqty AFTER INSERT ON GPAY
FOR EACH ROW
BEGIN
UPDATE MEMBER
SET GUMQTY = GUMQTY + NEW.GUMQTY
WHERE email = NEW.email;
END;- GPAY 테이블의 결제가 발생하면 member테이블에서 같은 email을 찾아 gumqty의 수량을 늘려주는 트리그를 생성했다.
블로그 이사중 ☃︎