Quick Start

Integrate the Swapper Deposits Widget into your app in minutes.

Prerequisites

Obtain your integratorId: You will need a unique integratorId provided by the Swapper Finance team. This ID identifies your integration and is mandatory.

TypeScript SDK (embedded container)

Install Swapper deposit SDK -Use Node Package Manager npm:

npm i @swapper-finance/deposit-sdk

Use the SwapperIframe class to attach the Iframe

import { SwapperIframe } from '@swapper-finance/deposit-sdk';

const swapper = new SwapperIframe({
  container: '#swapper-container', // or HTMLElement
  integratorId: 'your-integrator-id',
  dstChainId: '8453',
  dstTokenAddr: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
  depositWalletAddress: '0x2A018F2506acaEEE2C10632514Fc5DCa9eE2c28A',
  // optional
  styles: { themeMode: 'light' },
  supportedDepositOptions: ["transferCrypto", "depositWithCash"]
});

TypeScript SDK (modal popup)

Install Swapper deposit SDK -Use Node Package Manager npm:

npm i @swapper-finance/deposit-sdk

Use the openSwapperModal to open a pop-up with an iframe

import { openSwapperModal } from '@swapper-finance/deposit-sdk';

const modal = openSwapperModal({
  integratorId: 'your-integrator-id',
  dstChainId: '8453',
  dstTokenAddr: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
  depositWalletAddress: '0x2A018F2506acaEEE2C10632514Fc5DCa9eE2c28A',
  // optional
  styles: { themeMode: 'dark' },           
  supportedDepositOptions: ["transferCrypto", "depositWithCash"],
  modalStyle: { borderRadius: '16px' },     
  onClose: () => console.log('Closed'),     
});

Embed via iframe (minimal)

Use a simple iframe with a base URL:

https://deposit.swapper.finance

example integration

<iframe
  src="https://swapper-deposit-sdk.web.app?integratorId=YOUR_ID&dstChainId=8453&dstTokenAddr=0x...&depositWalletAddress=0x..."
  title="Swapper Deposits Widget"
  allow="camera"
  sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
></iframe>

Required query params:

• integratorId: your integrator identifier

• dstChainId: destination chain ID (e.g., 8453)

• dstTokenAddr: destination token address (ERC‑20)

• depositWalletAddress: wallet receiving deposits

Optional:

• styles: JSON string for theming (URL‑encoded), e.g. styles=%7B%22themeMode%22%3A%22dark%22%7D

Note:

Both the allow and sandbox properties must be included for the onRamp integration to work properly.