If you want to quickly integrate Onramp into your web app with an overlay, this is the right place to learn how to do that. This method will bring Onramp up as an overlay on top of your web app.
SDK version: To access the merchant checkout flow, please ensure you are using SDK version 1.3.5 or higher.
Supported Currencies: To view the list of all the fiat currencies supported by Onramp, click here.
Supported Payment Methods: To view the list of all the supported payment methods for various currencies supported by Onramp, click here.
appId Generation for Partners: For the merchant checkout feature, separate onboarding is necessary. If partners wish to utilize both the standard onramp procedure and the merchant checkout process, they must specifically obtain separate appIds for each flow. Please contact our team for assistance in generating the required appIds.
Getting the SDK
Option 1 - you can use npm or yarn to add our SDK to your project.
constonrampInstance=newOnrampWebSDK({ appId:1,// replace this with the appID you got during onboarding process walletAddress:'0x495f519017eF0368e82Af52b4B64461542a5430B',// replace with merchant's wallet address coinCode:'usdt', network:'matic20', walletAddress:'0xf142123879b4611Cd4a30C1E0929217C0d4fB37f', fiatAmount:'100', fiatType: 1 // 1 -> INR || 2 -> TRY || 3 -> AED || 4 -> MXN || 5 -> VND || 6 -> NGN etc. visit Fiat Currencies page to view full list of supported fiat currencies
assetDescription:'CustomAsset',//description about your asset here assetImage:'https://i.insider.com/6123e085de5f560019e85771?width=300' flowType: 3// 1 -> onramp || 2 -> offramp || 3 -> Merchant checkout// ... pass other configs here});// when you are ready to show the widget, call show methodonrampInstance.show();// to close the widget, call close method onrampInstance.close();
Listening to events from SDK
// bind events to the sdk instance created above// listens to all the events of a tx stagesonrampInstance.on('TX_EVENTS', (e) => { /** e:{ type : [ONRAMP_WIDGET_TX_INIT, ONRAMP_WIDGET_TX_SENDING_FAILED, ONRAMP_WIDGET_TX_PURCHASING_FAILED, ONRAMP_WIDGET_TX_FINDING_FAILED, ONRAMP_WIDGET_TX_FINDING, ONRAMP_WIDGET_TX_PURCHASING, ONRAMP_WIDGET_TX_SENDING, ONRAMP_WIDGET_TX_COMPLETED]
data - object with tx data } **/console.log('onrampInstance TX_EVENTS', e);});// listens to all the events of a widget stagesonrampInstance.on('WIDGET_EVENTS', (e) => {/** e:{ type : [ONRAMP_WIDGET_READY, ONRAMP_WIDGET_FAILED, ONRAMP_WIDGET_CLOSE_REQUEST_CONFIRMED], data - object with event data } **/console.log('onrampInstance WIDGET_EVENTS', e);});
ONRAMP_WIDGET_TX_INIT -> when user sees the payment details on screen
ONRAMP_WIDGET_TX_FINDING -> when user submits the reference number for INR deposit
ONRAMP_WIDGET_TX_PURCHASING -> when system finds the deposit against reference / UTR submitted by user
ONRAMP_WIDGET_TX_SENDING -> when system is done purchasing the crypto & starts withdrawal
ONRAMP_WIDGET_TX_COMPLETED -> when system gets the tx hash for the deposit
ONRAMP_WIDGET_TX_SENDING_FAILED -> if Failed before getting the tx hash
ONRAMP_WIDGET_TX_PURCHASING_FAILED -> if failed while making the crypto purchase
ONRAMP_WIDGET_TX_FINDING_FAILED -> if system failed at finding the deposit against the reference / UTR
WIDGET_EVENTS
ONRAMP_WIDGET_READY -> sent when widget is ready for user interaction
ONRAMP_WIDGET_FAILED -> sent when widget render failed due to multiple reasons like wrong params combination or missing params etc.
ONRAMP_WIDGET_CLOSE_REQUEST_CONFIRMED -> sent when widget is closed
ONRAMP_WIDGET_CONTENT_COPIED -> sent when copy to clipboard event is performed in widget, sends along the content copied.
Widget Event Data
The events triggered by the SDK come with an associated data field. This provides partners with a streamlined way to track order statuses. Here's a breakdown of a sample response and its interpretation.
status -> 0 is for unsuccessful request, 1 is for a successful one
orderId -> order id of the transaction
walletAddress -> Onchain wallet address to which the crypto was withdrawn to.
coinId -> Id of the coin (e.g. 54 denotes to USDT)
fiatType -> fiat type used for the transaction
1 -> INR (Indian Rupee)
2 -> TRY (Turkish lira)
3 -> Arab Emirates Dirham (AED)
4 -> Mexican Peso (MXN)
5 -> Vietnamese dong (VND)
paymentType -> payment method in fiat
1 -> Instant transfer (e.g. UPI)
2 -> Bank transfer (e.g. IMPS/FAST)
fiatAmount -> Amount of fiat received by the onramp.money.
expectedCryptoAmount -> amount of crypto estimate shown at the beginning of the transaction
expectedPrice -> expected price estimate shown at the beginning of the transaction
createdAt -> time at which the transaction was created.
appId -> App Id of the merchant/Partner.
status -> denotes the status of the order
-4 -> wrong amount sent
-3 -> bank and kyc name mismatch
-2 -> transaction abandoned
-1 -> transaction timed out
0 -> transaction created
1 -> referenceId claimed
2 -> deposit secured
3, 13 -> crypto purchased
4, 15 -> withdrawal complete
5, 16 -> webhook sent
11 -> order placement initiated
12 -> purchasing crypto
14 -> withdrawal initiated
chainId -> denotes which chain the coin was sent on (e.g. 3 denotes MATIC20)
onRampFee -> fee charged by onramp in pct
clientFee -> fee charged by client
gatewayFee -> fee charged by gateway
gasFee -> Onchain transaction fee charged
actualCryptoAmount -> actual amount of crypto bought at the time of swap/trade.
actualPrice -> actual price at time of swap/trade.
transactionHash -> hash id of the transaction sent/received onchain.
referenceId -> Reference Id entered by the user after completing fiat payment.
kycNeeded -> KYC status of the user
0 -> basic KYC, no additional information required
1 -> KYC needed to process this transaction
Note:
Each instance of the SDK maps directly to a single widget instance. Should you wish to close and subsequently reopen Onramp Instant, a fresh SDK initialization is required.
That's it! Create an instance of the SDK with a configuration object and call the .show() method when you're ready to display Onramp Instant to your user, for detailed customisation refer to .