Choose your flow

Start with the user goal. Then choose the widget mode.

User goal	Flow	Main config
Checkout or pay an invoice	Receive	tradeType: 'EXACT_OUTPUT' plus amount
The user chooses how much to pay and sees the output	Swap	default EXACT_INPUT
The user wants to bridge or swap tokens	Swap	default EXACT_INPUT
Your app wants credit card checkout	Card payments	methods plus a fiat API endpoint

Card-only checkout can start without a wallet adapter. Add a wallet adapter when the user can pay with crypto, or when the flow offers both crypto and card tabs. See Why wallet adapters.

Swap: user controls the input

Use swap mode when the user should decide the input token and amount.

<tokenflight-widget
  theme="dark"
  from-token="eip155:1:0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
></tokenflight-widget>

Use it for:

• In-app token swaps.
• Bridge-like flows where the user picks the amount.
• Power-user pages where price discovery matters.

Go deeper: Swap Flow.

Receive: your app controls the output

Use receive mode when your app needs a fixed amount of a target token.

<tokenflight-widget
  theme="dark"
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  trade-type="EXACT_OUTPUT"
  amount="100"
></tokenflight-widget>

Use it for:

• Checkout.
• Deposits.
• Subscriptions.
• Any flow where the recipient amount must be exact.

Go deeper: Receive Flow.

Card payments: crypto, card, or both

Use card payments when users should be able to pay through a fiat on-ramp.

Card-only path

If methods='["card"]', the card provider can open without a crypto wallet adapter. If methods includes "crypto", add a wallet adapter for the crypto tab.

<tokenflight-widget
  theme="dark"
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  trade-type="EXACT_OUTPUT"
  amount="100"
  methods='["crypto","card"]'
></tokenflight-widget>

Use it for:

• Checkout pages with non-crypto users.
• Deposit pages that support both wallet and card payments.
• User onboarding flows.

In receive mode, mixed crypto/card checkout opens with the method picker.

Go deeper: Card Payments.

Key concepts

• EXACT_INPUT: the user fixes what they pay; the output can change with route prices.
• EXACT_OUTPUT: your app fixes what should arrive; the widget quotes what the user must pay.
• fromToken: the token the user starts with.
• toToken: the token your app or the user should receive.
• walletAdapter: the bridge between the widget and the user's wallet.

Next step

Recommended path:

1. If you want checkout, open Receive Flow or Card Payments.
2. If you want a token swap page, open Swap Flow.
3. Add a wallet adapter unless your flow is card-only.
4. Pick your framework in Examples.
5. For payments, read Backend Verification before launch.