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;

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