> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anyspend.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hooks

React hooks for quotes, orders, transfers, onramp, and checkout sessions

Use these hooks when the pre-built components don't fit your UI. They give you direct access to quoting, order creation, status tracking, and fiat onramp logic.

**[Order Hooks](#order-hooks)**

Create orders, get quotes, track payments
**[Payment Hooks](#payment-hooks)**

Direct transfers, gas prices
**[Fiat & Onramp](#fiat--onramp-hooks)**

Stripe, Coinbase, geo-based options

---

## Order hooks

### `useAnyspendQuote`

Get real-time pricing for token swaps and cross-chain transactions. Quotes auto-refresh every 10 seconds.

```tsx title="Basic Usage" icon="chart-line"
import { useAnyspendQuote } from "@b3dotfun/sdk/anyspend";

const {
  anyspendQuote,
  isLoadingAnyspendQuote,
  getAnyspendQuoteError,
  refetchAnyspendQuote
} = useAnyspendQuote(quoteRequest);
```

#### Parameters

Quote configuration object

```typescript title="QuoteRequest" icon="code"
interface QuoteRequest {
  srcChain: number;         // Source chain ID
  dstChain: number;         // Destination chain ID
  srcTokenAddress: string;  // Source token contract address
  dstTokenAddress: string;  // Destination token contract address
  type: "swap" | "custom";  // Order type
  tradeType: "EXACT_INPUT" | "EXACT_OUTPUT";
  amount: string;           // Amount in smallest unit (wei)
}
```

#### Returns

**anyspendQuote**

Quote data with pricing, fees, and expected output

**isLoadingAnyspendQuote**

Loading state

**getAnyspendQuoteError**

Error if quote request failed

**refetchAnyspendQuote**

Manually refresh the quote

#### Example

```tsx title="Swap Quote Preview" icon="exchange-alt"
function SwapQuote() {
  const quoteRequest = {
    srcChain: 1,
    dstChain: 8453,
    srcTokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC on Ethereum
    dstTokenAddress: "0x0000000000000000000000000000000000000000", // ETH
    type: "swap" as const,
    tradeType: "EXACT_INPUT" as const,
    amount: "1000000", // 1 USDC
  };

  const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } =
    useAnyspendQuote(quoteRequest);

  if (isLoadingAnyspendQuote) return <div>Getting best price...</div>;
  if (getAnyspendQuoteError) return <div>Failed to get quote</div>;

  return (
    <div>
      <p>You'll receive: {anyspendQuote?.expectedOutput} ETH</p>
      <p>Network fee: ${anyspendQuote?.networkFeeUsd}</p>
      <p>Service fee: ${anyspendQuote?.serviceFeeUsd}</p>
    </div>
  );
}
```

---

### `useAnyspendCreateOrder`

Create and execute AnySpend orders for crypto payments.

```tsx title="Basic Usage" icon="plus-circle"
import { useAnyspendCreateOrder } from "@b3dotfun/sdk/anyspend";

const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
  onSuccess: (data) => console.log("Order created:", data.data.id),
  onError: (error) => console.error("Failed:", error.message),
});
```

#### Parameters

Configuration with callback functions

```typescript title="UseAnyspendCreateOrderProps" icon="code"
interface UseAnyspendCreateOrderProps {
  onSuccess?: (data: CreateOrderResponse) => void;
  onError?: (error: Error) => void;
  onSettled?: () => void;
}
```

#### Returns

**createOrder**

Function to create an order

**isCreatingOrder**

Loading state

```typescript title="CreateOrderParams" icon="code"
interface CreateOrderParams {
  recipientAddress: string;
  orderType: string;          // "swap", "hype_duel", "custom_exact_in", etc.
  srcChain: number;
  dstChain: number;
  srcToken: Token;
  dstToken: Token;
  srcAmount: string;
  expectedDstAmount?: string;
  creatorAddress?: string;
  metadata?: Record<string, unknown>;
  callbackMetadata?: Record<string, unknown>;
  nft?: NFT & { price: string };
  tournament?: Tournament & { contractAddress: string; entryPriceOrFundAmount: string };
  payload?: any;
}
```

#### Example

```tsx title="Payment Form" icon="credit-card"
function PaymentForm() {
  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
    onSuccess: (data) => {
      router.push(`/payment/${data.data.id}`);
    },
    onError: (error) => {
      toast.error("Payment failed. Please try again.");
    },
  });

  const handlePayment = () => {
    createOrder({
      recipientAddress: merchantAddress,
      orderType: "swap",
      srcChain: 1,
      dstChain: 8453,
      srcToken: { chainId: 1, address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", name: "USD Coin", symbol: "USDC", decimals: 6 },
      dstToken: { chainId: 8453, address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", name: "USD Coin", symbol: "USDC", decimals: 6 },
      srcAmount: "10000000",
      creatorAddress: userAddress,
    });
  };

  return (
    <button onClick={handlePayment} disabled={isCreatingOrder}>
      {isCreatingOrder ? "Processing..." : "Pay 10 USDC"}
    </button>
  );
}
```

---

### `useAnyspendCreateOnrampOrder`

Create orders for fiat onramp payments (Stripe, Coinbase Pay).

```tsx title="Basic Usage" icon="credit-card"
import { useAnyspendCreateOnrampOrder } from "@b3dotfun/sdk/anyspend";

const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
  onSuccess: (data) => {
    // Redirect user to onramp provider
    window.location.href = data.data.oneClickBuyUrl;
  },
});
```

#### Parameters

```typescript title="UseAnyspendCreateOnrampOrderProps" icon="code"
interface UseAnyspendCreateOnrampOrderProps {
  onSuccess?: (data: CreateOrderResponse) => void;
  onError?: (error: Error) => void;
}
```

#### Returns

**createOrder**

Function to create a fiat onramp order

**isCreatingOrder**

Loading state

```typescript title="CreateOnrampOrderParams" icon="code"
type CreateOnrampOrderParams = {
  recipientAddress: string;
  orderType: string;
  dstChain: number;
  dstToken: Token;
  expectedDstAmount?: string;
  srcFiatAmount: string;       // Fiat amount (e.g., "10.00")
  onramp: {
    vendor: "coinbase" | "stripe";
    paymentMethod: string;     // e.g., "card"
    country: string;           // ISO country code
    redirectUrl: string;       // URL to redirect after payment
  };
};
```

---

## Order tracking hooks

### `useAnyspendOrderAndTransactions`

Monitor order status and track associated blockchain transactions in real-time.

```tsx title="Basic Usage" icon="eye"
import { useAnyspendOrderAndTransactions } from "@b3dotfun/sdk/anyspend";

const {
  orderAndTransactions,
  isLoadingOrderAndTransactions,
  getOrderAndTransactionsError
} = useAnyspendOrderAndTransactions(orderId);
```

#### Parameters

Order ID to track

#### Returns

**orderAndTransactions**

Complete order data with transaction details

**isLoadingOrderAndTransactions**

Loading state

**getOrderAndTransactionsError**

Error if fetch failed

```typescript title="OrderWithTransactions" icon="code"
interface OrderWithTransactions {
  data: {
    order: Order;               // Order details and status
    depositTxs: Transaction[];  // User deposit transactions
    relayTx?: Transaction;      // Cross-chain relay transaction
    executeTx?: Transaction;    // Final execution transaction
    refundTxs: Transaction[];   // Refund transactions (if any)
  };
}
```

#### Example

```tsx title="Order Tracker" icon="eye"
function OrderTracker({ orderId }: { orderId: string }) {
  const { orderAndTransactions, isLoadingOrderAndTransactions } =
    useAnyspendOrderAndTransactions(orderId);

  if (isLoadingOrderAndTransactions) return <div>Loading...</div>;

  const { order, depositTxs, executeTx } = orderAndTransactions!.data;

  return (
    <div>
      <h2>Order #{orderId.slice(0, 8)}</h2>
      <p>Status: {order.status}</p>
      {executeTx && (
        <a href={`https://basescan.org/tx/${executeTx.txHash}`}>
          View Transaction
        </a>
      )}
    </div>
  );
}
```

---

### `useAnyspendOrderHistory`

Retrieve paginated order history for a user address.

```tsx title="Basic Usage" icon="clock-rotate-left"
import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend";

const { orderHistory, isLoadingOrderHistory } =
  useAnyspendOrderHistory(creatorAddress, limit, offset);
```

#### Parameters

User wallet address

Number of orders to fetch (max 100)

Pagination offset

---

## Token and chain hooks

### `useAnyspendTokens`

Fetch available tokens for a specific chain with optional search.

```tsx title="Basic Usage" icon="coins"
import { useAnyspendTokens } from "@b3dotfun/sdk/anyspend";

const { tokens, isLoadingTokens } = useAnyspendTokens(chainId, searchQuery);
```

#### Parameters

Chain ID to fetch tokens for

Optional search filter (token name or symbol)

---

### `useGasPrice`

Fetch real-time gas prices for a chain with spike detection.

```tsx title="Basic Usage" icon="gas-pump"
import { useGasPrice } from "@b3dotfun/sdk/anyspend";

const { gasPrice, isLoading, isSpike, refetch } = useGasPrice(chainId);
```

#### Parameters

Chain ID to fetch gas price for

Optional configuration

```typescript title="UseGasPriceOptions" icon="code"
interface UseGasPriceOptions {
  /** Refetch interval in ms (default: 10000) */
  refetchInterval?: number;
  /** Enable/disable the query (default: true if chainId is supported) */
  enabled?: boolean;
}
```

#### Returns

**gasPrice**

Gas price data including fast, standard, and slow estimates

**isLoading**

Loading state

**isSpike**

Whether gas is currently spiking above normal levels

**isError**

Whether there's an error

**error**

Error object

**refetch**

Manually refresh gas price

---

## Payment hooks

### `useDirectTransfer`

Execute direct transfers when source and destination token/chain match, bypassing the swap backend for faster, cheaper transactions.

```tsx title="Basic Usage" icon="arrow-right"
import { useDirectTransfer } from "@b3dotfun/sdk/anyspend";

const { executeDirectTransfer, isTransferring } = useDirectTransfer();
```

#### Returns

**executeDirectTransfer**

Execute a direct transfer. Returns the transaction hash on success.

**isTransferring**

Loading state

```typescript title="DirectTransferParams" icon="code"
interface DirectTransferParams {
  chainId: number;
  tokenAddress: string;
  recipientAddress: string;
  amount: bigint;
  method: CryptoPaymentMethodType; // "CONNECT_WALLET" | "GLOBAL_WALLET"
}
```

#### Example

```tsx title="Direct Transfer" icon="arrow-right"
function DirectTransferButton({ token, recipient, amount }) {
  const { executeDirectTransfer, isTransferring } = useDirectTransfer();

  const handleTransfer = async () => {
    const txHash = await executeDirectTransfer({
      chainId: token.chainId,
      tokenAddress: token.address,
      recipientAddress: recipient,
      amount: BigInt(amount),
      method: CryptoPaymentMethodType.CONNECT_WALLET,
    });

    if (txHash) {
      toast.success("Transfer complete!");
    }
  };

  return (
    <button onClick={handleTransfer} disabled={isTransferring}>
      {isTransferring ? "Transferring..." : "Send Tokens"}
    </button>
  );
}
```

---

## Fiat and onramp hooks

### `useGeoOnrampOptions`

Get all available onramp options based on the user's geographic location. Combines geo detection, Coinbase availability, and Stripe support.

```tsx title="Basic Usage" icon="globe"
import { useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend";

const {
  isOnrampSupported,
  coinbaseOnrampOptions,
  stripeOnrampSupport,
  stripeWeb2Support,
  isLoading,
} = useGeoOnrampOptions(fiatAmount);
```

#### Parameters

The fiat amount for the onramp (e.g., `"50"`)

#### Returns

**isOnrampSupported**

Whether any fiat onramp is available for the user's location

**coinbaseOnrampOptions**

Coinbase Pay configuration and available payment methods

**coinbaseAvailablePaymentMethods**

Available Coinbase payment methods for the user's region

**stripeOnrampSupport**

Whether Stripe redirect flow is supported

**stripeWeb2Support**

Whether Stripe embedded form is supported (`{ isSupport: boolean }`)

**isLoading**

Combined loading state

**geoData**

User's detected geographic data (country, city, timezone)

---

### `useCoinbaseOnrampOptions`

Get Coinbase Pay onramp configuration for fiat payments.

```tsx title="Basic Usage" icon="credit-card"
import { useCoinbaseOnrampOptions } from "@b3dotfun/sdk/anyspend";

const { coinbaseOptions, isLoadingCoinbaseOptions } = useCoinbaseOnrampOptions(country);
```

#### Parameters

ISO country code (e.g., `"US"`)

---

### `useStripeSupport`

Check Stripe payment availability based on the user's location and payment amount.

```tsx title="Basic Usage" icon="stripe"
import { useStripeSupport } from "@b3dotfun/sdk/anyspend";

const {
  stripeOnrampSupport,
  stripeWeb2Support,
  isLoadingStripeSupport,
} = useStripeSupport(usdAmount, visitorData, isLoadingVisitorData);
```

#### Parameters

USD amount for the payment

Fingerprint.js visitor data (optional, for fraud detection)

Whether visitor data is still loading

#### Returns

**stripeOnrampSupport**

Whether Stripe redirect flow is available

**stripeWeb2Support**

Whether Stripe embedded form is available

**isLoadingStripeSupport**

Loading state

---

### `useStripeClientSecret`

Get a Stripe client secret for initializing the embedded Stripe payment form.

```tsx title="Basic Usage" icon="stripe"
import { useStripeClientSecret } from "@b3dotfun/sdk/anyspend";

const { clientSecret, isLoadingClientSecret } = useStripeClientSecret(paymentIntentId);
```

---

## Checkout session hooks

### `useCreateCheckoutSession`

Create a checkout session for backend-tracked payment flows.

```tsx title="Basic Usage" icon="cart-shopping"
import { useCreateCheckoutSession } from "@b3dotfun/sdk/anyspend";

const { mutate: createSession, data, isPending } = useCreateCheckoutSession();

createSession({
  success_url: "https://mysite.com/success/{SESSION_ID}",
  metadata: { sku: "widget-1" },
});
```

---

### `useCheckoutSession`

Query a checkout session with automatic polling. Stops polling when status reaches `complete` or `expired`.

```tsx title="Basic Usage" icon="eye"
import { useCheckoutSession } from "@b3dotfun/sdk/anyspend";

const { data: session, isLoading } = useCheckoutSession(sessionId);
```

#### Parameters

Checkout session ID to track

#### Returns

**data**

Session data including `status`, `order_id`, `metadata`

**isLoading**

Loading state

#### Example

```tsx title="Session Tracker" icon="eye"
function CheckoutSessionTracker({ sessionId }) {
  const { data: session, isLoading } = useCheckoutSession(sessionId);

  if (isLoading) return <div>Loading...</div>;

  switch (session?.data.status) {
    case "open":
      return <div>Waiting for payment...</div>;
    case "processing":
      return <div>Payment received, processing order...</div>;
    case "complete":
      return <div>Order complete! Order ID: {session.data.order_id}</div>;
    case "expired":
      return <div>Session expired. Please create a new checkout.</div>;
  }
}
```

---

## Hook patterns

### Error handling

```tsx title="Error Handling Pattern" icon="shield-exclamation"
function PaymentComponent() {
  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
    onError: (error) => {
      switch (error.message) {
        case "INSUFFICIENT_BALANCE":
          toast.error("Insufficient balance. Please add funds.");
          break;
        case "SLIPPAGE":
          toast.error("Price moved unfavorably. Please try again.");
          break;
        case "QUOTE_EXPIRED":
          toast.info("Getting fresh quote...");
          break;
        default:
          toast.error("Payment failed. Please try again.");
      }
    },
  });

  // ...
}
```

### Composing loading states

```tsx title="Combined Loading States" icon="spinner"
function SwapInterface() {
  const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(quoteRequest);
  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder();

  const isLoading = isLoadingAnyspendQuote || isCreatingOrder;

  return (
    <div>
      {isLoading && <LoadingSpinner />}
      {/* Rest of component */}
    </div>
  );
}
```

---

## Next steps

**[Components](/anyspend/components)**

Pre-built components using these hooks

**[Examples](/anyspend/examples)**

Real-world implementation examples

**[Error Handling](/anyspend/error-handling)**

Comprehensive error handling guide