SubscriptionFlow Component

Complete subscription flow with payment processing. Handles monthly and yearly subscription options with Stripe integration.

Basic Subscription Flow

Subscribe to

Get exclusive content and support their cause

<SubscriptionFlow 
  artist={{
    name: "Sarah Smith",
    slug: "sarah-smith",
    avatar: "https://example.com/avatar.jpg"
  }}
  prices={{
    monthly: 15
  }}
  onSuccess={(subscription) => console.log('Subscription successful:', subscription)}
  onError={(error) => console.error('Subscription error:', error)}
/>

Monthly & Yearly Options

Subscribe to

Get exclusive content and support their cause

<SubscriptionFlow 
  artist={{
    name: "The Midnight Band",
    slug: "the-midnight-band",
    avatar: "https://example.com/avatar.jpg"
  }}
  prices={{
    monthly: 25,
    yearly: 250  // 17% savings
  }}
  onSuccess={(subscription) => console.log('Subscription successful:', subscription)}
  onError={(error) => console.error('Subscription error:', error)}
/>

Premium Artist

Subscribe to

Get exclusive content and support their cause

<SubscriptionFlow 
  artist={{
    name: "Chris Stapleton",
    slug: "chris-stapleton",
    avatar: "https://example.com/avatar.jpg"
  }}
  prices={{
    monthly: 50,
    yearly: 500
  }}
  onSuccess={(subscription) => console.log('Subscription successful:', subscription)}
  onError={(error) => console.error('Subscription error:', error)}
/>

Affordable Artist

Subscribe to

Get exclusive content and support their cause

<SubscriptionFlow 
  artist={{
    name: "Rising Star",
    slug: "rising-star",
    avatar: "https://example.com/avatar.jpg"
  }}
  prices={{
    monthly: 5,
    yearly: 50
  }}
  onSuccess={(subscription) => console.log('Subscription successful:', subscription)}
  onError={(error) => console.error('Subscription error:', error)}
/>

Without Avatar

Subscribe to

Get exclusive content and support their cause

<SubscriptionFlow 
  artist={{
    name: "New Artist",
    slug: "new-artist"
  }}
  prices={{
    monthly: 10,
    yearly: 100
  }}
  onSuccess={(subscription) => console.log('Subscription successful:', subscription)}
  onError={(error) => console.error('Subscription error:', error)}
/>

Subscription Flow Steps

The SubscriptionFlow component handles:

Artist information display
Pricing plan selection (monthly/yearly)
Payment method collection
Stripe payment processing
Subscription confirmation
Error handling and retry logic

Note: This component requires Stripe configuration and will show a mock payment form in demo mode.

Props Reference

Prop	Type	Default	Description
artist	Artist	required	Artist information
prices	Prices	required	Subscription pricing
onSuccess	(subscription: Subscription) => void	required	Success callback
onError	(error: string) => void	required	Error callback
className	string	undefined	Additional CSS classes

Artist Interface

interface Artist {
  name: string;
  slug: string;
  avatar?: string;
}

Prices Interface

interface Prices {
  monthly: number;
  yearly?: number;
}