청구 SDK

Billing SDK는 React 결제 구성 요소로 이루어진 오픈 소스 모음이며, CLI를 통해 프로젝트를 Dodo Payments에 연결합니다. CLI는 사용 중인 프레임워크에 맞는 API 라우트, React hook, Dodo Payments client를 생성하고 가격표와 사용량 미터 같은 구성 요소를 추가합니다.

개요

Billing SDK에는 다음이 포함됩니다:

React Components: React 애플리케이션을 위한 사전 구축되고 사용자 지정 가능한 결제 구성 요소입니다.
CLI Tooling: 프로젝트를 초기화하고 구성 요소를 추가하는 command-line interface입니다.
Framework Support: Next.js, Express.js, Hono, Fastify, NestJS, React용 템플릿입니다.
Payment Provider: Dodo Payments와의 완전한 통합입니다.

빠른 시작

기존 프로젝트에 Billing SDK를 설정하려면 프로젝트 루트에서 CLI를 실행하세요:

Install the CLI

설치하지 않고 npx와 함께 CLI를 실행하세요:

npx @billingsdk/cli --help

자주 사용한다면 전역으로 설치할 수도 있습니다. 전역 설치를 수행하면 billingsdk 명령이 추가됩니다. 예를 들면 billingsdk init입니다:

npm install -g @billingsdk/cli

Initialize a Project

대화형 설정을 실행하여 프로젝트에 결제를 추가하세요:

npx @billingsdk/cli init

CLI에서 다음 항목을 선택하라는 메시지가 표시됩니다:

프레임워크: Next.js, Express.js, React, Hono, Fastify 또는 NestJS. CLI가 프레임워크를 감지하고 감지됨으로 표시합니다.
결제 제공업체: Dodo Payments를 선택합니다.

Add Components

개별 청구 구성 요소를 프로젝트에 추가하세요:

npx @billingsdk/cli add pricing-table-one
npx @billingsdk/cli add subscription-management

지원되는 프레임워크

Billing SDK에는 다음 각 프레임워크를 위한 Dodo Payments 템플릿이 있습니다:

프레임워크	Dodo Payments
Next.js	Yes
Express.js	Yes
Hono	Yes
React	Yes
Fastify	Yes
NestJS	Yes

CLI 명령어

`@billingsdk/cli init`

init는 프로젝트에 결제를 설정합니다. Dodo Payments 통합이 포함된 프레임워크 템플릿과 템플릿에 필요한 dependencies를 설치합니다. 작동 방식:

프레임워크 선택: 프레임워크와 결제 제공업체를 선택합니다.
템플릿 설치: CLI가 Billing SDK registry에서 프레임워크와 제공업체에 맞는 템플릿을 다운로드하고 파일을 설치합니다.
Dependency Management: CLI가 npm, pnpm, Yarn 또는 Bun을 사용하여 dodopayments, standardwebhooks, zod 등의 템플릿 dependencies를 설치합니다.
파일 생성: CLI가 configuration files와 boilerplate code를 작성합니다. Express.js, Fastify, Hono, NestJS의 경우 src/ 아래에 작성합니다.

예시:

npx @billingsdk/cli init

프롬프트 없이 init를 실행하려면 --framework, --provider, --yes를 전달하세요. 예를 들면 npx @billingsdk/cli init --framework nextjs --provider dodopayments --yes입니다. 파일을 작성하지 않고 나열하려면 --dry-run를, dependency 설치를 건너뛰려면 --no-install를, npm, pnpm, yarn 또는 bun를 선택하려면 --package-manager를 추가하세요.

`@billingsdk/cli add`

add는 shadcn/ui registry system을 통해 프로젝트에 하나의 결제 구성 요소를 설치합니다. package manager의 runner를 사용하여 shadcn@latest add @billingsdk/<component>를 실행합니다. 예시:

# 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

수행되는 작업:

shadcn CLI가 registry에서 구성 요소 configuration을 다운로드합니다.
프로젝트의 components/billingsdk/ directory에 구성 요소 파일을 설치합니다.
필요한 경우 프로젝트 configuration을 업데이트합니다.
추가 dependencies를 설치합니다.

생성되는 파일 구조

init를 실행하면 프로젝트에 다음 항목이 포함됩니다:

API Routes: checkout, customers, customer payments, products, subscriptions, webhooks를 위한 endpoints입니다. React 템플릿에는 API routes가 없습니다.
Hooks: React와 Next.js에서 결제 작업에 사용하는 useBilling React hook입니다.
Library Files: lib/dodopayments.ts에 있는 Dodo Payments client 설정 및 helper functions입니다.
Environment Configuration: 예시 environment file인 .env.example입니다.

Next.js 예시 구조

Next.js의 경우 init가 다음 파일을 작성합니다:

your-project/
├── app/api/
│   ├── 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

Environment Configuration

초기화 후 environment variables를 설정하세요. Dashboard의 Developer → API Keys에서 API key를, Developer → Webhooks에서 webhook key를 가져옵니다:

# 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

DODO_PAYMENTS_ENVIRONMENT를 test_mode 또는 live_mode로 설정하세요. 생성된 Dodo Payments client는 다른 값이 사용되면 error를 발생시킵니다.

API keys를 environment variables에 저장하세요. version control에 커밋하지 마세요.

사용 가능한 구성 요소

Billing SDK는 다음 그룹의 React 구성 요소를 제공합니다:

Pricing Tables: 제품 가격을 표시하기 위한 여덟 가지 변형인 pricing-table-one부터 pricing-table-eight까지입니다.
Subscription Management: subscription-management와 함께 구독을 취소하거나 플랜을 업데이트할 수 있는 cards 및 dialogs입니다.
Usage Monitoring: usage-based billing을 위한 원형 및 선형 usage meters와 usage tables입니다.
Checkout Components: payment method selector, payment details forms, payment failure card입니다.
Customer Portal: 고객이 직접 관리할 수 있도록 billing settings, billing screen, invoice history, upcoming charges를 제공합니다.

모든 구성 요소를 실시간 미리보기로 살펴보려면 component library를 참조하세요.

오픈 소스

Billing SDK는 오픈 소스입니다:

투명성: 모든 구성 요소의 작동 방식을 확인할 수 있습니다.
커뮤니티: 개발자들이 다른 개발자들을 위해 구축합니다.
보안: 누구나 보안 문제를 확인하기 위해 코드를 검토할 수 있습니다.
혁신: 커뮤니티의 기여로 개발 속도가 빨라집니다.

Billing SDK는 GNU General Public License v3.0 (GPL-3.0)에 따라 배포되며, 프로젝트를 개방적이고 자유롭게 유지합니다.

도움말

Billing SDK에 대한 도움말은 다음 리소스를 이용하세요:

GitHub Issues: 이슈 열기
Documentation: billingsdk.com/docs 방문
LLMs Full Documentation: billingsdk.com/llms-full.txt

기여하기

Billing SDK는 기여를 환영합니다. contribution guide에서 다음 방법을 설명합니다:

버그 보고
기능 요청
pull request 제출
새 구성 요소 추가
Documentation 개선

더 알아보기

Full Documentation

예시와 모범 사례가 포함된 Billing SDK 전체 가이드

CLI Reference

모든 명령과 옵션에 대한 자세한 CLI documentation

Component Library

실시간 예시와 함께 사용 가능한 모든 구성 요소 살펴보기

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

개요

빠른 시작

지원되는 프레임워크

CLI 명령어

`@billingsdk/cli init`

`@billingsdk/cli add`

생성되는 파일 구조

Next.js 예시 구조

Environment Configuration

사용 가능한 구성 요소

오픈 소스

도움말

기여하기

더 알아보기

Full Documentation

CLI Reference

Component Library

​개요

​빠른 시작

​지원되는 프레임워크

​CLI 명령어

​@billingsdk/cli init

​@billingsdk/cli add

​생성되는 파일 구조

​Next.js 예시 구조

​Environment Configuration

​사용 가능한 구성 요소

​오픈 소스

​도움말

​기여하기

​더 알아보기

Full Documentation

CLI Reference

Component Library

개요

빠른 시작

지원되는 프레임워크

CLI 명령어

`@billingsdk/cli init`

`@billingsdk/cli add`

생성되는 파일 구조

Next.js 예시 구조

Environment Configuration

사용 가능한 구성 요소

오픈 소스

도움말

기여하기

더 알아보기