@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 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

npm install @sdkrouter/payments

Full-page checkout

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

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

Inline widget

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

<PaymentWidget linkId="abc-123" />

Pay button with modal

<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

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: '[email protected]' })} disabled={isPaying}>
        Pay ${link?.amountUsd}
      </button>
      {paymentResult && (
        <p>Send {paymentResult.payAmount} {paymentResult.coin} to {paymentResult.payAddress}</p>
      )}
    </div>
  );
}

Props

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