[이니시스] PC 결제 요청하기 (인증)

개발 환경 : IntelliJ IDEA 2023.2

프레임워크 : Vue.js 기반의 Nuxt.js v2.15.7

개발 서버 : Node.js v16.16.0

패키지 관리자 : npm

 

이니시스를 개발하기 위해서는 이니시스 측에서 제공하는 이니시스 개발 가이드 사이트를 참조하면 매우 도움이 된다.

https://manual.inicis.com/pay/stdpay_pc.html#popup_46

Web manual

만약에 개발을 하다가 문의할 사항이 있다면 ts@kggroup.co.kr 이메일문의를 이용하면 된다.

 

이니시스에서 결제는 PC와 모바일 버전이 나뉘어있기 때문에 잘 봐야 한다. 이번 포스팅은 PC 결제 인증!!

PC결제의 경우 스크립트로 요청을 보낸다.

나는 PG결제금액이 있을 경우, 결제 버튼을 눌렀을 때 스크립트를 심었다.

 

methods: {
	initInicisScript() {
      const script = document.createElement('script');
      script.src = 'https://stgstdpay.inicis.com/stdjs/INIStdPay.js';
      script.async = true;
      document.head.appendChild(script);
    },
}

 

개발자도구(F12) > 소스 > 페이지에

이렇게 뜨면 성공한 것이다. 

우리가 이 스크립트에서 사용할 함수는 pay()와 viewOff() 두 가지다.

 

이니시스 개발가이드에 나와있는 데로 필수 파라미터를 세팅해서 pay() 함수의 파라미터로 보내면 끝!

파라미터 세팅할 때 주의해야 할 점은 signature, verification 를 SHA256 Hash 암호화할 때 각 값들의 순서가 가이드에 나와있는 데로 알파벳순이어한다는 점!!

 

INIStdPay.pay(payForm);

 

강렬한 빨간색의 이니시스 결제창

 

결제창 떴다고 좋아하던 것도 잠ㅅㅣ .. .닫기 버튼을 누르니 결제창만 닫히는 게 아니라 주문서를 벗어나서 다른 곳으로 이동이 되어버렸다.

 

이니시스의 필수 파라미터들 중에 Url은 두 개가 있다.

결제요청 후 인증이 완료되면 결과가 수신되는 returnUrl 과 사용자가 결제창을 닫았을 때 이동되는 closeUrl인데,

나는 주문서에서 결제창을 닫는다고 해서 굳이 다른 곳으로 이동시키고 싶지 않은데 하필 저게 필수값이라 자꾸만 강제이동..

구글링해도 나오지도 않아서 안보내면 해결될까 싶었는데 returnUrl로 이동시켜 주더라.

 

이니시스 모듈연동 FAQ에 나와있는 내용이다. :(...

 

계속 여러 가지 방법을 시도해 보다가 한번 빈페이지를 만들어서 closeUrl에 설정해 두니 주문서 위에 팝업형식으로 뜨는 게 아닌가?

주문서(부모창) closeUrl(자식창) 관계인 것 같아서, 페이지의 레이아웃을 없애고 mounted 될 때 부모창의 이벤트를 호출하니 해결했다.

 

mounted() {
    const event = document.createEvent("HTMLEvents");
    event.initEvent("inicisClose", true, true);
    window.parent.dispatchEvent(event);
  },

 

IniPay() {
    window.addEventListener("inicisClose", () => this.onUserCancel(), {once: true});
    INIStdPay.pay(payForm);
},

onUserCancel() {
    INIStdPay.viewOff();
    this.$emit('close');
}

 

이렇게 하면 결제창 닫기 버튼을 눌렀을 때, 주문서에서 페이지 이동을 하지 않고 결제창만 닫힌다.

 

이니시스 결제창 띄우고 닫기 성공 💰