SDK Display Modes

The SDK opens the same widget in three ways. Pick one per entry point; you can use different modes in different parts of your app.

Mode	How	Best for
Overlay	`init()` without `containerId`	The quickest setup, a “Buy crypto” button anywhere
Embedded	`init()` with `containerId`	A dedicated buy or sell page inside your layout
Redirect	`RampnowSdk.createRedirectUrl()`	Native apps, email links, or opening in a new tab

Overlay mode

Opens the widget as a full-screen modal overlay. This is the default when you don’t pass containerId.

import { RampnowSdk } from '@rampnow/sdk'

const sdk = new RampnowSdk({
  apiKey: 'pk_YOUR_API_KEY',
  orderType: 'buy',
  srcCurrency: 'EUR',
  dstCurrency: 'ETH',
  dstChain: 'ethereum',
})

sdk.init() // Opens the overlay

Call sdk.close() to remove it, or let the user close it from the widget.

Embedded mode

Mounts the widget inside a DOM element you own. Pass the element’s ID as containerId, and size it with width and height.

<div id="rampnow-widget"></div>

import { RampnowSdk } from '@rampnow/sdk'

const sdk = new RampnowSdk({
  apiKey: 'pk_YOUR_API_KEY',
  containerId: 'rampnow-widget',
  width: 450,
  height: 700,
  orderType: 'buy',
  dstCurrency: 'ETH',
  dstChain: 'ethereum',
})

sdk.init()

Redirect mode

Builds a widget URL without opening an iframe. Use it for native apps, email links or server-side flows. createRedirectUrl is static, so you don’t need an instance.

import { RampnowSdk } from '@rampnow/sdk'

const url = RampnowSdk.createRedirectUrl({
  apiKey: 'pk_YOUR_API_KEY',
  orderType: 'buy',
  srcCurrency: 'EUR',
  srcAmount: '250',
  dstCurrency: 'BTC',
  dstChain: 'bitcoin',
  walletAddress: 'bc1qYourWalletAddress',
})

window.open(url, '_blank')

In redirect mode the widget runs outside your page, so browser events don’t reach your app. Track the order with webhooks.

Next: Events & commands

React to order progress and send data back to the widget

Build with AI

Learn about Rampnow

What's Supported

Integrations

Help

Overlay mode

Embedded mode

Redirect mode

Next: Events & commands

​Overlay mode

​Embedded mode

​Redirect mode

Next: Events & commands

Overlay mode

Embedded mode

Redirect mode