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"
/>

Direct checkout / Skip Onramper's Transaction Screen

You can use your own transaction input screen by skipping the first screen in Onramper's widget and redirecting users directly to the provider’s checkout UI with the skipTransactionScreen parameter. You can specify which onramp should be opened, using txnOnramp. If txnOnramp is not specified, users are automatically directed to the best onramp recommended by our Onramp Ranking Engine based on the parameters that have been provided to the widget.

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