React Native Paywalls

import { AppDNA } from '@appdna/react-native-sdk';

await AppDNA.paywall.present('premium_paywall', { placement: 'settings' });

await AppDNA.presentPaywall('premium_paywall');

await AppDNA.paywall.present('premium_paywall', { placement: 'feature_gate' });

const placementToPaywall: Record<string, string> = {
  feature_gate: 'premium_paywall_a',
  settings:     'premium_paywall_b',
  onboarding:   'trial_paywall',
};

export async function showForPlacement(placement: string): Promise<void> {
  const id = placementToPaywall[placement] ?? 'premium_paywall_a';
  return AppDNA.paywall.present(id, { placement });
}

const paywall = AppDNA.paywall;

const context: PaywallContext = {
  placement: 'settings',
  experiment: 'paywall_redesign',
  variant: 'variant_a',
  customData: { feature_name: 'advanced_analytics' },
};

interface AppDNAPaywallDelegate {
  onPaywallPresented(paywallId: string): void;
  onPaywallAction(paywallId: string, action: string): void;
  onPaywallPurchaseStarted(paywallId: string, productId: string): void;
  onPaywallPurchaseCompleted(
    paywallId: string,
    productId: string,
    transaction: Record<string, unknown>,
  ): void;
  onPaywallPurchaseFailed(paywallId: string, error: Error): void;
  onPaywallRestoreStarted(paywallId: string): void;
  onPaywallRestoreCompleted(paywallId: string, restoredProductIds: string[]): void;
  onPaywallRestoreFailed(paywallId: string, error: Error): void;
  onPaywallDismissed(paywallId: string): void;

  /** Called when the user submits a promo code. Return `true` to apply it. */
  onPromoCodeSubmit?(paywallId: string, code: string): Promise<boolean>;

  /**
   * Called after a successful purchase when the paywall section carries a
   * `post_purchase_deep_link` URL configured in the Console.
   */
  onPostPurchaseDeepLink?(paywallId: string, url: string): void;

  /**
   * Called after a successful purchase when the paywall section carries a
   * `post_purchase_next_step` configured in the Console (e.g., navigate to
   * the success screen, continue an onboarding flow).
   */
  onPostPurchaseNextStep?(paywallId: string): void;
}

const paywallHandler: AppDNAPaywallDelegate = {
  onPaywallPresented(paywallId) {},

  onPaywallAction(paywallId, action) {
    // action is one of: cta_tapped, feature_selected, plan_changed, link_tapped, custom
  },

  onPaywallPurchaseStarted(paywallId, productId) {},

  onPaywallPurchaseCompleted(paywallId, productId, transaction) {
    console.log(`Purchased ${productId} — txn:`, transaction.transactionId);
    // Paywall auto-dismisses on successful purchase
  },

  onPaywallPurchaseFailed(paywallId, error) {
    console.log('Purchase failed:', error);
  },

  onPaywallRestoreStarted(paywallId) {
    // Show a "Restoring purchases…" toast
  },

  onPaywallRestoreCompleted(paywallId, restoredProductIds) {
    if (restoredProductIds.length === 0) {
      // Tell the user there were no purchases to restore
    } else {
      // Refresh entitlements / unlock premium features
    }
  },

  onPaywallRestoreFailed(paywallId, error) {
    // Surface an error toast — paywall stays visible so user can retry
  },

  onPaywallDismissed(paywallId) {},
};

AppDNA.paywall.setDelegate(paywallHandler);

await AppDNA.billing.getEntitlements();

const products = await AppDNA.billing.getProducts(['premium_monthly']);
// ... render your custom React Native components ...
const result = await AppDNA.billing.purchase('premium_monthly');
if (result.status === 'purchased') {
  // Unlock premium features
}

async onPromoCodeSubmit(paywallId: string, code: string): Promise<boolean> {
  // Validate the code against your backend and return true (apply) or false (reject)
  const isValid = await myPromoBackend.validate(code);
  return isValid;
}

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { AppDNA, AppDNAPaywallDelegate } from '@appdna/react-native-sdk';

export function PremiumGate() {
  const [isPremium, setIsPremium] = useState(false);

  useEffect(() => {
    const delegate: AppDNAPaywallDelegate = {
      onPaywallPresented: () => {},
      onPaywallAction: () => {},
      onPaywallPurchaseStarted: () => {},

      onPaywallPurchaseCompleted(paywallId, productId, transaction) {
        setIsPremium(true);
      },

      onPaywallPurchaseFailed(paywallId, error) {
        console.log('Purchase failed:', error.message);
      },

      onPaywallRestoreStarted: () => {},

      onPaywallRestoreCompleted(paywallId, restoredProductIds) {
        if (restoredProductIds.length > 0) {
          setIsPremium(true);
        }
      },

      onPaywallRestoreFailed: () => {},
      onPaywallDismissed: () => {},
    };

    AppDNA.paywall.setDelegate(delegate);

    (async () => {
      const active = await AppDNA.billing.hasActiveSubscription();
      setIsPremium(active);
    })();

    return () => {
      AppDNA.paywall.setDelegate(null);
    };
  }, []);

  async function showPaywall() {
    await AppDNA.paywall.present('premium_paywall', { placement: 'feature_gate' });
  }

  if (isPremium) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Premium content</Text>
      </View>
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Unlock Premium" onPress={showPaywall} />
    </View>
  );
}