React Native SDK
This is a step-by-step guide to include Conscent.ai package in your app. This package is developed in TypeScript and JavaScript.
Initialize SDK
In your App.js file include the ConscentWebView component in Stack.Navigator
//PACKAGES
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { ConscentWebView, StorageKeys, conscentLogger } from 'csc-react-native-sdk';
export default function App() {
AsyncStorage.setItem(StorageKeys.ClientId, '661907c2487ae1aba956dcc4')
AsyncStorage.setItem(StorageKeys.ApiEnv, 'SANDBOX')
// Configure the logger
conscentLogger.configure({
enableLog: true,
enableAllLog: true,
enableError: true,
enableWarn: true, // Disable warnings
environment: 'development',
});
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="your_initial_route">
...
<Stack.Screen
name="ConscentWebView"
component={ConscentWebView}
options={{
headerShown: false
}} />
</Stack.Navigator>
</NavigationContainer>
);
};
PARAMETERS | DISCRIPTION |
---|---|
yourClientId | Pass your clientId received from Conscent.ai |
yourContentId | Unique id of each content |
scroll-Y | Pass the scroll depth of your content screen |
userAgent | Pass userAgent of your device |
Mode | Mode can be set as :
|
Initialize the paywall
Define these states on the content screen
const paywallRef = useRef(null);
const [scrollY, setScrollY] = useState(0);
const [showContent, setShowContent] = useState(false);
const { contentId, clientId, mode } = props?.route?.params;
Call the Paywall on top of your content screen
//PACKAGES
import {
pageExist,
getEventsEnvDetails,
PopUp,
PayWall,
} from 'csc-react-native-sdk';
import { EventRegister } from 'react-native-event-listeners';
// Content Screen
const userAgent = await DeviceInfo.getUserAgent();
useFocusEffect(
React.useCallback(() => {
const CONSCENT_MESSAGE_LISTENER = EventRegister.addEventListener(
"CONSCENT_MESSAGE",
(data) => {
console.log('CONSCENT_MESSAGE', data);
}
);
const CONSCENT_SUCCESS_LISTENER = EventRegister.addEventListener(
"CONSCENT_SUCCESS",
(data) => {
if (data?.message === 'UNLOCK') {
setShowContent(true);
}
console.log('CONSCENT_SUCCESS', data);
}
);
const CONSCENT_FAILURE_LISTENER = EventRegister.addEventListener(
"CONSCENT_FAILURE",
(data) => {
console.warn('CONSCENT_FAILURE', data);
}
);
return () => {
removePage();
if (typeof CONSCENT_MESSAGE_LISTENER === 'string') {
EventRegister.removeEventListener(CONSCENT_MESSAGE_LISTENER);
}
if (typeof CONSCENT_SUCCESS_LISTENER === 'string') {
EventRegister.removeEventListener(CONSCENT_SUCCESS_LISTENER);
}
if (typeof CONSCENT_FAILURE_LISTENER === 'string') {
EventRegister.removeEventListener(CONSCENT_FAILURE_LISTENER);
}
};
}, [])
);
async function removePage() {
await pageExist(
getEventsEnvDetails(mode),
clientId,
contentId,
scrollY
);
}
const goBack = () => {
// Go back to the previous screen
props?.navigation.goBack();
}
return (
<SafeAreaView style={styles.container}>
<ScrollView
onScroll={(e) => {
setScrollY(e.nativeEvent.contentOffset.y)
}}>
{
showContent ?
<Text>{ showContent your full content }</Text> : <Text>{ showContent your locked content }</Text>
}
</ScrollView>
<PayWall
ref={paywallRef}
clientId={clientId}
contentId={contentId}
environment={mode}
fontFamily={'PlayfairDisplay-Regular'}
userAgent={userAgent}
currentStackName={'Your_current_stack_name'}
navigation={props?.navigation}
scrollY={scrollY}
goBack={() => {
goBack();
}}
/>
<PopUp
environment={mode}
currentStackName={'Your_current_stack_name'}
navigation={props?.navigation}
scrollY={scrollY}
/>
</SafeAreaView >
)
call removePage() in useFocusEffect
Implement the EventRegister method in your component
EventListeners for Paywall, Login, Logout and userProfile
UNLOCK: Unlocks the content and hides the paywall.
PAYWALL_VIEW: Locks the content and displays the paywall.
JOURNEY_FAILURE: Handles errors while displaying the paywall.
USER_GO_BACK: Triggered when the user navigates back from
ConscentWebView
.LOGIN_SUCCESS: Triggered when the user successfully logs in to Conscent system
LOGIN_FAILED: Triggered when the user logout successfully into the Conscent system
LOGOUT_SUCCESS: Triggered when the user logs out successfully
LOGOUT_FAILED: Triggered when the user logs out failed.
USER_NOT_LOGIN: Triggered when the user is not logged in.
SUBS_SUCCESS: Handles successful subscription.
PAYEMENT_SUCCESS: Handles successful subscription payment
RZP_CROSS_BTN_CLICKED: Triggered when the Razorpay cross button is clicked.
useEffect(() => {
const CONSCENT_MESSAGE_LISTENER = EventRegister.addEventListener(
"CONSCENT_MESSAGE",
(data) => {
console.log('CONSCENT_MESSAGE', data);
}
);
const CONSCENT_SUCCESS_LISTENER = EventRegister.addEventListener(
"CONSCENT_SUCCESS",
(data) => {
console.log('CONSCENT_SUCCESS', data);
}
);
const CONSCENT_FAILURE_LISTENER = EventRegister.addEventListener(
"CONSCENT_FAILURE",
(data) => {
console.warn('CONSCENT_FAILURE', data);
}
);
return () => {
if (typeof CONSCENT_MESSAGE_LISTENER === 'string') {
EventRegister.removeEventListener(CONSCENT_MESSAGE_LISTENER);
}
if (typeof CONSCENT_SUCCESS_LISTENER === 'string') {
EventRegister.removeEventListener(CONSCENT_SUCCESS_LISTENER);
}
if (typeof CONSCENT_FAILURE_LISTENER === 'string') {
EventRegister.removeEventListener(CONSCENT_FAILURE_LISTENER);
}
};
});
Login/Logout Functionality
The client can use the ConsCent Login, Logout System using this functionality:
await login('Your_current_stack_name', props.navigation)
await logOut('Your_current_stack_name', props?.navigation)
DEMO APP Link
Last updated