Skip to content


Here you will find instructions to add the Onramper widget in your website or application. With just a few lines of code, you can allow your users to purchase cryptocurrencies from your web or app.

You can integrate the widget in four different ways:
· Redirect your users to the widget URL. See more.
· Use an iframe or a webview to embed the widget in your application. See more.
· Import a component in your React application. See more.
· Add it to your static webpage using a CDN import. See more.


Using a URL redirect, you can simply redirect your users to a buy page. The widget url is

HTML code snippet
<a href="" target="_blank">
    Buy cryptocurrencies
Live example & customization

Easily customize the buy-page by changing the URL with the available URL parameters.

Redirect customization examples: CodeSandbox


Embed an iframe in your website. This is the easiest way to add the widget on your own page.

HTML code snippet
    title="Onramper widget"
    style="box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);">
Live example & customization

Iframe customization example

URL parameters

You can pass some arguments as query parameters to the URL to customize the widget

Name Format Example Default value
apiKey Alphanumeric string ?apiKey=yourAPIkey (contact us for keys) Not set
defaultCrypto Cryptocurrency code ?defaultCrypto=BTC Not set
defaultAmount Positive integer ?defaultAmount=500 100
defaultAddrs Stringified JSON ?addresses={"BTC":["addr1"],"ETH":["add1r","addr2"]} {}
onlyCryptos Comma-separated list of crypto codes ?onlyCryptos=BTC,ETH,NEO Not set
excludeCryptos Comma-separated list of crypto codes ?excludeCryptos=BTC,ETH,NEO Not set
color Hexadecimal color ?color=346eeb 31a5ff

React component

You can also import the widget as a component in your React application.

# Using yarn
$ yarn add @onramper/widget

# Using npm
$ npm install @onramper/widget
Code snippet
import OnramperWidget from "@onramper/widget";

const userAddresses = {
    "BTC": ["addr1"],
    "ETH": ["add1r","addr2"]

export default function WidgetContainer() {
  return (
        width: "440px",
        height: "595px"
      <OnramperWidget defaultCrypto="BTC" />

  <OnramperWidget defaultAddrs={userAddresses} />;
Live example & customization

While importing the widget as a React component, you can customize it using the component props below. CodeSandbox

Component props

Name Type Example Default value
apiKey String? "yourAPIkey" (contact us for keys) undefined
defaultCrypto String? "ETH" undefined
defaultAmount Number? 500 100
defaultAddrs Object? {"BTC":["ADDR1"], "ETH":["ADDR2"]} {}
onlyCryptos String[]? ["BTC", "ETH", "NEO"] undefined
excludeCryptos String[]? ["ETH", "NEO"] undefined
color String? "#000000" "#31a5ff"



Add an empty div tag to mark the spot where you want to display the widget and add a unique id to it.

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

Then, add three script tags to load the necessary dependencies (React, ReactDOM) and the widget:

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="" crossorigin></script>
<script src="" crossorigin></script>

<!-- Load Onramper's widget. -->
<script src="" crossorigin></script>

After the three scripts load, add the widget to the DOM invoking the initialize function

Code snippet
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>Static website</title>
    <script src="" crossorigin></script>
    <script src="" crossorigin></script>
    <script src="" crossorigin></script>
      body {
        margin: 0;
        height: 100%;
      #onramper-widget {
        width: 440px;
        height: 595px;
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
        margin: 3rem auto;
    <div id="onramper-widget"></div>
Live example


Initialize parameters

Name Type Example Default value
apiKey String? Onramper.initialize("#id", {apiKey:"YourAPIkey"}) (contact us for keys) undefined
defaultCrypto String? Onramper.initialize("#id", {defaultCrypto:"ETH"}) undefined
defaultAmount Number? Onramper.initialize("#id", {defaultAmount:500"}) 100
defaultAddrs Object? Onramper.initialize("#id", {defaultAddrs:{"BTC":["ADDR1"], "ETH":["ADDR2"]}}) {}
onlyCryptos String[]? Onramper.initialize("#id", {onlyCryptos:["BTC", "ETH", "NEO"]}) undefined
excludeCryptos String[]? Onramper.initialize("#id", {excludeCryptos:["ETH", "NEO"]}) undefined
color String? Onramper.initialize("#id", {color:"#000000"}) "#31a5ff"


You can pass the following arguments to customize the widget

Parameter Description
defaultCrypto Select a specific cryptocurrency by default. Should be specified the cryptocurrency code.
defaultAmount Positive integer representing the base amount of fiat to be filled in the widget. Should be indicated in USD, for other currencies, a rounded aproximated conversion will be automatically applied.
addresses A stringified JSON with the wallet addresses of the user. The keys should be the cryptocurrency code and the value a list containing the user addresses. Can be more than one address per wallet and more than one cryptocurrency.
onlyCryptos A comma-separated list of crypto codes to include. Only this cryptos will be shown to the user.
excludeCryptos A comma-separated list of crypto codes to exclude. This cryptos will be excluded from the list of available cryptos..
color Color to change the highlight of the widget. Should be an hex color.