React + NicePay(나이스페이) 테스트 연동법

결제 모듈을 붙이려고 나이스 페이를 이용하는 방법을 적으려고 한다. (나도 기억하기위해)

 

1. https://start.nicepay.co.kr/merchant/login/main.do 회원가입을 진행한다.

 

2. 로그인 이후 테스트 상점 개설하기를 클릭한다.

 

 

3. TestPay 라는 이름의 상점을 만들었다.  (맴버 관리에 아마 내 정보가 보일 것임)



4. 개발 정보 > +발급 버튼을 클릭하면 어떤 방식으로 승인할 지 선택할 수 있다. 

 

5. 발급하기 버튼을 클릭하면 클라이언트, 시크릿 키 값을 볼 수 있다. 

 

6. React 프로젝트의 index.html에 해당 코드를 추가해준다.

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

 

7. MultiPassPage.tsx 파일에서 이제 사용한다.

export interface IMultiPassPageProps {}
export const MultiPassPage: React.FC<IMultiPassPageProps> = ({}) => {
  const applyPay = () => {
    if (typeof window !== 'undefined') {
      const payElem: any = window;
      const { AUTHNICE } = payElem;
      AUTHNICE.requestPay({
        clientId: 'S2_8123456789', //클라이언트 key 값
        method: 'card',
        orderId: 1,
        amount: 1000,
        goodsName: '나이스페이-상품',
        returnUrl: 'http://localhost:4220/paysuccess',
      });
    }
  };

  return (
    <button
      onClick={() => {
        applyPay();
      }}
    >
      구매하기
    </button>
  );
};

구매하기 버튼 클릭시, 다음과 같이 테스트용 나이스페이가 뜨는 것을 확인할 수 있다.