React KG Inicis

이니시스 홈페이지에는 React.js로 만들어진 개발 가이드가 없기 때문에 직접 만들어 구현하였습니다.

사용하시면 깃허브에 ⭐ 한 번만 눌러주시면 감사하겠습니다!!
오류가 있거나 문의할게 있으면 Issues 혹은 이메일로 연락 부탁드립니다.

예제 코드 아래에서 확인 가능합니다.
https://github.com/hellojaehyeok/react-inicis-example

Tutorial

해당 라이브러리는 프론트엔드 쪽만 작성하였으며 백엔드 로직은 따로 구현해야 합니다.

이니시스 결제의 큰 틀을 보자면 아래와 같습니다.

1. 결제 페이지에서 구매자가 정보를 입력합니다.
2. 입력한 정보들을 토대로 결제창을 활성화합니다.
3. 이니시스에서는 결제 로직을 처리 후 retunUrl로 데이터를 넘깁니다.
4. 백엔드는 넘겨받은 데이터를 분기 처리 후 프론트로 리디렉션 시킵니다.

Installation

npm install @hellojh/react-inicis

Components

|이름 | 설명 | |------|-----| |<ReactInicis />|결제창을 활성화하는 컴포넌트입니다.| |<CloseInicis/>|결제창을 닫기 위한 컴포넌트입니다.|

Main Props

<ReactInicis />에 넘겨야하는 props들입니다.

payData

결제데이터를 넘겨줍니다.

|Key | Description | |------|-----| |productName|물건 이름| |productPrice|물건 가격| |buyerName|구매자 이름| |buyerTel|구매자 번호| |buyerEmail|구매자 이메일| |payStatus|결제 수단 (0-카드, 1-무통장, 2-핸드폰, 3-계좌이체)| |returnUrl|리턴받을 url| |closeUrl|결제창을 닫기 위한 url| |telStatus|휴대폰결제 필수 [1:컨텐츠, 2:실물]| |mKey| (* 실서비스) 발급받은 mKey를 넣어줍니다. (isTest가 true일 때는 넣지 않아도 됩니다.) | |mid| (* 실서비스) 클라이언트의 id를 넣습니다. (isTest가 true일 때는 넣지 않아도 됩니다.) |

ex)

const payData = {
    productName:"flower",
    productPrice:"2000",
    buyerName:"sjh",
    buyerTel:"01011112222",
    buyerEmail:"[email protected]",
    payStatus:2, 
    returnUrl:"http://localhost:3000",
    closeUrl:"http://localhost:3000/close",
    telStatus:1,
    mKey:"---",
    mid:"---",
}

• returnUrl

결제를 요청하는 페이지의 도메인과 동일해야 합니다.
도메인 앞에 www도 신경 써주셔야하며 포트 번호 또한 주의하셔야합니다.

로컬에서 테스트를 할 때는 실서버에 올려 포트 번호를 숨긴 다음
실서버:서버포트번호로 returnUrl을 넣습니다.

백엔드는 리턴받은 데이터를 분기처리 후 프론트쪽으로 리디렉션 시켜줍니다.

• closeUrl

이니시스 결제창을 닫기 위한 페이지를 만들어 줍니다.
return문 안에 <CloseInicis/>를 불러와줍니다. ex)

import { CloseInicis } from '@hellojh/react-inicis';
import React from 'react';

const Close = () => <CloseInicis /> ;
export default Close;

isPurchase

결제창을 활성화시키기 위한 props입니다.
isPurchase 값이 증가 되는 순간 결제창이 나옵니다.

isTest

테스트 환경일 때 true 값을 전달해 줍니다.
이 환경에서는 payData의 mKey와 mid를 넣지 않아도 됩니다.

Sample Code

import { ReactInicis } from '@hellojh/react-inicis';
import React, {useState} from 'react';

const Inicis = () => {
    
    const [isPurchase, setIsPurchase] = useState(0);

    const payData = {
        productName:"물건이름",
        buyerName:"홍길동",
        buyerTel:"01011112222",
        buyerEmail:"[email protected]",
        productPrice:1000,
        payStatus:0,
        returnUrl:"http://localhost:3000/",
        closeUrl:"http://localhost:3000/close",
    }

    return(
        <div className="App">
            <button onClick={() => setIsPurchase(isPurchase+1)}>결제</button>
            <ReactInicis payData={payData} isPurchase={isPurchase} isTest />
        </div>
    )
};

export default Inicis;

이 코드로 인해 발생되는 문제에 대하여는 책임지지 않습니다.