@paychainly/react

React hooks and components for the Paychainly crypto payment platform. Accept USDT on BNB Smart Chain with real-time payment detection — no API key in the browser, ever.

Install

npm install @paychainly/react

How it works (no API key in the browser)

Your server creates a payment link using @paychainly/sdk (API key stays server-side). It returns only the slug to your frontend. @paychainly/react fetches public data and listens for real-time events — no API key needed.

Server (@paychainly/sdk)          Frontend (@paychainly/react)
  creates payment link    ──────▶  usePaymentLink(slug)    → public endpoint, no auth
  returns slug            ──────▶  usePaymentStatus(addr)  → Socket.io, no auth
                                   useCountdown(expiresAt) → pure JS

Quick start — full checkout in 10 lines

import { PaymentCheckout } from '@paychainly/react';

function OrderPage({ slug }: { slug: string }) {
  return (
    <PaymentCheckout
      slug={slug}
      onPaymentConfirmed={({ txHash, amount }) => {
        console.log('Paid!', amount, 'USDT —', txHash);
      }}
    />
  );
}

<PaymentCheckout />

Full checkout from a single slug. Handles loading, QR, address copy, countdown, confirmed, and expired states automatically.

<PaymentCheckout
  slug="abc123"
  apiUrl="https://api.paychainly.com"    // optional
  socketUrl="https://api.paychainly.com" // optional
  theme={{
    colors: {
      primary:    '#6366f1',
      background: '#0f0f0f',
      surface:    '#1a1a1a',
      text:       '#ffffff',
      textMuted:  '#888888',
      border:     '#2a2a2a',
      success:    '#22c55e',
      error:      '#ef4444',
    },
    borderRadius: '16px',
    fontFamily:   'Inter, sans-serif',
  }}
  classNames={{
    container:       'my-checkout',
    qr:              'my-qr',
    address:         'my-address',
    amount:          'my-amount',
    countdown:       'my-countdown',
    confirmedBanner: 'my-confirmed',
    expiredBanner:   'my-expired',
  }}
  onPaymentConfirmed={({ txHash, amount, fromAddress }) => { /* fired once */ }}
  onExpired={() => { /* fired when countdown hits zero */ }}
/>

<WalletAddressView />

Permanent wallet display — no API calls, no Socket.io. Pass the address directly.

<WalletAddressView
  address="0xABC..."
  network="BNB Smart Chain"
  tokenSymbol="USDT"
  amount="50.00"
  label="Your deposit address"
  theme={{ colors: { primary: '#6366f1' } }}
  classNames={{ container: 'my-wallet', networkBadge: 'my-badge' }}
/>

Hooks

import { usePaymentLink, usePaymentStatus, useCountdown } from '@paychainly/react';

function CustomCheckout({ slug }: { slug: string }) {
  const { data, loading, error } = usePaymentLink(slug);
  const { confirmed, txHash, amount } = usePaymentStatus(data?.address);
  const { formatted, expired } = useCountdown(data?.expiresAt);

  if (loading)   return <p>Loading...</p>;
  if (error)     return <p>Error: {error}</p>;
  if (confirmed) return <p>✓ Paid {amount} USDT — {txHash}</p>;
  if (expired)   return <p>Link expired</p>;
  if (!data)     return null;

  return (
    <div>
      <p>Send {data.amount} {data.tokenSymbol} to {data.address}</p>
      <p>Expires in: {formatted}</p>
    </div>
  );
}

usePaymentLink(slug, opts?)

const { data, loading, error, refetch } = usePaymentLink('abc123', {
  apiUrl: 'https://api.paychainly.com',
});
// data: { address, network, tokenSymbol, amount, memo, status, expiresAt }

usePaymentStatus(address, opts?)

const { confirmed, txHash, amount, fromAddress } = usePaymentStatus('0xABC...', {
  socketUrl: 'https://api.paychainly.com',
});

useCountdown(expiresAt)

const { formatted, expired, ms } = useCountdown('2026-12-31T23:59:59Z');
// formatted: "14:32"  expired: false  ms: 872000

Primitives

import { AddressQR, AddressCopy } from '@paychainly/react';

<AddressQR address="0xABC..." size={200} fgColor="#6366f1" bgColor="#1a1a1a" className="my-qr" />
<AddressCopy address="0xABC..." truncate={true} className="my-copy" />

Links

• Dashboard
• API documentation
• Node.js SDK — @paychainly/sdk
• MCP server — @paychainly/mcp