React Native SDK

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

This is the React-Native SDK for Onramp payment gateway.

General Requirements

The minimum requirements for the SDK are:

• iOS 12.0 and higher

• Android minSdkVersion 21

• Android compileSdkVersion 33

Installation

Installation with yarn

Please make sure you have latest version from here

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

iOS Extra Steps after installing

After the installation is complete, for iOS run:

npx pod-install

or

cd ios
pod install

Usage

Initialize the SDK

Add the following imports

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

Generating payload & signature

const CryptoJS = require('crypto-js');

async function generatePayloadAndSignature(secret, body) {
  const timestamp = Date.now().toString();
  const obj = {
    body: {
      customerId
    },
    timestamp
  };
  const payload = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)));
  const signature = CryptoJS.enc.Hex.stringify(CryptoJS.HmacSHA512(payload, secret));
  return { payload, signature };
}

Login SDK

Add the following imports

import { startOnrampLogin } from '@onramp.money/onramp-react-native-sdk';

To use the login widget, initialize the startOnrampLogin function and pass the login parameters (mandatory) to start the sdk.

signature param to be passed here is returned in /whiteLabel/kyc/url endpoint

   startOnrampLogin({
     appId: 1, // replace this with the appID you got during onboarding
     closeAfterLogin: true/false, // toggle this value based on if you want to close widget after login or not
     signature: "signature", // optional parameter
     phoneNumber: "+90-xxxxxxxxx", // optional parameter
     lang:"en" // optional parameter, replace with desired language code
   });

Listening to SDK Events

Add onRampSDKNativeEvent listener in your component where you've initialized the sdk.

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

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

Initiate KYC SDK

To use the kyc widget, initialize the initiateOnrampKyc function and pass the kyc config parametes (mandatory) to start the sdk.

   initiateOnrampKyc({
     payload: 'enter payload here',
     signature: 'enter signature here',
     customerId: 'enter customerId here',
     apiKey: 'enter apiKey here',
     lang:"en" // optional parameter, replace with desired language code
   });

About SDK Lifecycle

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

   closeOnrampSDK();

Events Docs

Here is the list of all events:

• ONRAMP_WIDGET_READY -> sent when the 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_CONTENT_COPIED -> sent when copy to clipboard event is performed in the widget, sends along the content copied.

• ONRAMP_WIDGET_LOGIN_SUCCESS -> sent when user successfully logs in after entering OTP.

• ONRAMP_WIDGET_CLOSE_REQUEST_CONFIRMED -> sent when widget is closed

• ONRAMP_WIDGET_CLOSE_REQUEST_CANCELLED -> sent when the user dismisses the close widget request modal.

• ONRAMP_WIDGET_KYC_PENDING -> sent when users finished uploading all required details/documents for KYC & user KYC is marked as pending (waiting for approval).

• ONRAMP_WIDGET_KYC_DONE -> sent when a user sees the KYC verified screen.

• ONRAMP_WIDGET_KYC_REJECTED -> sent when a user sees the KYC rejected screen. This will have a reason for rejection also in event data as data: {msg: 'reason for rejection'}

• ONRAMP_WIDGET_KYC_ERROR -> Sent when the user is sent to an error screen, due to wrong URL parameters or wrong/faulty data for a given user.