React SDK

1. 설치

npm i @h6s-ai/react

peer dependency: react ≥ 18, react-dom ≥ 18.

2. 토큰 발급

sessionToken 은 파트너 백엔드가 API 키로 발급해서 React 앱에 넘깁니다. API 키는 브라우저에 노출하지 않습니다. 발급 요청·응답 형식은 SDK 개요의 백엔드 단계에서 확인할 수 있습니다.

3. managed 버튼 컴포넌트

h6s가 UI를 렌더하는 관리형 흐름은 @h6s-ai/react/managed 서브패스를 사용합니다. 가장 단순한 경로입니다. 전체화면 iframe으로 열리고 등록이 끝난 뒤 자동으로 닫힙니다.

import { RegistrationButton } from "@h6s-ai/react/managed";

export function ConnectBank({ sessionToken }: { sessionToken: string }) {
  return (
    <RegistrationButton
      sessionToken={sessionToken}
      onSuccess={({ sessionId }) => { /* 등록 완료 후 처리 */ }}
      onExit={({ reason }) => { /* reason 별 처리 (아래 표) */ }}
      className="rounded-md bg-black px-4 py-2 text-white"
    >
      자격증명 등록
    </RegistrationButton>
  );
}

4. 이벤트 처리

onSuccess 의 sessionId 로 등록 완료 상태를 갱신할 수 있습니다. onExit 은 reason 으로 종료 사유를 구분합니다. 두 콜백은 동시에 발생하지 않습니다.

다른 진입점

• useRegistration: 직접 만든 버튼에서 위젯을 엽니다.