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.
• USER_PROFILE_UPDATE : Triggered when the user updates the profile.
• 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