Autumn Billing

Autumn은 SaaS 가격 플랜을 운영하기 위한 오픈 소스 인프라입니다. 앱과 Stripe 사이에 위치하며, 고객의 구독 상태, 사용량 측정 및 기능 권한을 위한 데이터베이스 역할을 합니다.

Autumn의 Discord에서 도움 받기

질문이 있으시면 온라인으로 도와드리겠습니다.

기능

  • 모든 체크아웃, 구독 및 결제 플로우를 위한 하나의 함수
  • 웹훅 필요 없음: 필요한 데이터를 Autumn에 쿼리
  • 앱의 무료 및 유료 플랜 관리
  • 사용량 청구 및 주기적 제한을 위한 사용량 추적
  • Autumn 대시보드를 통한 사용자 정의 플랜 및 가격 변경

Autumn 계정 설정

먼저, Autumn의 대시보드에서 가격 플랜을 생성합니다. 여기서 각 플랜과 제품이 액세스할 수 있는 내용과 청구 방법을 정의합니다. 이 예제에서는 월별 messages 수가 포함된 AI 챗봇의 무료 및 프로 플랜을 처리합니다.

Autumn SDK 설치

npm install autumn-js

별도의 클라이언트와 서버 설정을 사용하는 경우 프로젝트의 두 부분 모두에 플러그인을 설치해야 합니다.

환경 변수에 AUTUMN_SECRET_KEY 추가

Autumn 대시보드의 "Developer"에서 찾을 수 있습니다.

.env
AUTUMN_SECRET_KEY=am_sk_xxxxxxxxxx

auth 설정에 Autumn 플러그인 추가

auth.ts
import { autumn } from "autumn-js/better-auth";

export const auth = betterAuth({
  // ...
  plugins: [autumn()],
});
auth.ts
import { autumn } from "autumn-js/better-auth";
import { organization } from "better-auth/plugins";

export const auth = betterAuth({
  // ...
  plugins: [organization(), autumn({ customerScope: "organization" })],
});
auth.ts
import { autumn } from "autumn-js/better-auth";
import { organization } from "better-auth/plugins";

export const auth = betterAuth({
  // ...
  plugins: [
    organization(),
    autumn({ customerScope: "user_and_organization" })
  ],
});
auth.ts
import { autumn } from "autumn-js/better-auth";
import { organization } from "better-auth/plugins";

export const auth = betterAuth({
  // ...
  plugins: [
    organization(),
    autumn({
      identify: async ({ session, organization }) => {
        return {
          customerId: "your_customer_id",
          customerData: {
            name: "Customer Name",
            email: "customer@gmail.com",
          },
        };
      },
    }),
  ],
});

Autumn은 가입 시 고객을 자동으로 생성하고 생성한 기본 플랜(예: 무료 플랜)을 할당합니다. 누가 고객이 될지 선택할 수 있습니다: 개별 사용자, 조직, 둘 다 또는 작업 공간과 같은 사용자 정의 항목.

<AutumnProvider /> 추가

클라이언트 측에서 AutumnProvider 컴포넌트로 애플리케이션을 래핑하고 better-auth의 authClient에서 정의한 baseUrl을 전달합니다.

app/layout.tsx
import { AutumnProvider } from "autumn-js/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {/* vite의 경우 meta.env.BETTER_AUTH_URL */}
        <AutumnProvider betterAuthUrl={process.env.NEXT_PUBLIC_BETTER_AUTH_URL}>
          {children}
        </AutumnProvider>
      </body>
    </html>
  );
}

사용법

결제 처리

고객이 Pro 플랜을 구매하려고 할 때 attach를 호출하여 고객을 Stripe 체크아웃 페이지로 리디렉션합니다.

결제 수단이 이미 등록되어 있는 경우 대신 AttachDialog가 열려 고객이 새 구독 또는 구매를 확인하고 결제를 처리할 수 있습니다.

Autumn 대시보드에 Stripe 테스트 비밀 키를 붙여넣었는지 확인하세요.

import { useCustomer, AttachDialog } from "autumn-js/react";

export default function PurchaseButton() {
  const { attach } = useCustomer();

  return (
    <button
      onClick={async () => {
        await attach({
          productId: "pro",
          dialog: AttachDialog,
        });
      }}
    >
      Pro로 업그레이드
    </button>
  );
}

AttachDialog 컴포넌트는 autumn-js/react 라이브러리에서 직접 사용하거나(위 예제와 같이) shadcn/ui 컴포넌트로 다운로드하여 사용자 정의할 수 있습니다.

가격 로직 통합

다음 함수로 클라이언트 및 서버 가격 계층 로직을 통합합니다:

  • 고객이 메시지를 보낼 수 있는지 check
  • Autumn에서 사용량 이벤트 track (일반적으로 서버 측에서 수행)
  • UI에 관련 청구 데이터(구독, 기능 잔액)를 표시하기 위한 customer

서버 측에서는 auth 객체를 통해 Autumn의 함수에 액세스할 수 있습니다.

import { useCustomer } from "autumn-js/react";

export default function SendChatMessage() {
  const { customer, allowed, refetch } = useCustomer();

  return (
    <>
      <button
        onClick={async () => {
          if (allowed({ featureId: "messages" })) {
            //... 서버 측에서 챗봇 메시지 전송, 그 다음
            await refetch(); // 고객 사용량 데이터 다시 가져오기
            alert(
              "Remaining messages: " + customer?.features.messages?.balance
            );
          } else {
            alert("You're out of messages");
          }
        }}
      >
        메시지 전송
      </button>
    </>
  );
}
import { auth } from "@/lib/auth";

// 백엔드에서 고객이 메시지를 보낼 수 있는지 확인
const { allowed } = await auth.api.check({
  headers: await headers(), // 요청 헤더 전달
  body: {
    featureId: "messages",
  },
});

// 메시지를 보내는 서버 측 함수

// 그 다음 사용량 추적
await auth.api.track({
  headers: await headers(),
  body: {
    featureId: "messages",
    value: 2,
  },
});

추가 함수

openBillingPortal()

고객이 결제 수단을 업데이트하거나 플랜을 취소할 수 있는 청구 포털을 엽니다.

import { useCustomer } from "autumn-js/react";

export default function BillingSettings() {
  const { openBillingPortal } = useCustomer();

  return (
    <button
      onClick={async () => {
        await openBillingPortal({
          returnUrl: "/settings/billing",
        });
      }}
    >
      청구 관리
    </button>
  );
}

cancel()

제품 또는 구독을 취소합니다.

import { useCustomer } from "autumn-js/react";

export default function CancelSubscription() {
  const { cancel } = useCustomer();

  return (
    <button
      onClick={async () => {
        await cancel({ productId: "pro" });
      }}
    >
      구독 취소
    </button>
  );
}

인보이스 기록 가져오기

추가 정보를 얻으려면 useCustomer에 expand 매개변수를 전달합니다. invoices, trials_used, payment_method 또는 rewards를 확장할 수 있습니다.

import { useCustomer } from "autumn-js/react";

export default function CustomerProfile() {
  const { customer } = useCustomer({ expand: ["invoices"] });

  return (
    <div>
      <h2>고객 프로필</h2>
      <p>이름: {customer?.name}</p>
      <p>이메일: {customer?.email}</p>
      <p>잔액: {customer?.features.chat_messages?.balance}</p>
    </div>
  );
}
Edit on GitHub

Previous Page

Polar

Next Page

Dodo Payments

On this page