csc-react-native-sdk
v2.1.2
Published
React-native sdk provides paywalling and analytics
Downloads
404
Readme
csc-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.
Installation
npm install csc-react-native-sdk
Initialize SDK
In your App.js file include 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
logEnvironment: 'development',
});
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="your_initial_route">
...
<Stack.Screen
name="ConscentWebView"
component={ConscentWebView}
options={{
headerShown: false
}} />
</Stack.Navigator>
</NavigationContainer>
);
};
Initialize the paywall
- yourClientId : Pass your clientId received from Conscent.ai.
- yourContentId : Unique id of each content
- ApiEnv can be set as :
SANDBOX
LIVE
- scroll-Y : Pass the scroll depth of your content screen
- userAgent : Pass userAgent of your device
- call removePage() in useFocusEffect
Event Listener
implement EventRegister method in your component
- 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
- USER_DELETE_ACCOUNT_SUCCESS: Triggered when the user’s user deletes the account.
- 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.
- onPurchaseStarted: Triggered when the user starts purchase
- onPurchaseCompleted: Triggered when the user Purchase Completed and sends Purchase Success Response.
- onPurchaseError: Triggered when the user's fails to Purchase
- onPurchaseCancelled: Triggered when the user's Cancelled Purchase
- onDismiss: Triggered when the user's Dismiss Purchase
Define these states on content screen
const paywallRef = useRef(null);
const [scrollY, setScrollY] = useState(0);
const [showContent, setShowContent] = useState(false);
Call Paywall and Pop-Up 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('SANDBOX'),
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)
}}>
<Text>{'showContent your locked content'}</Text>
<View>
<PayWall
ref={paywallRef}
clientId={clientId}
contentId={contentId}
title={contentTitle}
contentUrl={'url'}
authorName={'name'}
publicationDate={'2024-07-17T11:57:27.312Z'}
categories={['category1', 'category2']}
tags={['free', 'premium', 'metered']}
sections={['section1', 'section2', 'section3']}
apiEnv={mode}
fontFamily={'PlayfairDisplay-Regular'}
userAgent={
'Mozilla/5.0 (iPhone; CPU iPhone OS 17_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148'
}
currentStackName={'Content'}
navigation={props?.navigation}
scrollY={scrollY}
goBack={() => {
goBack();
}}
/>
</View>
{
showContent ? <><Text>{'showContent your full content'}</Text></> :
<><Text>{'showContent your locked content'}</Text></>
}
</ScrollView>
<View>
<MeterBanner
ref={paywallRef}
clientId={clientId}
contentId={contentId}
title={contentTitle}
contentUrl={'url'}
authorName={'name'}
publicationDate={'2024-07-17T11:57:27.312Z'}
categories={['category1', 'category2']}
tags={['free', 'premium', 'metered']}
sections={['section1', 'section2', 'section3']}
apiEnv={mode}
fontFamily={'PlayfairDisplay-Regular'}
userAgent={
'Mozilla/5.0 (iPhone; CPU iPhone OS 17_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148'
}
currentStackName={'Content'}
navigation={props?.navigation}
scrollY={scrollY}
goBack={() => {
goBack();
}}
/>
</View>
<PopUp
apiEnv={'SANDBOX'}
currentStackName={'Your_current_stack_name'}
navigation={props?.navigation}
scrollY={scrollY}
/>
</SafeAreaView >
)
ConsCent Event Listener for login, logout, userProfile
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 Functionality
The client can use ConsCent Login, Logout System using this functionality:
await login('Your_current_stack_name', props.navigation)
await logOut('Your_current_stack_name', props?.navigation)
Google Login Process (Android)
📝 Note: Share the Google ClientID .
Google Login Process (iOS)
📝 Note: Share the Google ClientID .
- To use Google login functionality you need to install pod in your project.
run pod install
- Add your OAuth client ID and custom URL scheme
Update your app's Info.plist file to add your OAuth client ID and a custom URL scheme based on the reversed client ID.
The reversed client ID is your client ID with the order of the dot-delimited fields reversed. This is also shown under "iOS URL scheme" when selecting an existing iOS OAuth client in the Cloud console. For example: com.googleusercontent.apps.1234567890-abcdefg
<key>GIDClientID</key>
<string>YOUR_IOS_CLIENT_ID</string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
</array>
</dict>
</array>
To enable Apple login follow these steps:
Xcode Steps:
- Open Xcode project.
- Go to Target Settings → Signing & Capabilities.
- Add "Sign in with Apple" capability.
- Verify entitlements.
- Ensure proper signing.
App Store Connect Steps:
- Go to App Store Connect.
- Select the app under "My Apps."
- Go to "App Information."
- Add "Sign in with Apple" information (privacy policy and terms of service URLs).
- Enable "Sign in with Apple."
- Submit changes for review.
User Profile Functionality
The client can use ConsCent User Profile System using this functionality:
await openUserProfile('Your_current_stack_name', props.navigation,)
The client can get user details using this functionality:
const userdetails = await getUserDetails();
Demo app Link
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library