> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 청구 SDK

> React 구성 요소, CLI 도구 및 전체 스택 통합을 갖춘 현대 웹 애플리케이션을 위한 완전한 청구 인프라

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/32RVbEllEi0" title="Billing SDK | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

청구 SDK는 현대 웹 애플리케이션을 위한 완전한 청구 인프라를 제공하는 포괄적인 오픈 소스 솔루션입니다. React 구성 요소, CLI 도구 및 Dodo Payments와의 여러 프레임워크에 대한 전체 스택 통합 지원을 포함합니다.

## 개요

청구 SDK는 다음을 제공합니다:

* **React 구성 요소**: React 애플리케이션을 위한 미리 구축된 사용자 정의 가능한 청구 구성 요소
* **CLI 도구**: 프로젝트 초기화 및 구성 요소 관리를 위한 명령줄 인터페이스
* **프레임워크 지원**: Next.js, Express.js, Hono, Fastify 및 React와의 통합
* **결제 제공자**: Dodo Payments와의 완전한 통합

## 빠른 시작

몇 분 안에 청구 SDK를 시작하세요:

<Steps>
  <Step title="Install the CLI">
    npx를 사용하여 설치 없이 CLI를 실행하세요:

    ```bash theme={null}
    npx @billingsdk/cli --help
    ```

    또는 자주 사용하기 위해 전역으로 설치하세요:

    ```bash theme={null}
    npm install -g @billingsdk/cli
    ```
  </Step>

  <Step title="Initialize a Project">
    상호작용형 설정을 실행하여 새 청구 프로젝트를 생성하세요:

    ```bash theme={null}
    npx @billingsdk/cli init
    ```

    선택하라는 메시지가 표시됩니다:

    * 선호하는 프레임워크 (Next.js, Express.js, Hono, Fastify, React)
    * 결제 공급자 (Dodo Payments)
  </Step>

  <Step title="Add Components">
    개별 청구 구성 요소를 프로젝트에 추가하세요:

    ```bash theme={null}
    npx @billingsdk/cli add pricing-table-one
    npx @billingsdk/cli add subscription-management
    ```
  </Step>
</Steps>

## 지원되는 프레임워크

청구 SDK는 Dodo Payments 통합을 통해 여러 프레임워크를 지원합니다:

| 프레임워크      | Dodo Payments |
| ---------- | ------------- |
| Next.js    | ✅ 예           |
| Express.js | ✅ 예           |
| Hono       | ✅ 예           |
| React      | ✅ 예           |
| Fastify    | ✅ 예           |

## CLI 명령어

### `@billingsdk/cli init`

프레임워크 구성, Dodo Payments 통합 및 필수 종속성을 포함한 완전한 설정으로 새로운 청구 프로젝트를 초기화합니다.

**작동 방식:**

1. **프레임워크 선택**: 선호하는 프레임워크를 선택합니다
2. **템플릿 설치**: Dodo Payments 통합이 포함된 프레임워크별 템플릿을 다운로드하고 설치합니다
3. **종속성 관리**: 필요한 종속성을 자동으로 설치합니다
4. **파일 생성**: 필요한 구성 파일 및 보일러플레이트 코드를 생성합니다

**예시:**

```bash theme={null}
npx @billingsdk/cli init
```

### `@billingsdk/cli add`

shadcn/ui 레지스트리 시스템을 사용하여 기존 프로젝트에 개별 청구 구성 요소를 추가합니다.

**예시:**

```bash theme={null}
# Add a pricing table
npx @billingsdk/cli add pricing-table-one

# Add subscription management
npx @billingsdk/cli add subscription-management

# Add usage monitoring
npx @billingsdk/cli add usage-meter-circle
```

**작동 방식:**

1. 구성 요소 구성을 레지스트리에서 다운로드합니다
2. 구성 요소 파일을 `components/billingsdk/` 디렉터리에 설치합니다
3. 필요한 경우 프로젝트 구성을 업데이트합니다
4. 추가 종속 항목을 설치합니다

## 생성된 파일 구조

`init`을 실행하면 다음이 포함된 완전한 프로젝트 구조를 얻을 수 있습니다:

* **API 경로**: 체크아웃, 고객, 제품, 구독 및 웹훅을 위한 포괄적인 엔드포인트
* **후크**: 청구 작업을 위한 React 후크 (React/Next.js 사용 시)
* **라이브러리 파일**: 결제 제공자 클라이언트 초기화 및 유틸리티
* **환경 구성**: 예제 환경 변수 파일

### Next.js 예제 구조

```
your-project/
├── app/api/
│   └── (dodopayments)/
│       ├── checkout/route.ts
│       ├── customer/route.ts
│       ├── customer/payments/route.ts
│       ├── customer/subscriptions/route.ts
│       ├── product/route.ts
│       ├── products/route.ts
│       └── webhook/route.ts
├── hooks/
│   └── useBilling.ts
├── lib/
│   └── dodopayments.ts
└── .env.example
```

## 환경 구성

초기화 후 환경 변수를 구성하세요:

```bash theme={null}
# DodoPayments
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_ENVIRONMENT=test_mode
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_key_here

# App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

<Warning>
  항상 환경 변수를 사용하여 API 키를 안전하게 저장하세요. 버전 관리에 커밋하지 마세요.
</Warning>

## 사용 가능한 구성 요소

청구 SDK는 포괄적인 React 구성 요소 모음을 제공합니다:

* **가격표**: 제품 가격을 표시하기 위한 여러 변형
* **구독 관리**: 고객 구독 관리를 위한 구성 요소
* **사용 모니터링**: 사용 기반 청구를 추적하기 위한 시각적 구성 요소
* **체크아웃 구성 요소**: 미리 구축된 체크아웃 흐름
* **고객 포털**: 고객 셀프 서비스 구성 요소

## 오픈 소스

청구 SDK는 오픈 소스 원칙에 기반하여 구축되었습니다:

* 🔍 **투명성**: 구성 요소가 작동하는 방식에 대한 완전한 가시성
* 🤝 **커뮤니티**: 개발자에 의해, 개발자를 위해 구축됨
* 🔒 **보안**: 오픈 코드로 인해 동료 검토를 통한 보안 향상
* 📈 **혁신**: 커뮤니티 기여를 통한 빠른 반복

<Info>
  Billing SDK는 GNU 일반 공중 사용 허가서(GPL) 하에 배포되어 프로젝트가 계속 열려 있고 무료로 유지되도록 보장합니다.
</Info>

## 도움 받기

청구 SDK에 대한 도움이 필요하신가요?

* **GitHub 문제**: [문제 열기](https://github.com/dodopayments/billingsdk/issues)
* **문서**: [billingsdk.com/docs](https://billingsdk.com/docs) 방문
* **LLMs 전체 문서**: [billingsdk.com/llms-full.txt](https://billingsdk.com/llms-full.txt)

## 기여하기

기여를 환영합니다! 다음에 대한 세부정보는 [기여 가이드](https://billingsdk.com/docs/contribution-open-source)를 참조하세요:

* 버그 보고
* 기능 요청
* 풀 리퀘스트 제출
* 새로운 구성 요소 추가
* 문서 개선

## 더 알아보기

<CardGroup cols={3}>
  <Card title="Full Documentation" icon="book" href="https://billingsdk.com/docs">
    예제와 모범 사례를 포함한 Billing SDK에 대한 완벽한 가이드
  </Card>

  <Card title="CLI Reference" icon="terminal" href="https://billingsdk.com/docs/cli">
    모든 명령과 옵션에 대한 상세한 CLI 문서
  </Card>

  <Card title="Component Library" icon="boxes-stacked" href="https://billingsdk.com/docs/components">
    실시간 예제가 포함된 사용 가능한 모든 구성 요소 탐색
  </Card>
</CardGroup>