본문 바로가기
Project/IMFIND

[프로젝트] 카카오페이 api 결제

by hongchii 2021. 1. 12.
728x90
반응형

1/8,10~12

 

카카오페이 api를 통해서 사례금을 결제하는 코드를 짰다.

결제 요청을 하면 회원정보와 결제금액 등을 불러와야하고,

또 결제정보를 보내줘야하고 참 까다로운 작업이었다.

그리고 결제를 진행하는 모달창에서 바로 submit하는 것도 쉽지 않았고, 

테스트 도중 왜인지 모르는 에러가떠서 테스트하는데도 굉장히 힘들었다.

 

 

 

카카오 결제를 위한 js 코드

function pay(){
	var lostpay = $("input[name=Lost_Pay]:checked").val();
		if (lostpay == 'direct'){
			lostpay = $("#paybox").val();
			lostpay = lostpay.replace("direct","");
			lostpay = lostpay.replace("," , "");
		} // 결제금액 직접입력한 칸 숫자만 걸러주기.
				
		var id = ''; // 테스트여서 id를 직접 넣어줌.
		// ajax 로 회원정보를 받아온뒤, 이름, 연락처, 주소 추출.
		$.ajax({
			url : "el/paymember",
			contentType : 'application/x-www-form-urlencoded;charset=utf-8',
			data : { "id" : id } ,
			type : 'POST',
			success : function(data){
			alert("통신성공!!");
								
			var IMP = window.IMP;
			var code = ""; // 가맹점 식별코드
			IMP.init(code);	
			IMP.request_pay(
				{ 	
				// name과 amount만 있어도 결제 진행가능
					 pg : 'kakao', // pg사 선택 (kakao, kakaopay 둘다 가능)
					 pay_method : 'card',
					 // merchant_uid : 'merchant_' + new Date().getTime(),
					 merchant_uid : 'merchant_' + new Date().getTime(), // 주문번호
					 name : '사례금', // 상품명
					 amount : lostpay,
					 buyer_name : data[0].name,
					 buyer_email : data[0].email,
					 buyer_tel : data[0].contact,
				}, 
				function(rsp){
					if (rsp.success){ // 결제 성공
						var msg = '결제가 완료되었습니다.';
						var result = {
							"PayCode" :rsp.merchant_uid, //PayCode //가맹점에서 생성/관리하는 고유 주문번호	
							"Pay_Way" : rsp.pay_method, //Pay_Way //결제수단
							"Pay_Amount" : rsp.paid_amount, //Pay_Amount //결제금액
							"Pay_State" : rsp.status, //Pay_State //결제상태
							"Pay_Date" : getFormatDate(new Date()),//결제승인시각
							"Id" : id
						}// result
							// 서버로 결제테이블 정보 전송
							$.ajax({
								url : "", 
								dataType : 'json',
								contentType : 'application/json; charset=UTF-8',
								data : JSON.stringify(result),
								type : 'POST',
								success : function(data){
								console.log(data);
								}
							});
							alert("결제성공!");	
							addboard();//전송
							} // if 결제성공
							else { // 결제 실패
							  var msg = '결제에 실패하였습니다. 에러내용 : ' + rsp.error_msg;
							  alert(msg);
						    }
					} // function(rsp)
								); // IMP.request 
								return true;
							}, // 가장 처음 ajax 성공
							error : function(){
								alert("통신에러!");
							}
						}); // 가장 처음 ajax
				} // pay

 

결제 테스트 이력 

 

728x90
반응형

댓글