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
| 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:
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:
Updated 5 days ago