pocosdk

Embed the PocoAI Gift Card rewards store in your React Native app.

Installation

npm install pocosdk

The SDK is built on react-native-webview (see peerDependencies in this package). If your package manager does not install it automatically, add it to your app:

npm install react-native-webview

iOS: After adding or upgrading native dependencies, install pods once (from your app root):

npx pod-install

Alternatively: cd ios then pod install.

Native Setup (Required)

Android

Add the following <queries> block inside <manifest> in your android/app/src/main/AndroidManifest.xml. This is required on Android 11+ so the OS can resolve UPI app intents for payments:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="upi" />
    </intent>
  </queries>

  <application ...>
    <!-- your activities -->
  </application>
</manifest>

iOS

Add the following to your ios/<AppName>/Info.plist so the app can check for and open installed UPI apps:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>upi</string>
  <string>phonepe</string>
  <string>gpay</string>
  <string>paytmmp</string>
  <string>credpay</string>
  <string>bhim</string>
</array>

Usage

import { SubspaceSDK } from 'pocosdk';

function RewardsScreen() {
  return (
    <SubspaceSDK
      auth="YOUR_AUTH_TOKEN"
      clientId="YOUR_CLIENT_ID"
      theme={{
        primaryColor: '#FF6B00',
        mode: 'light',
      }}
      onReady={() => console.log('SDK loaded')}
      onPurchase={(data) => {
        console.log('Purchased:', data.brand, data.amount);
      }}
      onClose={() => {
        // Navigate back or close modal
        navigation.goBack();
      }}
      onError={(err) => {
        console.error('SDK Error:', err.message);
      }}
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | auth | string | Yes | Authentication token | | clientId | string | Yes | B2B client ID | | initialRoute | SDKSection | No | Pin the SDK to a single section. Hides cross-section entry points and blocks stray navigation. | | productId | string | No | Deep-link to a specific item. With initialRoute="giftcards" → opens /product/<id>; with initialRoute="subscriptions" → opens /subscriptions/<id>. Ignored otherwise. | | theme | object | No | Customize colors, mode, branding | | onReady | () => void | No | SDK loaded and ready | | onPurchase | (data) => void | No | Gift card purchased | | onClose | () => void | No | User tapped close button | | onError | (data) => void | No | Error occurred | | style | ViewStyle | No | Container style override |

Focused mode — pinning the SDK to one section

By default (no initialRoute), the SDK opens on the store with full navigation — search, chat, orders — exactly as before. If you want a button in your app that opens straight into one section and keeps the user there, pass initialRoute:

import { SubspaceSDK, type SDKSection } from 'pocosdk';

// Full SDK (default, unchanged)
<SubspaceSDK auth={token} clientId={cid} />

// One button, one section — the user lands here and cannot wander off
<SubspaceSDK auth={token} clientId={cid} initialRoute="transactions" />
<SubspaceSDK auth={token} clientId={cid} initialRoute="chats" />
<SubspaceSDK auth={token} clientId={cid} initialRoute="subscriptions" />
<SubspaceSDK auth={token} clientId={cid} initialRoute="quick-payments" />

| initialRoute | Opens on | User can drill down to | |---|---|---| | 'transactions' | Orders list | Individual order detail | | 'chats' | Chats list | Individual chat room | | 'subscriptions' | Shared subscriptions | Plan detail, checkout, joined room | | 'quick-payments' | BBPS hub | Mobile recharge, DTH, electricity, FASTag, and any bill-payment flow through to completion | | 'giftcards' | Gift-card store | Brand detail, checkout. BBPS + subscription tiles auto-hidden. |

In focused mode the header is trimmed (logo + back + profile only) and the user cannot navigate out of the pinned section's flow — each purchase/activation still completes end-to-end.

Deep-linking to a specific item

Pair initialRoute with productId to open the SDK directly on a specific gift-card brand or subscription plan, skipping the section's hub:

// Open straight on the Amazon gift-card page
<SubspaceSDK
  auth={token}
  clientId={cid}
  initialRoute="giftcards"
  productId="c098ee4a-b886-47c5-8b6f-093f30211163"  // brand UUID
/>

// Open straight on the Netflix Premium subscription plan
<SubspaceSDK
  auth={token}
  clientId={cid}
  initialRoute="subscriptions"
  productId="b2e557ab-4154-4f5a-8a95-018c92a0d779"  // plan UUID
/>

To find the right productId: open the SDK in a browser, navigate to the brand or plan, and copy the UUID from the URL (https://sdk.pocoai.store/product/<id> for gift cards, /subscriptions/<id> for plans).

productId is ignored for transactions, chats, and quick-payments.

Theme Options

theme={{
  primaryColor: '#FF6B00',      // Buttons, active states
  accentColor: '#059669',       // Discounts, savings
  backgroundColor: '#FFFFFF',   // Page background
  surfaceColor: '#FFFFFF',      // Card backgrounds
  textColor: '#111827',         // Primary text
  fontFamily: 'System',         // Font family
  borderRadius: 'rounded',     // 'sharp' | 'rounded' | 'pill'
  mode: 'light',               // 'light' | 'dark'
  logoUrl: 'https://...',      // Partner logo URL
  storeTitle: 'My Rewards',    // Header title
}}

Events

| Event | Payload | Description | |-------|---------|-------------| | onReady | none | SDK loaded | | onPurchase | { orderId, amount, brand } | Gift card purchased | | onClose | none | User closed SDK | | onError | { code, message } | Error occurred |

UPI Payment Errors

When a UPI payment fails to launch, onError is called with one of these codes:

| Code | Description | |------|-------------| | UPI_NOT_SUPPORTED | No UPI app installed on the device | | UPI_OPEN_FAILED | Failed to open the UPI app |