### Install UPI QR Package

Source: https://github.com/sk-py/upi-qr/blob/main/README.md

Install the package using npm. This command adds the library to your project dependencies.

```bash
npm install @sk-py/upi-qr
```

--------------------------------

### Install @sk-py/upi-qr with npm or yarn

Source: https://github.com/sk-py/upi-qr/blob/main/README.md

Use npm or yarn to add the library to your project. React projects require React version 18.0.0 or higher as a peer dependency.

```bash
# Using npm
npm install @sk-py/upi-qr

# Or with yarn
yarn add @sk-py/upi-qr
```

--------------------------------

### generateUPIQR(options)

Source: https://context7.com/sk-py/upi-qr/llms.txt

Builds a UPI payment URL from the supplied options and generates a Base64-encoded PNG data URI. Requires `payeeVPA` and `payeeName`. All other fields are optional. Throws descriptive errors on missing required fields or QR generation failures.

```APIDOC
## `generateUPIQR(options)` — Generate a UPI QR code and intent URL

### Description
Builds a UPI payment URL from the supplied options and generates a Base64-encoded PNG data URI using the `qrcode` library. Requires `payeeVPA` (the merchant's UPI ID / Virtual Payment Address) and `payeeName`. All other fields are optional. When `fixedAmount` is `true` (the default) and an `amount` is provided, the amount is embedded in the QR; setting `fixedAmount` to `false` lets the payer enter their own amount. Throws descriptive errors on missing required fields or QR generation failures.

### Method Signature
```javascript
async generateUPIQR(options: UPIOptions): Promise<UPIQRResult>
```

### Parameters
#### `options` (UPIOptions) - Required
An object containing payment details.

- **payeeVPA** (string) - Required - The merchant's UPI ID / Virtual Payment Address.
- **payeeName** (string) - Required - The display name of the merchant.
- **amount** (string) - Optional - The payment amount.
- **fixedAmount** (boolean) - Optional - Defaults to `true`. If `true`, the amount is fixed in the QR code. If `false`, the payer can enter their own amount.
- **currency** (string) - Optional - Defaults to 'INR'. The currency of the payment.
- **transactionNote** (string) - Optional - A note or memo for the transaction, visible to the payer.
- **transactionRef** (string) - Optional - Your internal reference ID for the transaction.
- **merchantCode** (string) - Optional - Merchant Category Code (MCC).
- **purpose** (string) - Optional - UPI purpose code.
- **mode** (string) - Optional - UPI mode code.
- **url** (string) - Optional - A URL associated with the transaction.

### Returns
`Promise<UPIQRResult>` - An object containing:
- **qr** (string): A Base64-encoded PNG data URI for the QR code.
- **intent** (string): The generated `upi://pay` deep-link URL.

### Request Example (Minimal Usage)
```javascript
import { generateUPIQR } from '@sk-py/upi-qr';

const { qr: openQR, intent: openIntent } = await generateUPIQR({
  payeeVPA:  'merchant@okaxis',
  payeeName: 'Acme Store',
  fixedAmount: false, // payer can enter any amount
});
console.log('Open-amount intent:', openIntent);
// upi://pay?pa=merchant%40okaxis&pn=Acme+Store&cu=INR
```

### Request Example (Full Usage)
```javascript
import { generateUPIQR } from '@sk-py/upi-qr';

try {
  const { qr, intent } = await generateUPIQR({
    payeeVPA:        'merchant@okaxis',
    payeeName:       'Acme Store',
    amount:          '499.00',
    fixedAmount:     true,            // lock the amount in the QR
    currency:        'INR',           // default; explicit here for clarity
    transactionNote: 'Order #7890',
    transactionRef:  'ORD7890',
    merchantCode:    '1234',
    purpose:         'merchant_payment',
    mode:            '00',
    url:             'https://acme.example.com/orders/7890',
  });

  console.log('Intent URL :', intent);
  // upi://pay?pa=merchant%40okaxis&pn=Acme+Store&cu=INR&am=499.00
  //   &tn=Order+%237890&tr=ORD7890&purpose=merchant_payment&mode=00
  //   &mc=1234&url=https%3A%2F%2Facme.example.com%2Forders%2F7890

  // Save QR to a PNG file (Node.js)
  import { writeFileSync } from 'fs';
  const base64Data = qr.replace(/^data:image\/png;base64,/, '');
  writeFileSync('payment-qr.png', Buffer.from(base64Data, 'base64'));
  console.log('QR image saved to payment-qr.png');
} catch (err) {
  console.error('UPI QR generation error:', err.message);
}
```

### Error Handling
Throws descriptive errors on missing required fields (`payeeVPA`, `payeeName`) or QR generation failures.
```

--------------------------------

### Fork UPI QR Repository

Source: https://github.com/sk-py/upi-qr/blob/main/README.md

Clone the repository to your GitHub account to contribute. Follow these steps to set up a development environment.

```bash
https://github.com/sk-py/upi-qr
```

```bash
git checkout -b feature/my-feature
```

```bash
git commit -m "Add my feature"
```

```bash
git push origin feature/my-feature
```

--------------------------------

### Render UPIQRComponent with custom props

Source: https://github.com/sk-py/upi-qr/blob/main/README.md

The `UPIQRComponent` accepts `qr`, `intent`, `alt`, and `size` props. The `qr` and `intent` props are required, while `alt` and `size` are optional for customizing the image's accessibility text and dimensions.

```jsx
<UPIQRComponent
  qr={qrData.qr}
  intent={qrData.intent}
  alt="Pay Acme"
  size="250px"
/>
```

--------------------------------

### Generate UPI QR Code (Full Usage)

Source: https://context7.com/sk-py/upi-qr/llms.txt

Shows full usage of `generateUPIQR` with all optional fields for a fixed amount QR code. Includes saving the QR image to a file in Node.js.

```javascript
import { generateUPIQR } from '@sk-py/upi-qr';

// --- Full usage (fixed amount with all optional fields) ---
try {
  const { qr, intent } = await generateUPIQR({
    payeeVPA:        'merchant@okaxis',
    payeeName:       'Acme Store',
    amount:          '499.00',
    fixedAmount:     true,            // lock the amount in the QR
    currency:        'INR',           // default; explicit here for clarity
    transactionNote: 'Order #7890',
    transactionRef:  'ORD7890',
    merchantCode:    '1234',
    purpose:         'merchant_payment',
    mode:            '00',
    url:             'https://acme.example.com/orders/7890',
  });

  // `qr` is a data URI — use directly in <img> or write to file
  console.log('Intent URL :', intent);
  // upi://pay?pa=merchant%40okaxis&pn=Acme+Store&cu=INR&am=499.00
  //   &tn=Order+%237890&tr=ORD7890&purpose=merchant_payment&mode=00
  //   &mc=1234&url=https%3A%2F%2Facme.example.com%2Forders%2F7890

  // Save QR to a PNG file (Node.js)
  import { writeFileSync } from 'fs';
  const base64Data = qr.replace(/^data:image\/png;base64,/, '');
  writeFileSync('payment-qr.png', Buffer.from(base64Data, 'base64'));
  console.log('QR image saved to payment-qr.png');
} catch (err) {
  // Thrown when payeeVPA/payeeName are missing, or QR encoding fails
  console.error('UPI QR generation error:', err.message);
}
```

--------------------------------

### Generate UPI QR Code (Minimal Usage)

Source: https://context7.com/sk-py/upi-qr/llms.txt

Demonstrates minimal usage of `generateUPIQR` for an open amount QR code. The payer can enter any amount.

```javascript
import { generateUPIQR } from '@sk-py/upi-qr';

// --- Minimal usage (open amount) ---
const { qr: openQR, intent: openIntent } = await generateUPIQR({
  payeeVPA:  'merchant@okaxis',
  payeeName: 'Acme Store',
  fixedAmount: false,           // payer can enter any amount
});
console.log('Open-amount intent:', openIntent);
// upi://pay?pa=merchant%40okaxis&pn=Acme+Store&cu=INR
```

--------------------------------

### Generate UPI QR Code and Intent in Node.js

Source: https://github.com/sk-py/upi-qr/blob/main/README.md

Use the `generateUPIQR` function to create a UPI payment intent URL and a Base64 encoded QR code. Ensure all required parameters like `payeeVPA` and `payeeName` are provided. The function returns a promise that resolves with `qr` and `intent` properties.

```javascript
import { generateUPIQR } from '@sk-py/upi-qr';

async function createUPIPayment() {
  try {
    const { qr, intent } = await generateUPIQR({
      payeeVPA:    'merchant@bank',
      payeeName:   'Acme Corp',
      amount:      '150.00',
      transactionNote: 'Invoice #1234',
      transactionRef:  'INV1234',
      url:         'https://acme.example.com/order/1234',
      currency:    'INR'   // defaults to INR
    });

    console.log('UPI Intent URL:', intent);
    // For example, save `qr` (data URI) to a file or send to frontend
  } catch (err) {
    console.error('Error generating UPI QR:', err);
  }
}

createUPIPayment();
```

--------------------------------

### UPIQRComponentProps TypeScript Interface

Source: https://context7.com/sk-py/upi-qr/llms.txt

Defines the props for the UPIQRComponent, including required 'qr' and 'intent', and optional 'alt' and 'size'. These props are directly obtained from the generateUPIQR() function's result.

```tsx
import UPIQRComponent, { UPIQRComponentProps } from '@sk-py/upi-qr/react';

const props: UPIQRComponentProps = {
  qr:     'data:image/png;base64,...', // required — from generateUPIQR().qr
  intent: 'upi://pay?pa=...',          // required — from generateUPIQR().intent
  alt:    'Pay via UPI',               // optional, default "UPI QR Code"
  size:   '180px',                     // optional, default "200px"
};

// Spread directly onto the component:
<UPIQRComponent {...props} />
```

--------------------------------

### Display UPI QR Code in React Component

Source: https://context7.com/sk-py/upi-qr/llms.txt

Use UPIQRComponent to display the generated QR code and a 'Pay Now via UPI' link. The component accepts the QR data URI and intent URL, with optional alt text and size.

```jsx
import React, { useState, useEffect } from 'react';
import { generateUPIQR } from '@sk-py/upi-qr';
import UPIQRComponent from '@sk-py/upi-qr/react';

export default function CheckoutPage({ orderId, total }) {
  const [qrData, setQrData] = useState(null);
  const [error, setError]   = useState(null);

  useEffect(() => {
    generateUPIQR({
      payeeVPA:        'shop@ybl',
      payeeName:       'My Shop',
      amount:          String(total),
      transactionRef:  orderId,
      transactionNote: `Order ${orderId}`,
    })
      .then(setQrData)
      .catch((err) => setError(err.message));
  }, [orderId, total]);

  if (error)   return <p style={{ color: 'red' }}>Error: {error}</p>;
  if (!qrData) return <p>Generating QR code…</p>;

  return (
    <div>
      <h2>Scan to Pay ₹{total}</h2>

      {/* size defaults to "200px"; alt defaults to "UPI QR Code" */}
      <UPIQRComponent
        qr={qrData.qr}
        intent={qrData.intent}
        alt={`Pay ₹${total} for order ${orderId}`}
        size="220px"
      />

      <p style={{ fontSize: '0.85rem', color: '#555' }}>
        Works with PhonePe, Google Pay, Paytm, BHIM, and all UPI apps.
      </p>
    </div>
  );
}
// On mobile, clicking "Pay Now via UPI" opens the installed UPI app directly.
// On desktop, users scan the QR with their phone camera or UPI app.
```

--------------------------------

### generateUPIQR()

Source: https://github.com/sk-py/upi-qr/blob/main/README.md

Generates a UPI QR code as a Base64 data URI and a UPI intent string asynchronously. This function is suitable for server-side (Node.js) or client-side (React) usage.

```APIDOC
## generateUPIQR(options)

### Description
Generate UPI QR & intent string asynchronously.

### Method
`generateUPIQR(options)`

### Parameters
#### Request Body
- **options** (object) - Required
  - **payeeVPA** (string) - Required - Payee’s Virtual Payment Address.
  - **payeeName** (string) - Required - Display name of the payee.
  - **amount** (string) - Optional - UPI amount.
  - **transactionNote** (string) - Optional - Note or memo for the transaction.
  - **transactionRef** (string) - Optional - Reference ID for the transaction.
  - **url** (string) - Optional - Callback URL for the transaction.
  - **currency** (string) - Optional - Currency code (defaults to "INR").

### Returns
`Promise<{ qr: string; intent: string }>` - A promise that resolves to an object containing:
- **qr**: Base64 data-URI of the QR code image.
- **intent**: UPI intent string for deep-linking.
```

--------------------------------

### Display UPI QR Code in React

Source: https://github.com/sk-py/upi-qr/blob/main/README.md

Utilize the `generateUPIQR` function within a `useEffect` hook to fetch QR code data. The `UPIQRComponent` then renders the QR code image and intent link. Provide the `qr` and `intent` data to the component, along with optional `size` and `alt` props.

```jsx
import React from 'react';
import { generateUPIQR } from '@sk-py/upi-qr';
import UPIQRComponent from '@sk-py/upi-qr/react';

function App() {
  const [qrData, setQrData] = React.useState({ qr: '', intent: '' });

  React.useEffect(() => {
    generateUPIQR({
      payeeVPA:  'merchant@bank',
      payeeName: 'Acme Corp',
      amount:    '250.00',
      transactionNote: 'Order #5678'
    }).then(setQrData);
  }, []);

  return (
    <div>
      {qrData.qr
        ? <UPIQRComponent
            qr={qrData.qr}
            intent={qrData.intent}
            size="180px"
            alt="Pay Acme via UPI"
          />
        : <p>Loading QR code…</p>
      }
    </div>
  );
}

export default App;
```

--------------------------------

### UPIOptions Interface

Source: https://context7.com/sk-py/upi-qr/llms.txt

TypeScript interface defining the structure of the options object accepted by the `generateUPIQR` function.

```APIDOC
### `UPIOptions` — TypeScript interface for `generateUPIQR` input

Describes all accepted fields for the options object passed to `generateUPIQR()`.

```ts
interface UPIOptions {
  payeeVPA:        string;      // required — merchant's UPI ID
  payeeName:       string;      // required — display name
  amount?:         string;      // optional
  fixedAmount?:    boolean;     // optional, default true
  currency?:       string;      // optional, default 'INR'
  transactionNote?: string;    // optional — memo shown to payer
  transactionRef?:  string;      // optional — your internal reference
  merchantCode?:   string;      // optional — MCC / merchant category
  purpose?:        string;      // optional — UPI purpose code
  mode?:           string;      // optional — UPI mode code
  url?:            string;      // optional
}

interface UPIQRResult {
  qr:     string; // Base64-encoded PNG data URI
  intent: string; // UPI payment URL
}

// Example usage:
import { generateUPIQR, UPIOptions, UPIQRResult } from '@sk-py/upi-qr';

const options: UPIOptions = {
  payeeVPA:        'shop@ybl',
  payeeName:       'My Shop',
  amount:          '199.00',
  fixedAmount:     true,
  currency:        'INR',
  transactionNote: 'Thank you!',
  transactionRef:  'REF-001',
  merchantCode:    '5411',
  purpose:         '00',
  mode:            '00',
  url:             'https://myshop.in/receipt/001',
};

const result: UPIQRResult = await generateUPIQR(options);
// result.qr     → "data:image/png;base64,iVBORw0KGgo..."
// result.intent → "upi://pay?pa=shop%40ybl&pn=My+Shop&cu=INR&am=199.00..."
```

### Description
Describes all accepted fields for the options object passed to `generateUPIQR()`. Only `payeeVPA` and `payeeName` are required; every other property is optional and will be omitted from the UPI URL if not supplied.
```

--------------------------------

### UPIOptions TypeScript Interface

Source: https://context7.com/sk-py/upi-qr/llms.txt

Defines the TypeScript interface for the options object accepted by `generateUPIQR`. Shows required and optional fields for UPI payment details.

```typescript
import { generateUPIQR, UPIOptions, UPIQRResult } from '@sk-py/upi-qr';

const options: UPIOptions = {
  payeeVPA:        'shop@ybl',      // required — merchant's UPI ID
  payeeName:       'My Shop',       // required — display name
  amount:          '199.00',        // optional
  fixedAmount:     true,            // optional, default true
  currency:        'INR',           // optional, default 'INR'
  transactionNote: 'Thank you!',    // optional — memo shown to payer
  transactionRef:  'REF-001',       // optional — your internal reference
  merchantCode:    '5411',          // optional — MCC / merchant category
  purpose:         '00',            // optional — UPI purpose code
  mode:            '00',            // optional — UPI mode code
  url:             'https://myshop.in/receipt/001', // optional
};

const result: UPIQRResult = await generateUPIQR(options);
// result.qr     → "data:image/png;base64,iVBORw0KGgo..."
// result.intent → "upi://pay?pa=shop%40ybl&pn=My+Shop&cu=INR&am=199.00..."
```

--------------------------------

### UPIQRComponent

Source: https://github.com/sk-py/upi-qr/blob/main/README.md

A React component that renders a UPI QR code and intent link. It accepts the QR code data and intent string as props.

```APIDOC
## UPIQRComponent

### Description
A React component to display the generated UPI QR code and intent URL.

### Props
#### Component Props
- **qr** (string) - Required - Base64-encoded data URI of the QR code image.
- **intent** (string) - Required - UPI deep-link URL (e.g., `upi://pay?…`).
- **alt** (string) - Optional - Alt text for the `<img>` element (defaults to "UPI QR Code").
- **size** (string) - Optional - Width and height of the QR code (e.g., "150px", defaults to "200px").

### Usage Example
```jsx
<UPIQRComponent
  qr={qrData.qr}
  intent={qrData.intent}
  alt="Pay Acme"
  size="250px"
/>
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.