[javascript] 결제 시 포인트 적용 기능 구현

[javascript] 결제 시 포인트 적용 기능 구현

자바스크립트로 결제 시 포인트 적용 기능 구현해보고 있다.

체크박스 체크 여부 가져오기와 input 입력 값 비교, input 값 변경 등의 기능이 활용되었다.

 

실행 먼저 해보기👇

 

 

 

javascript 결제 시 포인트 적용 기능 구현 - 실행 화면

1. 필요한 변수

 : 결제금액, 사용 가능한 포인트, 사용 가능한 최소 포인트, 포인트 사용 단위

2. 구현할 기능

 -1) 체크박스 체크 시 포인트 전체 사용, 체크 해제 시 원복

 -2) 입력값이 최소 포인트보다 적으면 사용 불가

 -3) 입력값에 대한 사용 단위 적용

 -4) 값 입력 시 사용 가능 포인트, 남은 포인트, 최종 결제 금액 차감

 

html 코드

<%
amt = 65000
min = 5000
unit = 100
pnt = 7210
%>

<table class="tbl_edit01">
  <colgroup>
    <col width="90px"/>
    <col width="*"   />
  </colgroup>
  <tbody>
    <tr>
      <th>결 제 금 액</th>
      <td><span class="bold txt_blue"><%=amt%>원</span></td>
    </tr>
    <tr>
      <th> 포 인 트 </th>
      <td>
        사용가능 포인트 : <span name="left_pnt"><%=pnt%></span>p <span><input type="checkbox" id="chk_use" onclick="chkPoint(65000,7210,5000,100)">포인트 사용</span>
        <span style="float:right">포인트는 최소 <%=min%>p부터 <%=unit%>p단위로 사용 가능합니다.</span>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <span> <input type="number" name="use_pnt" id="use_pnt" min="<%=min%>" max="<%=amt%>" onchange="changePoint(65000,7210,5000,100)"></span> p 
        <span> ( 남은포인트 : </span><span name="left_pnt" id="left_pnt"><%=pnt%></span>p )
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
      	<p class="bold txt_red"> 최종 결제 금액 : <span class="bold txt_red" id="result_pnt"><%=amt%></span> 원</p>
      </td>
    </tr>
  </tbody>
</table>

 

사용가능 포인트와 남은 포인트는 동일한 변수를 사용한다.

jsjavascript로 포인트 적용하기 전에는 최종 결제 금액에 결제금액을 뿌려준다.

 

javascript 코드

	function chkPoint(amt,pnt,min,unit) {
		//amt : 최초 결제 금액 / pnt : 사용가능,남은 포인트 / min : 사용 가능 최소 포인트 / unit : 사용단위
		var v_point = 0; //사용할 포인트 (input 입력값)
	
		if (document.getElementById("chk_use").checked)  
		{
			if (pnt < min)  //최소 사용 단위보다 작을 때
			{
				v_point = 0; 
			}else {
				v_point = pnt - pnt%unit; //사용할 포인트 = 전체 포인트 중 최소단위 이하 포인트를 뺀 포인트
			}

			if(pnt > amt ){ //결제금액보다 포인트가 더 클 때
				v_point = amt; //사용할 포인트는 결제금액과 동일하게 설정
			}
			
		}
		document.getElementById("use_pnt").value = v_point; //input 값 설정

		changePoint(amt,pnt,min,unit);
	}
	
	function changePoint(amt,pnt,min,unit){
		//input값을 가져옴 > left_pnt 변경 > 최종결제금액 변경
		//amt : 최초 결제 금액 / pnt : 사용가능,남은 포인트 / min : 사용 가능 최소 포인트 / unit : 사용단위
		var v_point = parseInt(document.getElementById("use_pnt").value); //사용할 포인트 (input 입력값)
		if (v_point > pnt) //입력값이 사용가능 포인트보다 클때
		{
			v_point = pnt;
			document.getElementById("use_pnt").value = v_point; //input 값 재설정
		}

		if(v_point > amt ){ //결제금액보다 포인트가 더 클 때
			v_point = amt; //사용할 포인트는 결제금액과 동일하게 설정
			document.getElementById("use_pnt").value = v_point; //input 값 재설정
		}

		if (v_point < min)  //최소 사용 단위보다 작을 때
		{
			v_point = 0; 
			document.getElementById("use_pnt").value = v_point; //input 값 재설정
		}else {
			v_point = v_point - v_point%unit; //사용할 포인트 = 사용할 포인트 중 최소단위 이하 포인트를 뺀 포인트
		}

		var v_left = document.getElementsByName("left_pnt"); //사용가능 포인트, 남은 포인트 값 설정
		for (var i = 0; i < v_left.length; i++) {

			v_left[i].innerHTML = pnt - v_point; //= 전체 포인트 중에 사용할 포인트빼고 남은 포인트

		}
		document.getElementById("result_pnt").innerHTML = amt - v_point; //최종 결제금액 = 결제금액 - 사용할 포인트
	}
  

 

v_point는 input에 입력될 사용할 포인트를 가져오는 변수이다.

체크박스를 체크/체크 해제했을 때 chkPoint 함수가 실행되어 v_point를 설정한 후 input value 값에 넣는다.

그 후에 input 값으로 나머지 값들을 변경하는 changePoint 함수를 호출한다.

 

changePoint 함수는 v_point를 설정한 후 input value값에 넣고,

chkPoint로 호출된 경우와 입력값이 직접 변경된 경우를 구분하는 구문을 넣는 것도 생각해봐야겠다.

 

우선, checked 를 사용해서 체크박스 체크 여부를 가져왔다.

if (document.getElementById("chk_use").checked) {

 

이후 예외 경우에 따라 v_point를 설정해준다.

예외 1. 사용하려는 포인트가 사용 단위보다 적을 때 ( 사용 포인트 = 0 )

if (pnt < min)  //최소 사용 단위보다 작을 때
{
	v_point = 0; 
}

 

예외 2. 결제금액보다 포인트가 더 클 때 ( 사용포인트 = 결제금액 )

if(pnt > amt ){ //결제금액보다 포인트가 더 클 때
	v_point = amt; //사용할 포인트는 결제금액과 동일하게 설정
}
            

 

예외 3. 사용 단위 설정 (사용포인트 = 사용 가능한 포인트에서 포인트/100의 나머지를 뺀 값)

v_point = pnt - pnt%unit;

 

이후 input value 값 변경하기

document.getElementById("use_pnt").value = v_point;

 

changePoint도 사용할 포인트를 설정해준다.

예외 처리는 동일하다.

사용가능, 남은 포인트, 총 결제금액은 value값 대신 innerHTML로 텍스트를 변경해주었다.

사용 가능한 포인트와 남은 포인트가 동일한 값을 사용하기 때문에 getElementsByName을 사용한다.

var v_left = document.getElementsByName("left_pnt"); //사용가능 포인트, 남은 포인트 값 설정
for (var i = 0; i < v_left.length; i++) {
	v_left[i].innerHTML = pnt - v_point; //= 전체 포인트 중에 사용할 포인트빼고 남은 포인트
}
document.getElementById("result_pnt").innerHTML = amt - v_point; //최종 결제금액 = 결제금액 - 사용할 포인트

 

 

후다닥 만드느라 정신사납지만 돌아가기만 하면 됐지 😂

 

코드 실행해보기

Edit fiddle - JSFiddle - Code Playground