SubSovereign on React Native — एकीकरण गाइड

यह गाइड @subsovereign/react-native (sdk-react-native/) को कवर करती है — यह एक ही पैकेज में एक डेटा क्लाइंट और एक नेटिव paywall रेंडरर है। आप SubSovereign dashboard में जो paywall डिज़ाइन करते हैं, वह यहाँ नेटिव RN प्रिमिटिव्स (View/Text/Pressable) के ज़रिये रेंडर होता है — iOS, Android, web, React और Flutter SDK के समान कॉन्फ़िग से।

क्या आप React Native में पहले से @subsovereign/js-sdk उपयोग कर रहे हैं? वह भी काम करता है (देखें Web & React Native गाइड) — यह पैकेज इसमें नेटिव <Paywall> कॉम्पोनेंट जोड़ता है, साथ ही एक ऐसा डेटा क्लाइंट जिसमें कोई नेटिव डिपेंडेंसी नहीं है (सिर्फ fetch)।

शुरू करने से पहले

एक चालू SubSovereign सर्वर, dashboard में रजिस्टर किया हुआ एक app (एक appId और SDK-रोल की API key), आपके स्टोर प्रोडक्ट्स से जुड़े एक्सेस लेवल (जैसे pro), और एक प्रकाशित paywall।

चरण 1 — इंस्टॉल करें

यह पैकेज sdk-react-native/ में है और अभी npm पर उपलब्ध नहीं है — इसे path या git डिपेंडेंसी के रूप में जोड़ें (या फ़ोल्डर को अपने प्रोजेक्ट में कॉपी करें):

npm install ./sdk-react-native   # path dependency while it's pre-npm

वैकल्पिक सुविधाएँ, जो उपलब्ध होने पर स्वतः उपयोग होती हैं (ये कभी भी अनिवार्य डिपेंडेंसी नहीं हैं):

npx expo install expo-linear-gradient   # gradient paywall backgrounds
npm install react-native-video          # hero video (falls back to image without it)

चरण 2 — एक बार कॉन्फ़िगर करें, जब आपका app शुरू हो

import { SubSovereign } from '@subsovereign/react-native';

SubSovereign.configure({
  apiKey:  'YOUR_SDK_KEY',
  appId:   'your-app-id',
  baseUrl: 'https://subs.yourdomain.com/api/v1', // YOUR self-hosted server
  userId:  currentUser.id,                        // your own stable user id
  locale:  'en',
});

चरण 3 — जाँचें कि उपयोगकर्ता किस चीज़ तक पहुँच सकता है

const result = await SubSovereign.checkEntitlements();
if (result.hasAccess) showPremiumContent();
else showPaywall();

इसे try/catch में लपेटें; त्रुटि होने पर उपयोगकर्ता को उसकी पिछली ज्ञात एक्सेस पर रखें और बाद में पुनः प्रयास करें — नेटवर्क की अस्थायी गड़बड़ी की वजह से किसी भुगतान करने वाले उपयोगकर्ता को कभी भी लॉक आउट न करें।

चरण 4 — Paywall दिखाएँ और बिक्री करें

import { Paywall, usePaywallConfig } from '@subsovereign/react-native';
import { Platform } from 'react-native';

const config = await SubSovereign.getPaywallConfig(Platform.OS); // or usePaywallConfig(params)

<Paywall config={config} onSelectProduct={(productId) => buy(productId)} />

खरीद अपनी बिलिंग लाइब्रेरी से हमेशा की तरह चलाएँ, फिर सर्वर से उसकी receipt validation करवाएँ:

// Android (Play Billing) — built into this client:
await SubSovereign.validateGooglePurchase({ purchaseToken, productId, accessLevelId: 'pro' });

// iOS (StoreKit): use the Web/JS data SDK's validateApplePurchase —
// this client does not ship an Apple call. See web.en.md Step 4.

इसके बाद checkEntitlements() दोबारा चलाएँ और एक्सेस अनलॉक करें।

गोपनीयता (GDPR)

await SubSovereign.recordConsent({ purpose: 'analytics', granted: true });

EU निकासी बटन (Compliance Passport)

import { WithdrawalButton } from '@subsovereign/react-native';

<WithdrawalButton subscriptionId={sub.id} />

यह एक स्पष्ट लेबल वाला बटन दिखाता है, एक बार पुष्टि लेता है, और idempotent तरीके से सबमिट करता है। ध्यान दें: यह बटन पहले app की निकासी कॉन्फ़िग नहीं लाता — अगर आप dashboard में निकासी को अक्षम करते हैं या किसी क्षेत्राधिकार तक सीमित करते हैं, तो इसकी दृश्यता को SubSovereign.getWithdrawalConfig() से स्वयं नियंत्रित करें। कस्टम UI के लिए SubSovereign.withdraw(subscriptionId, opts) भी उपलब्ध है (पास करें channel: Platform.OS)।

त्वरित संदर्भ

अगले कदम

• डेटा लेयर का विस्तृत विवरण (flags, erasure, export): Web & React Native गाइड।
• अवधारणाओं में नए हैं? पढ़ें SubSovereign कैसे काम करता है।