Chat App

Messaging apps can embed payment request widgets directly into the conversation — users pay from any chain without switching apps.

This example shows a friend-to-friend payment flow: Alice sends a payment request, and the recipient can fulfill it with any token from any chain, settling in USDC on Base.

A

Alice online

Today

Hey! Can you send me the payment for dinner last night?

10:24 AM

It was $25 total for my share

10:24 AM

Sure! What chain do you want it on?

10:26 AM

Just use this link, you can pay from any chain:

10:27 AM

Payment Request

10:27 AM

Layout

The chat container uses auto height — no fixed constraint — so the full conversation is always visible. The widget renders inside a chat bubble that takes the full available width. Do not set a min-width on the bubble, as chat layouts need to adapt to narrow mobile screens.

Use setCustomColors() after initialize() to match the widget accent to your chat app’s brand color (e.g. Telegram blue #6AB2F2).

Integration Notes

• Use hideTitle: true to remove the widget header and let the chat bubble provide its own context (e.g. “Payment Request” label above the widget).
• The amount prop locks the payment to a specific value, preventing the sender from modifying it — useful for invoices and split bills.
• The onSwapSuccess callback can mark the message as “Paid” and send a confirmation message in the chat.
• Consider setting the widget theme to match your chat app’s color scheme.

Code Snippet

import { TokenFlightReceive, registerElements } from '@tokenflight/swap';

registerElements();

const receive = new TokenFlightReceive({
  container: '#chat-payment-widget',
  config: {
    target: {
      chainId: 8453,
      address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
    },
    amount: '25',
    theme: 'dark',
    hideTitle: true,
  },
  callbacks: {
    onSwapSuccess: (data) => {
      markMessageAsPaid();
      sendConfirmation('Payment of $25 USDC received!');
    },
  },
});
receive.initialize();

// Match your chat app's brand color
receive.setCustomColors({
  primary: '#6AB2F2',
  'accent-light': 'rgba(106, 178, 242, 0.1)',
  'accent-glow': 'rgba(106, 178, 242, 0.2)',
});