Embeddable Widgets

E-Commerce Checkout Page

"use client"
import { PayDirectProvider, PaymentButton, BalanceDisplay } from "@/components/widgets";

export default function Checkout({ plan, price }) {
  return (
    <PayDirectProvider apiKey={process.env.NEXT_PUBLIC_PAYDIRECT_API_KEY!}>
      <div className="max-w-md mx-auto space-y-6">
        <h1>Subscribe to {plan}</h1>
        <PaymentButton
          amount={price}
          token="USDC"
          description={`${plan} Plan Subscription`}
          metadata={{ plan, userId: "user_123" }}
          onSuccess={(payment) => {
            // Redirect to success page
            window.location.href = `/success?id=${payment.id}`;
          }}
        />
      </div>
    </PayDirectProvider>
  );
}

Token Swap Platform

"use client"
import { PayDirectProvider, SwapWidget, BalanceDisplay } from "@/components/widgets";

export default function SwapPage() {
  return (
    <PayDirectProvider apiKey={process.env.NEXT_PUBLIC_PAYDIRECT_API_KEY!}>
      <div className="max-w-md mx-auto space-y-6">
        <BalanceDisplay compact />
        <SwapWidget
          defaultTokenIn="USDC"
          defaultTokenOut="ETH"
          walletType="smart_wallet"
          onSuccess={(swap) => {
            toast.success(`Swapped! Tx: ${swap.txHash.slice(0, 10)}...`);
          }}
        />
      </div>
    </PayDirectProvider>
  );
}

Admin Dashboard

"use client"
import {
  PayDirectProvider,
  ConnectBadge,
  BalanceDisplay,
  PayoutForm,
  TransactionHistory,
} from "@/components/widgets";

export default function Dashboard() {
  return (
    <PayDirectProvider apiKey={process.env.NEXT_PUBLIC_PAYDIRECT_API_KEY!}>
      <div className="space-y-6">
        <ConnectBadge variant="status-bar" />

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <BalanceDisplay showSmartWallet autoRefresh={30} />
          <PayoutForm defaultToken="USDC" walletType="smart_wallet" />
        </div>

        <TransactionHistory limit={20} autoRefresh={15} />
      </div>
    </PayDirectProvider>
  );
}

AI Agent Payment Interface

"use client"
import {
  PayDirectProvider,
  BalanceDisplay,
  SwapWidget,
  TransactionHistory,
  ConnectBadge,
} from "@/components/widgets";

export default function AgentWallet() {
  return (
    <PayDirectProvider apiKey={process.env.NEXT_PUBLIC_PAYDIRECT_API_KEY!}>
      <div className="max-w-2xl mx-auto space-y-6">
        <div className="flex items-center justify-between">
          <h1>Agent Wallet</h1>
          <ConnectBadge variant="badge" />
        </div>
        <BalanceDisplay showSmartWallet autoRefresh={10} />
        <SwapWidget walletType="smart_wallet" title="Rebalance Portfolio" />
        <TransactionHistory limit={10} autoRefresh={10} />
      </div>
    </PayDirectProvider>
  );
}

Option 1: Copy the widget files

Copy the components/widgets/ directory into your project. The widgets depend on shadcn/ui components (Card, Button, Input, Select, Badge, Skeleton) and lucide-react icons.

# Copy to your project
cp -r paydirect/components/widgets/ your-app/components/widgets/

# Install required dependencies
npm install lucide-react
npx shadcn@latest add card button input select badge skeleton

Option 2: Install via npm (coming soon)

npm install @paydirect/react-widgets

This package will include all widgets with zero-config theming and tree-shaking support.

Option 3: API-only (headless mode)

Use the PayDirect SDK directly for full control over the UI:

npm install @paydirect/sdk

import PayDirectClient from "@paydirect/sdk";

const client = new PayDirectClient({
  apiKey: process.env.PAYDIRECT_API_KEY!,
});

// All SDK methods available:
// client.createPayment(...)
// client.getBalance()
// client.sendPayout(...)
// client.getSwapQuote(...)
// client.executeSwap(...)
// client.listPayments(...)
// etc.