Skip to content

Example

End-to-end Exchange Pay deposit with client.exchangePay: pick a provider, create an order, show checkout, wait for completion.

Session must be loaded and active before createOrder. After a completed payment, call restartSession() before starting again.

1. Set up the client

ts
import {
  createSwappedConnectClient,
  IntegrationProvider,
  IntegrationProviderType,
  Network,
  TokenSymbol,
} from '@swapped/connect-sdk';

const client = createSwappedConnectClient({
  sessionId: 'your-session-id', // from your backend
});

await client.loadSession();

2. Pick an Exchange Pay provider

Filter payment methods by type: exchange_pay. Same exchange brands can also appear as wallets — always check type.

ts
const methods = await client.paymentMethods.get({
  type: IntegrationProviderType.ExchangePay,
});

// User picks one in your UI — Binance shown here
const method = methods.find(
  item => item.provider === IntegrationProvider.Binance,
);

if (!method || !client.exchangePay.isExchangePayProvider(method.provider)) {
  throw new Error('No Exchange Pay provider available');
}

const provider = method.provider;

3. Load currencies and validate amount

Use minAmountFiat for the amount field. Pass symbol + blockchain into createOrder (enums, not raw strings).

ts
const currencies = await client.exchangePay.getSupportedCurrencies({
  provider,
});

const currency = currencies.find(
  item =>
    item.symbol === TokenSymbol.USDT && item.blockchain === Network.Ethereum,
);

if (!currency) {
  throw new Error('Selected currency is not available');
}

const amount = '25.00'; // USD string from your form

if (Number(amount) < currency.minAmountFiat) {
  throw new Error(`Minimum is $${currency.minAmountFiat}`);
}

4. Create the order

Creating a new order closes a previous closable active order first (or clears local state if it could not be closed).

ts
const order = await client.exchangePay.createOrder({
  provider,
  amount,
  token: currency.symbol,
  blockchain: currency.blockchain,
});

// order.id, order.expiresAt, order.checkout, order.canClose

Checkout shape varies by provider — always null-check links. Prefer events for live status; use getOrder() only when you need an on-demand refresh.

ts
const { qr, url, mobileUrl } = order.checkout;

if (qr?.type === 'image') {
  // Ready-made image (data URI / URL) — e.g. Bybit
  // <img src={qr.value} alt="Pay QR" />
} else if (qr?.type === 'url') {
  // Encode qr.value as a QR in your UI — Binance, KuCoin, Gate, KrakPay, OKX
}

if (url) {
  // Desktop checkout link (may be null — OKX is often QR-only)
}

if (mobileUrl && mobileUrl !== url) {
  // mobileUrl is for mobile devices only
}

// If canClose is true, show a Cancel control — or call closeOrder() when the user goes back
if (order.canClose) {
  // await client.exchangePay.closeOrder()
}

6. Wait for completion or expiry

ts
const offUpdated = client.exchangePay.onOrderUpdated(status => {
  // 'PENDING' | 'PAY_SUCCESS' | 'AWAITING_PROVIDER_FUNDS'
  console.log('status', status.status);
});

const offCompleted = client.exchangePay.onOrderCompleted(() => {
  // Success when PAY_SUCCESS or transactionHash is present
  const summary = client.exchangePay.getCompletedTransactionSummary();
  console.log(summary);
  // Show success UI, then restart before another payment
  // await client.restartSession()
});

const offExpired = client.exchangePay.onOrderExpired(() => {
  // Active order cleared — send user back to the amount form
});

// Optional: drive a countdown from expiresAt
const expiresAt = client.exchangePay.getActiveOrderExpiresAt();

// When leaving the page / tearing down:
// offUpdated(); offCompleted(); offExpired();

Full walkthrough

Minimal script that runs the happy path for Binance Pay (replace UI prompts with your own form).

ts
import {
  createSwappedConnectClient,
  IntegrationProvider,
  IntegrationProviderType,
  Network,
  TokenSymbol,
} from '@swapped/connect-sdk';

const client = createSwappedConnectClient({ sessionId: 'your-session-id' });
await client.loadSession();

const methods = await client.paymentMethods.get({
  type: IntegrationProviderType.ExchangePay,
});
const method = methods.find(m => m.provider === IntegrationProvider.Binance);
if (!method || !client.exchangePay.isExchangePayProvider(method.provider)) {
  throw new Error('Binance Pay not available');
}

const currencies = await client.exchangePay.getSupportedCurrencies({
  provider: method.provider,
});
const currency = currencies.find(
  c => c.symbol === TokenSymbol.USDT && c.blockchain === Network.Ethereum,
);
if (!currency) throw new Error('USDT on Ethereum unavailable');

const order = await client.exchangePay.createOrder({
  provider: method.provider,
  amount: '25.00',
  token: currency.symbol,
  blockchain: currency.blockchain,
});

// Render order.checkout.qr / url / mobileUrl in your UI

client.exchangePay.onOrderCompleted(async () => {
  const summary = client.exchangePay.getCompletedTransactionSummary();
  console.log('paid', summary);
  await client.restartSession();
});

client.exchangePay.onOrderExpired(() => {
  console.log('order expired — create a new one');
});

Next

TopicDocs
Currency fields & minsCurrencies
Checkout / canClose / statusOrders & checkout
Countdown helpersExpiry
Success screen dataSummary
Lifecycle listenersEvents
Error codesErrors