View in Marketplace • Documentation • GitHub

@djangocfg/ext-payments

Wallet-style payment system extension for DjangoCFG with Apple-inspired UX.

Part of DjangoCFG — modern Django framework for production-ready SaaS applications.

Features

• 💳 Wallet Page - Apple-style single page with balance and activity
• 💰 Multi-Currency - Support for crypto (USDT, BTC, ETH) and fiat
• 📊 Real-time Balance - Live balance updates via WebSocket
• 🔄 Withdrawals - Request withdrawals with status tracking
• 📜 Transaction History - Full payment and withdrawal history
• 🎨 Ready Components - BalanceHero, ActivityList, PaymentSheet

Install

pnpm add @djangocfg/ext-payments

Exports

| Path | Description | |------|-------------| | @djangocfg/ext-payments | Main exports (WalletPage, components, types) | | @djangocfg/ext-payments/api | API client, fetchers, schemas | | @djangocfg/ext-payments/api/hooks | SWR hooks for API | | @djangocfg/ext-payments/config | Extension config (server-safe) |

Quick Start

Full Wallet Page

// app/wallet/page.tsx
import { WalletPage } from '@djangocfg/ext-payments';

export default WalletPage;

API Hooks

import {
  usePaymentsBalanceRetrieve,
  usePaymentsPaymentsList,
  usePaymentsWithdrawalsList,
  useCreatePaymentsPaymentsCreateCreate,
} from '@djangocfg/ext-payments/api/hooks';

function BalanceCard() {
  const { data: balance, isLoading } = usePaymentsBalanceRetrieve();

  if (isLoading) return <Skeleton />;

  return (
    <div>
      <h2>Balance: ${balance?.amount}</h2>
      <p>Currency: {balance?.currency}</p>
    </div>
  );
}

API Client

import { apiPayments } from '@djangocfg/ext-payments/api';

// Direct API calls
const balance = await apiPayments.payments.balanceRetrieve();
const payments = await apiPayments.payments.paymentsList({ page: 1 });

Individual Components

import {
  BalanceHero,
  ActivityList,
  AddFundsSheet,
  WithdrawSheet,
  PaymentSheet,
  WithdrawalSheet,
} from '@djangocfg/ext-payments';

function CustomWallet() {
  const [addFundsOpen, setAddFundsOpen] = useState(false);

  return (
    <div>
      <BalanceHero
        onAddFunds={() => setAddFundsOpen(true)}
        onWithdraw={() => {}}
      />
      <ActivityList limit={10} />
      <AddFundsSheet
        open={addFundsOpen}
        onOpenChange={setAddFundsOpen}
      />
    </div>
  );
}

Context Provider

import { WalletProvider, useWallet } from '@djangocfg/ext-payments';

// Wrap your app
<WalletProvider>
  <MyWalletPage />
</WalletProvider>

// Use in components
function MyComponent() {
  const { balance, payments, withdrawals, isLoading } = useWallet();
  // ...
}

API Reference

SWR Hooks

| Hook | Description | |------|-------------| | usePaymentsBalanceRetrieve() | Get user balance | | usePaymentsCurrenciesList() | Get available currencies | | usePaymentsCurrenciesEstimateRetrieve(code, { amount }) | Get payment estimate | | usePaymentsPaymentsList({ page, page_size }) | List payments | | usePaymentsPaymentsRetrieve(id) | Get payment details | | usePaymentsWithdrawalsList({ page, page_size }) | List withdrawals | | usePaymentsWithdrawalsRetrieve(id) | Get withdrawal details | | useCreatePaymentsPaymentsCreateCreate() | Create payment mutation | | useCreatePaymentsWithdrawalsCreateCreate() | Create withdrawal mutation | | useCreatePaymentsWithdrawalsCancelCreate() | Cancel withdrawal mutation |

Components

| Component | Description | |-----------|-------------| | WalletPage | Full wallet page with all features | | BalanceHero | Balance display with action buttons | | ActivityList | Combined payments + withdrawals list | | AddFundsSheet | Sheet for adding funds | | WithdrawSheet | Sheet for withdrawing | | PaymentSheet | Payment details sheet | | WithdrawalSheet | Withdrawal details sheet | | CurrencyCombobox | Currency selector |

Types

import type {
  Balance,
  PaymentDetail,
  PaymentList,
  PaymentCreateRequest,
  PaymentCreateResponse,
  WithdrawalDetail,
  WithdrawalList,
  WithdrawalCreateRequest,
  Currency,
  Transaction,
} from '@djangocfg/ext-payments';

License

MIT

Links

• DjangoCFG Documentation
• GitHub