Widget Mode Integration

Widget Mode keeps users on your platform throughout the entire transaction flow via iframe or redirect.

Overview

Widget Mode allows you to embed Rampnow’s on-ramp and off-ramp services directly into your application. Users complete transactions within an overlay or iframe without ever leaving your platform.

iFrame or Redirect

Choose between iFrame (embedded) or Redirect mode

Quick Setup

Get started in minutes with URL parameters

All Payment Methods

Support for all available Rampnow payment modes

Customizable

Pre-fill amounts, currencies and wallet addresses

Want programmatic control with event handling and TypeScript support? Use the Rampnow SDK instead — it wraps Widget Mode with a developer-friendly API and a React hook.

URL Parameters

Configure the widget by passing parameters in the URL:

Parameter	Required	Default	Description
`apiKey`	Required	—	Your unique API key from the Partner Dashboard
`orderType`	Optional	`buy`	Transaction type: `buy` or `sell`
`srcChain`	Required	`buy`: `fiat` `sell`: `ethereum`	Source chain for the asset user is spending
`srcCurrency`	Optional	`buy`: `EUR` `sell`: `ETH`	Currency user is spending (fiat for buy, crypto for sell)
`srcAmount`	Optional	`100`	Amount in source currency
`dstCurrency`	Optional	`buy`: `ETH` `sell`: `EUR`	Currency user receives (crypto for buy, fiat for sell)
`dstChain`	Required	`buy`: `ethereum` `sell`: `fiat`	Destination chain for received currency
`paymentMode`	Optional	Lowest fee	Payment method: `card`, `google_pay`, `apple_pay`, `open_banking`, `sepa`, etc.
`walletAddress`	Optional	—	User’s crypto wallet address
`walletAddressTag`	Optional	—	Wallet tag/memo for supported chains (XRP, XLM, etc.)
`externalOrderId`	Optional	—	Your internal order ID for tracking

iFrame Mode

Embed the widget directly on your page for a seamless experience.

Create Container

Add a container element in your HTML:

<div id="ramp-container"></div>

Construct Widget URL

Build your URL with the required parameters:

https://app.rampnow.io/order/quote?apiKey=YOUR_API_KEY&srcCurrency=EUR&srcAmount=250&dstCurrency=BTC&dstChain=bitcoin&walletAddress=0xYourWalletAddress

Initialize iFrame

Embed the widget using an iframe:

<iframe 
  src="https://app.rampnow.io/order/quote?apiKey=YOUR_API_KEY&srcCurrency=EUR&srcAmount=250&dstCurrency=BTC&dstChain=bitcoin&walletAddress=0xYourWalletAddress" 
  title="Rampnow Widget"
  width="100%"
  height="600px"
  frameborder="0"
  allow="payment">
</iframe>

The widget will be embedded inside your container, providing an in-page experience for users.

Redirect Mode

Redirect users to Rampnow’s hosted page for a simpler integration.

Construct Widget URL

Build your URL with the required parameters:

https://app.rampnow.io/order/quote?apiKey=YOUR_API_KEY&srcCurrency=EUR&srcAmount=250&dstCurrency=BTC&dstChain=bitcoin&walletAddress=0xYourWalletAddress

Redirect User

Redirect the user to the constructed URL:

window.location.href = "https://app.rampnow.io/order/quote?apiKey=YOUR_API_KEY&srcCurrency=EUR&srcAmount=250&dstCurrency=BTC&dstChain=bitcoin&walletAddress=0xYourWalletAddress";

In this example, the user buys 250 EUR worth of BTC on the Bitcoin chain, with crypto sent to 0xYourWalletAddress.

Webhook Integration

Track transaction status in real-time by configuring webhooks in your Rampnow Partner Dashboard.

Set up webhooks to receive notifications when users start or complete transactions.

Ideal For

Platforms wanting a deeply integrated user experience
Partners looking for quick integration with minimal code
Applications needing all available payment modes
Teams wanting consistent, pre-built UI

Benefits

Fastest integration method — no custom UI needed
All payment methods supported out of the box
Pre-fill user data for convenience
Automatic updates without code changes

Next Steps

Rampnow SDK

Upgrade to the SDK for event handling, TypeScript support, and a React hook

Webhooks

Set up server-side transaction notifications

Supported Assets

View supported cryptocurrencies and fiat currencies

API Reference

Explore the complete API documentation

Learn about Rampnow

Resources

Onramp

Offramp

Make Payments

Overview

iFrame or Redirect

Quick Setup

All Payment Methods

Customizable

URL Parameters

iFrame Mode

Redirect Mode

Webhook Integration

When to Use Widget Mode

Next Steps

Rampnow SDK

Webhooks

Supported Assets

API Reference

​Overview

iFrame or Redirect

Quick Setup

All Payment Methods

Customizable

​URL Parameters

​iFrame Mode

​Redirect Mode

​Webhook Integration

​When to Use Widget Mode

​Next Steps

Rampnow SDK

Webhooks

Supported Assets

API Reference

Overview

URL Parameters

iFrame Mode

Redirect Mode

Webhook Integration

When to Use Widget Mode

Next Steps