Examples
Use examples after you know the flow you want to build. Flow pages explain product behavior; examples show how to implement it in your stack.
Recommended read order:
- Quickstart
- Choose your flow
- Why wallet adapters, unless your flow is card-only
- A framework example below
- Troubleshooting if anything does not render, quote, or connect
Start here
Choose your APIDecide between the HTML tag and the JavaScript class.Choose your flowDecide between swap, fixed-amount receive, and card payments.
Framework examples
Use these when you want copy-paste app structure.
Vanilla JSPlain HTML and JavaScript. Best first read for the custom element.ReactClient-side TokenFlightWidget setup with cleanup, callbacks, and adapters.Next.jsClient component setup for App Router and Pages Router.VueVue 3 and Nuxt patterns with cleanup and custom elements.
Flow examples
Use these when you still need product-level flow details.
Card-only checkout can skip wallet setup. Swap, receive with crypto, and mixed crypto/card checkout need a wallet adapter before a user can finish wallet signing.
SwapEXACT_INPUT: the user chooses what they pay.ReceiveEXACT_OUTPUT: your app fixes what should arrive.Card PaymentsCard-only or mixed crypto/card checkout.
Wallet examples
Wallet setup is required for crypto payments and mixed crypto/card checkout. It is not required for card-only checkout.
AppKitWalletConnect-style UX for first-time wallet setup.wagmiEVM apps already using wagmi, RainbowKit, or ConnectKit.ethersInjected EIP-1193 wallets such as MetaMask.Custom Wallet AdapterBring your own wallet modal, provider, or signing layer.