Billing SDK

Billing SDK är en samling React-komponenter för fakturering med öppen källkod, med ett CLI som ansluter ditt projekt till Dodo Payments. CLI:t genererar API-rutter, en React-hook och Dodo Payments-klienten för ditt ramverk samt lägger till komponenter som pristabeller och användningsmätare.

Översikt

Billing SDK innehåller:

React Components: Färdigbyggda, anpassningsbara faktureringskomponenter för React-applikationer.
CLI Tooling: Ett kommandoradsgränssnitt som initierar projekt och lägger till komponenter.
Framework Support: Mallar för Next.js, Express.js, Hono, Fastify, NestJS och React.
Payment Provider: Fullständig integration med Dodo Payments.

Snabbstart

Om du vill konfigurera Billing SDK i ett befintligt projekt kör du CLI:t från projektets rotkatalog:

Install the CLI

Kör CLI:t med npx utan att installera det:

npx @billingsdk/cli --help

Du kan också installera det globalt om du använder det ofta. Den globala installationen lägger till kommandot billingsdk, till exempel billingsdk init:

npm install -g @billingsdk/cli

Initialize a Project

Kör den interaktiva konfigurationen för att lägga till fakturering i projektet:

npx @billingsdk/cli init

CLI:t uppmanar dig att välja:

Ditt ramverk: Next.js, Express.js, React, Hono, Fastify eller NestJS. CLI:t identifierar ditt ramverk och markerar det som identifierat.
Din betalningsleverantör: välj Dodo Payments.

Add Components

Lägg till enskilda faktureringskomponenter i ditt projekt:

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

Stödda ramverk

Billing SDK har en Dodo Payments-mall för vart och ett av dessa ramverk:

Ramverk	Dodo Payments
Next.js	Ja
Express.js	Ja
Hono	Ja
React	Ja
Fastify	Ja
NestJS	Ja

CLI-kommandon

`@billingsdk/cli init`

init konfigurerar fakturering i projektet: den installerar ramverksmallen med Dodo Payments-integrationen samt de beroenden som mallen behöver. Vad det gör:

Val av ramverk: Du väljer ramverk och betalningsleverantör.
Mallinstallation: CLI:t hämtar mallen för ditt ramverk och din leverantör från Billing SDK-registret och installerar dess filer.
Beroendehantering: CLI:t installerar mallens beroenden, till exempel dodopayments, standardwebhooks och zod, med npm, pnpm, Yarn eller Bun.
Filgenerering: CLI:t skriver konfigurationsfilerna och standardkoden. För Express.js, Fastify, Hono och NestJS skriver det dem under src/.

Exempel:

npx @billingsdk/cli init

Om du vill köra init utan frågor skickar du med --framework, --provider och --yes, till exempel npx @billingsdk/cli init --framework nextjs --provider dodopayments --yes. Lägg till --dry-run för att lista filerna utan att skriva dem, --no-install för att hoppa över installationen av beroenden eller --package-manager för att välja npm, pnpm, yarn eller bun.

`@billingsdk/cli add`

add installerar en faktureringskomponent i projektet via shadcn/ui-registrets system. Det kör shadcn@latest add @billingsdk/<component> med pakethanterarens körverktyg. Exempel:

# 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

Det här händer:

CLI:t shadcn hämtar komponentkonfigurationen från registret.
Det installerar komponentfilerna i katalogen components/billingsdk/.
Det uppdaterar projektkonfigurationen vid behov.
Det installerar eventuella ytterligare beroenden.

Struktur för genererade filer

När du har kört init innehåller projektet:

API-rutter: Slutpunkter för checkout, kunder, kundbetalningar, produkter, prenumerationer och webhooks. React-mallen har inga API-rutter.
Hooks: En useBilling React-hook för faktureringsåtgärder, för React och Next.js.
Biblioteksfiler: Konfigurationen av Dodo Payments-klienten och hjälpfunktioner i lib/dodopayments.ts.
Miljökonfiguration: En exempelmiljöfil, .env.example.

Exempel på Next.js-struktur

För Next.js skriver init dessa filer:

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

Miljökonfiguration

Efter initieringen anger du dina environment variables. Hämta API-nyckeln från Developer → API Keys och webhook-nyckeln från Developer → Webhooks i instrumentpanelen:

# 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

Ange DODO_PAYMENTS_ENVIRONMENT till test_mode eller live_mode. Den genererade Dodo Payments-klienten kastar ett fel för alla andra värden.

Lagra dina API-nycklar i environment variables. Checka aldrig in dem i versionshanteringen.

Tillgängliga komponenter

Billing SDK tillhandahåller React-komponenter i dessa grupper:

Pristabeller: Åtta varianter, pricing-table-one till pricing-table-eight, för att visa produktpriser.
Prenumerationshantering: subscription-management samt kort och dialogrutor för att avsluta en prenumeration eller uppdatera en plan.
Användningsövervakning: Cirkulära och linjära användningsmätare samt användningstabeller för användningsbaserad fakturering.
Checkout-komponenter: En väljare för betalningsmetod, formulär för betalningsuppgifter och ett kort för misslyckad betalning.
Customer Portal: Faktureringsinställningar, en faktureringsvy, fakturahistorik och kommande debiteringar för självbetjäning för kunder.

Om du vill bläddra bland alla komponenter med en liveförhandsvisning kan du läsa komponentbiblioteket.

Öppen källkod

Billing SDK har öppen källkod:

Transparens: Du kan läsa hur varje komponent fungerar.
Gemenskap: Utvecklare bygger det för andra utvecklare.
Säkerhet: Alla kan granska koden för säkerhetsproblem.
Innovation: Bidrag från gemenskapen påskyndar utvecklingen.

Billing SDK ges ut under GNU General Public License v3.0 (GPL-3.0), vilket håller projektet öppet och kostnadsfritt.

Få hjälp

Om du behöver hjälp med Billing SDK kan du använda dessa resurser:

GitHub Issues: Öppna ett ärende
Dokumentation: Besök billingsdk.com/docs
LLMs Full Documentation: billingsdk.com/llms-full.txt

Bidra

Billing SDK välkomnar bidrag. Bidragsguiden förklarar hur du kan:

Rapportera buggar
Begära funktioner
Skicka pull requests
Lägga till nya komponenter
Förbättra dokumentationen

Läs mer

Full Documentation

Komplett guide till Billing SDK med exempel och bästa praxis

CLI Reference

Detaljerad CLI-dokumentation för alla kommandon och alternativ

Component Library

Bläddra bland alla tillgängliga komponenter med liveexempel

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Översikt

Snabbstart

Stödda ramverk

CLI-kommandon

`@billingsdk/cli init`

`@billingsdk/cli add`

Struktur för genererade filer

Exempel på Next.js-struktur

Miljökonfiguration

Tillgängliga komponenter

Öppen källkod

Få hjälp

Bidra

Läs mer

Full Documentation

CLI Reference

Component Library

​Översikt

​Snabbstart

​Stödda ramverk

​CLI-kommandon

​@billingsdk/cli init

​@billingsdk/cli add

​Struktur för genererade filer

​Exempel på Next.js-struktur

​Miljökonfiguration

​Tillgängliga komponenter

​Öppen källkod

​Få hjälp

​Bidra

​Läs mer

Full Documentation

CLI Reference

Component Library

Översikt

Snabbstart

Stödda ramverk

CLI-kommandon

`@billingsdk/cli init`

`@billingsdk/cli add`

Struktur för genererade filer

Exempel på Next.js-struktur

Miljökonfiguration

Tillgängliga komponenter

Öppen källkod

Få hjälp

Bidra

Läs mer