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.