@mobtechi/monetization

Unified Monetization SDK for the MobTechi ecosystem. Provides a single interface for Ads, Subscriptions, and Revenue tracking across React (Web), React Native (Expo), and Capacitor.

Features

• 📱 Cross-Platform: Seamlessly handles AdMob for mobile and Web-based ads for browser environments.
• 💰 Subscription Management: Integrated status checks and checkout flows for premium features.
• 🛡️ Type-Safe: Written in TypeScript with full type definitions for all ad components and hooks.
• 🧩 Pluggable: Works with Expo, Capacitor, and pure React.

Installation

npm install @mobtechi/monetization

Expo Integration (Zero-Config)

If you are using Expo (CNG), you don't need to configure react-native-google-mobile-ads manually. Just add @mobtechi/monetization to your plugins in app.json:

{
  "expo": {
    "plugins": [
      [
        "@mobtechi/monetization",
        {
          "androidAppId": "your-android-app-id",
          "iosAppId": "your-ios-app-id"
        }
      ]
    ]
  }
}

Peer Dependencies

For Capacitor support:

npm install @capacitor-community/admob @capacitor/core

Usage

1. Initialize the Provider

Wrap your application root with the MobTechiMonetizationProvider.

import { MobTechiMonetizationProvider } from '@mobtechi/monetization';

function App() {
  return (
    <MobTechiMonetizationProvider 
      orgId="your-org-id" 
      appKey="your-app-key"
      isPremium={false}
    >
      <MainLayout />
    </MobTechiMonetizationProvider>
  );
}

2. Display a Banner Ad

import { MobTechiBanner } from '@mobtechi/monetization';

function Component() {
  return (
    <View>
      <MobTechiBanner />
    </View>
  );
}

3. Check Premium Status

import { useMobTechiMonetization } from '@mobtechi/monetization';

function Component() {
  const { isPremium, loading, startCheckout } = useMobTechiMonetization();

  if (loading) return <Spinner />;

  return (
    <View>
      {isPremium ? (
        <Text>Welcome Premium User!</Text>
      ) : (
        <Button title="Upgrade" onPress={() => startCheckout('PLAN_ID')} />
      )}
    </View>
  );
}

4. Rewarded Ads

Use MobTechiRewarded to provide user incentives. Note that baseUrl is required for reward verification and claiming.

import { MobTechiRewarded } from '@mobtechi/monetization';

function RewardButton() {
  return (
    <MobTechiRewarded 
      label="Watch to Earn 50 XP"
      baseUrl="https://your-api.com/api"
      onSuccess={(reward) => {
        console.log('Reward claimed:', reward);
      }}
    />
  );
}

License

MIT © MobTechi