npm package: @simpledotstudio/simple-membership-card
Description: SimpleMembershipCard - A reusable React component
Author: SimpleStudio
Latest version: 1.0.0-alpha.2

# SimpleMembershipCard

A membership tier display card component with optional payment integration support using Stripe.

## Installation

```bash
npm install @simpledotstudio/simple-membership-card
```

## Usage

```tsx
import { SimpleMembershipCard } from '@simpledotstudio/simple-membership-card';

function App() {
  return (
    <SimpleMembershipCard
      title="Platinum"
      price={3}
      period="/mo."
      benefits={[
        'Offer members a code for an online store or website',
        'Offer members the ability to commission work directly from you'
      ]}
    />
  );
}
```

## With Payment Integration

```tsx
<SimpleMembershipCard
  title="Pro Plan"
  price={49}
  stripeKey="pk_test_..."
  apiEndpoint="https://api.example.com/payment"
  productId="prod_123"
  benefits={['Premium features', 'Priority support']}
  onPaymentSuccess={(details) => console.log('Payment successful!', details)}
  onPaymentError={(error) => console.error('Payment failed:', error)}
/>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | Required | Membership tier name |
| `price` | `number` | Required | Price per period in currency units |
| `currency` | `string` | `'USD'` | Currency code (e.g., 'USD', 'EUR') |
| `period` | `string` | `'/mo.'` | Billing period text |
| `benefits` | `string[]` | `[]` | List of membership benefits |
| `isActive` | `boolean` | `false` | Whether this membership is currently active |
| `showPayButton` | `boolean` | `true` | Whether to show the payment button |
| `buttonText` | `string` | `'Subscribe'` | Custom button text |
| `stripeKey` | `string` | - | Stripe publishable key for payment |
| `apiEndpoint` | `string` | - | API endpoint for creating payment intents |
| `productId` | `string` | - | Product ID for payment processing |
| `paymentMetadata` | `object` | - | Additional metadata for payment |
| `onPaymentSuccess` | `function` | - | Callback when payment succeeds |
| `onPaymentError` | `function` | - | Callback when payment fails |
| `onButtonClick` | `function` | - | Callback for custom button action |
| `buttonVariant` | `string` | `'primary'` | Button style variant |
| `isAuthenticated` | `boolean` | - | Whether user is authenticated |
| `onAuthRequired` | `function` | - | Callback to handle authentication |
| `className` | `string` | - | Additional CSS class name |

## Examples

### Basic Membership

```tsx
<SimpleMembershipCard
  title="Basic"
  price={5}
  benefits={['Access to basic features', 'Community support']}
/>
```

### Active Membership

```tsx
<SimpleMembershipCard
  title="Gold Member"
  price={15}
  isActive={true}
  benefits={['VIP access', 'Exclusive content']}
/>
```

### Custom Button

```tsx
<SimpleMembershipCard
  title="Starter"
  price={0}
  buttonText="Get Started Free"
  showPayButton={false}
  onButtonClick={() => console.log('Custom action')}
  benefits={['Basic features', 'Up to 10 projects']}
/>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Dependencies

This component depends on:
- `@simpledotstudio/simple-card`
- `@simpledotstudio/simple-button`
- `@simpledotstudio/simple-pay-button`

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```