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
run pod install

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
        logEnvironment: 'development',
    });

    return (
        <NavigationContainer>
        <Stack.Navigator initialRouteName="your_initial_route">
            ...
            <Stack.Screen 
                name="ConscentWebView" 
                component={ConscentWebView}
                options={{
                    headerShown: false
                }} />
        </Stack.Navigator>
        </NavigationContainer>

    );
};
PARAMETERSDISCRIPTION

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

ApiEnv

ApiEnv can be set as :

SANDBOX

LIVE

Initialize the paywall

Define these states on the content screen

const paywallRef = useRef(null);
const [scrollY, setScrollY] = useState(0);
const [showContent, setShowContent] = useState(false);

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('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 >
    )

call removePage() in useFocusEffect

EventListeners for Paywall, Login, Logout and userProfile

Implement the EventRegister method in your component:

  • USER_NOT_LOGIN: Triggered when the user is not logged in.

  • LOGIN_SUCCESS: Triggered when the user successfully logs in to the Conscent system.

  • LOGIN_FAILED: Triggered when the user’s login attempt fails in the Conscent system.

  • LOGOUT_SUCCESS: Triggered when the user logs out successfully.

  • LOGOUT_FAILED: Triggered when the user’s logout attempt fails.

  • USER_DELETE_ACCOUNT_SUCCESS: Triggered when the user’s user deletes the account.

  • PAYWALL_VIEW: Locks the content and displays the paywall.

  • UNLOCK: Unlocks the content and hides the paywall.

  • JOURNEY_FAILURE: Handles errors while displaying the paywall.

  • SUBS_SUCCESS: Handles successful subscription.

  • PAYMENT_SUCCESS: Handles successful subscription payment.

  • RZP_CROSS_BTN_CLICKED: Triggered when the Razorpay cross button is clicked.

  • USER_GO_BACK: Triggered when the user navigates back from ConscentWebView.

  • 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

  • USER_PROFILE_UPDATE : Triggered when the user updates the profile.

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)

Google Login Process (Android)

Share the Google ClientID

Google Login Process (iOS)

Share the Google ClientID

  1. To use Google login functionality you need to install pod in your project.

run pod install

  1. 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:

  1. Open Xcode project.

  2. Go to Target Settings → Signing & Capabilities.

  3. Add "Sign in with Apple" capability.

  4. Verify entitlements.

  5. Ensure proper signing.

App Store Connect Steps:

  1. Go to App Store Connect.

  2. Select the app under "My Apps."

  3. Go to "App Information."

  4. Add "Sign in with Apple" information (privacy policy and terms of service URLs).

  5. Enable "Sign in with Apple."

  6. Submit changes for review.

UserProfile Functionality
await openUserProfile('Your_current_stack_name', props.navigation, '')

DEMO APP Link

PreviousAndroid SDKNextGoogle In-App Purchases with Conscent

Last updated