npm package: @pagedotapp/page-membership-card
Description: PageMembershipCard - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# PageMembershipCard

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

## Installation

```bash
npm install @pagedotapp/page-membership-card
```

## Usage

```tsx
import { PageMembershipCard } from "@pagedotapp/page-membership-card"

function App() {
	return (
		<PageMembershipCard
			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
<PageMembershipCard
	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
<PageMembershipCard
	title="Basic"
	price={5}
	benefits={["Access to basic features", "Community support"]}
/>
```

### Active Membership

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

### Custom Button

```tsx
<PageMembershipCard
	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:

- `@pagedotapp/page-card`
- `@pagedotapp/page-button`
- `@pagedotapp/page-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
```