Onramper widget
Onramper allows your users to buy cryptocurrency with fiat, directly from your website or app.
For docs and examples visit: docs.onramper.com
Installation
# Using yarn
$ yarn add @onramper/widget
# Using npm
$ npm install @onramper/widget
Code snippet
import OnramperWidget from "@onramper/widget";
export default function OnramperWidgetContainer() {
return (
<div style={{maxWidth: '482px', maxHeight: '660px', height: '100%', width: '100%'}}>
<OnramperWidget
color="#0316C1"
defaultAmount={200}
defaultCrypto="BTC"
API_KEY="pk_live_YOUR-API-KEY"
/>
</div>
)
}
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 |
---|---|---|---|
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 |
onlyGateways | String[]? | ["Moonpay", "Wyre"] |
undefined |
color | String? | "#000000" |
"#31a5ff" |
API_KEY | String | "pk_live_YOUR-API-KEY" |
- |
selectGatewayBy | String | "performance" |
"price" |
Customize
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.. |
onlyGateways | A comma-separated list of gateways to enable. Only these gateways will be shown to the user for selection. |
color | Color to change the highlight of the widget. Should be an hex color. |