@apex/payment-widget

Web3 payment widget component built with Wagmi, Reown AppKit, and Viem. A simple, ready-to-use React component for accepting crypto payments.

Installation

npm install @apex/payment-widget

Quick Start

import { ApexPaymentWidget, ApexWagmiProvider } from '@apex/payment-widget'

function App() {
  return (
    <ApexWagmiProvider projectId="your-reown-project-id">
      <ApexPaymentWidget
        amount="0.01"
        to="0xecE2c86490b1214035cb1bbcC9781aE45d29BB97"
      />
    </ApexWagmiProvider>
  )
}

Props

ApexPaymentWidget

• amount (string, optional): Payment amount in ETH. Default: "0.01"
• to (string, optional): Recipient wallet address. Default: "0xecE2c86490b1214035cb1bbcC9781aE45d29BB97"
• className (string, optional): Additional CSS classes

ApexWagmiProvider

• projectId (string, required): Your Reown AppKit project ID
• cookies (string | null, optional): Cookie string for SSR support

Features

• 🔗 Wallet connection (MetaMask, WalletConnect, Coinbase, etc.)
• 💰 Native token payments (ETH, MATIC, etc.)
• 🌐 Multi-chain support (Ethereum, Arbitrum, Polygon)
• 📱 Responsive design
• 🎨 Dark mode support
• ⚡ Built with Wagmi v3 and Reown AppKit

Requirements

• React 18+ or 19+
• A Reown AppKit project ID (Get one here)

License

MIT