React Native SDK'da paywall kullanarak satın almaları etkinleştirin

Uygulama içi satın almaları etkinleştirmek için üç temel kavramı anlamanız gerekir:

Ürünler – kullanıcıların satın alabileceği her şey (abonelikler, consumable’lar, süresiz erişim)
Paywalllar, hangi ürünlerin sunulacağını tanımlayan yapılandırmalardır. Adapty’de ürünlere yalnızca paywalllar aracılığıyla ulaşabilirsiniz; bu tasarım sayesinde uygulama kodunuza dokunmadan teklifleri, fiyatlandırmayı ve ürün kombinasyonlarını değiştirebilirsiniz.
Placementlar – uygulamanızda paywallları nerede ve ne zaman gösterdiğiniz (main, onboarding, settings gibi). Kontrol panelinde placementlar için paywalllar ayarlarsınız, ardından kodunuzda placement ID’si ile bunları talep edersiniz. Bu yaklaşım A/B testlerini kolaylaştırır ve farklı kullanıcılara farklı paywalllar göstermenizi sağlar.

Adapty, uygulamanızda satın almaları etkinleştirmek için üç farklı yöntem sunar. Uygulama gereksinimlerinize göre birini seçin:

Uygulama	Karmaşıklık	Ne zaman kullanılır
Adapty Paywall Builder	✅ Kolay	No-code builder’da eksiksiz, satın almaya hazır bir paywall oluşturursunuz. Adapty bunu otomatik olarak oluşturur ve tüm karmaşık satın alma akışını, makbuz doğrulamasını ve abonelik yönetimini arka planda halleder.
Manuel oluşturulan paywalllar	🟡 Orta	Paywall arayüzünü uygulama kodunuzda kendiniz uygularsınız; ancak ürün tekliflerinde esnekliği korumak için paywall nesnesini yine Adapty’den alırsınız. Kılavuza bakın.
Observer modu	🔴 Zor	Kendi satın alma altyapınız zaten varsa ve kullanmaya devam etmek istiyorsanız. Observer modunun Adapty’de bazı kısıtlamaları olduğunu unutmayın. Makaleye bakın.

Aşağıdaki adımlar, Adapty paywall builder’da oluşturulan bir paywallın nasıl uygulanacağını göstermektedir.

Paywall builder’ı kullanmak istemiyorsanız manuel oluşturulan paywallarda satın almaları yönetme kılavuzuna bakın.

Adapty paywall builder’da oluşturulan bir paywallı göstermek için uygulama kodunuzda yalnızca şunları yapmanız gerekir:

Paywallı alın: Adapty’den paywallı alın.
Paywallı gösterin, satın almaları Adapty halleder: Aldığınız paywall container’ını uygulamanızda gösterin.
Buton aksiyonlarını yönetin: Kullanıcıların paywall ile etkileşimlerini uygulamanızın yanıtlarıyla ilişkilendirin. Örneğin, kullanıcılar butonlara tıkladığında bağlantılar açın veya paywallı kapatın.

Başlamadan önce

Başlamadan önce şu adımları tamamlayın:

Adapty Kontrol Paneli’nde uygulamanızı App Store ve/veya Google Play’e bağlayın.
Adapty’de ürünlerinizi oluşturun.
Bir paywall oluşturun ve ürünleri ekleyin.
Bir placement oluşturun ve paywallınızı ekleyin.
Uygulama kodunuza Adapty SDK’yı yükleyin ve etkinleştirin.

Bu adımları tamamlamanın en hızlı yolu hızlı başlangıç kılavuzunu takip etmek veya Developer CLI kullanarak paywalllar ve placementlar oluşturmaktır.

1. Paywallı alın

Paywalllarınız, kontrol panelinde yapılandırılan placementlarla ilişkilidir. Placementlar, farklı kitleler için farklı paywalllar çalıştırmanıza veya A/B testleri yapmanıza olanak tanır.

Adapty paywall builder’da oluşturulan bir paywallı almak için şunları yapmanız gerekir:

getPaywall metodunu kullanarak placement ID’siyle paywall nesnesini alın ve hasViewConfiguration özelliğini kontrol ederek builder’da oluşturulmuş bir paywall olup olmadığını doğrulayın.
createPaywallView metodunu kullanarak paywall view’ını oluşturun. View, paywallı görüntülemek için gereken UI öğelerini ve stillendirmeyi içerir.

View yapılandırmasını alabilmek için Paywall Builder’daki Show on device geçişini açmanız gerekir. Aksi takdirde boş bir view yapılandırması alırsınız ve paywall görüntülenmez.


try {
    const placementId = 'YOUR_PLACEMENT_ID';

    const paywall = await adapty.getPaywall(placementId);
  // the requested paywall
} catch (error) {
    // handle the error
}

if (paywall.hasViewConfiguration) {
    try {
        const view = await createPaywallView(paywall);
    } catch (error) {
        // handle the error
    }
} else {
    //use your custom logic
}

2. Paywallı gösterin

Artık paywall yapılandırmasına sahip olduğunuzda, birkaç satır kod eklemek paywallınızı görüntülemeye yeterlidir.

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:


function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
      onUrlPress={onUrlPress}
    />
  );
}

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

try {
  await view.present();
} catch (error) {
  // handle the error
}

Paywall gösterme hakkında daha fazla bilgi için kılavuzumuza bakın.

3. Buton aksiyonlarını yönetin

Kullanıcılar paywallda butonlara tıkladığında React Native SDK, satın almaları, geri yüklemeyi, paywallı kapatmayı ve URL’leri açmayı otomatik olarak yönetir.

Ancak diğer butonların özel veya önceden tanımlanmış ID’leri vardır ve aksiyonların kodunuzda yönetilmesi gerekir. Ya da varsayılan davranışlarını geçersiz kılmak isteyebilirsiniz.

Örneğin, kapat butonu için varsayılan davranış şöyledir. Bunu koda eklemeniz gerekmez, ancak gerektiğinde nasıl yapılacağını burada görebilirsiniz.

React bileşeni için aksiyonları doğrudan AdaptyPaywallView bileşeninde yönetin:


function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}

Modal sunum için setEventHandlers kullanarak olay işleyicilerini uygulayın:

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});

Buton aksiyonlarını ve olaylarını nasıl yöneteceğinizle ilgili kılavuzlarımızı okuyun.

Sonraki adımlar

Sorularınız mı var ya da sorunlarla mı karşılaşıyorsunuz? Sık sorulan soruların yanıtlarını bulabileceğiniz veya kendi sorularınızı sorabileceğiniz destek forumumuza göz atın. Ekibimiz ve topluluğumuz yardımcı olmak için burada!

Paywallınız uygulamada görüntülenmeye hazır. Paywalldan test satın almasını tamamlayabildiğinizden emin olmak için satın almalarınızı App Store sandbox’ta veya Google Play Store’da test edin.

Şimdi, doğru kullanıcılara paywall gösterdiğinizden veya ücretli özelliklere erişim verdiğinizden emin olmak için kullanıcıların access level’ını kontrol etmeniz gerekiyor.

Tam örnek

Tüm bu adımların uygulamanızda nasıl bir araya getirilebileceği aşağıda gösterilmiştir.


export default function PaywallScreen() {
  const [paywall, setPaywall] = useState(null);

  const loadPaywall = async () => {
    try {
      const paywallData = await adapty.getPaywall('YOUR_PLACEMENT_ID');

      if (paywallData.hasViewConfiguration) {
        setPaywall(paywallData);
      }
    } catch (error) {
      console.warn('Error loading paywall:', error);
    }
  };

  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press
  }, []);

  useEffect(() => {
    loadPaywall();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {paywall ? (
        <AdaptyPaywallView
          paywall={paywall}
          style={{ flex: 1 }}
          onUrlPress={onUrlPress}
          onCloseButtonPress={onCloseButtonPress}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Paywall" onPress={loadPaywall} />
        </View>
      )}
    </View>
  );
}


export default function PaywallScreen() {
  const showPaywall = async () => {
    try {
      const paywall = await adapty.getPaywall('YOUR_PLACEMENT_ID');

      if (!paywall.hasViewConfiguration) {
        // use your custom logic
        return;
      }

      const view = await createPaywallView(paywall);

      view.setEventHandlers({
          onCloseButtonPress() {
              return true;
        },
      });

      await view.present();
    } catch (error) {
      // handle any error that may occur during the process
      console.warn('Error showing paywall:', error);
    }
  };

  // you can add a button to manually trigger the paywall for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Paywall" onPress={showPaywall} />
    </View>
  );
}