React Native - Yeni Paywall Builder paywalllarını sunma

Paywall Builder ile bir paywall özelleştirdiyseniz, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etmeniz gerekmez. Bu tür bir paywall, hem paywall içinde ne gösterileceğini hem de nasıl gösterileceğini içerir.

Başlamadan önce şunları yaptığınızdan emin olun:

1. Bir paywall oluşturdunuz.
2. Paywallı bir placement’a eklediniz.
3. Paywallı getirdiniz ve view’ı hazırladınız.

Adapty React Native SDK, paywallları sunmak için iki yöntem sunar:

• React bileşeni: Gömülü bileşen, uygulamanızın mimarisine ve navigasyon sistemine entegre etmenize olanak tanır.

• Modal sunum

React bileşeni

Bir paywallı mevcut bileşen ağacınıza gömmek için AdaptyPaywallView bileşenini doğrudan React Native bileşen hiyerarşinizde kullanın. Gömülü bileşen, uygulamanızın mimarisine ve navigasyon sistemine entegre etmenize olanak tanır.

function MyPaywall({ paywall }) {
  const paywallParams = useMemo(() => ({
    loadTimeoutMs: 3000,
  }), []);

  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onProductSelected = useCallback<EventHandlers['onProductSelected']>((productId) => {}, []);
  const onPurchaseStarted = useCallback<EventHandlers['onPurchaseStarted']>((product) => {}, []);
  const onPurchaseCompleted = useCallback<EventHandlers['onPurchaseCompleted']>((purchaseResult, product) => {}, []);
  const onPurchaseFailed = useCallback<EventHandlers['onPurchaseFailed']>((error, product) => {}, []);
  const onRestoreStarted = useCallback<EventHandlers['onRestoreStarted']>(() => {}, []);
  const onRestoreCompleted = useCallback<EventHandlers['onRestoreCompleted']>((profile) => {}, []);
  const onRestoreFailed = useCallback<EventHandlers['onRestoreFailed']>((error) => {}, []);
  const onPaywallShown = useCallback<EventHandlers['onPaywallShown']>(() => {}, []);
  const onRenderingFailed = useCallback<EventHandlers['onRenderingFailed']>((error) => {}, []);
  const onLoadingProductsFailed = useCallback<EventHandlers['onLoadingProductsFailed']>((error) => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {}, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);
  const onWebPaymentNavigationFinished = useCallback<EventHandlers['onWebPaymentNavigationFinished']>(() => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      params={paywallParams}
      style={styles.paywall}
      onCloseButtonPress={onCloseButtonPress}
      onProductSelected={onProductSelected}
      onPurchaseStarted={onPurchaseStarted}
      onPurchaseCompleted={onPurchaseCompleted}
      onPurchaseFailed={onPurchaseFailed}
      onRestoreStarted={onRestoreStarted}
      onRestoreCompleted={onRestoreCompleted}
      onRestoreFailed={onRestoreFailed}
      onPaywallShown={onPaywallShown}
      onRenderingFailed={onRenderingFailed}
      onLoadingProductsFailed={onLoadingProductsFailed}
      onCustomAction={onCustomAction}
      onUrlPress={onUrlPress}
      onWebPaymentNavigationFinished={onWebPaymentNavigationFinished}
    />
  );
}

Modal sunum

Bir paywallı bağımsız bir ekran olarak göstermek için, createPaywallView metoduyla oluşturulan view üzerinde view.present() metodunu kullanın. Her view yalnızca bir kez kullanılabilir. Paywallı tekrar göstermeniz gerekiyorsa yeni bir view örneği oluşturmak için createPaywallView’i bir kez daha çağırın.

const view = await createPaywallView(paywall);

// İsteğe bağlı: paywall olaylarını yönetin (kapat, satın alma, geri yükleme vb.)
// view.setEventHandlers({ ... });

try {
  await view.present();
} catch (error) {
  // hatayı yönetin
}

const view = await createPaywallView(paywall);

view.registerEventHandlers(); // kapatma tuşuna basma vb. olayları yönetin

try {
  await view.present();
} catch (error) {
  // hatayı yönetin
}

iOS sunum stilini yapılandırma

Paywallın iOS’ta nasıl sunulacağını, present() metoduna iosPresentationStyle parametresini ileterek yapılandırın. Parametre 'full_screen' (varsayılan) veya 'page_sheet' değerlerini kabul eder.

try {
  await view.present(iosPresentationStyle: 'page_sheet');
} catch (error) {
  // hatayı yönetin
}

Geliştirici tanımlı zamanlayıcı kullanımı

Mobil uygulamanızda geliştirici tanımlı zamanlayıcılar kullanmak için, bu örnekte CUSTOM_TIMER_NY olan timerId’yi kullanın; bu, Adapty kontrol panelinde ayarladığınız geliştirici tanımlı zamanlayıcının Timer ID’sidir. Bu sayede uygulamanız zamanlayıcıyı doğru değerle dinamik olarak günceller; örneğin 13g 09s 03d 34s (zamanlayıcının bitiş zamanı olan Yılbaşı’ndan mevcut zamanın çıkarılmasıyla hesaplanır).

const paywallParams = {
  customTimers: { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) }
};

<AdaptyPaywallView
  paywall={paywall}
  params={paywallParams}
  // ... event handler'larınız
/>

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createPaywallView(paywall, { customTimers });

Bu örnekte CUSTOM_TIMER_NY, Adapty kontrol panelinde ayarladığınız geliştirici tanımlı zamanlayıcının Timer ID’sidir. timerResolver, uygulamanızın zamanlayıcıyı doğru değerle dinamik olarak güncellemesini sağlar; örneğin 13g 09s 03d 34s (zamanlayıcının bitiş zamanı olan Yılbaşı’ndan mevcut zamanın çıkarılmasıyla hesaplanır).

Dialog gösterme

Android’de bir paywall view sunulduğunda, yerel uyarı dialogları yerine bu metodu kullanın. Android’de normal RN uyarıları paywall view’ın arkasında kalır ve kullanıcılar tarafından görülemez. Bu metot, tüm platformlarda paywallın üzerinde dialog’un düzgün şekilde sunulmasını sağlar.

try {
  const action = await view.showDialog({
    title: 'Paywall kapatılsın mı?',
    content: 'Özel tekliflere erişiminizi kaybedeceksiniz.',
    primaryActionTitle: 'Kal',
    secondaryActionTitle: 'Kapat',
  });
  
  if (action === 'secondary') {
    // Kullanıcı onayladı - paywallı kapat
    await view.dismiss();
  }
  // Birincil seçenekte - hiçbir şey yapma, kullanıcı kalıyor
} catch (error) {
  // hatayı yönetin
}

Bir aboneliği diğeriyle değiştirme

Bir kullanıcı Android’de başka bir abonelik aktifken yeni bir abonelik satın almaya çalıştığında, paywall view’ı oluştururken abonelik güncelleme parametrelerini ileterek yeni satın almanın nasıl işleneceğini kontrol edebilirsiniz. Mevcut aboneliği yenisiyle değiştirmek için createPaywallView’de oldSubVendorProductId ve prorationMode parametreleriyle birlikte productPurchaseParams kullanın.

const productPurchaseParams = paywall.productIdentifiers.map((productId) => {
  let params = {};
  if (Platform.OS === 'android') {
    params.android = {
      subscriptionUpdateParams: {
        oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
        prorationMode: 'with_time_proration',
      },
    };
  }
  return { productId, params };
});

const view = await createPaywallView(paywall, { productPurchaseParams });

Sorun giderme

Paywallın üst kısmındaki görsel katman (Android)

AdaptyPaywallView durum çubuğunun arkasına uzanmıyorsa, üst kısmında görsel bir katman görünebilir. Bunu kaldırmak için uygulamanıza şu boolean kaynağını ekleyin:

1. android/app/src/main/res/values dizinine gidin. bools.xml dosyası yoksa oluşturun.

2. Şu kaynağı ekleyin:

<resources>
    <bool name="adapty_paywall_enable_safe_area_paddings">false</bool>
</resources>

Bu değişikliklerin uygulamanızdaki tüm paywalllar için genel olarak geçerli olduğunu unutmayın.