Embeddable Widgets

E-Commerce Checkout Page

"use client"
import { PayDirectProvider, PaymentButton, BalanceDisplay } from "@paydirectv2/react-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 "@paydirectv2/react-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 "@paydirectv2/react-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 "@paydirectv2/react-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 — @paydirectv2/react-widgets (recommended)

Portable, dependency-free React components. Works in any Next.js or React app — no Tailwind, no shadcn/ui, no global CSS required. Ships PayDirectProvider + CheckoutWidget today; additional widgets land in subsequent minor versions.

npm install @paydirectv2/react-widgets

# Style overrides via props
import { PayDirectProvider, CheckoutWidget } from "@paydirectv2/react-widgets";

<PayDirectProvider apiKey={process.env.NEXT_PUBLIC_PAYDIRECT_API_KEY!}>
  <CheckoutWidget
    amount="25.00"
    description="Pro Plan"
    style={{ maxWidth: 480, background: "#101418" }}
  />
</PayDirectProvider>

Option 2 — Copy the styled shadcn widgets

If you already use Tailwind + shadcn/ui and want pixel-matched UI with the PayDirect dashboard, copy the components/widgets/ directory directly from the repo. All widgets (CheckoutWidget, PaymentButton, BalanceDisplay, SwapWidget, PayoutForm, TransactionHistory, ConnectBadge, OnrampWidget) are included.

# 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 3 — Headless SDK (@paydirectv2/sdk)

Skip the widgets entirely and bring your own UI. Full TypeScript types, works in browser and Node.

npm install @paydirectv2/sdk

import PayDirectClient from "@paydirectv2/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.