Clerk PricingTable

<PricingTable />

<PricingTable />은 Clerk Billing 기능에 포함된 사전 제작 요금제 UI 컴포넌트입니다.

 

 

프론트엔드 입장에서는

• 요금 카드 레이아웃
• 로그인/비로그인 분기
• 결제 버튼
• Stripe Checkout 이동

을 직접 구현하지 않아도 됩니다.

 

---

내부 동작 구조

<PricingTable />은 단순 UI 컴포넌트가 아닙니다.

동작 흐름은 아래와 같습니다.

1. Clerk Dashboard에 설정된 Billing Plan 조회
2. 현재 로그인한 유저 확인
3. 유저의 구독 상태 확인
4. 선택 가능한 플랜만 렌더링
5. 버튼 클릭 시 Stripe Checkout으로 이동
6. 결제 완료 → Clerk가 구독 상태 갱신

프론트엔드에서 결제 로직을 거의 다 제거할 수 있습니다.

 

---

 

기본 사용법

import { PricingTable } from "@clerk/nextjs";

export default function PricingPage() {
  return (
    <main>
      <PricingTable />
    </main>
  );
}

 

•  단, Clerk Dashboard 설정이 선행되어야 합니다.

 

---

Clerk Dashboard 필수 설정

아래 설정이 안 되어 있으면 <PricingTable />은 아무것도 보여주지 않습니다.

1.  
2. Billing → Plans 메뉴 이동
3. Stripe 계정 연결
4. Product / Price 생성
5. Plan을 Public 상태로 설정

 

 

 

1. 해당 Clerk Dashboard - > Configure -> Subscription Plans

 

 

2. Create Plan을 통해 필요한 Plan 생성

 

3. Billing setting 설정

 

이후 프론트에서 <PricingTable />를 렌더링하면 자동 반영됩니다.