React Native SDK

The Onramp React Native SDK is designed for integrating Onramp's payment gateway into React Native applications. This SDK simplifies the process of enabling cryptocurrency transactions within your mobile app, ensuring smooth fiat-to-crypto and crypto-to-fiat transitions for your users.

General Requirements

Here are the minimum requirements to use the Onramp SDK:

  • iOS 12.0 or higher

  • Android minSdkVersion 21

  • Android compileSdkVersion 33

Installation

You can install the SDK using Yarn, and there are additional steps required for iOS:

Installation with Yarn

yarn add @onramp.money/onramp-react-native-sdk

iOS Extra Steps after Installing

After the installation is complete on iOS, execute one of the following commands:

npx pod-install

or

cd ios
pod install

To enable UPI (Unified Payments Interface) intent in your iOS application, add the following code to the LSApplicationQueriesSchemes section in your Info.plist file:

For UPI (onramp):

<key>LSApplicationQueriesSchemes</key>
<array>
        <string>paytmmp</string>
        <string>gpay</string>
        <string>bhim</string>
        <string>upi</string>
        <string>phonepe</string>
        ...
</array>

For Wallet Connect (offramp):

<key>LSApplicationQueriesSchemes</key>
<array>
    ...
    <string>wc</string>
    <string>metamask</string>
    <string>trust</string>
    <string>safe</string>
    <string>rainbow</string>
    <string>uniswap</string>
    <string>zerion</string>
    <string>imtokenv2</string>
</array>

Usage

Initializing the SDK

To get started, import the necessary modules:

import {startOnrampSDK, onRampSDKNativeEvent} from '@onramp.money/onramp-react-native-sdk';

Initialize the SDK by calling the startOnrampSDK function and providing the required configuration parameters:

startOnrampSDK({
    appId: 1, // Replace this with the appID obtained during onboarding
    walletAddress: '0x49...436B', // Replace with the user's wallet address
    flowType: 1, // 1 -> Onramp, 2 -> Offramp, 3 -> Merchant checkout
    fiatType: 1, // 1 -> INR, 2 -> TRY (Turkish Lira) etc. visit Fiat Currencies page to view full list of supported fiat currencies
    paymentMethod: 1, // 1 -> Instant transfer (UPI), 2 -> Bank transfer (IMPS/FAST)
    // ... Include other configuration options here
});

Note:

  • 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.

Listening to SDK Events

To listen to SDK events, add an event listener in the component where you initialized the SDK:

React.useEffect(() => {
  const onRampEventListener = onRampSDKNativeEvent.addListener(
    'widgetEvents',
    eventData => {
      // Handle all events here
      console.log('Received onRampEvent:', eventData);
    },
  );

  return () => {
    onRampEventListener.remove();
  };
}, []);

About SDK Lifecycle

At any time, you can disable the sdk with the following code:

closeOnrampSDK();

Widget Transactions Events

TX_EVENTS

ONRAMP_WIDGET_TX_INIT, 
ONRAMP_WIDGET_TX_FINDING, 
ONRAMP_WIDGET_TX_PURCHASING, 
ONRAMP_WIDGET_TX_SENDING, 
ONRAMP_WIDGET_TX_COMPLETED,
ONRAMP_WIDGET_TX_SENDING_FAILED, 
ONRAMP_WIDGET_TX_PURCHASING_FAILED, 
ONRAMP_WIDGET_TX_FINDING_FAILED

WIDGET_EVENTS

ONRAMP_WIDGET_READY, 
ONRAMP_WIDGET_FAILED, 
ONRAMP_WIDGET_CLOSE_REQUEST_CONFIRMED,
ONRAMP_WIDGET_CLOSE_REQUEST_CANCELLED,
ONRAMP_WIDGET_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.

ONRAMP_WIDGET_TX_INIT

"data": {
    "coinRate": 90.2,
    "cryptoAmount": 1.02,
    "fiatAmount": 101,
    "paymentMethod": "UPI"
  }

ONRAMP_WIDGET_TX_FINDING

"data": {
    }

ONRAMP_WIDGET_TX_PURCHASING

"data": {
    "kycNeeded": 0
  }

ONRAMP_WIDGET_TX_SENDING

"data": {
    "actualCryptoAmount": 1.11,
    "actualPrice": 90.2,
    "gasFee": 0.09
  }

ONRAMP_WIDGET_TX_COMPLETED

"data": {
    "actualCryptoAmount": 1.11,
    "actualPrice": 90.2,
    "chainId": 3,
    "clientFee": 0,
    "coinId": 54,
    "createdAt": "2023-10-13T07:49:58.000Z",
    "expectedCryptoAmount": 1.03,
    "expectedPrice": 90.2,
    "fiatAmount": 101,
    "fiatType": 1,
    "gasFee": 0.09,
    "gatewayFee": 0,
    "kycNeeded": 0,
    "merchantRecognitionId": null,
    "onRampFee": 0.25,
    "orderId": 302342,
    "orderStatus": 4,
    "referenceId": "327624383007",
    "transactionHash": "0xc1a8aaa9c887ca8f0c3b929caa71b2337c840b353939d3b6b340948ae5d",
    "updatedAt": "2023-10-13T07:56:04.000Z",
    "walletAddress": "0x63dDcda9ABC022Ce0E179A0F6f033Ea3282807b"
  }

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.

PreviousiOS SDK IntegrationNextUser flow

Last updated