Choose integration method

How do you want your user experience to be?

There are two approaches to including the widget in your website, exchange, wallet or dApp.

  • Button opening a new link to Onramper
  • Embedding an iFrame

Button opening a new link to Onramper

You can build a button on your side and point it to an Onramper domain with your API key included. This will open a new tab for the user with a checkout experience hosted on Onramper.

You code would end up looking something like this:

<a href="https://buy.onramper.dev?apiKey=pk_prod_01HETEQF46GSK6BS5JWKDF31BT&mode=buy" target="_blank" class="button">Buy Crypto</a>

Embedding an iFrame

Most of our partners prefer to have the checkout experience embedded inside their own UI. You can achieve this by embedding the iFrame. The snippet to add to your codebase would look something like this:

<iframe        
  src="https://buy.onramper.dev?apiKey=pk_prod_01HETEQF46GSK6BS5JWKDF31BT&mode=buy"
  title="Onramper Widget"
  height="630px"
  width="420px"
  allow="accelerometer; autoplay; camera; gyroscope; payment; microphone"
/>

Skip Transaction Screen

You can use your own transaction screen by skipping our widget transaction and redirecting users directly to the provider’s checkout UI. The onramp selection is handled automatically by our dynamic routing algorithm. To utilize this flow, you need to supply transaction details as URL parameters prefixed with txn..., unlike the standard widget parameters. The following parameters should be used:


Onramp Transactions

ParameterRequiredDescription
skipTransactionScreenYesIndicates whether to skip the transaction screen (true/false).
txnTypeNoIndicates the transaction type (e.g. buy).
txnAmountYesSpecifies the requested fiat amount for Onramp transactions.
txnFiatYesSpecifies the Fiat Currency ID for Onramp transactions.
txnCryptoYesHolds the Crypto Currency ID for Onramp transactions.
txnPaymentMethodNoThe Payment Method ID used for the transaction.
txnOnrampNoThe ID of the Provider processing the transaction
txnRedirectNoAllows direct redirection to the provider’s widget.

Here is an example URL using the query parameters:

<https://buy.onramper.com/?skipTransactionScreen=true&txnAmount=300&txnFiat=eur&txnCrypto=btc&txnPaymentMethod=creditcard&txnRedirect=true>


Offramp Transactions

ParameterRequiredDescription
skipTransactionScreenYesIndicates whether to skip the transaction screen (true/false).
txnTypeYesIndicates the transaction type (e.g. sell).
txnAmountYesSpecifies the requested crypto amount for Offramp transactions.
txnFiatYesSpecifies the Fiat Currency ID for Offramp transactions.
txnCryptoYesHolds the Crypto Currency ID for Offramp transactions.
txnPaymentMethodNoThe Payment Method ID used for the transaction.
txnOfframpNoThe ID of the Provider processing the transaction
txnRedirectNoAllows direct redirection to the provider’s widget.

Here is an example URL using the query parameters:

https://buy.onramper.com/?skipTransactionScreen=true&txnType=sell&txnAmount=0.08&txnFiat=eur&txnCrypto=eth&txnPaymentMethod=sepabanktransfer&txnRedirect=true