Receive Mode

Use receive mode when the user should end with a fixed amount of a target token. Configure tradeType: "EXACT_OUTPUT" plus amount.

Widget demo without wallet connection

Should you read this?

Read this page for checkout, deposits, subscriptions, or any flow where your app decides the final amount.

If the user should choose the payment amount, read Swap Mode.

Imperative API

import { TokenFlightWidget } from '@tokenflight/swap';

const widget = new TokenFlightWidget({
  container: '#widget',
  config: {
    toToken: {
      chainId: 8453,
      address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
    },
    tradeType: 'EXACT_OUTPUT',
    amount: '100',
    theme: 'dark',
    locale: 'en-US',
  },
  callbacks: {
    onDepositSuccess: (data) => console.log('Purchase success:', data),
    onDepositError: (data) => console.log('Purchase error:', data),
  },
});

widget.initialize();

Declarative (HTML)

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

<script type="module">
  import { registerWidgetElement } from '@tokenflight/swap/widget';

  registerWidgetElement();
</script>

Common Options

Attribute / property	Description
to-token / toToken	Destination token in CAIP-10, JSON, or object format
trade-type / tradeType	Must be EXACT_OUTPUT for receive mode
amount	Human-readable amount the user should receive
from-token / fromToken	Optional preferred payment token
recipient	Optional custom recipient address
icon	Optional custom token icon

Callbacks

Callback	Payload	Description
onDepositSuccess	SwapSuccessData	Fired after a successful purchase
onDepositError	SwapErrorData	Fired when a purchase fails
onQuoteReceived	QuoteResponse	Fired when a new price quote is fetched
onWalletConnected	WalletConnectedData	Fired when a wallet connects

Runtime Methods

widget.setTheme('light');
widget.setCustomColors({ '--tf-primary': '#ff6600', '--tf-bg': '#1a1a2e' });
widget.destroy();

Next step

• Need wallet signing? Read AppKit, wagmi, or ethers.
• Need card checkout too? Read Card Payments.
• Need server-side proof? Read Backend Verification.