Appearance
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.canClose5. Show checkout (QR / links)
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
| Topic | Docs |
|---|---|
| Currency fields & mins | Currencies |
Checkout / canClose / status | Orders & checkout |
| Countdown helpers | Expiry |
| Success screen data | Summary |
| Lifecycle listeners | Events |
| Error codes | Errors |