React Native Paywalls

import { AppDNA } from '@appdna-ai/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<boolean> {
  const id = placementToPaywall[placement] ?? 'premium_paywall_a';
  // `present()` resolves FALSE when nothing was shown — an unknown paywall id, an SDK that is not
  // configured yet, or no screen to present from. Check it: a silent no-op looks exactly like a
  // paywall a user dismissed instantly.
  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;
  /**
   * `error` is the platform's error MESSAGE — a string, not an `Error` object, and it has no
   * `.message`. Branch on `errorType` instead: userCancelled | productNotFound |
   * verificationFailed | networkError | serverError | pending | providerNotAvailable | unknown.
   * `productId` is null only when no product had been selected.
   */
  onPaywallPurchaseFailed(
    paywallId: string,
    error: unknown,
    errorType: string,
    productId: string | null,
  ): void;
  onPaywallRestoreStarted(paywallId: string): void;
  onPaywallRestoreCompleted(paywallId: string, restoredProductIds: string[]): void;
  /** `error` is a message string, same as above. */
  onPaywallRestoreFailed(paywallId: string, error: unknown): void;
  onPaywallDismissed(paywallId: string): void;

  /**
   * 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;

  /**
   * VETO — the only one that defaults to REJECT. Validate a user-entered promo code:
   * return `true` to apply it, `false` to reject. Omit it (or time out) and every code is refused.
   */
  onPromoCodeSubmit?(paywallId: string, code: string): Promise<boolean>;
}

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, errorType, productId) {
    if (errorType === 'userCancelled') return; // not an error worth reporting
    console.log(`Purchase failed (${errorType}) for ${productId ?? 'no product'}:`, String(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
    console.log('Restore failed:', String(error));
  },

  onPostPurchaseDeepLink(paywallId, url) {
    // The Console asked us to open a URL after the purchase
  },

  onPostPurchaseNextStep(paywallId) {
    // The Console asked us to continue to the next onboarding step
  },

  onPaywallDismissed(paywallId) {},
};

AppDNA.paywall.setDelegate(paywallHandler);

await AppDNA.paywall.present('premium_v2');
AppDNA.paywall.skipNextAutoDismissOnRestore(true); // this presentation only

await AppDNA.billing.getEntitlements();

const products = await AppDNA.billing.getProducts(['premium_monthly']);
// ... render your custom React Native components ...
try {
  const transaction = await AppDNA.billing.purchase('premium_monthly');
  // Resolved means purchased. Unlock premium features.
  console.log(transaction.transactionId);
} catch (error) {
  // Cancellation, a pending (ask-to-buy) purchase, and store errors all REJECT.
}

section style.elements.button.container.background.color
  → cta.style.bg_color
    → cta.bg_color
      → your brand accent

"table_columns": ["Free", "Premium"]
"table_columns": [{ "label": "Free" }, { "label": "Premium", "highlighted": true }]

declare const myPromoBackend: { validate(code: string): Promise<boolean> };

const delegate: Pick<AppDNAPaywallDelegate, 'onPromoCodeSubmit'> = {
  async onPromoCodeSubmit(paywallId, code) {
    // Validate the code against your backend and return true (apply) or false (reject)
    return myPromoBackend.validate(code);
  },
};

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { AppDNA, AppDNAPaywallDelegate } from '@appdna-ai/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, errorType, productId) {
        console.log('Purchase failed:', errorType, String(error), productId);
      },

      onPaywallRestoreStarted: () => {},

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

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

    // A delegate is process-global. Registering a new one REPLACES the previous one, and passing
    // `null` clears it. Prefer registering once at app startup over doing it from a component.
    AppDNA.paywall.setDelegate(delegate);

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

  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>
  );
}