SimpleMembershipCard

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

Installation

npm install @simpledotstudio/simple-membership-card

Usage

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

<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

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

Active Membership

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

Custom Button

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

npm run storybook

To run tests:

npm run test

To lint the component:

npm run lint