[JavaScript] 자바스크립트 부모창에서 자식창 제어하기 ex)결제창 제어

Q. 결제가 끝나면 창을 닫아주세요.

 

이번에 진행 중이던 쇼핑몰 프로젝트에서 카카오페이를 연동하였다.

 

결제하기를 누르면 새창을 띄우고 새창에서 카카오페이 결제를 하는 식으로 기능 연동을 하였는데,

 

결제가 끝나도 창이 닫히지 않고 유지되는 이슈가 있었다. 

 

 

일반적인 쇼핑몰에서 카카오페이로 결제를 하면 자동적으로 결제창이 닫히고 다음 화면으로 넘어가길래

 

카카오페이 결제가 끝나면 자동으로 창이 닫히는 줄 알았다. 하지만 세상은 그렇게 친절하지 않았고

 

개발자가 해결해주어야 하는 듯하다. 그만 징징거리고 빠르게 코드를 보도록 하자.

 

window인터페이스의 window.open 함수를 사용하여 구현하였다.

//Angular 클래스형에서 예제코드 작성
export class PaymentComponent implements OnInit {

	constructor() { }
    
    //window객체를 담을 변수선언
    paymentUrl:any

    openPaymentUrl(){
        // window.open("url입력","창 이름","옵션지정");
        // about:blank가 새창으로 띄우기
        this.paymentUrl = window.open("https://www.naver.com","payment","about:blank");
    }

    closePaymentUrl(){
        //해당 window객체를 닫음
        this.paymentUrl.close()
    }
    
}

원리는 간단하다. window객체를 담을 변수를 선언하고 결제가 완료되는 시점에서 해당 객체를 close 시켜주면 된다.

 

글쓴이가 구현한 결제방식은 데이터를 polling 하고 있는 방식이라 상태를 계속 체크하다가 결제가 완료되면

close 해주는 방식이다. 예제는 밑에 첨부한다.

 

getStatus() 함수의 내용은 이 글의 주제가 아니므로 자세한 설명은 하지 않고 넘어가겠다.

 

해당 pollingData() 함수는 결제를 요청하는 함수에 넣어주면 된다.

  interval:any;
  status:string:
  pollingData() {
  	//1초마다 반복적으로 실행
    this.interval = setInterval(()=>{
      //결제상태를 체크하는 함수
      this.getStatus()
      if(this.status){
      	//결제가 완료됐거나 오류가났을때
        if(this.status.includes('완료') || this.status.includes('오류')){
          //인터벌 종료시킨뒤 결제창 닫음
          clearInterval(this.interval);
          this.openKakaoUrl.close();
        }
      }
    }, 1000);
  }
  
  async getStatus(){
  	try{
    	// 서버에서 상태를 요청한 뒤 status에 상태를 넣어주는 로직
    }
    catch(e){
    }
  }
  
  async onPayment(){
  	try{
    	//결제를 요청하는 로직
        //결제요청이 끝난뒤 pollingData()함수 실행
        this.pollingData();
    }
    catch(e){
    }
  }

새창으로 띄우는 방식은 이렇게 사용하면 될 것 같다. 새창을 띄우지 않고 url만 변경해서 구현하는 방식도 있다.

 

글쓴이는 새창으로 띄우지 않고 url을 변경하는 식으로구현 방식을 변경하였는데, 다음에 포스팅하도록 하겠다.

 

2022.03.09 - [Front-End] - [JavaScript] location.href 사용하기

[JavaScript] location.href 사용하기