payment-Account-subscription

Embeddable payment Account with subscription for any website or app. When installed, your app gets an Account button (for the middle of the top navigation bar) that opens a payment Account UI with:

• Monthly subscription: Rs 5 (fixed)
• Periods: Monthly, 3 Months, 6 Months, Yearly, 3 Yearly — only 6 Months is enabled and selected by default
• Total subscription amount for the selected period
• 100% discount — net payment is always Rs 0

Steps from the beginning

Step 1: Create or open your app

Use an existing React website/app or create one:

npx create-react-app my-app
cd my-app

Or with Vite:

npm create vite@latest my-app -- --template react
cd my-app
npm install

Step 2: Install the package

From your app root:

npm install payment-Account-subscription

(If publishing locally first: npm install /path/to/payment-Account-subscription or use npm link.)

Step 3: Add the Account button in the middle of the top navigation bar

Your app must have a top navigation bar and place the Account button in the middle of it.

Example layout:

• Left: logo or nav links
• Middle: Account button (from this package)
• Right: other actions (e.g. login, cart)

React example:

import { AccountButton } from 'payment-Account-subscription';

function App() {
  return (
    <div>
      <header style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '1rem 1.5rem',
        borderBottom: '1px solid #eee',
      }}>
        <nav>{/* Left: logo, links */}</nav>

        {/* Middle: Account button */}
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
          <AccountButton />
        </div>

        <div>{/* Right: other actions */}</div>
      </header>

      <main>{/* Your app content */}</main>
    </div>
  );
}

Using the middle with flexbox:

• flex: 1 on the middle div and justifyContent: 'center' keeps the Account button in the center of the bar.
• Adjust justifyContent or add margins if you need it slightly off-center.

Step 4: What happens when the package is installed

• The Account button is shown in the place you render it (middle of the nav bar in the example above).
• Clicking Account opens the payment Account modal.
• The modal shows:
  • Monthly subscription: Rs 5 (fixed)
  • Select period: Monthly, 3 Months, 6 Months, Yearly, 3 Yearly
    • Only 6 Months is enabled and selected by default.
  • Total subscription amount for the selected period (e.g. 6 × Rs 5 = Rs 30).
  • Discount: 100% (discount amount shown).
  • Net payment: Rs 0 (always 0).

No backend or payment gateway is included; the UI is ready for you to plug in your own API later.

Step 5: Optional — use the modal only

If you already have your own “Account” button and only want the subscription modal:

import { useState } from 'react';
import { PaymentAccountModal } from 'payment-Account-subscription';

function MyNav() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Account</button>
      <PaymentAccountModal isOpen={open} onClose={() => setOpen(false)} />
    </>
  );
}

Step 6: Build and run your app

npm run build
npm start

Click Account in the middle of the nav bar; the payment Account modal should open with 6 Months selected, total amount shown, 100% discount, and net payment Rs 0.

API

| Export | Description | |--------|-------------| | AccountButton | Button + modal. Render once, typically in the middle of the top navigation bar. | | PaymentAccountModal | Modal only. Props: isOpen, onClose. | | MONTHLY_PRICE_RS | 5 | | PERIODS | { 1m, 3m, 6m, 1y, 3y } with label, months, enabled. Only 6m is enabled: true. | | DEFAULT_PERIOD | '6m' | | DISCOUNT_PERCENT | 100 | | PeriodKey | '1m' | '3m' | '6m' | '1y' | '3y' |

Requirements summary

• Account button: In the middle of the top navigation bar.
• Monthly price: Rs 5 (fixed).
• Periods: Monthly, 3 months, 6 months, Yearly, 3 Yearly — only 6 months enabled and default.
• Total for selected period and 100% discount so net payment = 0.

License

MIT