react next.js에서 nicePay 연동하기

김민섭·2022년 12월 29일

지금 맞고 있는 프로젝트 개발중 nicePay 연결기능 구현이 있어 react + next.js 환경에서 nice pay 결제기능을 정리하려고 해당글을 포스팅합니다.

해당 포스팅글은 https://github.com/nicepayments/nicepay-manual 을 참고 하여 작성하였음을 미리 알려드립니다.

일단 공통 가이드를 먼저 참고하여 준비 해봅시다.

개발 준비

1.결제테스트를 진행 하기 위해선 우선 샌드박스의 회원가입이 필요합니다.( 해당링크에서 회원가입을 진행해주세요.-> 테스트를위한 용도 )
https://start.nicepay.co.kr/merchant/login/main.do

회원가입 진행후 로그인 하여 인증키를 기입하면 해당과 같은 화면이 출력됩니다.
이후 테스트 상점 개설 버튼을 클릭하여

테스트 상점을 개설하고

개설완료 좌측 네비게이션 바 -> 상점 설정 -> 맴버관리를 통해 추가한 상점을 확인 할수 있습니다.

맴버관리 페이지에서 발급버튼을 클릭시
해당과 같이 클라이언트 키와 시크릿키가 발급됩니다.

키 발급시 client 와 서버의 차이점은
Server 승인 : 결제창 호출(인증)과 결제(승인) API호출이 독립적으로 분리된 모델
Client 승인 : 결제창 호출(인증)후 결제(승인)이 자동으로 처리되는 모델

basic과 AccessToken 의 차이점은 하단을 보면 Authorization 부분을 확인하면
GET/POST {URL} HTTP/1.1 
Host: sandbox-api.nicepay.co.kr 
Authorization: Basic <credentials> or Bearer <token>
Content-type: application/json;charset=utf-8
보안 방식을 Basic Authentication로 할것인지 token 방식으로 할것인지에 따라 선택진행하시면됩니다.

추가적으로 개발정보에서는 key 정보와 웹훅(이벤트 알림) , IP 보안(inbound 제약) 등을 확인 할수 있습니다.

정보를 확인후 프로젝트 안에서 해당디렉토리 안에서 해당 script 구문을 추가해줍니다.

경로

page
├─ _app.tsx

코드

import type { AppProps } from 'next/app'
import Script from 'next/script'

export default function App({ Component, pageProps }: AppProps) {
  return <>
  <Component {...pageProps} />
  {/* 해당 url을 추가 //Server 승인  */}
  <Script src="https://pay.nicepay.co.kr/v1/js/"></Script>

  </>
  
}

해당script 구문을 추가후 window object안에 해당 script의 함수들이 반영되었는지 확인합니다.

정상적으로 플러그인이 되어있다면 해당 첨부사진과 같이 AUTHNICE object가 적재되어 있는것을 확인할 수 있습니다.

이후에는 nice pay 팝업이 정상적으로 출력되는지 확인 합니다.

export default function Home() {
function serverAuth() {
    if(typeof window !== "undefined" ) {
        const pay_obj : any = window ;
        const { AUTHNICE } = pay_obj
        AUTHNICE.requestPay({
          //NOTE :: 발급받은 클라이언트키 clientId에 따라 Server / Client 방식 분리
          clientId: '클라이언트키',
          method: 'card',
          //NOTE :: 상품 구매 id 값 
          orderId: random(),
          // NOTE :: 가격
          amount: 1004,
          // NOTE :: 상품명 
          goodsName: '나이스페이-상품',
          //NOTE :: API를 호출할 Endpoint 입력
          returnUrl: 'http://localhost:3000/paysuccess',
          // NOTE :: err 발생시 실행 함수 
          fnError:  (result:any) => {
            alert('고객용메시지 : ' + result.msg + '\n개발자확인용 : ' + result.errorMsg + '')
          }
        });
    }
}
//Test orderId 생성
const random = (length = 8) => {
  return Math.random().toString(16).substr(2, length);
};	
  return (
    <>
    <button onClick={()=>serverAuth()}>serverAuth 결제하기</button>
    </>
  )
}