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

# AnySpend

> Accept payments in any token, on any chain. Swap, checkout, deposit, and fiat onramp.

<img src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/anyspend-example-banner.jpg?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=fe96ac26367dda7f7cf34f3dd82ec577" alt="AnySpend Banner" className="w-full rounded-xl" width="2428" height="840" data-path="images/anyspend-example-banner.jpg" />

## What is AnySpend?

AnySpend is B3's payment infrastructure for crypto. It handles cross-chain routing, token conversion, and fiat onramps so your users can pay with whatever they have in their wallet. You receive the token you want, on the chain you want.

[Try AnySpend in your browser](https://anyspend.com/swap) | [SDK demo (Widget Lab)](https://sdk-demo.anyspend.com/)

## Use cases

<CardGroup cols={2}>
  <Card href="/anyspend/examples">
    <img src="https://mintcdn.com/npclabs/BqgbIxC-QswCxsQH/images/customize-for-swap.png?fit=max&auto=format&n=BqgbIxC-QswCxsQH&q=85&s=beb6de986e2d15fd8612eb3e07f91c9a" className="w-full h-48 object-cover rounded-xl mb-4" width="2752" height="2202" data-path="images/customize-for-swap.png" />

    <h3 className="text-lg font-semibold text-primary block mb-1">Cross-chain swaps</h3>
    Users swap tokens between chains. AnySpend finds the best route and price.
  </Card>

  <Card href="/anyspend/examples">
    <img src="https://mintcdn.com/npclabs/BqgbIxC-QswCxsQH/images/customize-for-checkout.png?fit=max&auto=format&n=BqgbIxC-QswCxsQH&q=85&s=ca8972e369875fddd9523ca7acef7643" className="w-full h-48 object-cover rounded-xl mb-4" width="2752" height="2400" data-path="images/customize-for-checkout.png" />

    <h3 className="text-lg font-semibold text-primary block mb-1">Checkout</h3>
    One-click checkout that accepts any token as payment, with automatic conversion.
  </Card>

  <Card href="/anyspend/examples">
    <img src="https://mintcdn.com/npclabs/BqgbIxC-QswCxsQH/images/customize-for-defi.png?fit=max&auto=format&n=BqgbIxC-QswCxsQH&q=85&s=68a2f026d62d8468d0240629df0e4662" className="w-full h-48 object-cover rounded-xl mb-4" width="2752" height="2400" data-path="images/customize-for-defi.png" />

    <h3 className="text-lg font-semibold text-primary block mb-1">DeFi</h3>
    Execute any onchain contract call -- staking, prediction markets, bonding curves, and more.
  </Card>

  <Card href="/anyspend/examples">
    <img src="https://mintcdn.com/npclabs/BqgbIxC-QswCxsQH/images/customize-for-games.png?fit=max&auto=format&n=BqgbIxC-QswCxsQH&q=85&s=b6f1c8ab7477e0f76272aa00be45d182" className="w-full h-48 object-cover rounded-xl mb-4" width="2752" height="2202" data-path="images/customize-for-games.png" />

    <h3 className="text-lg font-semibold text-primary block mb-1">Games</h3>
    Embeddable in native iOS/Android, Unity, and other surfaces.
  </Card>
</CardGroup>

## How it works

<Steps>
  <Step title="User initiates payment">
    User clicks a payment button or interacts with your UI, choosing their preferred token.
  </Step>

  <Step title="AnySpend quotes a route">
    The routing engine finds the best path to convert their token to the destination token.
  </Step>

  <Step title="Cross-chain execution">
    If needed, tokens are bridged across chains automatically.
  </Step>

  <Step title="Delivery">
    Tokens arrive at the destination address, execute any custom logic, and trigger your success callbacks.
  </Step>
</Steps>

<img src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/anyspend-onramp-anyone.png?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=02f0ff155c973b66e107923513842d75" alt="AnySpend Onramp" className="w-full rounded-xl" width="2880" height="1600" data-path="images/anyspend-onramp-anyone.png" />

## Quick start

```tsx theme={null}
import { AnySpend, AnyspendProvider } from "@b3dotfun/sdk/anyspend/react";
import { B3Provider } from "@b3dotfun/sdk/global-account/react";

import "@b3dotfun/sdk/index.css";

function App() {
  return (
    <B3Provider theme="light" environment="production" partnerId="your-awesome-partner-id">
      <AnyspendProvider>
        <AnySpend />
      </AnyspendProvider>
    </B3Provider>
  );
}

export default App
```

## What's next?

<CardGroup cols={3}>
  <Card title="Installation" icon="download" href="/anyspend/installation">
    Set up AnySpend in your project with npm or pnpm
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/anyspend/components">
    Pre-built components for swaps, checkout, deposits, and more
  </Card>

  <Card title="Examples" icon="code" href="/anyspend/examples">
    Working code for common integration patterns
  </Card>
</CardGroup>

## Getting help

* **Discord**: Join our [Discord community](https://discord.gg/b3dotfun) for support
* **GitHub**: [Report issues](https://github.com/b3-fun/b3/issues) or request features

<div className="flex flex-row gap-4">
  <div className="flex-1">
    <a href="https://x.com/anyspend" target="_blank">
      <img src="https://mintcdn.com/npclabs/BqgbIxC-QswCxsQH/images/follow-updates-on-x.png?fit=max&auto=format&n=BqgbIxC-QswCxsQH&q=85&s=d6259f11a1d40741a98fc45fe5c83eaf" className="w-full h-full object-cover rounded-xl mb-4" width="1344" height="1268" data-path="images/follow-updates-on-x.png" />
    </a>
  </div>

  <div className="flex-1">
    <a href="/anyspend/installation">
      <img src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/anyspend-getting-started.png?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=4ccbb40a2f4b3d21af40f6d097241fd1" className="w-full h-full object-cover rounded-xl mb-4" width="1344" height="1268" data-path="images/anyspend-getting-started.png" />
    </a>
  </div>
</div>