[Project] 나이스 페이먼츠 테스트용 전자결제 연동하기 (2) - 키 발급 및 프론트엔드 진행 1차

https://github.com/nicepayments/nicepay-manual

GitHub - nicepayments/nicepay-manual: 나이스페이먼츠 결제연동 매뉴얼

위의 링크를 통해 나이스 페이먼츠에서 제공하는 전자결제 개발자 가이드를 확인할 수 있다. 따라서 이 가이드를 참고하여 전자결제 연동을 진행할 것이다. 가이드에서 제공하는 샘플 코드 언어로 Node.js Python Ruby Asp Java php .Net 이 있는데 나는 여기서 node.js를 사용하여 프론트엔드 React와 백엔드를 연동할 예정이다.

 

 

클라이언트 키와 시크릿 키 발급하기

1. 테스트상점 [개발정보] 메뉴에서 [KEY 정보] 구역에있는 우측의 [+발급] 버튼을 클릭한다

 

2. 본인이 사용할 결제창 승인 방식 및 API 인가 방식을 선택한다.

나는 Server 승인과 Basic 인증 방식으로 선택하여 발급했다.

 

3. 클라이언트키와 시크릿 키가 발급된 것을 확인할 수 있다.

이 키는 후에 결제 연동 시 인증을 위하여 필요하기 때문에 발급해두었다.

 

리액트 프로젝트와 연동

리액트와 타입스크립트를 활용하여 프론트엔드만으로 전자결제 창을 호출해 보겠습니다.

현재 개발가이드에 제공된 내용 기준이며 후에 변경될 수도 있습니다.

 

1. 리액트 프로젝트 public폴더의 index.html에 아래의 소스를 추가한다.

<script src="https://pay.nicepay.co.kr/v1/js/"></script>

2. 버튼 클릭을 통해 전자결제 창 연동할 함수를 호출했다.

<button onClick={() => getPayments()}>나이스 페이먼츠 전자결제 연동</button>

3. 전자결제 연동할 함수를 작성한다

const getPayments = async () => {
    try {
        const { AUTHNICE } = window as any;
      
        AUTHNICE.requestPay({
          clientId: '클라이언트 키',
          method: 'card',
          orderId: '주문번호(랜덤)',
          amount: 1004,
          goodsName: '상품이름',
          returnUrl: 'http://localhost:8000/api/paysuccess',
        });
    } catch (error) {
        console.log(error);
    }
  }

 

공통 요청 명세서에 나온 필수 파라미터만 선언해 두었다. 명세서는 아래 링크에서 확인할 수 있다.

https://github.com/nicepayments/nicepay-manual/blob/main/api/payment-window-server.md#%EA%B2%B0%EC%A0%9C%EC%B0%BD-server-%EC%8A%B9%EC%9D%B8-%EB%AA%A8%EB%8D%B8

• clientId : 테스트 상점에서 발급받은 클라이언트 키.
• method : card, bank, cellphone, kakaopay 등이 있지만 가장 기본적인 bank로 값을 주었다.
• orderId : string 타입의 랜덤 값을 준다.
• amount : 최소금액인 1004원으로 설정. 테스트 결제이기 때문에 실제로 결제되지는 않는다.
• goodsName : string 타입의 상품명을 작성한다.
• returnUrl : 거래 후 리턴 할 url을 적는다

4. 최종 코드

interface ErrorResultType {
  errorMsg: string;
}

const App = () => {
  const getPayments = async () => {
    try {
        const { AUTHNICE } = window as any;
      
        AUTHNICE.requestPay({
          clientId: '클라이언트 키',
          method: 'card',
          orderId: '주문번호(랜덤)',
          amount: 1004,
          goodsName: '상품이름',
          returnUrl: 'http://localhost:8000/api/paysuccess',
          fnError: function (result: ErrorResultType) {
            alert('개발자확인용 : ' + result.errorMsg)
        	}
        });
    } catch (error) {
        console.log(error);
    }
  }
  return (
    <div className="App">
      <button onClick={() => getPayments()}>나이스 페이먼츠 전자결제 연동</button>
    </div>
  );
}

export default App;

5. 실행