Developer Guide
Contact Us

React Native

This guide will help you integrate the ReadyRemitSDK into your React Native projects.

Suggest Edits

The ReadyRemitSDK is compatible with React Native versions 0.65 to 0.71.

Step 1 - Providing an Auth Token to ReadyRemit SDK

To ensure a successful launch, ReadyRemit SDK requires an auth token. Your server must retrieve this token and provide it to your application (for more information on backend integration, refer to the SDK Getting Started Guide).

You can include the following event handler code in your React Native application:

import { useEffect } from 'react';
import { NativeModules, NativeEventEmitter } from 'react-native';
const { ReadyRemitModule } = NativeModules;

const eventEmitter = new NativeEventEmitter(ReadyRemitModule);

useEffect(() => {
  eventEmitter.addListener("READYREMIT_AUTH_TOKEN_REQUESTED", () => {
    // TODO: 
    // Fetch a sender-scoped ReadyRemit authentication token from your server.
    // Your server will in turn fetch this token from the ReadyRemit API.
    //
    // Helpful links:
    // https://developer.readyremit.com/docs/c2c-via-sdk#step-3-create-sender-records-to-associate-with-your-user
    // https://developer.readyremit.com/docs/authentication-sender-id
    // https://developer.readyremit.com/reference/getaccesstoken
    // 
    // The response from your server should include either an valid access token, or an error.
    // The call back to the SDK takes in 2 parameters, the access token and an error message.
    // Only one of these 2 parameters should be populated. 
    // If an error message is provided, it will be displayed to the user in an error banner.
    // ReadyRemitModule.setAuthToken(null, errorMessage);
    
    ReadyRemitModule.setAuthToken(access_token, null);
  });

  return function cleanup() {
    eventEmitter.removeAllListeners("READYREMIT_AUTH_TOKEN_REQUESTED");
  }
}, []);

📘

Note: Error handling during authentication

It is possible to send an error message into the SDK during the authentication process that will be displayed to the end user, but this is not a requirement. The recommended approach to error handling during the authentication flow is to close the SDK and provide error messaging from your application, and a recommendation to the user on next steps (contact support, use different transfer functionality, etc).

Step 2 - Submitting the Final Transfer

For security purposes, your server will handle the final submission of the transfer. The ReadyRemit SDK will provide your application with a transfer payload, which should then be sent to your server. The server will return a transfer ID.

🚧

Warning: potential transfer duplication

This listener should only be added to the emitter one time for the life of the application. Be aware of component refreshes that might re-add the listener. An alternative is to remove the listener using. If multiple listeners exist at the same time, a transfer could potentially be submitted multiple times.

Add the following event handler code to your React Native application:

import { useEffect } from 'react';
import { NativeModules, NativeEventEmitter } from 'react-native';
const { ReadyRemitModule } = NativeModules;

useEffect(() => {
  eventEmitter.addListener("READYREMIT_TRANSFER_SUBMITTED", async (request) => {
    // TODO: 
    // Send the results of the SDK payload to your server. 
    // Your server will then make the funds unavailable from the user account.
    // Finally, your server will execute the transfer with the ReadyRemit API.
    // 
    // Helpful links:
    // https://developer.readyremit.com/docs/c2c-via-sdk#step-5-secure-funds
    // https://developer.readyremit.com/docs/c2c-via-sdk#step-6-submit-the-transfer
    // https://developer.readyremit.com/reference/executetransfer
    //
    // The response from your server should include either the ID of the created transfer, or an error.
    // The call back to the SDK takes in 3 parameters, the transfer ID, an error code, and an error message.
    // If an error message is provided, it will be displayed to the user in an error banner.
    // The error code should only be provided if it is returned in the ReadyRemit API.
    // ReadyRemitModule.setTransferId(null, errorCode, errorMessage);
    
    ReadyRemitModule.setTransferId(transferId, null, null);
  });

  return function cleanup() {
    eventEmitter.removeAllListeners("READYREMIT_TRANSFER_SUBMITTED");
  }
}, []);

Step 3 - Launching the ReadyRemit SDK

You can launch the ReadyRemit SDK in response to a user event such as pressing a "Send Money" button in your application.

Use the following code to launch the ReadyRemit SDK:

import { NativeModules } from 'react-native';
const { ReadyRemitModule } = NativeModules;

const readyRemitEnvironment = 'SANDBOX'; // Options are 'SANDBOX' or 'PRODUCTION'
const readyRemitLanguage = 'en-US'; // Options are 'en-US' or 'es-MX'

const styles = {
  fonts: {
    default: { family: 'luminari' }
  }
}

ReadyRemitModule.launch(readyRemitEnvironment, readyRemitLanguage, styles);

(Optional) Subscribing to the SDK Closed Event

The ReadyRemit SDK will fire an event when the SDK flow completes, indicating that the flow is complete and the SDK has closed. If desired, you can consume this event and respond accordingly by adding the following code to your React Native application:

useEffect(() => {
    eventEmitter.addListener("SDK_CLOSED", () => {
      // TODO: perform some action on SDK closed
    });
  
  	eventEmitter.addListener("SDK_LAUNCHED", () => {
      //TODO: perfom some action on SDK Opened
    });
  
    return function cleanup() {
      eventEmitter.removeAllListeners("SDK_CLOSED");
      eventEmitter.removeAllListeners("SDK_LAUNCHED");
    }
}, []);

After following these steps, you should now have the ReadyRemit SDK integrated into your React Native application. However, please remember that this is only part of the process. You will still need to carry out specific platform-based configurations for iOS and Android. For more details on these, please refer to the respective sections of the ReadyRemit SDK documentation. If you encounter any issues, don't hesitate to seek additional assistance from the documentation or the ReadyRemit support team.

(Optional) Style the ReadyRemit SDK - iOS

You can style the SDK following this example

const readyRemitStyles = {
    colors: {
      background: { lightHex: "#F3F4F6", darkHex: "#111111" },
      foreground: { lightHex: "#FFFFFF", darkHex: "#1F1F1F" },
      buttonText: { lightHex: "#FFFFFF", darkHex: "#FFFFFF" },
      buttonColor: { lightHex: "#2563EB", darkHex: "#558CF4" },
      danger: { lightHex: "#AA220F", darkHex: "#AA220F" },
      dangerLight: { lightHex: "#ECDFDF", darkHex: "#201311" },
      success: { lightHex: "#008761", darkHex: "#008761" },
      divider: { lightHex: "#E2E2E2", darkHex: "#313131" },
      inputLine: { lightHex: "#858585", darkHex: "#505050" },
      icon: { lightHex: "#444444", darkHex: "#7E7E7E" },
      primary: { lightHex: "#2563EB", darkHex: "#558CF4" },
      primaryLight: { lightHex: "#6B8DD6", darkHex: "#83ACF7" },
      text: { lightHex: "#0E0F0C", darkHex: "#E3E3E3" },
      textSecondary: { lightHex: "#454545", darkHex: "#B0B0B0" },
    },
    fonts: {
      default: { family: 'SF Pro Text' }
    }
  }

Updated 4 months ago

What’s Next