# Quick Start

### 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

```typescript
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

```typescript
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:**

```typescript
https://deposit.swapper.finance
```

**example integration**

```html
<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.