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

​
개요

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

​
빠른 시작

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

CLI 설치

npx를 사용하여 설치 없이 CLI를 실행하세요:
npx @billingsdk/cli --help
또는 자주 사용하기 위해 전역으로 설치하세요:
npm install -g @billingsdk/cli
2

프로젝트 초기화

새로운 청구 프로젝트를 만들기 위해 대화형 설정을 실행하세요:
npx @billingsdk/cli init
다음을 선택하라는 메시지가 표시됩니다:
  • 선호하는 프레임워크 (Next.js, Express.js, Hono, Fastify, React)
  • 결제 제공자 (Dodo Payments)
3

구성 요소 추가

프로젝트에 개별 청구 구성 요소를 추가하세요:
npx @billingsdk/cli add pricing-table-one
npx @billingsdk/cli add subscription-management

​
지원되는 프레임워크

청구 SDK는 Dodo Payments 통합을 통해 여러 프레임워크를 지원합니다:
프레임워크Dodo Payments
Next.js✅ 예
Express.js✅ 예
Hono✅ 예
React✅ 예
Fastify✅ 예

​
CLI 명령어

​
@billingsdk/cli init

프레임워크 구성, Dodo Payments 통합 및 필수 종속성을 포함한 완전한 설정으로 새로운 청구 프로젝트를 초기화합니다. 작동 방식:
  1. 프레임워크 선택: 선호하는 프레임워크를 선택합니다
  2. 템플릿 설치: Dodo Payments 통합이 포함된 프레임워크별 템플릿을 다운로드하고 설치합니다
  3. 종속성 관리: 필요한 종속성을 자동으로 설치합니다
  4. 파일 생성: 필요한 구성 파일 및 보일러플레이트 코드를 생성합니다
예시: 
npx @billingsdk/cli init

​
@billingsdk/cli add

shadcn/ui 레지스트리 시스템을 사용하여 기존 프로젝트에 개별 청구 구성 요소를 추가합니다. 예시: 
# 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

​
환경 구성

초기화 후 환경 변수를 구성하세요: 
# 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
API 키는 항상 환경 변수를 사용하여 안전하게 저장하세요. 버전 관리에 커밋하지 마세요.

​
사용 가능한 구성 요소

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

​
오픈 소스

청구 SDK는 오픈 소스 원칙에 기반하여 구축되었습니다:
  • 🔍 투명성: 구성 요소가 작동하는 방식에 대한 완전한 가시성
  • 🤝 커뮤니티: 개발자에 의해, 개발자를 위해 구축됨
  • 🔒 보안: 오픈 코드로 인해 동료 검토를 통한 보안 향상
  • 📈 혁신: 커뮤니티 기여를 통한 빠른 반복
청구 SDK는 GNU 일반 공공 라이선스(GPL) 하에 배포되어 프로젝트가 오픈되고 무료로 유지되도록 보장합니다.

​
도움 받기

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

​
기여하기

기여를 환영합니다! 다음에 대한 세부정보는 기여 가이드를 참조하세요:
  • 버그 보고
  • 기능 요청
  • 풀 리퀘스트 제출
  • 새로운 구성 요소 추가
  • 문서 개선

​
더 알아보기

전체 문서

예제 및 모범 사례가 포함된 청구 SDK에 대한 완전한 가이드

CLI 참조

모든 명령 및 옵션에 대한 자세한 CLI 문서

구성 요소 라이브러리

라이브 예제와 함께 사용 가능한 모든 구성 요소를 탐색하세요