PayDirect
Sign InGet Started
Embeddable React Widgets

Drop-in Crypto
for Any App

7 ready-made widgets that cover payments, swaps, balances, payouts, history, API status, and crypto onramp. Wrap your app in a provider, pick the widgets, ship in 5 minutes.

View DocsSDK Reference

7 Widgets, Every Feature

Each widget is a self-contained React component powered by the PayDirect API.

Payment Button
Accept crypto payments with one component
Swap Widget
Uniswap V3 token swaps with live quotes
Balance Display
Real-time wallet balances with auto-refresh
Payout Form
Send gasless crypto payouts to any address
Transaction History
Live feed of payments and payouts
Connect Badge
API status in badge, bar, or card form
Onramp Widget
Buy crypto with credit card via Coinbase

Live Demo

Enter your PayDirect API key to see the widgets in action with your real data.

Enter your API key above to see live widgets

Don't have a key? Get one here

Integration Patterns

Common layouts showing how widgets compose together

E-Commerce Checkout
Most Popular
Accept crypto payments in 3 lines of code
import { PayDirectProvider, PaymentButton } from "@/components/widgets";

// In your checkout page:
<PayDirectProvider apiKey={process.env.NEXT_PUBLIC_PAYDIRECT_API_KEY!}>
  <PaymentButton
    amount={cartTotal}
    token="USDC"
    description={`Order #${orderId}`}
    metadata={{ orderId, customerId }}
    onSuccess={(payment) => completeOrder(payment.id)}
  />
</PayDirectProvider>
SaaS Dashboard
Full wallet management with balance, payouts, and history
import {
  PayDirectProvider,
  ConnectBadge,
  BalanceDisplay,
  PayoutForm,
  TransactionHistory,
} from "@/components/widgets";

<PayDirectProvider apiKey={process.env.NEXT_PUBLIC_PAYDIRECT_API_KEY!}>
  <header>
    <BalanceDisplay compact />
    <ConnectBadge variant="badge" />
  </header>
  <main className="grid grid-cols-2 gap-6">
    <BalanceDisplay showSmartWallet autoRefresh={30} />
    <PayoutForm defaultToken="USDC" />
  </main>
  <TransactionHistory limit={20} autoRefresh={15} />
</PayDirectProvider>
Token Swap Platform
Swap tokens with Uniswap V3 — gasless for smart wallets
import { PayDirectProvider, SwapWidget, BalanceDisplay } from "@/components/widgets";

<PayDirectProvider apiKey={process.env.NEXT_PUBLIC_PAYDIRECT_API_KEY!}>
  <BalanceDisplay compact />
  <SwapWidget
    defaultTokenIn="USDC"
    defaultTokenOut="ETH"
    walletType="smart_wallet"
    onSuccess={(swap) => toast.success("Swapped! " + swap.txHash)}
  />
</PayDirectProvider>

Start Building

Copy the widgets, get an API key, and ship crypto-powered features today.

Widget DocsGet API Key