Hooks - B3 Docs

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

Create orders, get quotes, track payments

Payment Hooks

Direct transfers, gas prices

Fiat & Onramp

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.

Basic Usage

import { useAnyspendQuote } from "@b3dotfun/sdk/anyspend";

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

Parameters

QuoteRequest

required

Quote configuration object

QuoteRequest

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

QuoteResponse | null

Quote data with pricing, fees, and expected output

boolean

Loading state

Error | null

Error if quote request failed

() => void

Manually refresh the quote

Example

Swap Quote Preview

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.

Basic Usage

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

UseAnyspendCreateOrderProps

Configuration with callback functions

UseAnyspendCreateOrderProps

interface UseAnyspendCreateOrderProps {
  onSuccess?: (data: CreateOrderResponse) => void;
  onError?: (error: Error) => void;
  onSettled?: () => void;
}

Returns

(params: CreateOrderParams) => void

Function to create an order

boolean

Loading state

CreateOrderParams

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

Payment Form

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).

Basic Usage

import { useAnyspendCreateOnrampOrder } from "@b3dotfun/sdk/anyspend";

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

Parameters

UseAnyspendCreateOnrampOrderProps

interface UseAnyspendCreateOnrampOrderProps {
  onSuccess?: (data: CreateOrderResponse) => void;
  onError?: (error: Error) => void;
}

Returns

(params: CreateOnrampOrderParams) => void

Function to create a fiat onramp order

boolean

Loading state

CreateOnrampOrderParams

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.

Basic Usage

import { useAnyspendOrderAndTransactions } from "@b3dotfun/sdk/anyspend";

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

Parameters

string

required

Order ID to track

Returns

OrderWithTransactions | null

Complete order data with transaction details

boolean

Loading state

Error | null

Error if fetch failed

OrderWithTransactions

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

Order Tracker

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.

Basic Usage

import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend";

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

Parameters

string

required

User wallet address

number

required

Number of orders to fetch (max 100)

number

required

Pagination offset

Token and chain hooks

`useAnyspendTokens`

Fetch available tokens for a specific chain with optional search.

Basic Usage

import { useAnyspendTokens } from "@b3dotfun/sdk/anyspend";

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

Parameters

number

required

Chain ID to fetch tokens for

string

Optional search filter (token name or symbol)

`useGasPrice`

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

Basic Usage

import { useGasPrice } from "@b3dotfun/sdk/anyspend";

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

Parameters

number

Chain ID to fetch gas price for

UseGasPriceOptions

Optional configuration

UseGasPriceOptions

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

Returns

GasPriceData | undefined

Gas price data including fast, standard, and slow estimates

boolean

Loading state

boolean

Whether gas is currently spiking above normal levels

boolean

Whether there’s an error

Error | null

Error object

() => void

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.

Basic Usage

import { useDirectTransfer } from "@b3dotfun/sdk/anyspend";

const { executeDirectTransfer, isTransferring } = useDirectTransfer();

Returns

(params: DirectTransferParams) => Promise<string | undefined>

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

boolean

Loading state

DirectTransferParams

interface DirectTransferParams {
  chainId: number;
  tokenAddress: string;
  recipientAddress: string;
  amount: bigint;
  method: CryptoPaymentMethodType; // "CONNECT_WALLET" | "GLOBAL_WALLET"
}

Example

Direct Transfer

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.

Basic Usage

import { useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend";

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

Parameters

string

required

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

Returns

boolean

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

object

Coinbase Pay configuration and available payment methods

array

Available Coinbase payment methods for the user’s region

boolean

Whether Stripe redirect flow is supported

object

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

boolean

Combined loading state

object

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

`useCoinbaseOnrampOptions`

Get Coinbase Pay onramp configuration for fiat payments.

Basic Usage

import { useCoinbaseOnrampOptions } from "@b3dotfun/sdk/anyspend";

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

Parameters

string

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

`useStripeSupport`

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

Basic Usage

import { useStripeSupport } from "@b3dotfun/sdk/anyspend";

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

Parameters

string

USD amount for the payment

VisitorData

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

boolean

Whether visitor data is still loading

Returns

boolean

Whether Stripe redirect flow is available

{ isSupport: boolean }

Whether Stripe embedded form is available

boolean

Loading state

`useStripeClientSecret`

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

Basic Usage

import { useStripeClientSecret } from "@b3dotfun/sdk/anyspend";

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

Checkout session hooks

`useCreateCheckoutSession`

Create a checkout session for backend-tracked payment flows.

Basic Usage

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.

Basic Usage

import { useCheckoutSession } from "@b3dotfun/sdk/anyspend";

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

Parameters

string

required

Checkout session ID to track

Returns

CheckoutSession

Session data including status, order_id, metadata

boolean

Loading state

Example

Session Tracker

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

Error Handling Pattern

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

Combined Loading States

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

Pre-built components using these hooks

Examples

Real-world implementation examples

Error Handling

Comprehensive error handling guide

Order Hooks

Payment Hooks

Fiat & Onramp

​Order hooks

​useAnyspendQuote

​Parameters

​Returns

​Example

​useAnyspendCreateOrder

​Parameters

​Returns

​Example

​useAnyspendCreateOnrampOrder

​Parameters

​Returns

​Order tracking hooks

​useAnyspendOrderAndTransactions

​Parameters

​Returns

​Example

​useAnyspendOrderHistory

​Parameters

​Token and chain hooks

​useAnyspendTokens

​Parameters

​useGasPrice

​Parameters

​Returns

​Payment hooks

​useDirectTransfer

​Returns

​Example

​Fiat and onramp hooks

​useGeoOnrampOptions

​Parameters

​Returns

​useCoinbaseOnrampOptions

​Parameters

​useStripeSupport

​Parameters

​Returns

​useStripeClientSecret

​Checkout session hooks

​useCreateCheckoutSession

​useCheckoutSession

​Parameters

​Returns

​Example

​Hook patterns

​Error handling

​Composing loading states

​Next steps

Components

Examples

Error Handling

Order hooks

`useAnyspendQuote`

Parameters

Returns

Example

`useAnyspendCreateOrder`

Parameters

Returns

Example

`useAnyspendCreateOnrampOrder`

Parameters

Returns

Order tracking hooks

`useAnyspendOrderAndTransactions`

Parameters

Returns

Example

`useAnyspendOrderHistory`

Parameters

Token and chain hooks

`useAnyspendTokens`

Parameters

`useGasPrice`

Parameters

Returns

Payment hooks

`useDirectTransfer`

Returns

Example

Fiat and onramp hooks

`useGeoOnrampOptions`

Parameters

Returns

`useCoinbaseOnrampOptions`

Parameters

`useStripeSupport`

Parameters

Returns

`useStripeClientSecret`

Checkout session hooks

`useCreateCheckoutSession`

`useCheckoutSession`

Parameters

Returns

Example

Hook patterns

Error handling

Composing loading states

Next steps