[Beta] React Native

Installations

Requirements

• React Native 0.60+
• Valid GitHub personal access token with read:packages permission (for Android)

Adding the SDK to Your Project

You can add the Ivy React Native SDK to your project using npm or Yarn:

# using npm
npm install @getivy/react-native-sdk

# OR using Yarn
yarn add @getivy/react-native-sdk

Android Specific Setup

For Android applications, it's necessary to access the Ivy SDK from GitHub's Maven repository. Add the following to your root build.gradle file:

allprojects {  
    repositories {  
        maven {  
            name = "GitHub"  
            url = uri("<https://maven.pkg.github.com/getivy/android-sdk-public">)  
            credentials {  
                username = \<Github_username>  
                password = \<Github_token>  
            }  
        }  
    }  
}

Ensure you replace <Github_username> and <Github_token> with your GitHub username and personal access token, respectively.

Usage

Importing the SDK

Start by importing the SDK into your React Native project:

import * as GetivySDK from '@getivy/react-native-sdk';

Initializing the SDK

Initialize the SDK with your session id and the desired environment. You can choose between production and sandbox environments:

// For initializing a data session  
GetivySDK.initializeDataSession(dataSessionId, "production");

// For initializing a checkout session  
GetivySDK.initializeCheckoutSession(checkoutSessionId, "sandbox");

Opening the SDK UI

To open the SDK UI, simply call:

GetivySDK.openSDK();

This command opens a modal view on top of your application in iOS, and a new activity in Android.

Listening for SDK Events

The SDK provides events for successful and error outcomes. Use NativeEventEmitter to listen for these events:

import { NativeEventEmitter } from 'react-native';
import * as GetivySDK from '@getivy/react-native-sdk';

// Component implementation
useEffect(() => {
    const eventEmitter = new NativeEventEmitter(GetIvy.eventsEmitter);
    const onSuccess = eventEmitter.addListener('onSuccess', (eventData) => {
      Alert.alert('Success', JSON.stringify(eventData));
    });

    const onError = eventEmitter.addListener('onError', (eventData) => {
      Alert.alert('Error', JSON.stringify(eventData));
    });

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

Handling Results

OnSuccess Event

Triggered when the user successfully completes the flow. The event data includes relevant session and transaction details.

OnError Event

Triggered when an error occurs during the flow. The event data provides error details, including codes and messages.

Additional Information

• Before starting any session flow (data or checkout), ensure you have created the respective sessions through the Ivy API.
• Always test your integration thoroughly in the sandbox environment before moving to production.
• Example Application: For a more in-depth usage example, refer to the example application included with the SDK.