Choose integration method

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

Parameter	Required	Description
`skipTransactionScreen`	Yes	Indicates whether to skip the transaction screen (true/false).
`txnType`	No	Indicates the transaction type (e.g. buy).
`txnAmount`	Yes	Specifies the requested fiat amount for Onramp transactions.
`txnFiat`	Yes	Specifies the Fiat Currency ID for Onramp transactions.
`txnCrypto`	Yes	Holds the Crypto Currency ID for Onramp transactions.
`txnPaymentMethod`	No	The Payment Method ID used for the transaction.
`txnOnramp`	No	The ID of the Provider processing the transaction
`txnRedirect`	No	Allows 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

Parameter	Required	Description
`skipTransactionScreen`	Yes	Indicates whether to skip the transaction screen (true/false).
`txnType`	Yes	Indicates the transaction type (e.g. sell).
`txnAmount`	Yes	Specifies the requested crypto amount for Offramp transactions.
`txnFiat`	Yes	Specifies the Fiat Currency ID for Offramp transactions.
`txnCrypto`	Yes	Holds the Crypto Currency ID for Offramp transactions.
`txnPaymentMethod`	No	The Payment Method ID used for the transaction.
`txnOfframp`	No	The ID of the Provider processing the transaction
`txnRedirect`	No	Allows 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