React Payment Account Widget

A reusable React component library for displaying an account button with subscription/payment modal UI. This is a frontend-only package with no backend integration.

Features

• 🚀 Easy plug-and-play integration into any React app
• 💰 Subscription pricing calculator (₹5/month base price)
• 🎨 Clean, professional UI with responsive design
• ♿ Accessible with ARIA labels
• 📦 Works in standalone or embedded mode
• 💾 LocalStorage-based account management
• 🎯 100% discount applied (demo mode - ₹0 payable)

Installation

npm install react-payment-account-widget

Usage

Import Styles

Make sure to import the CSS file in your app:

import 'react-payment-account-widget/dist/style.css';

Mode 1: Standalone Navbar Mode

The widget renders its own minimal navigation bar with a centered "Account" button:

import React from 'react';
import { PaymentAccountWidget } from 'react-payment-account-widget';
import 'react-payment-account-widget/dist/style.css';

function App() {
  return (
    <div>
      <PaymentAccountWidget mode="standalone" />
      {/* Your app content */}
    </div>
  );
}

export default App;

Mode 2: Embedded Mode

Embed just the account button inside your existing navbar:

import React from 'react';
import { PaymentAccountWidget } from 'react-payment-account-widget';
import 'react-payment-account-widget/dist/style.css';

function App() {
  return (
    <div>
      <nav style={{ display: 'flex', justifyContent: 'space-between', padding: '1rem' }}>
        <div>My App Logo</div>
        
        {/* Centered account button */}
        <PaymentAccountWidget mode="embedded" />
        
        <div>Other Nav Items</div>
      </nav>
      
      {/* Your app content */}
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | mode | string | 'standalone' | Display mode: 'standalone' (renders full navbar) or 'embedded' (button only) |

Subscription Plans

The widget offers the following subscription plans:

• 1 Month - Disabled (Coming Soon)
• 3 Months - Disabled (Coming Soon)
• 6 Months - ✅ Enabled & Default Selected
• 1 Year (12 Months) - Disabled (Coming Soon)
• 3 Years (36 Months) - Disabled (Coming Soon)

Pricing Calculation

Base Price: ₹5 per month

Formula:

Total Amount = Months × ₹5
Discount = 100%
Discount Value = Total Amount
Net Payable = ₹0 (always free in demo mode)

Example (6 Months Plan):

• Months: 6
• Price per month: ₹5
• Subtotal: ₹30
• Discount (100%): -₹30
• Net Payable: ₹0

LocalStorage Data

The widget creates and manages a payment account in the browser's localStorage:

Key: npm_payment_account

Stored Data:

{
  "accountId": "ACC-1234567890123-abc123",
  "createdAt": "2026-02-17T10:30:00.000Z",
  "activePlan": "6 Months",
  "planMonths": 6,
  "pricePerMonth": 5,
  "total": 30,
  "discountPercent": 100,
  "payable": 0,
  "status": "Active"
}

Features in Detail

Account Button

• Centered horizontally in the navigation bar
• Opens subscription modal on click
• Accessible with proper ARIA labels

Subscription Modal

• Shows available subscription plans (only 6-month plan is enabled)
• Displays account information (ID, status, creation date)
• Shows pricing breakdown with 100% discount
• "Proceed" button shows success message (demo mode)
• Closes on ESC key or backdrop click
• Mobile responsive design

Account Management

• Auto-creates account on first use
• Stores account data in localStorage
• Persists across page reloads
• No backend required

Browser Compatibility

• Modern browsers with ES6+ support
• Requires localStorage support
• Works with React 16.8+ (Hooks)

Development

This is a frontend-only package. No API calls or backend integration included.

Local Testing

To test the package locally in another React app:

# In the package directory
npm install
npm run build
npm link

# In your test app directory
npm link react-payment-account-widget

Then import and use as shown in the usage examples above.

Tech Stack

• React 16.8+ (Hooks)
• Plain CSS (no external UI libraries)
• LocalStorage for data persistence
• Vite for building

License

MIT

Support

For issues or questions, please open an issue on the repository.

Note: This is a demo/prototype package. The 100% discount and ₹0 payable amount are intentional. For production use with real payment processing, you would need to integrate with a payment gateway and backend API.