🎯 MERN Subscription Widget

A production-ready React subscription widget that you can add to any website.

📦 Installation

npm install mern-subscription-widget

🚀 Quick Start

Basic Usage

import React from 'react';
import PaymentSystem from 'mern-subscription-widget';

function App() {
  return (
    <div>
      <PaymentSystem 
        appId="APP-12345678"
        apiUrl="http://localhost:5000/api"
      />
      
      <main>
        {/* Your app content */}
      </main>
    </div>
  );
}

export default App;

🎨 What It Includes

Navbar Component

Automatically adds an "Account" button to your navigation:

• Beautiful gradient design
• Active subscription badge
• Responsive mobile/desktop

Subscription Modal

Complete subscription interface with:

• 5 subscription plan options
• Real-time price calculations
• 100% discount support
• Payment processing
• Success animations
• Subscription details view

⚙️ Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | appId | string | Yes | Your unique app ID from backend | | apiUrl | string | Yes | Backend API URL | | appName | string | No | Your app name | | domain | string | No | Your app domain |

💳 Subscription Plans

• Monthly - ₹5/month (Coming Soon)
• 3 Months - ₹15 total (Coming Soon)
• 6 Months - ₹30 total ✅ Active
• Yearly - ₹60 total (Coming Soon)
• 3 Years - ₹180 total (Coming Soon)

Current Offer: 100% discount - Subscribe for FREE! 🎉

🎯 Features

• ✅ Automatic account creation
• ✅ JWT authentication
• ✅ Guest account support
• ✅ Subscription management
• ✅ Beautiful modern UI
• ✅ Fully responsive
• ✅ Success animations
• ✅ localStorage persistence

🛠️ API Requirements

Your backend must have these endpoints:

POST /api/create-account
POST /api/subscription/create
GET /api/subscription/:userId
POST /api/subscription/mock-payment

📱 Responsive Design

Works perfectly on:

• Desktop (1920px+)
• Laptop (1024px+)
• Tablet (768px+)
• Mobile (320px+)

🎨 Customization

Override Styles

You can override the default styles by adding CSS:

/* Override navbar button */
.subscription-account-button {
  background: your-color !important;
}

/* Override modal */
.subscription-modal {
  border-radius: 10px !important;
}

Available CSS Classes

• .subscription-navbar - Navbar container
• .subscription-account-button - Account button
• .subscription-modal - Modal container
• .subscription-plan-card - Plan card
• .subscription-button-primary - Primary button

🔐 Authentication Flow

1. Component mounts
2. Checks localStorage for existing user
3. If no user, creates guest account
4. Stores JWT token
5. Fetches subscription data
6. Renders navbar with status

📊 Data Storage

The widget stores data in localStorage:

localStorage.setItem('subscription_token', token);
localStorage.setItem('subscription_user', JSON.stringify(user));

🐛 Troubleshooting

Widget Not Showing

Check that:

1. Backend server is running
2. API URL is correct
3. CORS is enabled on backend
4. MongoDB is connected

Account Button Not Centered

The navbar uses flexbox centering. Make sure no parent CSS is interfering.

Styles Not Applying

Make sure the widget CSS is imported. It's automatically included with the component.

📦 Dependencies

• react: ^16.8.0 || ^17.0.0 || ^18.0.0
• react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
• axios: ^1.6.0

🌟 Examples

With Custom App Name

<PaymentSystem 
  appId="APP-12345678"
  apiUrl="https://api.myapp.com/api"
  appName="My Awesome App"
  domain="myapp.com"
/>

Production Setup

<PaymentSystem 
  appId={process.env.REACT_APP_APP_ID}
  apiUrl={process.env.REACT_APP_API_URL}
/>

📝 License

MIT

🤝 Support

For issues, please visit: https://github.com/yourusername/mern-subscription-widget/issues

🚀 Changelog

v1.0.0 (2026-02-17)

• Initial release
• Navbar component
• Subscription modal
• Payment flow
• Responsive design
• JWT authentication
• Guest accounts

Made with 💜 by Your Name