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

# Trading Fees

> Understand Hit's taker fees and why makers never pay trading fees

export const FeeExplorer = () => {
  const hitRed = "#FF0003";
  const hitBlue = "#3F87D0";
  const [feeRate, setFeeRate] = useState(0.032);
  const [selectedPriceCents, setSelectedPriceCents] = useState(50);
  const chartPrices = Array.from({
    length: 99
  }, (_, index) => (index + 1) / 100);
  const tablePrices = [0.01, ...Array.from({
    length: 19
  }, (_, index) => (index + 1) * 0.05), 0.99];
  const selectedPrice = selectedPriceCents / 100;
  const setBoundedFeeRate = value => {
    if (!Number.isNaN(value)) {
      setFeeRate(Math.min(0.1, Math.max(0, value)));
    }
  };
  const formatShares = value => value.toFixed(2).replace(/\.00$/, "").replace(/(\.\d)0$/, "$1");
  const formatShareAmount = value => `${formatShares(value)} ${Number(value.toFixed(2)) === 1 ? "share" : "shares"}`;
  const formatRate = value => value.toFixed(4).replace(/0+$/, "").replace(/\.$/, "");
  const formatMoney = value => {
    if (value === 0) return "$0.00";
    const [whole, decimals = ""] = value.toFixed(4).replace(/0+$/, "").replace(/\.$/, "").split(".");
    return `$${whole}.${decimals.padEnd(2, "0")}`;
  };
  const calculateFees = price => {
    const grossValue = 100 * price;
    const feeValue = 100 * feeRate * Math.min(price, 1 - price);
    const feeShares = feeValue / price;
    const buyEffectiveFeeRate = feeShares / 100;
    const sellEffectiveFeeRate = feeValue / 100;
    return {
      grossValue,
      feeValue,
      feeShares,
      buyEffectiveFeeRate,
      sellEffectiveFeeRate,
      netBuyShares: 100 - feeShares,
      netSellProceeds: grossValue - feeValue
    };
  };
  const selectedFees = calculateFees(selectedPrice);
  const chart = {
    left: 2,
    top: 2,
    width: 96,
    height: 96
  };
  const chartBottom = chart.top + chart.height;
  const effectiveFeeRateMax = feeRate;
  const xFor = price => chart.left + (price - 0.01) / 0.98 * chart.width;
  const yFor = value => chartBottom - (effectiveFeeRateMax > 0 ? value / effectiveFeeRateMax : 0) * chart.height;
  const buyEffectiveFeeRatePoints = chartPrices.map(price => ({
    price,
    value: calculateFees(price).buyEffectiveFeeRate
  }));
  const sellEffectiveFeeRatePoints = chartPrices.map(price => ({
    price,
    value: calculateFees(price).sellEffectiveFeeRate
  }));
  const linePath = points => points.map((point, index) => `${index === 0 ? "M" : "L"} ${xFor(point.price)} ${yFor(point.value)}`).join(" ");
  const xTicks = [0.01, 0.25, 0.5, 0.75, 0.99];
  const yTicks = [1, 0.5, 0];
  const renderChart = ({chartId, eyebrow, title, buyPoints, sellPoints}) => {
    const buyPath = linePath(buyPoints);
    const sellPath = linePath(sellPoints);
    return <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-950">
        <div className="mb-3 flex flex-wrap items-start justify-between gap-4">
          <div>
            <div className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
              {eyebrow}
            </div>
            <div className="mt-1 font-semibold text-gray-950 dark:text-white">
              {title}
            </div>
            <div className="mt-2 flex flex-wrap items-center gap-4 text-xs text-gray-600 dark:text-gray-300">
              <span className="flex items-center gap-1.5">
                <span className="inline-block h-0.5 w-5" style={{
      backgroundColor: hitBlue
    }} />
                BUY
              </span>
              <span className="flex items-center gap-1.5">
                <span className="inline-block w-5 border-t-2 border-dashed" style={{
      borderColor: hitRed
    }} />
                SELL
              </span>
            </div>
          </div>
          <div className="text-right">
            <div className="text-xs text-gray-500 dark:text-gray-400">
              At ${selectedPrice.toFixed(2)}
            </div>
            <div className="mt-1 flex items-center justify-end gap-3 text-sm font-semibold">
              <span className="text-blue-700 dark:text-blue-400">
                BUY {formatRate(selectedFees.buyEffectiveFeeRate)}
              </span>
              <span className="text-red-700 dark:text-red-400">
                SELL {formatRate(selectedFees.sellEffectiveFeeRate)}
              </span>
            </div>
          </div>
        </div>

        <div role="region" aria-label={`${title} chart`}>
          <div className="mb-2 text-xs font-medium text-gray-600 dark:text-gray-300">
            Effective fee rate
          </div>
          <div className="flex min-w-0 gap-2">
            <div className="flex h-56 w-10 shrink-0 flex-col justify-between py-0.5 text-right text-xs text-gray-500 dark:text-gray-400">
              {yTicks.map(fraction => <span key={fraction}>{formatRate(effectiveFeeRateMax * fraction)}</span>)}
            </div>
            <div className="min-w-0 flex-1">
              <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="block h-56 w-full" role="img" aria-labelledby={`${chartId}-title`}>
                <title id={`${chartId}-title`}>
                  BUY and SELL effective fee-rate curves from a share price of $0.01 to $0.99
                </title>
                <desc>
                  The BUY fee rate stays at the selected taker fee rate through $0.50 and then falls. The SELL fee rate peaks at $0.50 and falls toward both price extremes.
                </desc>

                {yTicks.map(fraction => {
      const y = chart.top + (1 - fraction) * chart.height;
      return <line key={fraction} x1={chart.left} x2={chart.left + chart.width} y1={y} y2={y} stroke="currentColor" className="text-gray-200 dark:text-gray-800" strokeDasharray="4 6" vectorEffect="non-scaling-stroke" />;
    })}

                <path d={buyPath} fill="none" stroke={hitBlue} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
                <path d={sellPath} fill="none" stroke={hitRed} strokeWidth="3" strokeDasharray="8 6" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
                <line x1={xFor(selectedPrice)} x2={xFor(selectedPrice)} y1={chart.top} y2={chartBottom} stroke="currentColor" className="text-gray-400 dark:text-gray-600" strokeWidth="1.5" strokeDasharray="4 5" opacity="0.65" vectorEffect="non-scaling-stroke" />
              </svg>
              <div className="relative mt-2 h-4 text-xs text-gray-500 dark:text-gray-400">
                {xTicks.map(price => <span key={price} className="absolute whitespace-nowrap" style={{
      left: `${xFor(price)}%`,
      transform: price === xTicks[0] ? "none" : price === xTicks[xTicks.length - 1] ? "translateX(-100%)" : "translateX(-50%)"
    }}>
                    ${price.toFixed(2)}
                  </span>)}
              </div>
              <div className="mt-1 text-center text-xs font-medium text-gray-600 dark:text-gray-300">
                Share price
              </div>
            </div>
          </div>
        </div>
      </div>;
  };
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="space-y-4 border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900/40">
        <div>
          <div className="text-sm font-semibold text-gray-950 dark:text-white">
            Taker fee rate
          </div>
          <div className="mt-2 flex flex-wrap items-center gap-2">
            {[0.026, 0.032, 0.045].map(preset => <button key={preset} type="button" aria-pressed={feeRate === preset} onClick={() => setFeeRate(preset)} className={`rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-800 ${feeRate === preset ? "text-red-700 dark:text-red-400" : "border-gray-300 text-gray-900 dark:border-gray-700 dark:text-white"}`} style={feeRate === preset ? {
    borderColor: hitRed
  } : undefined}>
                {preset}
              </button>)}
            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
              Custom
              <input type="number" min="0" max="0.1" step="0.001" value={feeRate} onChange={event => setBoundedFeeRate(Number.parseFloat(event.target.value))} className="w-20 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-gray-950 dark:border-gray-700 dark:bg-gray-900 dark:text-white" aria-label="Custom taker fee rate" />
            </label>
          </div>
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-400" aria-live="polite">
          Buying or selling 100 shares with a {feeRate} taker fee rate.
        </p>
      </div>

      <div className="space-y-4 bg-gray-50 p-4 dark:bg-gray-900/30">
        {renderChart({
    chartId: "buy-sell-fee-curves",
    eyebrow: "BUY + SELL",
    title: "Contract-derived taker fee curves",
    buyPoints: buyEffectiveFeeRatePoints,
    sellPoints: sellEffectiveFeeRatePoints
  })}

        <p className="text-sm text-gray-600 dark:text-gray-400">
          BUY shows the fee rate against filled shares. SELL shows the USDC fee per share against its $1 payout. The dollar-equivalent fee is the same, but the effective fee-rate curves differ because the fee is paid in different assets.
        </p>

        <label className="block rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950">
          <div className="mb-3 flex items-center justify-between gap-4 text-sm">
            <span className="font-semibold text-gray-950 dark:text-white">
              Inspect a share price
            </span>
            <span className="font-semibold text-red-700 dark:text-red-400">
              ${selectedPrice.toFixed(2)}
            </span>
          </div>
          <input type="range" min="1" max="99" step="1" value={selectedPriceCents} onChange={event => setSelectedPriceCents(Number.parseInt(event.target.value))} className="w-full" style={{
    accentColor: hitRed
  }} aria-label="Share price in cents" />
        </label>

        <div className="grid gap-3 sm:grid-cols-3" aria-live="polite">
          <div className="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950">
            <div className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
              Gross value
            </div>
            <div className="mt-2 text-xl font-semibold text-gray-950 dark:text-white">
              {formatMoney(selectedFees.grossValue)}
            </div>
          </div>
          <div className="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950" style={{
    borderTopColor: hitBlue,
    borderTopWidth: "3px"
  }}>
            <div className="text-xs font-semibold uppercase tracking-wider text-blue-700 dark:text-blue-400">
              BUY receives
            </div>
            <div className="mt-2 text-xl font-semibold text-blue-700 dark:text-blue-400">
              {formatShareAmount(selectedFees.netBuyShares)}
            </div>
            <div className="mt-1 text-xs text-blue-700 dark:text-blue-400">
              Fee: {formatShareAmount(selectedFees.feeShares)}
            </div>
          </div>
          <div className="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950" style={{
    borderTopColor: hitRed,
    borderTopWidth: "3px"
  }}>
            <div className="text-xs font-semibold uppercase tracking-wider text-red-700 dark:text-red-400">
              SELL receives
            </div>
            <div className="mt-2 text-xl font-semibold text-red-700 dark:text-red-400">
              {formatMoney(selectedFees.netSellProceeds)}
            </div>
            <div className="mt-1 text-xs text-red-700 dark:text-red-400">
              Fee: {formatMoney(selectedFees.feeValue)}
            </div>
          </div>
        </div>
      </div>

      <div className="overflow-y-auto" style={{
    maxHeight: "32rem"
  }} tabIndex={0} role="region" aria-label="100-share BUY and SELL fee table">
        <table className="w-full border-collapse text-left text-sm tabular-nums">
          <caption className="sr-only">
            100-share BUY and SELL fee comparison at selected prices from $0.01 to $0.99 at a {feeRate} taker fee rate
          </caption>
          <thead className="sticky top-0 bg-white dark:bg-gray-950">
            <tr className="border-b border-gray-200 dark:border-gray-800">
              <th scope="col" className="px-4 py-3 font-semibold">Price</th>
              <th scope="col" className="px-4 py-3 font-semibold">Gross value</th>
              <th scope="col" className="px-4 py-3 font-semibold">BUY fee</th>
              <th scope="col" className="px-4 py-3 font-semibold">SELL fee</th>
            </tr>
          </thead>
          <tbody>
            {tablePrices.map(price => {
    const fees = calculateFees(price);
    return <tr key={price} className="border-b border-gray-100 dark:border-gray-900">
                  <th scope="row" className="px-4 py-2 font-medium">${price.toFixed(2)}</th>
                  <td className="px-4 py-2">{formatMoney(fees.grossValue)}</td>
                  <td className="px-4 py-2 text-blue-700 dark:text-blue-400">{formatShareAmount(fees.feeShares)}</td>
                  <td className="px-4 py-2 text-red-700 dark:text-red-400">{formatMoney(fees.feeValue)}</td>
                </tr>;
  })}
          </tbody>
        </table>
      </div>
    </div>;
};

Hit uses a maker-taker model to encourage liquidity in the order book. **Makers never pay trading fees.** Only takers may pay a fee, and the applicable rate is shown before you trade.

### Maker vs Taker Fees

**Maker**
A maker is a trader who adds liquidity to the [order book](/markets/order-book) by placing a [limit order](/markets/limit-orders) that doesn't immediately match with an existing order. Makers pay **no trading fees**.

**Taker**
A taker is a trader who removes liquidity from the order book by placing an order that immediately matches with an existing order. This includes [market orders](/markets/market-orders) and limit orders that cross the spread. Takers may incur fees that scale with market certainty.

<Info>
  **Maker fees are always zero.** The taker fee rate depends on the market's
  category and is shown upfront on the trading ticket.
</Info>

### Fee Rates by Category

The API returns taker and maker fee rates as decimals.

| Category | Taker Fee Rate | Maker Fee Rate |
| :------- | :------------- | :------------- |
| Hit Live | 0.032          | 0              |
| Crypto   | 0.045          | 0              |
| Culture  | 0.032          | 0              |
| Esports  | 0.032          | 0              |
| Finance  | 0.026          | 0              |
| Politics | 0.026          | 0              |
| Science  | 0.026          | 0              |
| Sport    | 0.032          | 0              |
| Tech     | 0.026          | 0              |
| Other    | 0.032          | 0              |

### How Taker Fees Scale

When a market has taker fees, the fee depends on the share price. For the same number of shares at the same price, a BUY and SELL have the same dollar-equivalent fee, but the fee is paid differently.

```text theme={null}
Fee value = shares × taker fee rate × min(p, 1 - p)
BUY fee shares = fee value ÷ p
BUY effective fee rate = BUY fee shares ÷ shares
SELL effective fee rate = fee value ÷ shares
BUY shares received = shares - BUY fee shares
SELL USDC received = (shares × p) - fee value
```

Here, `p` is the share price from `0.01` to `0.99`. The API returns the taker fee rate as a decimal, such as `0.032`. The SELL effective fee rate compares the USDC fee per share with that share's \$1 maximum payout.

<Info>
  The calculator, chart, and table mirror Hit's smart-contract fee branches:
  BUY fees are charged on outcome-token proceeds and SELL fees are charged on
  collateral proceeds. Displayed values are rounded for readability; on-chain
  integer division rounds down to the asset's smallest unit.
</Info>

**Buying Fees**

* At prices ≤ 50¢: The effective BUY fee rate equals the selected taker fee rate. At `0.032`, a 100-share fill has a 3.2-share fee.
* At prices > 50¢: Fees decrease as the outcome becomes more certain.
* The fee is deducted from the shares you receive.

**Selling Fees**

* The fee in USDC peaks at 50¢.
* The USDC fee decreases symmetrically toward both 0¢ and 100¢.
* The fee is deducted from the USDC proceeds you receive.

#### Interactive 100-Share BUY and SELL Example

Choose a taker fee rate and share price to compare buying and selling the same 100 shares. The table shows \$0.01, five-cent increments from \$0.05 to \$0.95, and \$0.99.

<FeeExplorer />

<Note>
  The chart and table assume all 100 shares fill at one price. If an order
  fills at several prices, Hit calculates each fill separately and adds the fees.
</Note>

### Multiple Price Levels

If your order fills at multiple prices (common with [market orders](/markets/market-orders)), each portion is charged at its own price level. The final fee is the sum across all fills.

The trading ticket shows an estimated fee before you confirm. The actual fee is calculated based on your final fill prices.

### Fee Transparency

All fees are shown on the trading ticket before you place any order:

1. Taker fee rate for the market's category.
2. Estimated final fee based on your order.
3. Net shares or proceeds after fees.

**No fill, no fee**: orders that don't execute don't incur any fees.

### Fee Strategy

**Want to minimize fees?**

* Use [limit orders](/markets/limit-orders) that sit in the order book. Makers never pay trading fees.
* Avoid trading at 50% where uncertainty and fees are highest.

**Need immediate execution?**

* [Market orders](/markets/market-orders) execute instantly and may incur taker fees.
* The fee is shown before you confirm.