PageMembershipCard

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

Installation

npm install @pagedotapp/page-membership-card

Usage

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

<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

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

Active Membership

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

Custom Button

<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:

npm run storybook

To run tests:

npm run test

To lint the component:

npm run lint