Hedera React Pay

Plug-and-play React component and hook for accepting HBAR payments using HashConnect (WalletConnect v2).

Features

• HederaPayButton component with light/dark/custom themes.
• useHederaPayment hook for custom payment flows.
• TypeScript-first, Vite library mode, no UI framework dependencies.

Install

npm install hedera-react-pay

Peer dependencies:

• react ^18
• react-dom ^18

Quick Start

import { HederaPayButton } from 'hedera-react-pay';

export const Checkout = () => (
  <HederaPayButton
    projectId="YOUR_WALLETCONNECT_PROJECT_ID"
    receiverAccountId="0.0.1234"
    amount={1}
    network="testnet"
    memo="Order #1001"
    onTransactionSuccess={(txId) => console.log('Paid:', txId)}
    onError={(message) => console.error(message)}
  />
);

Props

interface HederaPayProps {
  projectId: string;           // WalletConnect project id (required)
  receiverAccountId: string;   // e.g. "0.0.1234"
  amount: number;              // HBAR amount
  memo?: string;
  network?: 'testnet' | 'mainnet';
  theme?: 'light' | 'dark' | 'custom';
  text?: string;
  onTransactionSuccess?: (txId: string) => void;
  onError?: (error: string) => void;
  style?: React.CSSProperties;
}

Hook Usage

import { useHederaPayment } from 'hedera-react-pay';

const { sendPayment, loading, error } = useHederaPayment({
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
  network: 'testnet'
});

Local Playground

Create .env:

VITE_WALLETCONNECT_PROJECT_ID=your_project_id

Run:

npm run dev

Open http://localhost:5173.

Build

npm run build

Notes

• HashConnect is deprecated and will be shut down by 2026. Track Hedera WalletConnect updates for long-term support.
• If pairing fails, clear site data for localhost:5173 and reconnect.

License

MIT