React Native SDK'da Flow & Paywall Builder ile satın almaları etkinleştirme

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)
Flow’lar & paywall’lar – ürünleri kullanıcılara sunan ekranlar; no-code Flow & Paywall Builder ile oluşturulur. SDK bunları getFlow aracılığıyla alır. Arayüzü kendi kodunuzla oluşturmayı tercih ediyorsanız Özel paywall uygulama sayfasına bakın.
Placement’lar – uygulamanızda flow’ları ve paywall’ları nerede ve ne zaman göstereceğiniz (örneğin main, onboarding, settings). Bunları kontrol panelinde placement’lara ekler, ardından kodunuzda placement ID’si ile çağırırsınız. Bu sayede A/B testi yapmak ve farklı kullanıcılara farklı içerikler göstermek çok kolaydır.

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 Flow & Paywall Builder	✅ Kolay	No-code builder’da eksiksiz, satın almaya hazır bir flow veya paywall oluşturursunuz. Adapty bunu otomatik olarak render eder ve tüm karmaşık satın alma mantığını, makbuz doğrulamasını ve abonelik yönetimini arka planda halleder.
Özel paywall’lar	🟡 Orta	Paywall UI’ınızı uygulama kodunuzda kendiniz uygularsınız, ancak ürün tekliflerinde esnekliği korumak için flow nesnesini yine de Adapty’den alırsınız. Kılavuza bakın.
Observer mode	🔴 Zor	Halihazırda kendi satın alma altyapınız var ve onu kullanmaya devam etmek istiyorsunuz. Observer mode’un Adapty’de bazı sınırlamaları olduğunu unutmayın. Makaleye bakın.

Important

Aşağıdaki adımlar, Adapty Flow & Paywall Builder’da oluşturulan bir flow veya paywall’ın nasıl uygulanacağını göstermektedir.

Paywall arayüzünü kendiniz oluşturmayı tercih ediyorsanız, Özel paywall’ları uygulama bölümüne bakın.

Adapty Flow & Paywall Builder’da oluşturulan bir flow veya paywall’ı uygulamanızda görüntülemek için kodunuzda yalnızca şunları yapmanız yeterlidir:

Flow veya paywall’ı alın: Adapty’den alın.
Görüntüleyin, satın almaları Adapty yönetir: View’ı uygulamanızda gösterin.
Buton eylemlerini yönetin: Kullanıcı 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:

Uygulamanızı Adapty Kontrol Paneli’nde App Store ve/veya Google Play’e bağlayın.
Adapty’de ürünlerinizi oluşturun.
Bir flow veya paywall oluşturun ve ürünleri ekleyin.
Bir placement oluşturun ve flow ya da paywall’unuzu ekleyin.
Uygulama kodunuza Adapty SDK’yı yükleyin ve etkinleştirin. Bu kılavuz Adapty React Native SDK v4 API’lerini kullanır.

1. Flow veya paywall’ı alın

Flow’larınız ve paywall’larınız, kontrol panelinde yapılandırılan placement’larla ilişkilendirilir. Placement’lar, farklı kitleler için farklı flow’lar veya paywall’lar çalıştırmanıza ya da A/B testleri yürütmenize olanak tanır.

Adapty Flow & Paywall Builder’da oluşturulmuş bir flow veya paywall almak için getFlow metodunu kullanarak placement ID’sine göre flow nesnesini edinin. Flow, görüntülenmesi için gereken UI öğelerini ve stil bilgilerini içerir.


try {
  const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');
  // the requested flow
} catch (error) {
  // handle the error
}

2. Flow veya paywall’ı göster

Artık flow’a sahip olduğunuzda, onu görüntülemek için birkaç satır eklemeniz yeterli.

Bir flow’u mevcut bileşen ağacınıza gömmek için AdaptyFlowView bileşenini doğrudan React Native bileşen hiyerarşinizde kullanın:


function MyFlow({ flow }) {
  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onPurchaseCompleted={onPurchaseCompleted}
    />
  );
}

Flow’u bağımsız bir ekran olarak göstermek için createFlowView metoduyla bir view oluşturun, olay işleyicilerini ayarlayın ve ardından view.present() metodunu çağırın. Her view yalnızca bir kez kullanılabilir. Flow’u tekrar göstermeniz gerekirse yeni bir view örneği oluşturmak için createFlowView metodunu bir kez daha çağırın.


try {
  const view = await createFlowView(flow);

  view.setEventHandlers({
    onPurchaseCompleted(result, product) {
      return result.type !== 'user_cancelled';
    },
  });

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

Tip

Bir flow veya paywall’u nasıl görüntüleyeceğiniz hakkında daha fazla bilgi için kılavuzumuza bakın.

3. Buton eylemlerini yönetin

Kullanıcılar flow veya paywall’daki butonlara tıkladığında, React Native SDK satın alma, geri yükleme, ekranı kapatma ve URL açma işlemlerini otomatik olarak yönetir.

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

Örneğin, kapat butonu için varsayılan davranış aşağıdaki gibidir. Bunu koda eklemeniz gerekmez; ancak ihtiyaç duyulması halinde nasıl yapıldığını buradan görebilirsiniz.

React bileşeni için, eylemleri doğrudan AdaptyFlowView bileşeninde yönetin:


function MyFlow({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true, // allow the flow to close
    [],
  );
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>(
    (actionId) => false,
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}

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

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Tip

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

Sonraki adımlar

Tip

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!

Flow’unuz veya paywallınız uygulamada gösterilmeye hazır. Flow üzerinden test satın alma işlemini tamamlayabildiğinizden emin olmak için satın almalarınızı test edin.

Şimdi, paywall görüntülediğinizden veya ücretli özelliklere erişim sağladığınızdan emin olmak için kullanıcıların access level’ını kontrol etmeniz gerekiyor.

Tam örnek

Bu rehberdeki tüm adımların uygulamanızda birlikte nasıl entegre edilebileceği aşağıdadır.


export default function FlowScreen() {
  const [flow, setFlow] = useState(null);

  const loadFlow = async () => {
    try {
      const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID');
      setFlow(flowData);
    } catch (error) {
      console.warn('Error loading flow:', error);
    }
  };

  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true,
    [],
  );

  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

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

  return (
    <View style={{ flex: 1 }}>
      {flow ? (
        <AdaptyFlowView
          flow={flow}
          style={{ flex: 1 }}
          onCloseButtonPress={onCloseButtonPress}
          onPurchaseCompleted={onPurchaseCompleted}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Flow" onPress={loadFlow} />
        </View>
      )}
    </View>
  );
}


export default function FlowScreen() {
  const showFlow = async () => {
    try {
      const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');

      const view = await createFlowView(flow);

      view.setEventHandlers({
        onCloseButtonPress() {
          return true;
        },
        onPurchaseCompleted(result, product) {
          return result.type !== 'user_cancelled';
        },
      });

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

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