Hedera React Pay

Plug-and-play React component and hook for accepting HBAR payments via WalletConnect (powered by @hashgraph/hedera-wallet-connect).

v0.2.0 — migrated from the deprecated HashConnect to the official @hashgraph/hedera-wallet-connect DAppConnector, which is the Hedera-endorsed WalletConnect integration.

Features

• HederaPayButton — drop-in button with light / dark / custom themes.
• useHederaPayment — hook for fully custom payment flows.
• Automatic session restore on page reload.
• TypeScript-first, zero UI framework dependencies.

Install

npm install hedera-react-pay

Peer dependencies (installed automatically by npm v7+):

npm install react react-dom

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={(msg) => console.error(msg)}
  />
);

Get a free WalletConnect project ID at cloud.reown.com.

Props

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

Hook Usage

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

function PayPage() {
  const { accountId, isConnected, loading, error, connectWallet, sendPayment } =
    useHederaPayment({ projectId: 'YOUR_PROJECT_ID', network: 'testnet' });

  return (
    <>
      {!isConnected && (
        <button onClick={connectWallet} disabled={loading}>
          Connect Wallet
        </button>
      )}
      {isConnected && (
        <button
          onClick={() =>
            sendPayment({ receiverAccountId: '0.0.1234', amount: 1, memo: 'Test' })
          }
          disabled={loading}
        >
          Send 1 HBAR
        </button>
      )}
      {error && <p>{error}</p>}
    </>
  );
}

Hook Return Values

interface UseHederaPaymentResult {
  accountId: string | null;      // connected Hedera account, e.g. "0.0.12345"
  isConnected: boolean;
  loading: boolean;
  error: string | null;
  connectWallet: () => Promise<string>;  // resolves with accountId
  sendPayment: (params: {
    receiverAccountId: string;
    amount: number;
    memo?: string;
  }) => Promise<string>;                 // resolves with transaction ID
}

Supported Wallets

Any wallet that supports WalletConnect v2 + Hedera HIP-820, including:

• HashPack
• Blade Wallet
• Kabila

Local Playground

Create .env:

VITE_WALLETCONNECT_PROJECT_ID=your_project_id

Run:

npm run dev

Open http://localhost:5173.

Build

npm run build

Migration from v0.1.x

v0.2.0 replaces the hashconnect dependency with @hashgraph/hedera-wallet-connect. The component and hook API is unchanged — no code changes are required in your app.

License

MIT