stripe/react-connect-js

Stripe Connect의 UI 컴포넌트를 React 앱에 쉽게 추가하는 라이브러리

개발 재료맘대로 써도 됨 · MIT커머스·결제TypeScript난이도

400 찜

19포크6이슈

중간맛 분석

Stripe Connect에 포함된 UI 컴포넌트를 React 프로젝트에 통합하는 라이브러리입니다. 의존성을 설치한 후 loadConnectAndInitialize() 함수로 ConnectInstance를 초기화할 때 publishable key와 fetchClientSecret 콜백을 전달합니다. 초기화된 ConnectInstance를 ConnectComponentsProvider에 전달해서 앱을 감싸면 하위에서 ConnectPayments, ConnectPayouts, ConnectPaymentDetails 같은 컴포넌트를 사용할 수 있습니다. 일부 컴포넌트는 프리뷰 상태이며, 프리뷰와 GA 버전을 /preview, /ga 폴더로 구분합니다.

이런 레포예요

핵심 기능

Stripe Connect 내장 UI 컴포넌트의 React 래퍼상태·생명주기 자동 관리결제, 송금, 거래 조회 등 다양한 컴포넌트

먹어본 사람들

실제로 차려 먹어본 손님들의 흔적이에요 — 한마디와 완주 인증 모두 검수 후 공개돼요.

시식평 · 먹어본 사람 한마디

아직 시식평이 없어요. 먹어보셨다면 첫 한마디를 남겨주세요.

다른 레포 시식평 구경하기 →

이 레포로 만든 것들

🖋 완주 인증하기

아직 이 레포로 만든 완주 인증이 없어요. 첫 밥도장을 찍어보세요!

이 레포, 해먹는 법

처음 오셨어요? 어렵지 않아요 — 위에서 아래로 따라 하면 내 컴퓨터에 이 레포를 차려서 바로 맛볼 수 있어요.

준비물

Stripe 계정 및 publishable key
서버에서 Account Session API 호출 구현

바로 시작하기

의존성 설치

npm install @stripe/react-connect-js @stripe/connect-js

앱의 진입점에서 Connect를 초기화하고 ConnectComponentsProvider로 감싸기

import React from 'react';
import ReactDOM from 'react-dom';
import {loadConnectAndInitialize} from '@stripe/connect-js';
import {
  ConnectPayments,
  ConnectPayouts,
  ConnectPaymentDetails,
  ConnectComponentsProvider,
} from '@stripe/react-connect-js';

const fetchClientSecret = async () => {
  // Account Session API 호출로 클라이언트 시크릿 발급
};

const connectInstance = loadConnectAndInitialize({
  publishableKey: '{{pk test123}}',
  fetchClientSecret: fetchClientSecret,
  appearance: {
    variables: {
      colorPrimary: '#228403',
    },
  },
});

const App = () => (
  <ConnectComponentsProvider connectInstance={connectInstance}>
    <ConnectPayments />
    <ConnectPayouts />
    <ConnectPaymentDetails
      onClose={() => {
        console.log('closed');
      }}
      payment="pi_test123"
    />
  </ConnectComponentsProvider>
);

ReactDOM.render(<App />, document.body);