npm package: @sdkrouter/payments
Description: Embeddable React payment widget for SDKRouter payment links — crypto payments via NOWPayments
Author: CMDOP
Latest version: 0.1.6

# @sdkrouter/payments

Accept crypto payments on your website with one React component. No payment processor, no merchant account, no monthly fees — payments go directly to your exchange account.

## How it works

1. Connect your exchange account (Binance, Bybit, OKX, KuCoin) in [sdkrouter.com](https://sdkrouter.com) dashboard
2. Create a payment link (fixed or custom amount)
3. Drop `<PaymentPage linkId="..." />` into your site
4. Buyer clicks "Pay" → sees QR code + deposit address + exact USDT amount
5. Buyer sends crypto from any wallet
6. System detects the deposit automatically — no manual confirmation needed
7. Funds appear in your exchange account

**Zero platform fees.** You only pay standard network fees (e.g., ~$1 for TRC20).

## Quick Start

```bash
npm install @sdkrouter/payments
```

### Full-page checkout

```tsx
import { PaymentPage } from '@sdkrouter/payments';

<PaymentPage linkId="your-link-uuid" />
```

### Inline widget

```tsx
import { PaymentWidget } from '@sdkrouter/payments';

<PaymentWidget linkId="abc-123" />
```

### Pay button with modal

```tsx
<PaymentWidget linkId="abc-123" mode="button" buttonText="Pay $50" />
```

## What the buyer sees

| Step | Screen |
|------|--------|
| **1. Form** | Title, amount, email field |
| **2. Payment** | QR code, deposit address (copy), exact amount (copy), 60-min countdown |
| **3. Waiting** | "Checking for payment..." — auto-polls every 15 seconds |
| **4. Confirmed** | "Payment Received!" with transaction ID |

### Why the amount isn't round

Each payment gets a unique amount (e.g., `10.003229 USDT` instead of `10.00`). This is how the system matches your deposit to your invoice on a shared address. The buyer copies the exact amount — it's handled automatically.

## Features

- **QR code** — SVG, scannable by any crypto wallet
- **Copy buttons** — one-tap copy for address and amount
- **Countdown timer** — 60-minute window, urgent indicator at <5 min
- **Auto-detection** — polls for payment, no "I've paid" button needed
- **Dark/light theme** — auto-detects from system/Tailwind/`data-theme`
- **Self-contained** — CSS injected automatically, no external stylesheets
- **React 18 & 19** — works with both

## Custom UI

```tsx
import { PaymentProvider, usePayment } from '@sdkrouter/payments';

<PaymentProvider linkId="abc-123">
  <MyCheckout />
</PaymentProvider>

function MyCheckout() {
  const { link, pay, paymentResult, isPaying, step, reset } = usePayment();

  return (
    <div>
      <h1>{link?.title}</h1>
      <button onClick={() => pay({ email: 'buyer@example.com' })} disabled={isPaying}>
        Pay ${link?.amountUsd}
      </button>
      {paymentResult && (
        <p>Send {paymentResult.payAmount} {paymentResult.coin} to {paymentResult.payAddress}</p>
      )}
    </div>
  );
}
```

## Props

```ts
interface PaymentLinkConfig {
  linkId: string;                    // Payment link UUID from dashboard
  baseUrl?: string;                  // API URL (default: https://api.sdkrouter.com)
  customerId?: string;               // Your customer ID — enables payment history
  projectSlug?: string;              // Your project slug
  onSuccess?: (result) => void;      // Called when payment confirmed
  onError?: (error: string) => void; // Called on error
  theme?: 'light' | 'dark' | 'auto';
  locale?: string;                   // 'en', 'ru', 'ko', etc.
}
```

## Supported exchanges

| Exchange | Networks | Sub-accounts |
|----------|----------|-------------|
| Binance | TRC20, ERC20, BEP20, Arbitrum, SOL | Up to 1000 |
| Bybit | TRC20, ERC20, Arbitrum, SOL | Up to 100 |
| OKX | TRC20, ERC20, Arbitrum, Polygon, SOL | Up to 50 |
| KuCoin | TRC20, ERC20 | Up to 100 |

Default network: **TRC20** (cheapest — ~$1 fee, fastest — ~3 seconds).

## License

MIT